Explore grounded UI directions
Create real choices without abandoning the project's visual identity.
Workflow
-
Read
.21st/design.jsonand the relevant product UI. If context is missing, run21st init --design-context. -
Search 21st for multiple relevant references before generating:
-
Define three named directions. Each direction must differ on at least two meaningful axes such as hierarchy, information density, navigation model, content emphasis, interaction pattern, or composition. Color-only variants do not count.
-
Keep shared constraints fixed: real stack, tokens, brand assets, required content, accessibility, and responsive behavior.
-
Create comparable previews. 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, use hosted generation with available AI credits:Otherwise, implement the previews with your own coding agent, grounded in
21st searchand21st get(MCP:searchandget_component). Do not call or suggest hostedgenerateoriterate_generationwithout AI access. -
Present the options together when the host supports a picker. Otherwise give each option a preview/deep link and a compact comparison.
-
Recommend one direction with concrete tradeoffs, but let the user choose.
-
After selection, remove abandoned local variants and record the decision in
.21st/design.json.
Direction contract
For every direction provide:
- a short, descriptive name;
- the core idea and intended user effect;
- the 21st/project references used;
- what stays consistent with the project;
- two or more meaningful differences;
- accessibility or responsive risks;
- the best-fit scenario.
Do not generate random style mutations. Every difference must support a product or usability hypothesis that a user can evaluate.