AI UI Rules

AI UI Rules (Concise Edition)

Core Principles

1. Clarity & Simplicity

   • Design task-focused screens (1-2 primary tasks per view)
   • Use familiar UI patterns and clear, direct language
   • Implement progressive disclosure for complex features
   • Include only purposeful elements; eliminate distractions

2. Consistency

   • Maintain uniform visual language (typography, colors, spacing)
   • Ensure identical elements behave predictably
   • Use consistent terminology throughout
   • Apply coherent grid systems and layouts

3. Information Hierarchy

   • Use visual weight to distinguish importance levels
   • Create clear typographic hierarchy (limit to 2-3 font weights)
   • Structure content for natural scanning patterns (F/Z-pattern)
   • Group related elements visually

4. Strategic Spacing

   • Use consistent spacing scale (e.g., 4px, 8px, 16px, 24px, 32px)
   • Place related items closer together; increase space between groups
   • Ensure comfortable line spacing (1.5-1.6) for readability
   • Adjust spacing proportionally across device sizes

5. Visual Communication

   • Assign specific colors for functional roles (actions, states)
   • Use recognizable icons with text labels
   • Make interactive elements visually distinct
   • Maintain consistent styling (corner radii, shadows)

6. Interaction Design

   • Provide immediate feedback for all user actions
   • Create distinct states for interactive elements (default, hover, focus, active, disabled)
   • Communicate system status for processes >1s
   • Use subtle animations purposefully

7. Content-First Design

   • Position critical information prominently
   • Use flexible layouts that adapt to content
   • Structure screens to follow logical task sequences
   • Design with realistic content, not placeholders

8. Responsive Design

   • Use relative units and flexible containers
   • Define behavior at standard breakpoints
   • Ensure touch targets ≥44×44px
   • Design mobile-first, then enhance for larger screens

9. Accessibility

   • Maintain contrast ratios: 7:1 normal text, 4.5:1 large text
   • Use semantic HTML and ARIA attributes when needed
   • Provide text alternatives for non-text content
   • Ensure keyboard navigability and screen reader support

10. Performance

    • Write semantic HTML, efficient CSS, minimal JavaScript
    • Optimize assets (WebP/AVIF images, compressed SVGs)
    • Implement lazy loading for off-screen content
    • Use skeleton screens during loading

11. Error Handling

    • Prevent errors with validation and constraints
    • Provide clear guidance before interaction
    • Write specific, actionable error messages
    • Make recovery from mistakes easy (undo options)

12. Ethical Design

    • Be transparent about data usage
    • Give users control over their data and experience
    • Avoid dark patterns (hidden costs, forced continuity)
    • Use inclusive language and imagery

Implementation Checklist

Usability

• Primary tasks immediately obvious
• Intuitive, consistent navigation
• Logical information hierarchy
• Clear, jargon-free language

Accessibility

• WCAG 2.2 Level AAA contrast (7:1)
• Keyboard-accessible functionality
• Proper semantic HTML
• Text alternatives for images
• Screen reader compatibility

Responsiveness

• Fluid adaptation to screen sizes
• Appropriately sized touch targets (≥44×44px)
• Optimized assets
• Prioritized critical content

Ethics

• Clear privacy communication
• No dark patterns
• User control over data
• Inclusive content and imagery

Design Process

1. Understand user needs and goals first
2. Structure information logically
3. Apply visual design systematically
4. Optimize for various contexts
5. Test and refine

Remember: Great interfaces feel invisible—they let users accomplish goals effortlessly without drawing attention to themselves.

---

AI UI Rules (Expanded Edition)

Introduction

Purpose: This guide equips LLMs with essential design principles and actionable guidelines for generating high-quality, user-centered digital experiences. By following these principles, LLMs will create interfaces that are intuitive, accessible, performant, and ethically sound.

Scope: This guide covers all aspects of UX/UI design and development, from conceptual principles to practical implementation strategies. It is framework-agnostic but includes specific recommendations for popular tools like Tailwind CSS where appropriate.

Core Design Principles

These principles are interconnected and should be applied holistically throughout the design and development process. Each principle builds upon and reinforces the others to create cohesive, effective interfaces.

1. Clarity & Simplicity: User-Centered Design

Concept: Interfaces must minimize cognitive load by being intuitive and straightforward, allowing users to achieve their goals with minimal effort.

Implementation Guidelines:

• Task-Focused Screens: Design each view around 1-2 primary user tasks, with clear pathways to secondary functions.

  • Example: A product page should focus primarily on product details and "add to cart" functionality, with secondary elements (reviews, related items) accessible but not dominant.

• Familiar Patterns: Leverage established UI conventions that users already understand.

  • Implementation: Place navigation in expected locations (top/left for desktop, bottom for mobile apps).
  • Rationale: Familiar patterns reduce learning curves and increase user confidence.

• Clear Language: Use simple, direct terminology for all interface text.

  • Do: "Save changes" instead of "Commit modifications to database"
  • Don't: Use technical jargon or ambiguous phrasing in user-facing content

• Progressive Disclosure: Reveal complexity incrementally, showing advanced options only when needed.

  • Implementation: Use expandable sections, "Advanced settings" toggles, or multi-step processes for complex tasks.

• Intentional Design: Include only elements that serve a specific purpose; eliminate purely decorative features that may distract.

  • Evaluation question: "Does this element help users accomplish their goals?"

2. Consistency: Building User Confidence

Concept: Uniform design elements, predictable interactions, and consistent terminology reduce cognitive load and help users feel in control.

Implementation Guidelines:

• Visual Consistency: Maintain the same design language throughout the interface.

  • Components: Typography, color palette, spacing, component styling, icon style
  • Implementation: Define and adhere to a design system or component library

• Interaction Consistency: Ensure identical elements behave predictably across all contexts.

  • Example: Buttons with the same visual styling should have similar behavior patterns
  • Implementation: Create reusable interaction patterns for common actions

• Terminology Consistency: Use the same terms for the same concepts throughout the application.

  • Do: Consistently use either "Account" or "Profile" for user information
  • Don't: Switch between similar terms like "Delete" and "Remove" for the same action

• Layout Consistency: Apply coherent grid systems and layout patterns across similar screens.

  • Implementation: Use consistent grid structures, alignment principles, and spacing scales

3. Information Hierarchy: Guiding Attention

Concept: Visually guide users through content based on importance and relationships, making interfaces scannable and comprehensible.

Implementation Guidelines:

• Visual Weight Distribution: Use size, weight, color, and spacing to distinguish between primary, secondary, and tertiary information.

  • Implementation: Make primary actions visually prominent (larger, bolder, or with contrasting colors)
  • Rationale: Users should immediately understand what's most important on each screen

• Typographic Hierarchy: Create distinct, consistent styles for different text elements.

  • Implementation: Define clear styles for headings (H1-H6), body text, captions, and other text elements
  • Limitation: Restrict font variations to 2-3 weights/styles to maintain visual coherence

• Reading Pattern Optimization: Structure content to follow natural scanning paths.

  • Implementation: For left-to-right languages, arrange key information in F-pattern or Z-pattern
  • Technique: Use headings, subheadings, and bullet points to facilitate scanning

• Visual Grouping: Use proximity, borders, cards, or background colors to visually connect related content.

  • Implementation: Group related form fields, place associated actions near their content
  • Rationale: Proper grouping reduces cognitive load by clarifying relationships

4. Strategic Space Management: Purposeful Whitespace

Concept: Whitespace is a powerful design element that improves readability, creates focus, and establishes visual rhythm.

Implementation Guidelines:

• Consistent Spacing System: Apply a defined scale for all spacing elements.

  • Implementation: Use a consistent spacing scale (e.g., 4px, 8px, 16px, 24px, 32px, 48px, 64px)
  • Recommendation: When using Tailwind CSS, follow its spacing scale (p-1 through p-16)

• Proximity Principles: Place related items closer together and increase space between different content groups.

  • Implementation: Use less spacing within related elements (form fields in a section) and more spacing between unrelated sections
  • Rationale: Spacing communicates relationships between elements

• Reading Comfort: Ensure sufficient line spacing and margins around text blocks.

  • Implementation: Use line-height of 1.5-1.6 for body text and appropriate paragraph margins
  • Accessibility benefit: Adequate spacing improves readability for all users, especially those with reading disabilities

• Focus Creation: Create breathing room around important interactive elements.

  • Implementation: Add extra padding around primary buttons and calls-to-action
  • Rationale: Space draws attention to important elements

• Responsive Spacing: Adjust spacing proportionally across different device sizes.

  • Implementation: Reduce spacing on mobile devices while maintaining proportional relationships
  • Technique: Use responsive spacing utilities when available

5. Visual Communication: Functional Aesthetics

Concept: Visual elements should serve functional purposes while creating an appealing aesthetic.

Implementation Guidelines:

• Color with Purpose: Define and consistently apply a color palette with specific functional roles.

  • Implementation: Assign specific colors for: primary actions, secondary actions, success states, warnings, errors, backgrounds, text
  • Accessibility requirement: Ensure sufficient contrast between text and background (see Accessibility section)

• Supportive Iconography: Use clear, recognizable icons to enhance understanding.

  • Implementation: Select simple, universally recognized icons that supplement text labels
  • Accessibility requirement: Never rely solely on icons for critical functions unless they are universally understood

• Clear Interactive Affordances: Make interactive elements visually distinct.

  • Implementation: Use visual cues like borders, shadows, or background colors to indicate clickable elements
  • Example: Buttons should look "pressable" through visual depth cues

• Visual Cohesion: Create a clean, unified aesthetic through consistent styling.

  • Implementation: Maintain consistent corner radii, shadow styles, and visual treatments
  • Recommendation: Use a design system or component library to ensure cohesion

6. Interaction Design: Responsive Dialogue

Concept: Every user action deserves a clear, immediate response from the interface.

Implementation Guidelines:

• Immediate Feedback: Acknowledge user input instantly, even if the complete action takes longer.

  • Implementation: Change button states within 100ms of interaction
  • Technique: Use hover/active states, ripple effects, or subtle animations

• State Differentiation: Create distinct visual states for all interactive elements.

  • Implementation: Design unique states for: default, hover, focus, active, disabled
  • Accessibility requirement: Ensure focus states are clearly visible for keyboard navigation

• System Status Communication: Keep users informed about ongoing processes.

  • Implementation: Use loading indicators or progress bars for actions exceeding 1 second
  • Anti-pattern: Never use JavaScript alert() for system messages; use non-blocking notifications instead

• Purposeful Animation: Implement subtle motion to guide attention and provide feedback.

  • Implementation: Use animation for transitions, state changes, and to indicate relationships
  • Accessibility requirement: Respect user preferences for reduced motion

7. Content-First Design: Supporting User Tasks

Concept: Design should adapt to content needs rather than forcing content into rigid structures.

Implementation Guidelines:

• Content Prioritization: Position critical information and actions prominently.

  • Implementation: Place important content "above the fold" or at the top of scrollable areas
  • Technique: Use visual hierarchy to emphasize key content

• Flexible Layout Systems: Implement layouts that adapt to varying content lengths.

  • Implementation: Use flexible layout techniques (CSS Grid, Flexbox) that accommodate different content sizes
  • Anti-pattern: Avoid fixed heights that might truncate content

• Task Flow Alignment: Structure screens to follow the logical sequence of user tasks.

  • Implementation: Map user journeys and design screens to support each step
  • Example: In a checkout process, follow a natural progression from cart to shipping to payment

• Realistic Content Design: Use actual or representative content in designs.

  • Implementation: Design with realistic content rather than placeholder text
  • Rationale: Ensures designs work with real-world content variations

8. Contextual Adaptation: True Responsiveness

Concept: Interfaces must seamlessly adapt to various devices, screen sizes, orientations, and input methods.

Implementation Guidelines:

• Fluid Layout Foundations: Build interfaces that fluidly adapt to different viewport sizes.

  • Implementation: Use relative units (%, rem, vw/vh) and flexible containers instead of fixed-width elements
  • Technique: Implement responsive grid systems that adjust based on available space

• Comprehensive Breakpoint Strategy: Design interfaces that transform appropriately at different screen sizes.

  • Implementation: Define behavior at standard breakpoints (mobile, tablet, desktop, large desktop)
  • Recommendation: When using Tailwind CSS, utilize responsive prefixes (sm:, md:, lg:, xl:) extensively

• Input Method Optimization: Design for various input methods (touch, mouse, keyboard).

  • Implementation: Ensure touch targets are at least 44×44px for comfortable touch interaction
  • Technique: Provide appropriate hover states for mouse users and clear focus states for keyboard users

• Mobile-First Consideration: Begin with optimized mobile experiences before scaling up.

  • Implementation: Design core functionality for mobile constraints first, then enhance for larger screens
  • Rationale: Ensures essential functionality works in the most constrained environments

9. Inclusive Design: Accessibility for All

Concept: Create interfaces that can be used by the widest possible range of users, including those with disabilities.

Implementation Guidelines:

• WCAG 2.2 Level AAA Compliance: Meet the highest accessibility standards.

  • Color contrast: Maintain minimum contrast ratios of 7:1 for normal text and 4.5:1 for large text
  • Text sizing: Ensure text can be resized up to 200% without loss of content or functionality
  • Keyboard navigation: Make all functionality available via keyboard alone

• Semantic Structure: Use appropriate HTML elements that communicate content structure.

  • Implementation: Use semantic HTML elements (<nav>, <main>, <section>, <article>, <button>, etc.)
  • ARIA implementation: Use ARIA roles, states, and properties when HTML semantics are insufficient
  • Example: <button aria-expanded="false" aria-controls="menu-content">

• Multiple Perception Channels: Ensure information is perceivable through multiple senses.

  • Implementation: Provide text alternatives for non-text content (images, videos, audio)
  • Technique: Use descriptive alt text that conveys the purpose and content of images

• Cognitive Accessibility: Support users with different cognitive abilities.

  • Implementation: Use clear, simple language; provide sufficient time for interactions; minimize distractions
  • Technique: Break complex tasks into manageable steps with clear instructions

• Assistive Technology Support: Ensure compatibility with screen readers and other assistive technologies.

  • Implementation: Test with screen readers; use proper heading structure; implement ARIA landmarks
  • Technique: Use focus management for dynamic content changes

10. Performance Optimization: Speed as a Feature

Concept: Fast-loading, smoothly-performing interfaces are essential to positive user experiences.

Implementation Guidelines:

• Efficient Code Generation: Produce clean, optimized code without unnecessary complexity.

  • Implementation: Write semantic HTML, efficient CSS, and minimal JavaScript
  • Technique: Avoid unnecessary dependencies and bloated frameworks

• Asset Optimization: Select appropriate formats and dimensions for media assets.

  • Implementation: Use modern image formats (WebP, AVIF); optimize SVGs; compress assets
  • Recommendation: Use SVGs for icons and simple graphics; optimize raster images for their display size

• Resource Loading Strategy: Be mindful of how and when resources are loaded.

  • Implementation: Implement lazy loading for off-screen content; prioritize critical resources
  • Technique: Use appropriate loading attributes (loading="lazy") and resource hints

• Perceived Performance Enhancement: Make interfaces feel faster through immediate feedback.

  • Implementation: Show skeleton screens during loading; provide instant feedback for user actions
  • Technique: Implement optimistic UI updates where appropriate

11. Error Prevention & Recovery: Supporting User Success

Concept: Design interfaces that minimize the likelihood of errors and provide helpful guidance when mistakes occur.

Implementation Guidelines:

• Proactive Constraints: Prevent errors before they happen.

  • Implementation: Use input validation, disabled states for unavailable actions, and confirmation for destructive actions
  • Example: Disable the "Submit" button until required fields are completed correctly

• Clear Guidance: Provide instructions before users interact with complex elements.

  • Implementation: Use helper text for form fields, tooltips for complex functions
  • Technique: Show validation requirements upfront (e.g., password strength indicators)

• Actionable Error Messages: Write specific, helpful error messages.

  • Implementation: Position error messages near the point of error; explain the problem and suggest solutions
  • Example: "Username must be 3-20 characters with no spaces" instead of "Invalid username"

• Forgiving Interfaces: Make it easy to recover from mistakes.

  • Implementation: Provide undo functionality for critical actions; allow users to edit submissions
  • Example: "Message sent. Undo?" with a time-limited option to recall

12. Ethical Design: Respecting User Agency

Concept: Design with respect for user well-being, agency, privacy, and attention.

Implementation Guidelines:

• Transparency: Clearly communicate what the application does and how it uses data.

  • Implementation: Provide clear privacy policies; explain data collection in context
  • Example: Explain why location access is needed at the point of request

• User Control: Ensure users maintain control over their data and experience.

  • Implementation: Make privacy settings accessible and understandable; allow users to export or delete their data
  • Technique: Use opt-in rather than opt-out for data collection and communications

• Dark Pattern Avoidance: Never implement deceptive UI techniques.

  • Anti-patterns to avoid: Hidden costs, forced continuity, disguised ads, trick questions, misdirection
  • Example of violation: Making "Cancel subscription" difficult to find or execute

• Attention Respect: Use notifications and interruptions sparingly.

  • Implementation: Allow users to control notification settings; only interrupt for critical information
  • Technique: Batch non-urgent notifications; prioritize truly important alerts

• Inclusive Representation: Use language and imagery that welcomes diverse users.

  • Implementation: Avoid stereotypes in imagery; use inclusive language
  • Example: Use gender-neutral terms when gender is not relevant

Practical Application Framework

Holistic Design Process

1. Understand User Needs First

   • Identify primary user goals and tasks
   • Consider diverse user capabilities and contexts
   • Prioritize functionality based on user importance

2. Structure Information Logically

   • Organize content and functionality in intuitive ways
   • Create clear information hierarchies
   • Group related elements effectively

3. Apply Visual Design Systematically

   • Implement consistent visual systems (color, typography, spacing)
   • Ensure accessibility through proper contrast and sizing
   • Use visual elements to support understanding

4. Optimize for Various Contexts

   • Design for different devices and screen sizes
   • Account for various input methods
   • Consider different user environments

5. Test and Refine

   • Evaluate against accessibility standards
   • Check performance metrics
   • Verify usability across contexts

Implementation Checklist

Before finalizing any interface design, verify:

Usability & Clarity

• Primary user tasks are immediately obvious
• Navigation is intuitive and consistent
• Information is presented in a logical hierarchy
• Language is clear and free of unnecessary jargon

Accessibility & Inclusivity

• Color contrast meets WCAG 2.2 Level AAA standards (7:1 for normal text)
• All functionality is keyboard-accessible
• Semantic HTML is used appropriately
• Text alternatives are provided for non-text content
• Interface works with screen readers and other assistive technologies

Responsiveness & Performance

• Interface adapts fluidly to different screen sizes
• Touch targets are appropriately sized (minimum 44×44px)
• Assets are optimized for fast loading
• Critical content is prioritized in the loading sequence

Ethical Considerations

• User privacy is respected and clearly communicated
• No dark patterns or manipulative techniques are used
• Users maintain control over their data and experience
• Content and imagery are inclusive and representative

Framework-Specific Implementation Notes

While this guide is framework-agnostic, here are some specific implementation notes for popular frameworks:

Tailwind CSS (Recommended)

Tailwind CSS provides an excellent utility-first approach that aligns well with these principles:

• Consistency: Tailwind's predefined scale for spacing, colors, and typography promotes consistency
• Responsive Design: Use Tailwind's responsive prefixes (sm:, md:, lg:, xl:) for adaptive layouts
• Accessibility: Utilize Tailwind's contrast utilities to ensure accessible color combinations
• Performance: Tailwind's PurgeCSS integration helps minimize CSS file size

Example implementation:

<!-- Example of a primary button with appropriate states and accessibility -->
<button class="px-4 py-2 bg-blue-600 text-white font-medium rounded hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors">
  Submit
</button>

Other Frameworks

The principles in this guide apply regardless of the framework used. When implementing with other frameworks:

• Component Libraries: Ensure selected component libraries prioritize accessibility and performance
• Custom CSS: Maintain consistent spacing, typography, and color systems
• JavaScript Frameworks: Implement proper focus management for single-page applications

Conclusion

By applying these interconnected principles, LLMs will generate digital experiences that are:

✅ User-centered: Focusing on user goals and needs ✅ Accessible: Usable by people with diverse abilities ✅ Performant: Fast-loading and smooth in operation ✅ Ethical: Respecting user agency and privacy ✅ Cohesive: Working as unified, consistent systems

Remember that great interfaces often feel invisible—they allow users to accomplish their goals without drawing attention to themselves. The measure of success is not visual complexity but rather how effortlessly users can achieve their objectives.