1DesignToolDownload

Agents · since v1.0.0

Claude Code design tool

Point 1DesignTool at your Claude Code install and it becomes your designer — writing HTML, CSS and JS into a project folder you own, with a live preview and a design check before anything counts.

DownloadRead the docs

Why it matters

Claude Code is already strong at front-end code, but running it from a terminal leaves you reading diffs to judge design. The studio wraps the same CLI in a loop built for looking: a brief turns into files, the preview renders them as they land, and steering — pick, comment, tweak — happens on the picture, not in a prompt.

How it works

  1. 1Connect onceSettings → Agents detects the claude binary on your PATH. No API keys to copy: the app spawns the CLI you already pay for.
  2. 2Brief it like a studio, not a terminalWrite the brief in the composer, pick a template and a direction, and the run starts. The design kit ships into the project so the agent knows the rules it's being judged by.
  3. 3Watch it buildFiles appear in the project tree as the agent writes them and the preview re-renders. The transcript streams beside the picture, so you can see what it decided and why.
  4. 4Steer on the resultPick an element and comment, drag a tweak control, or run another variant. Each steer is its own verified turn — history keeps every step.

Capabilities

  • Drives the real claude CLI as a headless subprocess — your subscription, your model choice
  • Streams the agent's transcript next to the live preview while it works
  • Design kit gives Claude the direction, tokens and gate criteria for the project
  • Pick-and-comment steering sends the clicked element's context with your note
  • Quality modes (Fast, Reviewed, Council) decide how much review each turn gets
  • Every turn lands in history — fork or restore any point

Without it

Prompt in a terminal, run a dev server by hand, screenshot the result into a chat, repeat — and the 'design' is whatever the diff happened to look like.

With 1DesignTool

Brief once, watch the preview build itself, steer on the picture, and keep the version you like — all in one window.

FAQ

Do I need a separate API key for Claude Code?

No. 1DesignTool spawns the Claude Code CLI you already installed, so it uses your existing login and quota. Nothing is proxied through our servers.

Which Claude model does it use?

The models your CLI install offers — the app reads the catalog Claude Code reports and lets you pick per project, including effort level and permission mode.

Can I use it without Claude Code?

Yes — the studio drives any of the supported coding CLIs the same way: Codex, Cursor Agent, Gemini, Devin and others. Claude Code is one pick in the list.

Does it write into my own repos?

Only where you point it. Studio projects live in their own folder; codebase mode adopts a repo explicitly, defaulting to an isolated worktree branch so your checkout is never written to.

In the docs

Related features

AgentsYour coding agent is the designerClaude Code, Codex, Cursor Agent, Gemini, Devin and eleven more — whichever CLI you trust, 1DesignTool drives it as a designer and holds its output to the same visual bar.Read more →SteeringA design kit the agent has to passThe gate is the difference between 'generated' and 'shipped': kit checks run on every turn, and in Reviewed or Council mode independent critics judge the frozen evidence before the result counts.Read more →Design systemsAI design system generatorPick one of the 17 built-in directions — Swiss grid to Night console — or save your own. Either way the design kit compiles it into the rules, tokens and checks the agent designs under.Read more →

Design with the agent you already have.

Free to try, buy once — the studio and your own coding CLIs do the rest.

Download