用途
21st-ui-build 面向在现有项目中构建或对生产 UI 进行实质变更的场景。其目标是在保留产品既有身份的前提下，利用 21st 的资源供给来加速实现。
主要能力
- 读取并依据项目设计上下文：先读取 .21st/design.json 与 .21st/DESIGN.md；若两者均不存在，则运行
21st init --design-context。 - 检查目标路由、其最接近的组件、项目指令以及现有设计令牌，并将明确的项目事实置于通用审美之上。
- 在生成之前进行检索：
21st search "<specific UI need>" --context auto。 - 优先复用项目中已安装的基础组件；仅当能减少重复或显著提升结果时，才检索或安装 21st 结果。
- 在无现成结果可用时，检查 MCP 的 get_usage.aiGenerationEnabled，或运行
21st usage并阅读 21st AI generation 行。CLI 1.17.1+ 也支持21st usage --json。 - 仅在 AI 明确启用时，使用可用 AI 额度生成项目感知的备选方案：
21st generate "<goal and constraints>" --context auto --variants 3。 - 若不可用，则基于
21st search与21st get（MCP：search 与 get_component）由自己的编码代理实现备选方案；在没有 AI 访问权限时，不要调用或建议托管的 generate 或 iterate_generation。 - 在项目真实框架中实现所选方向，不将草图 HTML 直接粘贴到期望 React 组件、令牌或既有 API 的项目中。
- 保留响应式行为、键盘交互、可见焦点、语义、减少动效、加载状态、空状态与错误状态。
- 运行项目检查与
21st review <changed paths>，仅自动应用安全且确定的修复。
设计规则
- 优先使用项目令牌，而非新的任意值。
- 优先使用现有组件，而非并行的相似组件。
- 除非用户明确要求重新设计，否则保留既有的密度、圆角、字体排印、图标风格与布局节奏。
- 在可用时使用真实的产品文案与状态。
- 避免装饰性渐变、过多卡片、玻璃效果、超大标题与动画，除非项目支持或用户要求。
- 未经检查，绝不声称某个组件、令牌或能力存在。
使用方式
工作流从读取设计上下文开始，随后检查目标路由与邻近组件，先检索再生成，优先复用现有基础组件，并在 AI 明确启用时才使用 generate。实现阶段要求使用项目真实框架，最后运行项目检查与 21st review，仅自动应用安全且确定的修复。
交接
报告所使用的方向、复用的 21st/项目组件、更改的文件以及执行的验证。当用户选择新方向时，在 .21st/design.json 的 decisions 下记录持久的视觉选择。
适用场景
适用于需要在真实项目中构建或实质修改生产 UI，并希望保持产品身份、复用既有组件与令牌、同时借助 21st 检索与可能的 AI 生成能力加速实现的开发工作流。
限制
仅在 AI 明确启用时才能使用 21st generate；无 AI 访问权限时不应调用或建议托管的 generate 或 iterate_generation。令牌、组件与能力需实际检查后才能声称存在。关于具体收费、价格、平台支持范围与效果，资料暂未提供。