SketchXFlow MCP

Design websites, apps, logos, emails and ad creatives from Claude Code, Cursor or Codex — brand-coherent designs with exportable code — and brief SketchXFlow's development team from your agent. Install: npx @sketchxflow/mcp install

View on sketchxflow.comTry this MCPSponsored

Documentation

Install in three steps.

Do these in order. The installer handles every app at once, so you only do this once per computer.

  1. 1

    Get your API key

    Your key connects the app to your account, so designs land in your projects. Open Account → API keys and click Generate key. Generate an API key It's shown only once — copy it somewhere safe.
  2. 2

    Run the installer

    Open a terminal (any folder is fine), paste this command and press Enter. 
    $ npx @sketchxflow/mcp install
    What the installer asks
    1. a Finds your apps Lists the AI apps it found on this computer.
    2. b You pick Choose which ones to connect.
    3. c Paste your key From step 1. It writes each app's settings for you.
  3. 3

    Restart your app and try it

    Fully quit and reopen the apps you connected. Then ask your agent for a design, for example: “Use SketchXFlow to design a pricing page for my app, then give me the code.” You're set up when your agent starts calling sketchxflow_… tools.

Optional

Prefer to set it up by hand?.

Skip this if the installer worked. Otherwise pick your app below and follow its three steps.

Claude Code adds servers from the terminal. Run this, replacing sk_live_… with your key:

$ claude mcp add sketchxflow -s user -e SKETCHXFLOW_API_KEY=sk_live_… -- npx -y @sketchxflow/mcp

Then start a new Claude Code session.

What you get

What your agent can do.

Once connected, your agent gets these tools. A typical flow is ask → design → get the code → edit. Every design is a normal SketchXFlow project, so you can also open it on the web.

Asks questionsFree

Interviews you to build the brief, then hands back a ready design prompt.

sketchxflow_clarify

Designs a page

A new project, or a brand-consistent page added to an existing one.

sketchxflow_design_page

Edits a section

Changes one section by sentence — brand-locked, so nothing else drifts.

sketchxflow_edit

Hands you the code

A page's full HTML + Tailwind, for your agent to implement in your stack.

sketchxflow_get_code

Checks a project

Status, preview link and page list for a project.

sketchxflow_get_project

Lists your projects

Everything in your SketchXFlow account.

sketchxflow_list_projects

Development services — SketchXFlow builds it for you

The same package also talks to our development team: your agent runs the requirements interview, gets the fixed-price proposal and the links to accept and pay. All free to call.

Starts a project with our teamFree

Opens the requirements interview with the AI consultant and returns its first question.

sketchxflow_services_start

Talks to the consultantFree

One turn at a time — reply, next question with options, and the live estimate from the public price list.

sketchxflow_services_say

Reads the requirementsFree

The requirements document as it stands, and whether it's ready to finalise.

sketchxflow_services_requirements

Finalises and prices itFree

Freezes the requirements and returns the proposal link. Accepting and paying happen on the website, signed in.

sketchxflow_services_finalise

Lists your invoicesFree

Every invoice on a project with its status and the page to pay it — UPI, cards, EMI, net banking, bank transfer.

sketchxflow_services_invoices

Lists your service projectsFree

Your development-services projects and their links.

sketchxflow_services_projects