21st-ai

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

21st AI — sketch, iterate & grab code from the terminal

21st AI — 从终端绘制、迭代并提取代码

21st AI is a fast UI-drafting board. Mental model: draft it here, then finish it — sketch a few variants from a prompt, preview them, refine the one you like with plain-English edits, and pull its code into the repo. The whole loop runs from the

21st

CLI (or the matching MCP tools), so you never leave the editor.

Sketch mode produces self-contained HTML + Tailwind drafts (fast, no build). The recommended handoff is the copy-prompt: a spec that tells you to rebuild the design in the target project's real stack — not paste raw HTML verbatim.

21st AI是一个快速的UI草稿绘制工具。核心思路：在此处绘制草稿，再完成最终开发——根据提示生成几个变体，预览它们，用简单的英文修改来优化你喜欢的版本，然后将其代码提取到代码仓库中。整个流程都通过

21st

CLI（或配套的MCP工具）完成，因此你无需离开编辑器。

草图模式会生成独立的HTML + Tailwind草稿（速度快，无需构建）。推荐的交接方式是复制提示（copy-prompt）：一份指导你在目标项目的真实技术栈中重新实现设计的规范——而非直接粘贴原始HTML。

Auth

身份验证

Same credential as the rest of the CLI:

21st login

(saved token) or a

21st_sk_

key via

--api-key

TWENTYFIRST_TOKEN

21st usage

shows tier + remaining quota. (See the

21st-cli-use

skill for the full auth notes.)

与其他CLI工具使用相同的凭证：

21st login

（保存的令牌）或通过

--api-key

TWENTYFIRST_TOKEN

传入

21st_sk_

密钥。

21st usage

命令可查看套餐等级及剩余配额。（完整的身份验证说明请查看

21st-cli-use

技能。）

The loop

操作流程

bash

undefined

bash

undefined

1) Sketch — generate variants ("takes") from a prompt. Opens the preview in

1) 绘制草图——根据提示生成变体（称为“takes”）。在浏览器中打开预览并打印projectId。

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).

2) 列出所有变体（基于1的编号 + 每个变体是否已渲染）。

21st generation <projectId>

3) Edit ONE take in place with a natural-language change (PAID — see Metering).

3) 用自然语言修改单个变体（付费功能——请查看计量说明）。

21st iterate <projectId> "make it enterprise-flavored, add an annual toggle" --take 3

4) Grab the code to bring into the project (FREE).

4) 获取代码并引入项目（免费功能）。

21st take <projectId> --take 3 # paste-ready copy-prompt (recommended) 21st take <projectId> --take 3 --code # raw self-contained HTML instead


Open the preview URL (printed by `generate`, and returned by `iterate`) in the
editor's built-in browser to watch the variants render and update in place.

21st take <projectId> --take 3 # 推荐使用可直接复制的提示（copy-prompt） 21st take <projectId> --take 3 --code # 改为获取原始独立HTML代码


在编辑器内置浏览器中打开预览URL（由`generate`命令打印，`iterate`命令返回），即可实时查看变体的渲染和更新。

When to use which

命令适用场景

generate — start fresh from a prompt. Returns a preview URL + projectId.
generation — list the takes so you know which
```
--take N
```
to act on.
iterate — refine an EXISTING take (edited in place; a new version is appended, so you can step back in the workspace). Use this to change something already generated instead of starting over.
take — pull a take's code. Default prints the copy-prompt (adapt-to-my- stack spec);
```
--code
```
prints the raw HTML. Both FREE and unlimited.

generate — 根据提示从零开始创建。返回预览URL + projectId。
generation — 列出所有变体，以便确定要操作的
```
--take N
```
编号。
iterate — 优化现有变体（原地编辑；新版本会追加，因此你可以在工作区中回溯历史版本）。用于修改已生成的内容，而非重新开始。
take — 提取变体代码。默认输出复制提示（适配我的技术栈的规范）；
```
--code
```
参数输出原始HTML。这两个功能均为免费且无限制。

Metering

计量计费

generate — small free daily bucket, then a paywall (
```
21st usage
```
shows what's left). Community access / membership lifts it.
iterate — billed by real token cost per edit (the shared 21st AI credit pool); it does real model work each call, so batch changes into one clear instruction rather than many tiny ones.
generation (listing) and take (grabbing code) are FREE.

generate — 每日有少量免费额度，超出后需付费（
```
21st usage
```
可查看剩余额度）。社区访问权限/会员资格可提升免费额度。
iterate — 根据每次编辑的实际令牌成本计费（使用共享的21st AI信用池）；每次调用都会触发模型运算，因此建议将多个修改合并为一条清晰的指令，而非多次微小修改。
generation（列出变体）和take（提取代码）为免费功能。

MCP parity

MCP兼容性

The same loop is exposed as MCP tools for MCP hosts (Cursor, Claude Desktop, Claude Code):

generate

(with

mode: "sketch"

get_generation

iterate_generation

and

get_take

iterate_generation

also returns the freshly-edited

html

copyPrompt

, so you can grab the code without a second call. Wire up the server with

21st init --client <name> --write

相同的操作流程也以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

命令配置服务器。

Tips

提示建议

A sketch is a draft, not production code — treat the copy-prompt as a design spec and rebuild it in the project's real components; don't paste the HTML as-is.
Refer to takes by the 1-based number from
```
generation
```
/ the "Take N" label in the preview.
```
--take
```
must be a whole number ≥ 1 (a bad value errors rather than silently editing take 1).
Only sketch generations you created can be listed, edited, or fetched.

草图是草稿，而非生产代码——将复制提示视为设计规范，在项目的真实组件中重新实现；不要直接粘贴HTML代码。
通过
```
generation
```
命令输出的基于1的编号或预览中的“Take N”标签来指代变体。
```
--take
```
参数必须是≥1的整数（若传入无效值会报错，而非默认编辑第1个变体）。
仅能列出、编辑或获取你自己创建的草图生成内容。