mcpField
2
21st-ui-explore

21st-ui-explore

github.com/21st-dev设计与 UI311.4k 次安装7 周前更新
代码仓库

关于 21st-ui-explore

用于在保留项目视觉特征和约束的前提下探索不同 UI 方向的技能，指导 Agent 搜集参考、准备可比较的选项并记录最终选择。

主要功能

  1. 01读取项目设计上下文
  2. 02搜索 21st 参考内容
  3. 03定义三个不同方向
  4. 04制作可比较的预览
  5. 05比较取舍与风险
  6. 06记录选定方向

适用场景

  1. 01探索页面的布局方案
  2. 02展示设计选项以供评审
  3. 03记录选定的视觉方向

MCP 相关

工作流使用 21st MCP 的 search 和 get_component 工具查找参考，并通过 get_usage 检查托管 AI 生成是否启用。

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/21st-dev/skill --skill 21st-ui-explore

安装后在 Claude Code 中输入/21st-ui-explore确认已加载。

附带文件agents/openai.yaml

详细介绍

探索有依据的 UI 方向

在保留项目视觉风格的同时，提供真正有差异的选择。

工作流

  1. 阅读 .21st/design.json 和相关产品 UI。如果缺少上下文， 运行 21st init --design-context。

  2. 在生成前，在 21st 中搜索多个相关参考：

    21st search "<interface and product context>" --context auto

  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

    否则，使用你自己的编码 Agent，基于 21st search 和 21st get（MCP：search 和 get_component）实现预览。没有 AI 访问权限时，不要调用或建议使用托管的 generate 或 iterate_generation。

  6. 如果宿主支持选择器，则将各个选项一并呈现。否则，为每个选项提供预览链接或深层链接，并附上简要对比。

  7. 根据具体的权衡推荐一个方向，但由用户选择。

  8. 用户选择后，移除已放弃的本地变体，并将决策记录在 .21st/design.json 中。

方向约定

每个方向都需提供：

  • 简短且描述性强的名称；
  • 核心理念及预期的用户体验；
  • 使用的 21st／项目参考；
  • 项目中保持一致的部分；
  • 两项或更多有意义的差异；
  • 无障碍或响应式风险；
  • 最适用的场景。

不要生成随机的风格变化。每项差异都必须支持一个产品或易用性假设，以便用户评估。

评论

支持 Markdown