Components

tl;dr Components tell AI how specific UI elements should look and behave. While principles define your aesthetic vocabulary, components show how that vocabulary comes together in buttons, cards, inputs, and anything else that appears more than once in what you're creating.

What are components?

Components bridge the gap between abstract principles and concrete UI. A principle says "primary is this shade of purple." A component says "buttons use primary for their background, lighten on hover, and scale down slightly when pressed."

This is where your taste model gets specific. Components encode the interaction patterns, state changes, and structural decisions that give whatever you're designing depth and ~feel~. And because they reference principles rather than raw values, they stay in sync with your broader aesthetic automatically. This gives you room to quickly extend evolve a taste model after it's already in use.

Examples of common UI components include buttons, input fields, content cards, and navigation.

How components help AI

When your AI encounters a design task, components give it a head start:

• Consistency - AI knows exactly how your buttons should behave, so every button it generates matches
• Extrapolation - Understanding your button component helps AI make sensible guesses about similar elements you haven't defined
• Context - Component definitions carry intent, not just values. AI can use that intent when adapting to new situations

In other words, you don't need to define everything. AI can infer a lot from your principles alone. But the more you define, the less your AI has to guess, which will mean more consistent results on the first try.

If you already have a mature website or app, it's worth creating components for all recurring elements so you can use them precisely when working with AI. The sample tool can help.

What components can include

Structure

For complex components, you can define child elements. An alert might have an icon, title, and description that each need coordinated styling. A card might have header, body, and footer sections.

Components can be children of other components. Your AI will use references to map these relationships efficiently so changing one updates the rest.

Variants

Different flavors of the same component, typically sharing structure with differing style. A button might have primary, secondary, and ghost variants. A badge might have success, warning, and error variants. Defining these helps AI pick the right one for each context.

States

How a component responds to interaction from a finger, mouse, or keyboard.

State	When it applies
Default	Normal resting state
Hover	Mouse pointer over element
Active	Being clicked/pressed
Focus	Keyboard and voice navigation
Disabled	Blocked interaction

Common components

Most taste models include definitions for familiar UI elements:

Interactive: Button, Input, Select, Checkbox, Radio, Toggle

Containers: Card, Dialog, Popover, Tooltip, Alert

Navigation: Navbar, Sidebar, Tabs, Breadcrumb

Display: Badge, Avatar, Progress, Skeleton

You can define as many or as few as you need. AI fills gaps using your principles and its understanding of common patterns.

Custom components

Beyond standard UI, you can define components unique to your design. A "pricing card" with specific tier layouts. A "testimonial" with particular quote styling. A "feature row" that alternates image placement.

Custom components are especially useful when you find yourself describing the same element repeatedly. Ask your AI to add it to your model and it'll be easily available forever.

Common questions

How do I define components?

Describe what you want to your AI, and it can create or update component definitions in your taste model automatically. You can iterate on components the same way you iterate on any design in a chat. Screenshots help!

Do I need to manually define every component?

No, your AI will generate smart defaults based on your principles. Component definitions add precision when you want specific behavior: add them when you get tired of re-explaining something.

What if AI ignores my component definitions?

Ask it to check the model and make sure it's following the definitions precisely. Sometimes AI gets creative when it shouldn't. A quick "use the button component from my taste model" usually gets things back on track.

You can layer this kind of guidance into your initial prompt if you want to be safe, but it often isn't necessary.

What's next

• Patterns - Build rich pages with curated templates
• Creating Taste Models - Define your own components