Get started

Best practices

The difference between a polished agent-built product and a generic one usually comes down to four habits.

Enforce token usage in every component

Add a rule to your project instructions (CLAUDE.md, .cursorrules, or equivalent) that every component uses the kit's semantic tokens. No hardcoded colors, no literal font sizes.

## Design system

Every component must use the global design system via semantic tokens.
Use `bg-background`, `text-foreground`, `bg-card`, `text-primary`,
`border-border`, etc. Never hardcode colors like `bg-neutral-950` or
`text-white`. Typography uses the heading and body font variables,
not literal font-family values.

When every component draws from the same token layer, switching the kit repaints the entire product. Without this rule, the first kit applies cleanly and every later change means hunting down hardcoded values across fifty files.

Run periodic reviews: tell your agent to scan src/components/ and flag any hardcoded color or font that should use a token instead.

Build on solid component primitives

An agent styling a Radix UI dropdown with your kit's tokens will get it accessible, keyboard-navigable, animated, and visually consistent. An agent building a dropdown from scratch will get it roughly working.

Recommended libraries:

The split: the library owns behavior (focus, keyboard nav, screen readers). The kit owns the look (colors, typography, spacing, shapes). Swap either without touching the other.

Use image generation for initial direction

Before committing to a kit, generate a few images of what the product could look like. Image models are good at mood, composition, and color relationships. They are bad at producing a system you can build from. Use them for the first, not the second.

  1. Generate mood images with an image model (3 to 5 options with different moods)
  2. Pick the direction (you are choosing a mood, not a layout)
  3. Create or extract a kit that matches the chosen direction
  4. Maintain the kit in Identity Forge as the source of truth

This separates creative exploration (where image models excel) from systematic implementation (where a structured design kit is necessary). An image cannot tell an agent what border-radius to use on a card. A kit can.

Generate variations, then choose

Instead of accepting the first version of a section, ask your agent to build three variations with different layouts, densities, or emphasis patterns.

Build three variations of the pricing section:
1. A compact horizontal layout with all plans visible at once
2. A card-based layout with the recommended plan highlighted
3. A comparison table with feature rows

Use the active design kit for all three.

This costs a few extra minutes of agent time and saves the project from looking like whatever the model defaults to. The agent applies the same kit to each variation, so all three are on-brand. You pick the one that fits the content and the page rhythm.

Works for any section: hero layouts, feature grids, testimonial blocks, dashboards, settings pages. Generating three and discarding two is cheaper than iterating on one.

Further reading