AIUIaiui/docs

Design System

Learn how to configure AIUI to follow your design system, ensuring every generated component uses consistent colors, typography, spacing, and patterns.

Time: ~15 minutes
Result: Consistent components that follow your brand guidelines

Step 1: Create a New Project

Start with a fresh canvas:

  1. Click New Project from the dashboard
  2. Name it "Design System Components"
  3. Select Web as the project type
  4. Click Create

Step 2: Open Project Settings

Click the gear icon in the top toolbar to open Project Settings. You'll see several tabs:

  • General — Project name and type
  • Context — System instructions and guidelines
  • Memory — AI-learned patterns
  • Sharing — Access control

Click the Context tab.

Step 3: Add System Instructions

In the System Instructions field, paste your design guidelines:

Use the following design system:
- Font: Inter for all text
- Primary color: blue-600 (#2563EB)
- Secondary color: gray-600 (#4B5563)
- Backgrounds: gray-50 (#F9FAFB) for cards, white for page
- Border radius: rounded-lg (8px)
- Padding: 16px (p-4) for cards, 12px (p-3) for buttons
- Shadows: shadow-sm for cards, shadow-md for modals
- Text sizes: text-sm for body, text-lg for headings

Click Save.

Every prompt you run will now include these instructions automatically.

Step 4: Add Design Guidelines Document

Still in the Context tab, click Add Document and upload or paste your design tokens:

# Color Tokens
 
## Primary Palette
- primary-50: #EFF6FF
- primary-100: #DBEAFE
- primary-500: #3B82F6
- primary-600: #2563EB (main)
- primary-700: #1D4ED8
 
## Neutral Palette
- gray-50: #F9FAFB (backgrounds)
- gray-100: #F3F4F6
- gray-500: #6B7280 (secondary text)
- gray-900: #111827 (primary text)
 
## Semantic Colors
- success: #10B981
- warning: #F59E0B
- error: #EF4444

This gives the AI a complete reference for your color system.

Step 5: Generate a Primary Button

Now generate your first component. Type:

Primary button with hover and disabled states, include all three variations

Press Enter.

The generated button should use:

  • Blue-600 background
  • Rounded-lg corners
  • Inter font
  • Proper padding

Check that it matches your system!

Step 6: Generate a Card Component

Create another core component:

Card component with image at top, title, description, and action button at bottom

Press Enter.

Review the result:

  • Gray-50 background
  • Shadow-sm
  • Rounded-lg corners
  • 16px padding
  • Blue primary button

The AI consistently applies your design system.

Step 7: Generate a Form

Test with a more complex component:

Form with email input, password input with show/hide toggle, and submit button

Press Enter.

The form should follow your system:

  • Input fields with gray-100 backgrounds
  • Rounded-lg borders
  • Blue submit button
  • Consistent spacing throughout

Step 8: Notice AI Memory at Work

As you generate components, AIUI's AI Memory feature observes patterns:

  • The font you're using (Inter)
  • Your color choices and where they appear
  • Spacing and sizing conventions
  • Component structure patterns

This happens automatically — the AI learns from your generations.

Step 9: Test System Consistency

Generate something new without explicit instructions:

Alert message for successful form submission

Even though you didn't specify colors, the AI should:

  • Use your success color (#10B981)
  • Apply rounded-lg corners
  • Match your font and spacing

Your design system is now "locked in."

Step 10: Check the Memory Tab

Click the gear icon and navigate to the Memory tab.

Here you'll see patterns the AI has extracted:

  • Colors detected: "Primary blue-600 for CTAs, gray-50 for backgrounds"
  • Spacing patterns: "Consistent 16px padding on containers"
  • Component conventions: "Buttons use rounded-lg, shadow on hover"

You can:

  • Edit extracted patterns to refine them
  • Delete incorrect patterns
  • Add explicit patterns manually

What You Built

You now have:

  • A configured design system in project settings
  • Core components (button, card, form) following your system
  • AI Memory that reinforces consistency
  • A foundation for building more components

Tips for Design Systems

Be Specific: "Blue-600" is better than "blue" — the AI understands Tailwind classes.

Include Tokens: Upload your complete color/spacing tokens as a document.

Generate Fundamentals First: Buttons, inputs, cards establish patterns the AI remembers.

Check Memory Regularly: Review what the AI learned and correct misunderstandings.

Use Consistent Language: If you say "rounded-lg" once, use it everywhere.

Next Steps

Expand your design system:

  • Generate navigation components
  • Create modal and dialog patterns
  • Build data display components (tables, lists)
  • Add loading and empty states

Related: