v-1v-1.designdescribe it / get your v-1
for coding agents beta

Use the engine from your agent.

Connect Claude Code, Codex or Cursor to v-1.design over MCP. Your agent designs on your account, the finished screens + design system are pushed back into the chat, and it keeps building your real app from there — no copy-pasting, no polling.

what's possible
Create designs

Ask in plain English — “a calm habit tracker”. It plans, draws, and returns real TSX screens + a shadcn/Tailwind design system.

Add screens

Grow a design — “add a Settings screen” — and it stays on-brand with the shared nav and tokens.

Pull the code

Fetch any design's globals.css, DESIGN.md and per-screen TSX whenever you need it.

Keep building

The handoff tells your agent exactly how to wire routing, state and data against the design.

Push, not polling. A generation runs on the engine and is streamed back to your agent in a single tool call — it never hammers an API in a loop.

connect in 3 steps
1
Get an API key

In the studio, open Account → Developer access and Generate key. Copy it — it's shown once. It scopes the agent to your account (your designs, your credits).

Open studio
2
Connect your agent

Drop your key into one of these:

claude code
# over HTTP (a URL):
claude mcp add --transport http v1design https://engine.v-1.design/mcp \
  --header "Authorization: Bearer <your-key>"

# or over stdio (local npx):
claude mcp add v1design --env V1_DESIGN_API_KEY=<your-key> \
  --env V1_DESIGN_API_URL=https://engine.v-1.design -- npx -y v1design-agent
codex
# ~/.codex/config.toml  (stdio)
[mcp_servers.v1design]
command = "npx"
args = ["-y", "v1design-agent"]
env = { V1_DESIGN_API_KEY = "<your-key>", V1_DESIGN_API_URL = "https://engine.v-1.design" }
cursor
// .cursor/mcp.json  (HTTP)
{
  "mcpServers": {
    "v1design": {
      "url": "https://engine.v-1.design/mcp",
      "headers": { "Authorization": "Bearer <your-key>" }
    }
  }
}

MCP endpoint: https://engine.v-1.design/mcp

3
Ask it to design

In your agent, just ask. For example:

> create_design("a calm habit tracker with streaks and stats")
> get_design("<project-id>")   // pull it back anytime
tools your agent gets
create_design(brief, target?, mode?)

Generate a new design from a brief. Blocks, streams progress, returns the finished bundle in one call.

add_screen(projectId, name, surface?)

Add a new on-brand screen to an existing design.

get_design(projectId, format?)

Pull a design's tokens + every screen's TSX. A single read — not a loop.

get_screen_code(projectId, screenName)

Get the TSX source for one screen.

list_designs()

List the designs on your account.

wait_for_design(projectId)

Attach to an in-flight generation and receive it here when it finishes.

what comes back

Every design hands over a complete, ready-to-build bundle:

  • app/globals.css — the design system as Tailwind v4 / shadcn CSS variables (the single source of truth for color, radius, fonts).
  • screens/*.tsx — one React/TSX component per screen, consuming those tokens.
  • DESIGN.md + design-tokens.json — the system as docs + portable JSON.
  • AGENTS.md — instructions telling your agent exactly how to continue (below).
it doesn't just hand off — it tells the agent how to continue

From design to a real app — on any stack

The screens are a visual reference (web React + Tailwind). The shipped AGENTS.md tells your agent how to adapt them to your target — your agent owns routing, state, data and the implementation.

web · react + tailwind

Use the screens almost directly.

  1. 1Drop in globals.css. Import it once. Use the token classes (bg-background, text-primary, rounded-lg) — never hard-code colors or re-declare tokens.
  2. 2Fonts + shared chrome. Add the two Google fonts from DESIGN.md; lift the nav / sidebar / tab bar into ONE reused component, byte-identical per screen.
  3. 3One route per screen. Use each screen's TSX as the markup, then wire real data, state and handlers. Keep the token classes intact.
react native · flutter · swiftui

Tailwind won't translate — rebuild from the look & feel.

  1. 1Mirror the tokens into your theme. Read design-tokens.json for the palette, type and radius (convert OKLCH → hex/rgb if needed) → RN StyleSheet / NativeWind, Flutter ThemeData / ColorScheme, or SwiftUI Color / Font.
  2. 2Rebuild each screen natively. Read the screen TSX for layout, hierarchy, spacing, composition and copy — then recreate it with native primitives (View/Text/FlatList, Column/Row, VStack/HStack). Match the structure; don't paste Tailwind classes.
  3. 3Stay consistent. Build the shared chrome once and reuse the same tokens / spacing / type across every screen.

Not on web? Your agent reads design-tokens.json + the screen TSX and re-creates the UI in your framework — same palette, type, spacing and layout, native components.

Ready to wire it up?

Generate a key in the studio and connect your agent in a minute.

Open studio