21st-ai

21st AI 是一个“先画草图、再落地”的 UI 快速草稿板，整个循环都在终端里完成，无需离开编辑器。

用途

它的核心心智模型是：在这里起草，再去别处完成。你可以先用一个提示词快速勾出几个 UI 变体，在浏览器里预览，用自然语言修改中意的那个，然后把它的代码拉进代码仓库。整套流程通过 21st CLI（或对应的 MCP 工具）执行。

主要能力

generate：从一个提示词开始生成多个方案（称为 take），返回预览 URL 与 projectId，并在浏览器中打开预览。
generation：列出某个 projectId 下的所有 take（从 1 开始编号，并显示每个是否已渲染），用于确定要操作哪个 --take N。
iterate：用自然语言对某个已有的 take 就地修改，修改后新版本会追加，因此可以在工作区里回退查看。
take：获取某个 take 的代码。默认输出 copy-prompt（一份“在我的技术栈中重建”的规格说明，推荐方式）；加 --code 输出原始的自包含 HTML。两者都免费且不限量。

草图模式产出的是自包含的 HTML + Tailwind 草稿，速度快、无需构建。官方建议的交接方式是 copy-prompt：它告诉你如何在目标项目真实的技术栈中重建该设计，而不是原样粘贴 HTML。

使用方式

CLI 的基本循环如下：

# 1) Sketch——从提示词生成变体，打开浏览器预览并打印 projectId
21st generate "a pricing section with 3 tiers and a monthly/annual toggle"

# 2) 列出 take（1 起编号 + 是否已渲染）
21st generation <projectId>

# 3) 用自然语言修改某一个 take（就地编辑，计费）
21st iterate <projectId> "make it enterprise-flavored, add an annual toggle" --take 3

# 4) 获取代码（免费）
21st take <projectId> --take 3            # 可直接粘贴的 copy-prompt（推荐）
21st take <projectId> --take 3 --code     # 原始自包含 HTML

可把 generate 打印、并由 iterate 返回的预览 URL 打开在编辑器内置浏览器中，实时观察变体的渲染与更新。

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，则应停止生成尝试，改用上文提到的组件搜索与检索工作流。

适用场景

适合在终端中快速起草 UI 版式、生成多个设计变体进行对比、用自然语言微调某个已生成的方案，并把它作为设计规格带入真实项目重建。

限制与计费

在生成或迭代之前，需检查 MCP get_usage.aiGenerationEnabled 或 21st usage 中的“21st AI generation”一行；CLI 1.17.1 也支持 21st usage --json。只有 AI 被明确启用时才可继续；状态缺失或未知不视为授权。基础 Builder 订阅不会启用 AI。若该项为 false，只能使用 search → get_component，并由用户自己的智能体适配代码，不应尝试 generate 或 iterate_generation（包括通过 CLI 作为回退手段）。generate 需要账户启用 AI 且有可用 AI 额度；Builder 和 Team 默认 AI 关闭，仅凭会员身份不启用。iterate 按每次编辑的真实 token 成本计费（共用的 21st AI credit 池），每次调用都会做真实的模型工作，因此应把改动合并为一条清晰的指令，而不是拆成许多零碎指令。generation（列表）与 take（取代码）免费。另外，只有由你本人创建的草图生成才能被列出、编辑或获取；take 用 generation 中 1 起编号或预览中的“Take N”标签引用，--take 必须是 ≥1 的整数，错误值会报错而不是静默编辑 take 1。

认证

使用与 CLI 其余部分相同的凭据：21st login（保存的 token），或通过 --api-key / TWENTYFIRST_TOKEN 提供 21st_sk_ 密钥。21st usage（MCP：get_usage）会显示账户档位、aiGenerationEnabled 和剩余的每日免费组件代码检索额度，但不会报告 AI credit 余额。

（官网介绍中没有提供的具体功能、收费、价格、平台或效果细节，此处不再展开。）

技能介绍