21st-ai
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 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.
- Installs
- 2K
- Last 24h
- +23
- Trending rank
- #5130
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/21st-dev/skill --skill 21st-ai- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads 21st-ai automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
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 (MCP:
get_usage) shows the account tier, aiGenerationEnabled, and remaining free
daily component-code retrieval quota. It does not report the AI credit balance.
(See the 21st-cli-use skill for the full auth notes.)
Before generating or iterating, check MCP get_usage.aiGenerationEnabled or
the 21st AI generation line from 21st usage. CLI 1.17.1 also supports
21st usage --json. Proceed only when AI is explicitly enabled; missing or
unknown status does not grant access. A base Builder
subscription does not enable AI. When it is false, use search →
get_component and adapt the code with the user's own agent. Do not attempt
generate or iterate_generation, including through the CLI as a fallback.
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"
# 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
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.
When to use which
- generate — start fresh from a prompt. Returns a preview URL + projectId.
- generation — list the takes so you know which
--take Nto 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);
--codeprints the raw HTML. Both FREE and unlimited.
Metering
- generate — requires AI enabled on the account and available AI credits. Builder and Team start with AI off; membership alone does not enable 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.
MCP parity
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.
The MCP tool list depends on the account: generate and iterate_generation
are listed only when AI is enabled. get_generation and get_take remain
available for reading existing drafts. After enabling AI, refresh the client's
tool list or reconnect the MCP server. If a cached tool call returns
ai_subscription_required, stop generation attempts and use the component
search and retrieval workflow above.
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.--takemust 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.
FAQ
What does the 21st-ai skill do?
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 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.
How do I install 21st-ai?
Run npx skills add https://github.com/21st-dev/skill --skill 21st-ai in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/21st-ai/ (personal) or .claude/skills/21st-ai/ (project).
Which AI agents can use 21st-ai?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is 21st-ai safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains 21st-ai?
It is published by 21st-dev in 21st-dev/skill. It has 2,050 recorded installs.
More from 21st-dev/skill
21st-cli-use
21st-dev/skill
Search, install and pull code from the 21st.dev catalog with the 21st CLI (@21st-dev/cli): find React/shadcn components, themes and templates, print a component's code or a theme's CSS, install an item into the project, or generate a new component with 21st AI. Use whenever the user says "search/find a component/theme on 21st", "install our team's Button", "add @user/slug", "pull that component's code", "найди компонент на 21st", "поставь наш компонент", or wants to script catalog access from the shell/CI. Auto-activate when a project has a components.json — search 21st before hand-writing UI.
21st-registry
21st-dev/skill
Publish your own work to 21st.dev and manage it from the terminal with the 21st CLI (@21st-dev/cli): publish a React component to a team library, publish a CSS theme or a template listing, edit / unpublish / delete your published items, list and reopen existing component work, and read/replace your public profile page (bento board). Triggers when the user says "publish/share/upload this to 21st", "залей в наш регистр", "опубликуй компонент/тему/темплейт", "share with team", "make this reusable", "unpublish/edit/delete my component", "change its visibility", "find/open my old component or draft", "найди/открой мой старый компонент или драфт", "add this to my 21st profile/bento", "update my profile page", "обнови мой профиль на 21st", "добавь блок в бенто", "add controls/knobs to my demo", "сделай демо с контролами". For finding and installing existing items use 21st-cli-use; for turning a project's design tokens into a theme use 21st-design-sync.
21st-design-sync
21st-dev/skill
Look at the current project's design (its shadcn / Tailwind CSS variables and color tokens) and publish it to the 21st.dev community as a shareable theme, using 21st publish-theme. Use when the user says "publish my theme", "share our design as a 21st theme", "sync my design to 21st", "turn my globals.css into a theme", "залей наш дизайн темой", "опубликуй тему". This is the 21st equivalent of design-sync: it reads the project's design tokens and syncs them into the public theme library.
21st-ui-build
21st-dev/skill
Build or substantially change production UI using the current project's design context, existing components, and grounded 21st inspiration. Use when implementing a page, section, component, responsive redesign, or visual polish in an existing web project. Trigger for requests such as "build this UI", "implement this screen", "make this page production-ready", or "use 21st to create the interface". Use 21st-ui-explore first when the visual direction is intentionally undecided, and 21st-ui-review for critique-only work.
21st-ui-explore
21st-dev/skill
Explore and compare multiple meaningfully different UI directions grounded in the current project's design system and 21st inspiration. Use when the user wants options, variants, concepts, a redesign direction, visual experimentation, or is unsure how a new interface should look. Trigger for requests such as "show me three directions", "explore alternatives", "what could this page look like", or "generate variants". Do not use for a straightforward implementation with an already-selected direction.
21st-ui-review
21st-dev/skill
Review existing UI against the project's design context, accessibility expectations, responsive behavior, interaction quality, and high-confidence production rules. Use for UI audits, design QA, frontend review, accessibility review, consistency checks, or requests to find and safely fix visual defects. Trigger for requests such as "review this UI", "audit this page", "find design issues", "check responsiveness", or "fix obvious UX problems". Use 21st-ui-build when the request is primarily to create new UI.
Popular frontend & design skills
setup-matt-pocock-skills
mattpocock/skills
Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.
frontend-design
anthropics/skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
hyperframes-animation
heygen-com/hyperframes
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.
prototype
mattpocock/skills
Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.
hyperframes-core
heygen-com/hyperframes
The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.
vercel-react-best-practices
vercel-labs/agent-skills
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.