12ui Skill

@12ui/design · Claude Code · Codex

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 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.
  • 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 export derives 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 prototype makes the result clickable.
  • Improve - edits an existing application toward a better design, or aligns an implementation to its approved image.
  • Search - 12ui corpus inspire returns 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 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 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 tools

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.

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.