mcpField
2
21st-ai

21st-ai

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

关于 21st-ai

此 Skill 介绍如何通过 21st CLI 和 MCP 工具生成 UI 草稿、迭代设计并提取代码，也说明草稿如何适配项目技术栈及生成权限检查。

主要功能

  1. 01根据提示生成 UI 草稿方案
  2. 02预览并编辑已有方案
  3. 03提取代码或项目适配提示词
  4. 04检查 AI 生成功能与用量

适用场景

  1. 01为 UI 区块起草多个设计方案
  2. 02在不重做的情况下修改生成结果
  3. 03将草稿适配到目标项目技术栈

MCP 相关

同一工作流也提供 MCP 工具：generate、get_generation、iterate_generation 和 get_take。MCP 主机可通过 `21st init --client --write` 配置连接。

安装

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

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

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

详细介绍

21st AI — 在终端中绘制草图、迭代并获取代码

21st AI 是一个快速的 UI 草稿板。可以这样理解：先在这里起草，再完成它——根据提示词绘制几个变体、预览它们、用通俗英语修改你喜欢的版本，然后将代码拉取到代码库中。整个流程都通过 21st CLI（或对应的 MCP 工具）运行，因此你无需离开编辑器。

草图模式会生成独立的 HTML + Tailwind 草稿（速度快，无需构建）。推荐的交接方式是 copy-prompt：它提供一份规范，指导你在目标项目的实际技术栈中重建设计，而不是原样粘贴 HTML。

身份验证

CLI 其他功能使用的凭证同样适用于此处：使用 21st login（保存令牌），或通过 --api-key / TWENTYFIRST_TOKEN 提供 21st_sk_ 密钥。21st usage（MCP：get_usage）会显示账户套餐、aiGenerationEnabled 和剩余的每日免费组件代码获取配额，但不会报告 AI 点数余额。（完整的身份验证说明请参阅 21st-cli-use 技能。）

生成或迭代前，请检查 MCP get_usage.aiGenerationEnabled 或 21st usage 中的 21st AI generation 一行。CLI 1.17.1 还支持 21st usage --json。只有明确启用 AI 时才能继续；缺少状态或状态未知都不代表已获准使用。基础版 Builder 订阅不会启用 AI。如果值为 false，请使用 search → get_component，再由用户自己的 Agent 调整代码。不要尝试使用 generate 或 iterate_generation，也不要改用 CLI 作为后备方案。

流程

# 1) Sketch — generate variants ("takes") from a prompt. Opens the preview in
#    the browser and prints the projectId.
21st generate "a pricing section with 3 tiers and a monthly/annual toggle"

# 2) List the takes (1-based numbers + whether each has rendered yet).
21st generation <projectId>

# 3) Edit ONE take in place with a natural-language change (PAID — see Metering).
21st iterate <projectId> "make it enterprise-flavored, add an annual toggle" --take 3

# 4) Grab the code to bring into the project (FREE).
21st take <projectId> --take 3            # paste-ready copy-prompt (recommended)
21st take <projectId> --take 3 --code     # raw self-contained HTML instead

在编辑器内置的浏览器中打开预览 URL（由 generate 打印，并由 iterate 返回），即可查看各个变体的渲染效果及其原位更新。

何时使用哪个功能

  • generate — 根据提示词开始新的生成。返回预览 URL 和 projectId。
  • generation — 列出各个版本，以便确定要操作的 --take N。
  • iterate — 优化现有版本（原位编辑；会追加一个新版本，因此可以在工作区中回退）。用于修改已生成的内容，而不是从头开始。
  • take — 获取某个版本的代码。默认打印 copy-prompt（适配到我的技术栈规范）；--code 打印原始 HTML。两者都免费且不限次数。

计费

  • generate — 账户必须启用 AI，并且有可用的 AI 点数。Builder 和 Team 套餐默认关闭 AI；仅成为会员并不会启用它。
  • iterate — 按每次编辑的实际令牌成本计费（从共享的 21st AI 点数池扣除）；每次调用都会执行实际的模型工作，因此请将修改合并为一条清晰指令，而不是拆成许多细小指令。
  • generation（列出版本）和 take（获取代码）均为免费。

MCP 功能对应关系

同一流程也以 MCP 工具的形式提供给 MCP 宿主使用（Cursor、Claude Desktop、Claude Code）：generate（使用 mode: "sketch"）、get_generation、iterate_generation 和 get_take。iterate_generation 还会返回刚编辑好的 html + copyPrompt，因此无需再次调用即可获取代码。使用 21st init --client <name> --write 配置服务。

MCP 工具列表取决于账户状态：只有启用 AI 后，才会列出 generate 和 iterate_generation。读取现有草稿仍可使用 get_generation 和 get_take。启用 AI 后，请刷新客户端的工具列表，或重新连接 MCP 服务。如果缓存的工具调用返回 ai_subscription_required，请停止尝试生成，并改用上文介绍的组件搜索和获取流程。

提示

  • 草图是草稿，不是生产代码——请将 copy-prompt 视为设计规范，并使用项目的实际组件重建；不要原样粘贴 HTML。
  • 请使用 generation 中以 1 为起点的编号，或预览中的 “Take N” 标签来引用版本。--take 必须是大于等于 1 的整数（输入无效值会报错，不会静默地编辑版本 1）。
  • 只能列出、编辑或获取你创建的草图生成内容。

评论

支持 Markdown