This document describes the comprehensive prompt engineering system implemented to avoid "AI slop" and ensure high-quality, professional UI designs.
AI-generated designs often suffer from:
- Generic, template-like outputs that lack personality
- Missing accessibility features (focus states, ARIA labels, contrast)
- Inconsistent styling and poor visual hierarchy
- Non-semantic HTML (div soup without proper semantics)
- No interactive states (missing hover, focus, active states)
- Low-quality code with poor structure and maintainability
- Generic design names like "Design 1", "Design 2", "Design 3"
We've implemented a multi-layered prompt engineering system based on industry best practices:
Every prompt follows the Role, Task, Context, Format framework:
ROLE: You are a Senior UX/UI Designer with 15+ years of experience
TASK: Create 3 distinct button designs
CONTEXT: For a SaaS dashboard, mobile-first, target startup founders
FORMAT: JSON with name, html, and description for each design
The system prompt establishes the AI as a Senior UX Designer with specific expertise:
- ✅ 15+ years experience at top companies (Apple, Google, Airbnb, Stripe)
- ✅ Design philosophy: Clarity, Progressive Disclosure, Consistency
- ✅ Accessibility-first approach (WCAG 2.1 AA non-negotiable)
- ✅ Mobile-first thinking
- ✅ Performance-conscious design
- ✅ Content-focused approach
Every prompt includes a non-negotiable quality checklist:
MUST INCLUDE:
- ✅ Semantic HTML5 elements (header, main, footer, nav, section, article)
- ✅ Proper ARIA labels and roles
- ✅ Visible focus indicators (2px outline minimum)
- ✅ Hover, focus, and active states for all interactive elements
- ✅ Smooth transitions (200-300ms, ease-out)
- ✅ Mobile-first responsive breakpoints
- ✅ Touch targets (44x44px minimum)
- ✅ Adequate color contrast (4.5:1 ratio)
- ✅ Content-first approach (no lorem ipsum)
MUST AVOID:
- ❌ Generic, copy-paste designs
- ❌ Just changing colors between variations
- ❌ Missing focus states
- ❌ Low contrast text
- ❌ Unstyled form inputs
- ❌ Non-semantic HTML
- ❌ Inline JavaScript
- ❌ Animations > 500ms
- ❌ Placeholder images without alt text
We have detailed templates for each component type:
- Design 1: Modern & Polished - Bold, gradient backgrounds, smooth hover effects
- Design 2: Minimal & Functional - Ghost buttons, transparent backgrounds
- Design 3: Icon + Text - Icon buttons with labels, accessibility-focused
Each includes:
- Specific padding requirements (16px horizontal, 12px vertical)
- Border radius guidelines (4-8px for modern feel)
- Focus ring specifications (2px outline)
- Hover/active state animations
- Design 1: Standard Content Card - Vertical layout, subtle shadows
- Design 2: Featured/Higlighted Card - Prominent visual weight, accent colors
- Design 3: Compact/Dense Card - Reduced padding, flat design
Each includes:
- Shadow elevation guidelines (0-4px default, 4-8px hover)
- Border radius specifications (8-12px for cards)
- Hover effects (elevation or border change)
- Content hierarchy requirements
- Design 1: Underlined Input - Material-style, animated underlines
- Design 2: Boxed Input - Modern with ring focus states
- Design 3: Filled Input - Light background, floating labels
Each includes:
- Label specifications (visible, associated via 'for' attribute)
- Error state requirements (red border + message)
- Focus state animations
- Accessibility attributes (aria-label, aria-describedby)
- Design 1: Standard Header - Logo left, nav right, hamburger mobile
- Design 2: Centered Navigation - Balanced, search included
- Design 3: Full-Featured Header - Mega menu, notifications, user dropdown
Each includes:
- Responsive breakpoints
- Touch target sizes (44x44px)
- ARIA attributes for mobile menus
- Focus management
- Design 1: Standard Modal - Centered, backdrop blur, focus trap
- Design 2: Confirmation Dialog - Small, icon, clear button hierarchy
- Design 3: Form Modal - Large, scrollable, validation states
Each includes:
- Backdrop overlay specifications
- Focus trap requirements
- Escape key handling
- Animation guidelines (200-300ms)
- Design 1: Simple Table - Clean, border-bottom rows
- Design 2: Striped Table - Zebra striping, sortable columns
- Design 3: Data-Dense Table - Compact, monospace for data
Each includes:
- Semantic table structure
- Responsive scroll wrapper
- Text alignment (left for text, right for numbers)
- Hover states
Color Contrast:
- Normal text: 4.5:1 minimum ratio
- Large text (18px+ or 14px bold): 3:1 minimum
- UI components (borders, icons): 3:1 minimum
Focus Indicators:
- 2px minimum outline or border
- Visible on all backgrounds
- No relying on color alone
Touch Targets:
- Mobile: 44x44px minimum
- Desktop: 36x36px minimum
- Adequate spacing between targets
Motion Sensitivity:
- Respect
prefers-reduced-motion
- No flashing or blinking animations
- Smooth, purposeful animations only
Duration:
- Micro-interactions: 200-300ms
- Complex animations: 300-500ms
Easing:
- Entrances:
ease-out
- State changes:
ease-in-out
Performance:
- Use CSS transforms and opacity (GPU-accelerated)
- Avoid layout-triggering properties (width, height, margin)
Tailwind CSS:
- Utility classes for all styling
- Follow spacing scale (p-4, m-2, gap-4)
- Use transition utilities (transition, duration-200)
- Responsive prefixes (md:, lg:)
Bootstrap:
- Component classes (btn, card, form-control)
- Grid system (container, row, col-*)
- Form layouts (form-group, form-row)
Custom CSS:
- CSS custom properties (--primary-color)
- BEM naming convention
- CSS Grid and Flexbox
- Media queries for responsive design
Each component type generates 3 genuinely different designs:
-
Modern & Polished
- Clean aesthetic
- Subtle shadows
- Smooth animations
- Contemporary feel
-
Minimal & Functional
- Content-focused
- Reduced visual noise
- High clarity
- Efficient use of space
-
Bold & Engaging
- Strong visual hierarchy
- Distinctive colors
- Memorable
- Attention-commanding
These are not just color swaps - each has fundamentally different:
- Layout approaches
- Visual hierarchy strategies
- Interaction patterns
- Typography choices
const result = await tool.execute({
prompt: "Create 3 CTA buttons for a SaaS signup flow",
component_type: "button",
framework: "tailwind",
style_preference: "modern and clean"
});
const result = await tool.execute({
prompt: "Design pricing cards for a developer tool targeting enterprise teams",
component_type: "card",
framework: "bootstrap",
style_preference: "professional with clear hierarchy",
targetAudience: "Enterprise CTOs and engineering managers"
});
const result = await tool.execute({
prompt: "Create login form fields with email and password for a fintech app",
component_type: "form",
framework: "css",
style_preference: "trustworthy and secure-looking",
brandColors: "#0066FF, #00C853"
});
Run the enhanced prompt test:
# Test prompt generation (no API key needed)
node test-enhanced-prompts.js
# Test with MiniMax API
export MINIMAX_API_KEY="your-api-key"
node test-enhanced-prompts.js
# Test restaurant landing page components
node test-restaurant.js
The prompt engineering system is designed to be iteratively improved:
- Monitor output quality - Track when designs fail validation
- Collect feedback - User preferences and quality ratings
- Refine templates - Add new patterns based on successful generations
- Update best practices - Incorporate new research and techniques
- Expand component coverage - Add new component types
Result: High-quality, accessible, professional UI designs that avoid AI slop and are ready for production use.