Install with one command and your coding agent has the full 12ui design pipeline: search real reference designs, generate candidate directions, scope the deliverable, branch the winner into every remaining screen, convert each page into production code, and make that branch clickable. One skill - 12ui-design - installs into Claude Code, Codex, Grok, Cursor, Copilot, and Antigravity and covers all of it.
The skill exists because code-first agents tend to converge on safe, generic visual defaults. Grounding generation in real corpus references expands the design space; converting the selected image preserves that direction with near-pixel fidelity instead of a manual recreation.
Install
The ChatGPT plugin is an optional alternative.
Install pluginWith Node (macOS, Linux, or Windows):
npx -y @12ui/design skill installOr the npm-free installer for macOS and Linux:
curl -fsSL https://12ui.com/install.sh | shEither route does the same three things:
- Copies
12ui-designinto every agent detected on the machine -~/.claude/skills/12ui-design/for Claude Code, each~/.codexprofile'sskills/12ui-design/directory, and the equivalent skills directory for Grok, Cursor, Copilot, and Antigravity. A recognized olddesignbundle is retired during upgrade; locally modified old files are preserved. An agent that is not installed is skipped with a clear line, never an error. - Pins the
12uiCLI under~/.local/share/12uiwith a launcher at~/.local/bin/12ui;XDG_DATA_HOMEkeeps both under its12uidirectory. The bundle is SHA-256 verified and installs are atomic with rollback. - Opens a browser device sign-in and mints a personal API key scoped to
design.convertanddesign.corpus.retrieve, stored at~/.config/12ui/credentials.jsonwith 0600 permissions.
Re-running either command updates everything in place; an unchanged skill reports already_current. For CI, --api-key, TWELVE_UI_API_KEY, and --skip-auth bypass the browser flow.
If you want the binary and none of this, npx -y @12ui/design cli install or curl -fsSL https://12ui.com/install-cli.sh | sh installs just the CLI - no skills, no sign-in - as described on the CLI page.
What the skill covers
Route and scope
Marked required for all visual interface tasks (UI, web, mobile). It routes the request, and before anything is bought it classifies the deliverable as one fold, one full page, or a multi-page app. Finished screenshots go straight to conversion; tiny edits stay code-only.
Search
Searches the 12ui Design Corpus from a rough concept and returns a ranked, diverse set of real reference images — the step to use on its own when the references are the deliverable.
Draft
Builds one corpus-grounded draft run and a stable local generation manifest. The caller dispatches that manifest through 12ui image generate-batch; each candidate is attempted at most once, and resume reuses settled work rather than buying it again.
Branch
Required whenever the deliverable is more than one viewport - a full page, a multi-route site, or an app with several states. One command, 12ui branch execute, expands the approved design into the 2-8 screens the server plans across slots a-h, dispatches each once its dependency and footer gates clear, and converts each page as one ordered package. Add --prototype to turn the exported branch into a verified clickable surface with plan-backed navigation, content, and honest holding pages. Not for a single above-the-fold screen.
Convert
Converts a PNG, JPEG, or WebP into a structured LayerDoc, then exports responsive HTML, web or native app code, PDF, PSD, PPTX, Sketch, SVG, PNG, JPEG, or WebP.
How a design run works
- Route - a finished screenshot goes directly to conversion; a small visual edit stays code-only; a rough brief or major redesign runs the full workflow.
- Scope - before anything is bought, the agent classifies the deliverable as one fold, one full page, or a multi-page app, and that choice decides the rest of the run.
- Search -
12ui corpus inspire --query "…" --count 4pulls reference images from the corpus into the run directory. A text query runshedgeby default, which spreads the first references across distinct directions and carries retrieval evidence; preserve its returned order.--mode direct|balanced|adventurerselects the others. A--reference-imagesearch needs one of those instead, because the corpus refuses a hedge query that carries an image. - Generate -
12ui draftclaims one hosted run, dispatches each candidate slot once, and downloads A–D into the run directory. The caller supplies only 12ui authentication; provider credentials stay on the service. - Select - the agent presents the real candidate images, records the user's choice and rationale in the working context, and passes that exact image onward.
- Convert - one fold goes straight through
/api/v1/convertto a LayerDoc and its export; anything larger runs12ui branch executefor the remaining screens and converts each page as one ordered package. - Prototype - for an interactive deliverable,
--prototypebuilds after export;12ui prototype <run-dir>adds it to an existing branch. Deterministic facts override the cheap four-way per-screen labels, and broken interactions stop publication. - Integrate and verify - start from the generated prototype, merge application-specific behavior and data, run it, and compare against the design at multiple viewports.
Working with the skill
Once installed, the skill triggers automatically on visual work, or you can invoke it directly:
Use $12ui-design to create a new homepage for this projectSearch the design corpus for references for a calm analytics dashboardTurn mockup.png into a responsive page in this codebaseExpand the approved homepage into the rest of the site
Command reference
12ui skill install|status|print|remove
12ui auth login|status|logout
12ui corpus inspire --query "…" --out-dir DIR # resume with: 12ui corpus resume
12ui draft --concept "…" --candidates 4
12ui next <run-dir> --wait
12ui branch execute --start <image> --scope page|site --convert html --prototype --concept "…"
12ui prototype <run-dir>
12ui convert <image> --output layerdoc|html|html_fixed|svg|png|jpg|webp|pdf|psd|pptx|sketch
12ui convert package --manifest FILE --out-dir DIR
12ui convert <conversion-id> --output html_fixed,svg,pdf --out-dir DIR
12ui capabilities
12ui mcp # exposes the design.convert MCP tool over the same APIEvery command, flag, and default is on the CLI page.
Prefer hosted tools and platform-managed sign-in? Connect the six-tool remote MCP server without installing the skill.
Keys and quotas
Sign-in mints a personal API key scoped to design.convert and design.corpus.retrieve, stored at ~/.config/12ui/credentials.json (0600). Revoke it any time from the CLI or at login.justevery.com.
Accounts get a free daily allowance - 50 fast, 20 standard, and 2 pro conversions, 200 exports, 2000 corpus queries, and 20 Draft or Branch images per UTC day. Past it, the same operations continue from prepaid wallet credit, and idempotent replays are never double-counted. See pricing for the per-unit rates.
See the CLI reference for every command and flag, the API documentation for the full HTTP contract, or use /convert for the in-browser studio.
Updating and removing
Re-run either install command to update the skill and CLI in place. 12ui skill remove uninstalls 12ui-design; credentials are retained so a later reinstall needs no new sign-in.