Build project-aware UI
Preserve the product's identity while using 21st supply to accelerate implementation.
Workflow
-
Read
.21st/design.jsonand.21st/DESIGN.md. If neither exists, run21st init --design-context. -
Inspect the target route, its closest components, project instructions, and existing tokens. Treat explicit project facts as stronger than generic taste.
-
Search before generating:
-
Reuse installed project primitives first. Retrieve or install a 21st result only when it reduces duplication or materially improves the result.
-
If no result fits, check MCP
get_usage.aiGenerationEnabledor run21st usageand read the21st AI generationline. CLI 1.17.1+ also supports21st usage --json. Only when AI is explicitly enabled, generate project-aware alternatives using available AI credits:Otherwise, implement alternatives with your own coding agent, grounded in
21st searchand21st get(MCP:searchandget_component). Do not call or suggest hostedgenerateoriterate_generationwithout AI access. -
Implement the selected direction in the project's real framework. Do not paste sketch HTML when the project expects React components, tokens, or established APIs.
-
Preserve responsive behavior, keyboard interaction, visible focus, semantics, reduced motion, loading states, empty states, and error states.
-
Run the project's checks and
21st review <changed paths>. Apply only safe, deterministic fixes automatically.
Design rules
- Prefer project tokens over new arbitrary values.
- Prefer existing components over parallel lookalikes.
- Preserve established density, radii, typography, iconography, and layout rhythm unless the user explicitly requests a redesign.
- Use real product copy and states when available.
- Avoid decorative gradients, excessive cards, glass effects, huge headlines, and animation unless supported by the project or requested.
- Never claim a component, token, or capability exists without inspecting it.
Handoff
Report the direction used, reused 21st/project components, files changed, and
verification performed. Record a durable visual choice in
.21st/design.json under decisions when the user selects a new direction.