21st-ui-explore

用途

21st-ui-explore 用于在保留项目视觉识别的前提下，探索并对比多个有实质差异的 UI 方向。它面向需要“真实可选方案”而非随机风格变体的场景，帮助用户在多个设计方向之间做出有依据的选择。

主要能力

• 读取 .21st/design.json 与相关产品 UI，建立设计上下文；上下文缺失时可运行 21st init --design-context 补齐。
• 在生成前通过 21st search 检索多个相关参考，命令示例：21st search "<interface and product context>" --context auto。
• 定义三个具名方向，每个方向至少在两个有意义维度上不同，例如层级、信息密度、导航模型、内容侧重、交互模式或构图；仅颜色变化不计入差异。
• 保持共享约束固定：真实技术栈、tokens、品牌资产、必需内容、无障碍与响应式行为。
• 创建可对比的预览，并在宿主支持选择器时集中呈现选项；否则为每个选项提供预览/深链和紧凑对比。
• 推荐一个方向并给出具体取舍，但最终由用户选择。
• 选择后清理废弃的本地变体，并将决策记录到 .21st/design.json。

使用方式

1. 读取 .21st/design.json 和相关产品 UI；若缺少上下文，运行 21st init --design-context。
2. 使用 21st search 检索多个相关参考。
3. 定义三个具名方向，确保每个方向至少有两个有意义的差异。
4. 固定共享约束。
5. 创建可对比预览。检查 MCP get_usage.aiGenerationEnabled，或运行 21st usage 并读取 21st AI generation 行；CLI 1.17.1+ 也支持 21st usage --json。仅在 AI 明确启用时，才使用托管生成与可用 AI 额度，命令示例：21st generate "<goal plus fixed constraints>" --context auto --variants 3。否则，由自己的编码智能体基于 21st search 和 21st get（MCP：search 和 get_component）实现预览。在没有 AI 访问权限时，不要调用或建议托管 generate 或 iterate_generation。
6. 集中呈现选项，或为每个选项提供预览/深链和紧凑对比。
7. 推荐一个方向并说明取舍，让用户选择。
8. 选择后清理废弃的本地变体，并将决策记录到 .21st/design.json。

方向契约

每个方向需提供：简短描述性名称；核心想法与预期用户效果；所使用的 21st/项目参考；与项目保持一致的部分；两个或更多有意义的差异；无障碍或响应式风险；最适配场景。

适用场景

适用于需要在现有设计系统内探索多个 UI 方向、并希望每个差异都支持可评估的产品或可用性假设的场景。

限制

不要生成随机风格突变；每个差异都必须支持用户可评估的产品或可用性假设。托管生成仅在 AI 明确启用且有可用 AI 额度时使用。