The #1 way to turn Figma & Stitch into code

Connect Figma or Google Stitch, list your projects, choose one, and convert it to React + Tailwind — all from a visual /mcp modal inside VS Code. No copy-pasting file keys, no native dialogs, no config files to hand-edit. Auth keys land in your OS keychain, never in settings.json.

Beyond design, the same modal connects Anthropic- and OpenAI-compatible gateways (type a base URL, we complete the path) and any custom MCP server over HTTP.

Step 1
Connect

Paste a token or toggle OAuth

Step 2
List

Browse your projects & files

Step 3
Choose

Pick one — it's remembered

Step 4
Convert

Model writes React + Tailwind

At a glance

MCPCategoryAuthEndpointPicker
Anthropic Compatible
CodingAPI key (x-api-key)your-gateway.example.com → /v1/messages—
OpenAI Compatible
CodingAPI key (Authorization: Bearer)your-gateway.example.com → /v1/chat/completions—
Jira (Atlassian)
Project trackingEmail + API token (Authorization: Basic)mcp.atlassian.com/v2/mcp—
Figma
DesignOAuth (browser sign-in) or Personal Access Token — sent as Authorization: Bearerhttps://mcp.figma.com/mcp
Stitch
DesignAPI key (X-Goog-Api-Key)https://stitch.googleapis.com/mcp
Custom Server
CustomPick the header: x-api-key, Authorization (Bearer), or Other…your-mcp.example.com → /mcp—

Each MCP, in detail

Anthropic Compatible

Coding

Route coding requests through your own Anthropic-compatible gateway — LiteLLM, AWS Bedrock-style gateways, or any /v1/messages endpoint. Paste the base URL; the modal appends /v1/messages for you.

What it does

  • Type just the base URL — the modal auto-appends /v1/messages and shows a live preview of the full URL
  • Sends the raw key in the x-api-key header (Anthropic convention)
  • Test connection runs tools/list before you commit

How to connect

  1. 1Pick Coding → Anthropic Compatible in the modal.
  2. 2Type your base URL (e.g. https://litellm.mycompany.com).
  3. 3Watch the preview line: base + /v1/messages.
  4. 4Paste your upstream API key.
  5. 5Click Test connection, then Save.

Tools the model calls

  • Depends on the gateway
  • Standard tools/list registry

OpenAI Compatible

Coding

Connect any OpenAI-style endpoint — Ollama, vLLM, LM Studio, or hosted OpenAI-compatible APIs. Paste the base URL; the modal appends /v1/chat/completions and sends the key as a Bearer token.

What it does

  • Type just the base URL — the modal auto-appends /v1/chat/completions with a live preview
  • Sends the key as Authorization: Bearer — works with Ollama, vLLM, LM Studio, hosted APIs
  • Test connection verifies reachability before you save

How to connect

  1. 1Pick Coding → OpenAI Compatible.
  2. 2Type your base URL (e.g. http://localhost:11434 for Ollama).
  3. 3Watch the preview: base + /v1/chat/completions.
  4. 4Paste your API key (sent as Bearer).
  5. 5Click Test connection, then Save.

Tools the model calls

  • Depends on the gateway
  • Standard OpenAI tools if exposed

Jira (Atlassian)

Project tracking

Your Jira projects, epics, stories, tasks and issues — through Atlassian's official MCP server. Ask "show issues assigned to me" or walk an epic down to its stories, without leaving the chat.

What it does

  • List the Jira projects your account can see
  • Find your assigned work — "show issues assigned to me"
  • Walk the hierarchy: epics in a project, then the stories and tasks under one
  • Read any single issue by key (PROJ-87)
  • Scope is chosen per question, not per connection — no project picker to configure
  • You only ever see what your Atlassian account can already see

How to connect

  1. 1Create an API token at id.atlassian.com → Security → API tokens.
  2. 2Pick Project tracking → Jira (Atlassian) in the modal.
  3. 3Enter your Atlassian account email — it is half of the credential, not a setting.
  4. 4Paste the API token. Together they become Basic base64(email:token).
  5. 5Click Test connection, then Save.

Tools the model calls

  • listJiraProjects
  • searchJiraIssuesUsingJql
  • getJiraIssue
  • getAccessibleAtlassianResources

Figma

DesignHas project picker

Connect your Figma account, browse teams → projects → files, pick the file you want, and let the model convert it to React + Tailwind. The file picker runs inside the modal using Figma's REST API — no copy-pasting file keys.

What it does

  • Connect: paste a Personal Access Token, or toggle OAuth for the browser flow
  • List: browse teams → projects → files right inside the modal
  • Choose: pick a file — its file_key is saved with the server and stashed in the starter
  • Convert: the model reads tokens, components, frames, and screenshots, then writes matching code

How to connect

  1. 1Pick Design → Figma in the /mcp modal.
  2. 2Get a Personal Access Token: figma.com → Settings → Personal Access Tokens.
  3. 3Paste the token (or toggle 'Use OAuth' for the SDK browser flow).
  4. 4Click 'List my teams' → pick a team → project → file.
  5. 5Click Save — the file_key is persisted and pre-filled in the starter message.

Tools the model calls

  • whoami
  • get_metadata
  • get_screenshot
  • create_new_file
  • generate_figma_code
  • + 18 more

Stitch

DesignHas project picker

Connect Google Stitch, list your projects from inside the modal, pick one, and turn its screens into working code. Because Stitch exposes a list_projects tool, you can re-list projects mid-conversation without leaving the chat.

What it does

  • Connect: paste your X-Goog-Api-Key
  • List: click 'Browse projects' — the modal calls list_projects over MCP
  • Choose: pick a project — its project_id is saved and stashed in the starter
  • Convert: the model reads project screens and generates React + Tailwind code

How to connect

  1. 1Pick Design → Stitch in the /mcp modal.
  2. 2Get an API key from Google's Stitch console (X-Goog-Api-Key).
  3. 3Paste the key in the modal.
  4. 4Click 'Browse projects' — the modal calls list_projects via MCP.
  5. 5Pick a project — its project_id is persisted and pre-filled in the starter.
  6. 6Click Save.

Tools the model calls

  • list_projects
  • get_project
  • generate_screen
  • enhance_prompt

Custom Server

Custom

Any MCP server reachable over HTTP — internal tools, your own infrastructure, or community servers. Paste the base URL, pick the auth header from a dropdown, and go.

What it does

  • Works with any spec-compliant HTTP JSON-RPC MCP endpoint
  • Auth header dropdown — x-api-key (raw), Authorization (Bearer), or a custom header you type
  • Base URL + /mcp auto-append with a live preview, same as the Coding presets

How to connect

  1. 1Pick Custom → Custom Server.
  2. 2Type your base URL — must be http(s)://. The modal appends /mcp.
  3. 3Pick the auth header from the dropdown (or choose Other… to type your own).
  4. 4Paste the API key.
  5. 5Test connection to verify, then Save.

Tools the model calls

  • Whatever the server exposes

How /mcp works

Once you've done it for one preset, the others are muscle memory. The modal inside the chat webview is event-driven — no native dialog stacks, no shell-out.

  1. Type /mcp in any chat

    A visual modal opens inside the chat webview — no native dialog stacks, no shell-out. Existing servers appear at the top for one-click edit or delete.

  2. Pick a server from one screen

    All presets are grouped by category (Coding / Design / Custom) on a single scrollable list. Click Figma, Stitch, a compatible gateway, or Custom Server.

  3. Fill the form — URL auto-completes

    For gateways you type just the base URL and the modal appends the right path (/v1/messages, /v1/chat/completions, /mcp) with a live preview. For Design MCPs, click Browse to list and pick a project or file.

  4. Test connection, then Save

    Test runs a real tools/list call. Save writes settings.json (the key goes to your OS keychain, never in plain text) and drops a ready-to-send starter message into the chat input.

  5. Pick the model that drives the tools

    MCP servers supply tools; the model decides when to call them. Choose it in the chat model picker — the connection itself stores no model. If you drive a gateway through the API instead, pass a provider-prefixed id such as anthropic:claude-opus-5 or google:gemini-3.1-pro. An id that is not in the catalog is rejected with 400 Unknown model, so read GET /v1/models rather than guessing.

What happens after you connect a Design MCP

Once you Save the modal, the file_key / project_id you picked is stashed in a draft starter message pre-filled in the chat input. Press Enter. From there the flow is deterministic, event-driven, and runs the same way every time.

Figma flow

8 steps
  1. Step 01UserSaves the modal

    Saved in /mcp with file_key 'abc123XYZ' already in the starter.

  2. Step 02UserSends the starter

    Presses Enter. Model receives the prompt + pre-baked file_key.

  3. Step 03ModelCalls whoami

    Validates the OAuth / PAT bearer against the Figma server.

  4. Step 04Toolget_metadata

    Reads frame tree, tokens, components for the chosen file_key.

  5. Step 05ModelReads existing code

    Read tool on src/components to ground the conversion in real code.

  6. Step 06ModelWrites the code

    Generates React + Tailwind components matching the design.

  7. Step 07ToolRuns typecheck

    npm run typecheck on the changed files — fixes its own mistakes.

  8. Step 08ModelReports back

    Lists the files changed, waits for next instruction.

See the actual tool call sequence
▶ mcp.call("whoami")
▶ mcp.call("get_metadata", { file_key: "abc123XYZ" })
▶ mcp.call("get_screenshot", { file_key: "abc123XYZ", node_id: "1:2" })
● Read src/components/Button.tsx
● Write src/components/Button.tsx (React + Tailwind)
● Bash npm run typecheck

Stitch flow

8 steps
  1. Step 01UserSaves the modal

    Saved in /mcp with project_id 'proj_def' in the starter.

  2. Step 02UserSends the starter

    Model receives the prompt + pre-baked project_id.

  3. Step 03Toolget_project

    Reads project metadata, screens, and existing screen list.

  4. Step 04UserPicks a screen

    Asks the model to convert or create a specific screen.

  5. Step 05Toolgenerate_screen

    If creating new: returns a screen spec from the prompt.

  6. Step 06ModelReads existing code

    Read tool on src/ — same pattern as Figma.

  7. Step 07ModelWrites the code

    React + Tailwind components matching the screen.

  8. Step 08ModelReports back

    Lists the files changed, waits for next instruction.

See the actual tool call sequence
▶ mcp.call("get_project", { project_id: "proj_def" })
▶ mcp.call("generate_screen", { project_id: "proj_def", prompt: "login screen" })
● Read src/auth/Login.tsx
● Write src/auth/Login.tsx (React + Tailwind)
● Bash npm run typecheck

Why Figma and Stitch flow differently

Figma
Figma's MCP server has 23 tools but none list your account's files. The 3-step picker (teams → projects → files) runs once at setup timevia Figma's REST API. After Save, the file_key is in the starter message; switching files later requires a pasted URL.
Stitch
Stitch's MCP has a list_projects tool that works mid-conversation. The picker runs once at setup, but the user can re-list projects anytime without leaving the chat. project_ids flow through every tool call as arguments.

Honest limitation

For Figma, the picker uses the REST API and requires a Personal Access Token. OAuth-only users get the URL-paste workflow. For Stitch, the API key is always required — Google doesn't offer an OAuth path for this MCP. Both approaches are documented in the per-MCP setup steps above.

Security guarantees

Keys never touch settings.json

Every auth token goes into VS Code's encrypted SecretStorage. The settings file holds only a placeholder.

URL scheme validated

MCP and Figma REST URLs are checked for http/https before any network call. javascript: and file:// are blocked.

Scope-symmetric writes

Save writes the mcpServers config to the scope where it already lives (Workspace or Global).

No fallback writes

If SecretStorage is unavailable and you have a real key, the save is REFUSED — never silently written to plain text.

Edit without re-entering keys

Click an existing server to edit it. Leave the key field blank and the stored secret is preserved — only URL or scope changes are written.

One-click delete

Delete a server from the modal — the settings entry AND its SecretStorage key are both removed. A confirmation strip prevents accidents.

Browse works on servers we've never seen

There is no single MCP convention for listing things — servers use list_files, list_projects, get_files, search_files or list_designs, and return them as a bare array, a wrapped object, or arbitrary key names. The modal probes for a listing tool (falling back to any list_* tool it finds) and normalises whatever comes back, so Browse works against custom servers, not just Figma and Stitch.

Try the MCP modal

Install the VS Code extension, open a chat, type /mcp. Pick a category, pick a server, save.