21st-ui-explore

用途

21st-ui-explore 是一个 UI 设计方向探索技能，用于在当前项目设计系统与 21st 灵感的基础上，生成多个有实质差异的界面方向并进行比较。技能文档强调要在不放弃项目视觉识别的前提下，创造真正的选择，而不是随机的风格变化。每一处差异都必须支持一个用户可以评估的产品或可用性假设。

主要能力

• 在生成之前，先搜索 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 额度进行托管生成：

  21st generate "<goal plus fixed constraints>" --context auto --variants 3

• 若 AI 不可用，则使用自己的编码智能体（coding agent）实现预览，并以 21st search 和 21st get（MCP：search 和 get_component）为基础。不得在没有 AI 访问权限时调用或建议托管 generate 或 iterate_generation。

• 当宿主支持选择器时，将各选项一并呈现；否则为每个选项提供预览/深层链接和简洁的比较。

• 推荐一个方向并说明具体取舍，但让用户自行选择。

• 选择完成后，移除被放弃的本地变体，并将决定记录在 .21st/design.json 中。

使用方式

技能文档描述的工作流为：

1. 读取 .21st/design.json 以及相关产品界面。如果缺少上下文，运行 21st init --design-context。
2. 在生成之前，先使用 21st search 搜索多个相关参考。
3. 定义三个具名方向，确保每个方向在至少两个有意义的维度上不同。
4. 固定共享约束：真实技术栈、设计令牌、品牌资产、必需内容、无障碍与响应式行为。
5. 创建可比较的预览。检查 AI 生成是否启用；仅在明确启用时使用托管生成，否则以 21st search 和 21st get 为基础自行实现。
6. 在宿主支持选择器时一并呈现各选项，否则提供预览/深层链接与简洁比较。
7. 推荐一个方向并说明取舍，让用户选择。
8. 选择后清理被放弃的本地变体，并将决定记录在 .21st/design.json。

适用场景

• 用户希望在现有项目设计系统内探索多个不同的 UI 方向。
• 用户需要对多个界面方案进行对比和评估。
• 用户希望在保留品牌与项目视觉识别的前提下，做出有依据的设计选择。

方向契约

技能文档要求为每个方向提供：

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

限制

• 不使用跨项目通用设计系统策略。
• 不生成随机风格变体；每个差异都必须支持一个产品或用 户体验假设。
• 仅颜色变化的变体不算作不同方向。
• 不得在 AI 未启用或无访问权限时调用或建议托管 generate 或 iterate_generation。
• 技能文档中未提供价格、收费、平台支持范围等信息，如需请以官方文档为准。