@sketchxflow/mcp

@sketchxflow/mcp

Design, extend, edit, and implement websites and apps with SketchxFlow — directly from Claude Code, Codex, Cursor, Claude Desktop, Windsurf, or any MCP client.

Install (one command, all your agents)

npx @sketchxflow/mcp install

An interactive wizard detects your installed MCP clients (Claude Desktop, Claude Code, Cursor, VS Code, Windsurf, Codex), lets you pick which to set up, asks for your API key once, and writes each client's config. Restart the clients it set up and you're done.

API key: sign in at sketchxflow.com → Account → API keys → Generate key.

Manual config (any client)

{
  "mcpServers": {
    "sketchxflow": {
      "command": "npx",
      "args": ["-y", "@sketchxflow/mcp"],
      "env": { "SKETCHXFLOW_API_KEY": "sk_live_…" }
    }
  }
}

(VS Code uses a "servers" key; Codex uses [mcp_servers.sketchxflow] in ~/.codex/config.toml — the wizard handles all of these.)

Tools

Tool	What it does
sketchxflow_clarify	Interview the user (free) to build the brief before designing — returns the next question + a ready-to-use design_prompt.
sketchxflow_design_page	Generate one page. Omit project_id → new project; pass one → add a brand-consistent page to it.
sketchxflow_design_creative	Generate a fixed-canvas creative — flyer, poster, Instagram post/story, X/LinkedIn post, or YouTube thumbnail. Returns a preview + rendered PNG.
sketchxflow_edit	Natural-language change to one page section/component (brand-locked).
sketchxflow_experimental_start	Open an Experimental Design session — one surface, built a section at a time and each section stacked layer by layer. Free; returns the section plan + the first layer proposal.
sketchxflow_experimental_discuss	One free turn with the art director: relay what the user said, get a revised proposal. No rendering, no coins.
sketchxflow_experimental_layer	Stack the next layer (the step that renders and bills). count runs several back to back — only with the user's explicit go-ahead.
sketchxflow_experimental_stack	Read the build — which sections exist, what's stacked in each, what's next — or revert_to to peel layers back off.
sketchxflow_get_code	Return a page's full HTML (Tailwind inline) so the agent can implement/adapt it in your stack.
sketchxflow_get_image	Return a rendered PNG of a page so the agent can see how the design looks and visually verify it.
sketchxflow_get_project / sketchxflow_list_projects	Status / list.
sketchxflow_list_models	List the LLM models you can pass as model, with cost/speed and whether your plan can use each one. Free.

How a coding agent uses it

• (optional) sketchxflow_clarify — ask the user what they want, one question at a time.
• sketchxflow_design_page — create the project + first page (or add a page).
• sketchxflow_get_code — pull the HTML and re-implement it in the user's framework.
• sketchxflow_edit — tweak a section; get_code again.

Building it a layer at a time (Experimental Design)

For a surface the user wants to shape with you rather than receive finished, the layered flow mirrors how a designer actually works. A page is a set of sections, and each section is a stack:

SECTION: Hero
  05  effect     grain + vignette over the whole stack
  04  media      bean photo, bleeding off the right edge
  03  content    headline + body + CTA        ← the only layer in flow
  02  shape      ochre panel, offset, clipped
  01  backdrop   charcoal ground, full bleed

Then, once every section is built, whole-page passes (palette, type, rhythm, surface, motion, detail) make the separately-built sections agree with each other.

• sketchxflow_experimental_start — decides the sections and proposes the first layer. Free.
• Put the proposal to the user. They steer it (sketchxflow_experimental_discuss, free) or approve it.
• sketchxflow_experimental_layer — stacks that one layer and returns what it put down plus the next proposal. Repeat from step 2. The first call always stages the page (the empty section shells) whatever else you pass.
• sketchxflow_experimental_stack — the build so far; revert_to peels layers back off (free — each was snapshotted when it went down).

Only step 3 costs coins, and it's charged per layer: a section layer is small and quick because it rewrites only that section, while a whole-page pass rewrites the document and costs more. How deep the build goes stays the user's call. If they say "just build the rest", pass count — but only on that explicit go-ahead, because every layer in the run is charged.

Choosing the model (paid plans)

Every tool that runs an LLM design call — sketchxflow_clarify, sketchxflow_design_page, sketchxflow_edit, sketchxflow_design_creative, sketchxflow_design_email, sketchxflow_launch_kit, sketchxflow_create_logo, sketchxflow_create_animation, sketchxflow_experimental_start, sketchxflow_experimental_discuss, sketchxflow_experimental_layer — takes an optional model.

Call sketchxflow_list_models for the authoritative list. It answers on every plan (free included) and reports, per model, the description, speed, relative cost, coin rates, and whether your plan may actually use it — so the agent can explain an upgrade instead of just failing. The table below is a snapshot:

model	Notes
gemini-3-flash-preview	Default. Balanced quality and speed.
gemini-3.1-flash-lite	Fastest and cheapest; good for quick edits.
gemini-3.5-flash-lite	Lite tier, slightly stronger than 3.1 lite.
gemini-3.7-flash	Strongest layout/code quality per coin.
gemini-3.6-flash	Previous Flash generation; pin it for consistency.
gemini-3.5-flash	Older Flash tier; costs more than 3.7 for less.
gemini-3.1-pro-preview	Most capable, 2M context; slowest and priciest.

Omit model and your account's default is used — that's the normal path and costs nothing extra. Passing it is a paid-plan feature (Starter and above); on a free plan the call fails with a message telling the agent to drop model and retry. Stronger models cost more coins (billing is metered on real usage).

This selects the text model only — it never affects AI image generation, and the read-only tools (sketchxflow_get_code, sketchxflow_get_image, sketchxflow_get_project, sketchxflow_list_projects, sketchxflow_list_models) and sketchxflow_add_image don't take it.

Configuration

Env var	Required	Default	Notes
SKETCHXFLOW_API_KEY	yes	—	Your sk_live_… key.
SKETCHXFLOW_API_URL	no	https://sketchxflow.com	Override the API base.

Develop

npm install && npm run build
node dist/index.js            # MCP server (stdio)
node dist/index.js install    # setup wizard

MIT licensed.