21st-ai

name

21st-ai

description

Generate and iterate on UI with 21st AI from the terminal via the `21st` CLI (`@21st-dev/cli`): sketch a UI from a prompt, preview the variants in the browser, edit any variant in place with a natural-language change, and pull the final code into the project. Use whenever the user wants to BUILD / SKETCH new UI ("sketch a pricing page", "generate a hero with 21st", "make me a <X> section"), ITERATE on a generated draft ("edit the third variant", "add a toggle to that take"), or GRAB the code of a draft ("pull that variant's code", "сгенери UI на 21st", "поправь третий вариант", "забери код того наброска"). For finding/installing existing components use the `21st-cli-use` skill; to publish your own, `21st-registry`.

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

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.

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

The loop

# 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"


21st generation <projectId>


21st iterate <projectId>  --take 3


21st take <projectId> --take 3            
21st take <projectId> --take 3 --code