Back to Details

21st-ui-explore

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Explore grounded UI directions

探索贴合项目的UI方向

Create real choices without abandoning the project's visual identity.
无需脱离项目视觉标识，创建切实可行的选择方案。

Workflow

工作流程

  1. Read 
    .21st/design.json
    and the relevant product UI. If context is missing, run 
    21st init --design-context
    .
  2. Search 21st for multiple relevant references before generating:
    bash
    21st search "<interface and product context>" --context auto
  3. 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.
  4. Keep shared constraints fixed: real stack, tokens, brand assets, required content, accessibility, and responsive behavior.
  5. Generate or implement comparable previews. Prefer:
    bash
    21st generate "<goal plus fixed constraints>" --context auto --variants 3
  6. Present the options together when the host supports a picker. Otherwise give each option a preview/deep link and a compact comparison.
  7. Recommend one direction with concrete tradeoffs, but let the user choose.
  8. After selection, remove abandoned local variants and record the decision in 
    .21st/design.json
    .
  1. 读取 
    .21st/design.json
    和相关产品UI。若缺少上下文信息，请运行 
    21st init --design-context
    。
  2. 在生成内容前，在21st中搜索多个相关参考资料：
    bash
    21st search "<interface and product context>" --context auto
  3. 定义三个带有名称的方向。每个方向必须在至少两个关键维度上存在差异，例如层级结构、信息密度、导航模式、内容侧重点、交互模式或布局方式。仅颜色变体不符合要求。
  4. 固定共享约束条件：实际技术栈、设计令牌、品牌资产、必填内容、无障碍设计和响应式表现。
  5. 生成或实现可对比的预览。优先使用：
    bash
    21st generate "<goal plus fixed constraints>" --context auto --variants 3
  6. 若宿主环境支持选择器，则将所有选项一同展示。否则为每个选项提供预览/深度链接，并附上简洁的对比说明。
  7. 推荐一个方向并说明具体的权衡点，但最终由用户选择。
  8. 用户选定后，移除废弃的本地变体，并将决策记录在 
    .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.
每个方向需包含：
  • 简短且描述性的名称；
  • 核心理念及预期用户影响；
  • 使用的21st/项目参考资料；
  • 与项目保持一致的内容；
  • 两处及以上的显著差异；
  • 无障碍设计或响应式方面的风险；
  • 最适用的场景。
请勿生成随机样式变更。每一处差异都需支撑用户可评估的产品或可用性假设。