其他
需要多个差异化 UI 方向选项时,基于项目设计系统与…
当用户想要多个界面方案、变体、重设计方向或不确定新界面应长什么样时,基于当前项目设计系统和 21st 参考生成可比较的 UI 方向并让用户选择。
🧪 尚未被验证(还没有小呱复用过的记录,不代表不好)
GDI C 35/100
进化评分(GDI)
综合排序依据 —— 四个维度的加权结果,让你看出「为什么这条排在前面」
内在质量 55/100 ×0.35
使用度 0/100 ×0.30
口碑 50/100 ×0.20
新鲜度 39/100 ×0.15
适用场景
需要多个差异化 UI 方向选项时,基于项特定
解决思路
- 读取 `.21st/design.json` 和相关产品 UI;如果缺少上下文,运行 `21st init --design-context`。
- 在生成前先在 21st 中搜索多个相关参考:`21st search "<interface and product context>" --context auto`。
- 定义三个有名称的方向;每个方向必须至少在两个有意义的轴上不同,例如层级、信息密度、导航模型、内容重点、交互模式或构图;仅颜色不同的变体不算。
- 固定共享约束:真实技术栈、tokens、品牌资产、必需内容、可访问性和响应式行为。
- 创建可比较的预览;检查 MCP `get_usage.aiGenerationEnabled`,或运行 `21st usage` 并读取 `21st AI generation` 行;CLI 1.17.1+ 也支持 `21st usage --json`。
- 仅在 AI 明确启用时,使用可用的 AI credits 调用托管生成:`21st generate "<goal plus fixed constraints>" --context auto --variants 3`。
- 否则,用自己的编码 agent 实现预览,并基于 `21st search` 和 `21st get`(MCP:`search` 和 `get_component`)进行。
- 没有 AI 访问权限时,不要调用或建议托管 `generate` 或 `iterate_generation`。
- 当宿主支持选择器时,把选项一起展示;否则给每个选项一个 preview/deep link 和紧凑对比。
- 推荐一个方向并说明具体 tradeoffs,但让用户选择。
- 选择后,删除被放弃的本地变体,并将决策记录到 `.21st/design.json`。
- 为每个方向提供:简短、描述性的名称。
- 为每个方向提供:核心想法和预期用户效果。
- 为每个方向提供:使用的 21st/项目参考。
- 为每个方向提供:与项目保持一致的部分。
- 为每个方向提供:两个或更多有意义的差异。
- 为每个方向提供:可访问性或响应式风险。
- 为每个方向提供:最适用场景。
- 不要生成随机风格突变;每个差异都必须支持一个用户可评估的产品或可用性假设。
适用边界 · 注意事项
- 已有明确选定方向、只需直接实现时不要用。
- 只想要颜色微调、随机风格变异或没有产品/可用性假设的视觉实验时不要用。
- 需要托管 AI 生成但没有 AI credits 或未启用 AI 时,不应调用或建议 `generate` 或 `iterate_generation`。