Install with one command and your coding agent can explore designs in a workspace you choose in, branch the winner into every remaining screen, convert each page into production code, improve an existing app, and search real reference designs. 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. - Needs no account: authentication is left unchanged, and hosted commands ask for a 12ui sign-in only when they are used.
Re-running either command updates everything in place; an unchanged skill reports already_current. For CI, --api-key and TWELVE_UI_API_KEY supply a key without 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
- Design workspace - a new screen or page you will choose among starts as a brief. The first round is twelve options in three groups, each drawn from its own layout sketch; you pick one in the workspace page (in the Codex app it shows in the conversation), and Build this hands the choice back to the agent.
- Convert - turns a finished PNG, JPEG, or WebP into editable HTML/CSS and assets. On a machine with Codex signed in it runs locally with no 12ui account; otherwise on the 12ui service.
12ui exportderives assets, PNG, JPEG, WebP, PDF, or React from the saved run. - Branch - expands one approved design into a full page or a small site, converts each page, and
12ui prototypemakes the result clickable. - Improve - edits an existing application toward a better design, or aligns an implementation to its approved image.
- Search -
12ui corpus inspirereturns ranked reference images from the 12ui Design Corpus, free without an account, for work where the references themselves are the deliverable. - 3D scene - rebuilds a design image as a live Three.js scene.
Finished screenshots go straight to conversion and tiny edits stay code-only. 12ui <command> --help prints every flag.
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 update
12ui corpus inspire --query "…" --out-dir DIR # resume with: 12ui corpus resume
12ui workspace open --concept "…" --wait
12ui draft --concept "…"
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 # local MCP server: workflow, convert, corpus, status and workspace toolsEvery 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.
Design Corpus search is free without signing in: 1,000 anonymous queries per UTC week, or 2,000 with an account. Direct, Balanced, and Adventurer support anonymous search; Hedge requires account authentication and is also free. Logo search, reference images, and searches using a reference image are included. Search stops at its limits and never uses wallet credit.
Accounts also get a free weekly allowance of 50 fast, 20 standard, and 2 pro conversions, 200 exports, and 20 Draft or Branch images per UTC week (Monday 00:00 UTC to the next Monday). Those operations can continue from prepaid wallet credit after their allowances, and idempotent replays are never double-counted. See pricing for search limits and the paid operations' 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.