Back to Details

21st-ui-build

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Build project-aware UI

构建感知项目上下文的UI

Preserve the product's identity while using 21st supply to accelerate implementation.
在使用21st资源加速实现的同时，保留产品的品牌特性。

Workflow

工作流程

  1. Read 
    .21st/design.json
    and 
    .21st/DESIGN.md
    . If neither exists, run 
    21st init --design-context
    .
  2. Inspect the target route, its closest components, project instructions, and existing tokens. Treat explicit project facts as stronger than generic taste.
  3. Search before generating:
    bash
    21st search "<specific UI need>" --context auto
  4. Reuse installed project primitives first. Retrieve or install a 21st result only when it reduces duplication or materially improves the result.
  5. If no result fits, generate project-aware alternatives:
    bash
    21st generate "<goal and constraints>" --context auto --variants 3
  6. 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.
  7. Preserve responsive behavior, keyboard interaction, visible focus, semantics, reduced motion, loading states, empty states, and error states.
  8. Run the project's checks and 
    21st review <changed paths>
    . Apply only safe, deterministic fixes automatically.
  1. 读取
    .21st/design.json
    和
    .21st/DESIGN.md
    。如果两者都不存在，请运行 
    21st init --design-context
    。
  2. 检查目标路由、其最接近的组件、项目说明以及现有设计令牌。将明确的项目实际情况置于通用设计偏好之上。
  3. 生成前先搜索：
    bash
    21st search "<特定UI需求>" --context auto
  4. 优先复用已安装的项目基础组件。仅当能减少重复或显著提升结果时，才获取或安装21st的结果。
  5. 如果没有合适的结果，生成感知项目上下文的替代方案：
    bash
    21st generate "<目标与约束条件>" --context auto --variants 3
  6. 在项目实际使用的框架中实现选定的方案。当项目需要React组件、设计令牌或既定API时，请勿粘贴草稿HTML。
  7. 保留响应式行为、键盘交互、可见焦点、语义化、简化动画、加载状态、空状态和错误状态。
  8. 运行项目的检查工具以及
    21st review <修改路径>
    。仅自动应用安全、确定的修复。

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.
报告所采用的方案、复用的21st/项目组件、修改的文件以及执行的验证工作。当用户选定新方案时，在
.21st/design.json
的
decisions
字段中记录持久的视觉选择。