12ui Skill

@12ui/design · Claude Code · Codex

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 plugin

With Node (macOS, Linux, or Windows):

npx -y @12ui/design skill install

Or the npm-free installer for macOS and Linux:

curl -fsSL https://12ui.com/install.sh | sh

Either route does the same three things:

  • Copies 12ui-design into every agent detected on the machine - ~/.claude/skills/12ui-design/ for Claude Code, each ~/.codex profile's skills/12ui-design/ directory, and the equivalent skills directory for Grok, Cursor, Copilot, and Antigravity. A recognized old design bundle 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 12ui CLI under ~/.local/share/12ui with a launcher at ~/.local/bin/12ui; XDG_DATA_HOME keeps both under its 12ui directory. 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.convert and design.corpus.retrieve, stored at ~/.config/12ui/credentials.json with 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 4 pulls reference images from the corpus into the run directory. A text query runs hedge by default, which spreads the first references across distinct directions and carries retrieval evidence; preserve its returned order. --mode direct|balanced|adventurer selects the others. A --reference-image search needs one of those instead, because the corpus refuses a hedge query that carries an image.
  • Generate - 12ui draft claims 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/convert to a LayerDoc and its export; anything larger runs 12ui branch execute for the remaining screens and converts each page as one ordered package.
  • Prototype - for an interactive deliverable, --prototype builds 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 project
  • Search the design corpus for references for a calm analytics dashboard
  • Turn mockup.png into a responsive page in this codebase
  • Expand 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 API

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