Windframe MCP Server

Connect Claude Code, Codex, Cursor, OpenCode, VS Code and other MCP clients to Windframe's design systems for high-quality Tailwind CSS UI generation.

Windframe MCP is a Model Context Protocol server that gives your AI coding agent access to Windframe's design systems. Connect it once and any MCP-capable client (Claude Code, Codex, Cursor, OpenCode, VS Code, Antigravity, and others) can generate or convert Tailwind CSS interfaces using real design tokens, components, and color guidance.

🔑

You get 3 free MCP calls after signing in. Windframe Pro and Lifetime accounts include unlimited MCP calls. View pricing.

✨

What it does, in plain English. Your agent calls a Windframe tool, the server returns a structured style context (typography, spacing, color, component patterns), and your agent then writes the UI inside your project. No file writes from the server, no copy-paste workflow — your agent stays in control of your codebase.

Server URL

Windframe MCP is exposed over Streamable HTTP at:

Bash

1https://mcp.windframe.dev/mcp

Authentication is handled by your MCP client via OAuth 2.0 + PKCE. Windframe authenticates your account the first time your agent calls a Windframe MCP tool. CLI clients should start that auth flow automatically after setup or restart; if no sign-in or sign-up prompt appears, make a simple Windframe tool call with the prompt below and sign in or sign up when asked.

Quick Start

Pick the client you use, paste the config, restart, and sign in or sign up once. If your client does not ask you to authenticate after setup, send a prompt like this to make the first Windframe tool call:

Use Windframe MCP to list the available styles.

The CLI helper is the easiest path:

Bash

1claude mcp add --transport http windframe-mcp https://mcp.windframe.dev/mcp

You can also add it manually to ~/.claude.json:

JSON

1{
2  "mcpServers": {
3    "windframe-mcp": {
4      "type": "http",
5      "url": "https://mcp.windframe.dev/mcp"
6    }
7  }
8}

Restart Claude Code. Claude Code should start the auth flow automatically; if it does not, make a simple Windframe tool call with a prompt like:

Use Windframe MCP to list the available styles.
Sign in or sign up with your Windframe account when asked to authenticate.

Client	Typical config location
Claude Code	~/.claude.json
Codex CLI	~/.codex/config.toml
Cursor	.cursor/mcp.json
OpenCode	Interactive `opencode mcp add` setup
VS Code	.vscode/mcp.json
Antigravity	~/.gemini/antigravity/mcp_config.json

Authenticate

Windframe MCP uses OAuth, so you do not paste API keys. Your account is authenticated on the first Windframe MCP tool call. CLI clients should start the auth flow automatically; if yours does not, make a simple tool call with a prompt like:

Use Windframe MCP to list the available styles.

Your client opens a browser window when authentication is needed.
You sign in or sign up with your Windframe account and approve access.
Your client stores and refreshes the OAuth token automatically.

🔐

The OAuth flow uses PKCE, so no client secret is stored on your machine. Refresh tokens are managed by the client.

Convert an Existing Design

Try a prompt like this:

Use Windframe MCP to convert the current dashboard to Linear UI. Keep the existing layout, content, and user flows, use the project's current primary color, and update the visual style with Linear-style spacing, typography, borders, and interaction states.

Your agent should:

Call fetch_style_conversion_context with your prompt and target style.
Read the returned windframe://style-context/... resource.
Inspect the existing UI files it needs to change.
Apply the conversion in your project's framework using the returned tokens and patterns.

If your agent skips step 2 and edits UI without reading the resource, prompt it to read the resource URI before changing code. The context is what makes the output match the design system.

Ask for a New Design

For a new component or page, use the design tool instead:

Design a SaaS landing page for a project management tool. Use Windframe's Linear UI style and the project's primary color.

Your agent should:

Call fetch_style_design_context with your prompt and chosen style.
Read the returned windframe://style-context/... resource.
Generate the UI in your project's framework using the returned tokens and patterns.

Tools

For an existing screen, the first Windframe MCP tool call should be fetch_style_conversion_context. For a new screen, call fetch_style_design_context.

Fetch Style Conversion Context

fetch_style_conversion_context fetches Windframe style context for converting an existing interface to another style. Use this when the user already has a UI and wants it restyled.

Name	Type	Required	Description
`prompt`	string	Yes	Description of what is being converted and any conversion instructions.
`uiStyle`	string	Optional	Target Windframe UI style. If omitted, supported clients are prompted interactively.
`primaryColor`	string	Optional	Tailwind color name, `current`, or a hex color. If omitted, supported clients are prompted interactively.

Example call:

JSON

1{
2  "prompt": "Convert the current dashboard to Linear UI while keeping the same layout, content, and user flows.",
3  "uiStyle": "Linear UI",
4  "primaryColor": "current"
5}

Successful responses include a resource URI:

JSON

1{
2  "status": "ready",
3  "resource_uri": "windframe://style-context/...",
4  "message": "Style context is ready. Access the full context via the resource URI above."
5}

Your MCP client should read the returned windframe://style-context/... resource before implementing the UI.

Fetch Style Design Context

fetch_style_design_context fetches Windframe style context for creating a new component or page. Use this when the user wants to design fresh UI from a prompt.

Name	Type	Required	Description
`prompt`	string	Yes	Description of the component or page to design.
`uiStyle`	string	Yes	Windframe UI style. If omitted, supported clients are prompted interactively.
`primaryColor`	string	Yes	Tailwind color name, `current`, or a hex color. If omitted, supported clients are prompted interactively.

Example call:

JSON

1{
2  "prompt": "A SaaS landing page with hero, features, pricing, FAQ, and footer.",
3  "uiStyle": "Linear UI",
4  "primaryColor": "blue"
5}

The response also returns a windframe://style-context/... resource URI. Your assistant should read it, then generate the UI in your codebase.

Resources

The server exposes these read-only MCP resources:

Resource	Description
`windframe://styles`	JSON list of available Windframe UI styles.
`windframe://themes`	JSON list of Tailwind color theme names.
`windframe://style-context/{id}`	Temporary style context returned by the style-context tools.

Read windframe://styles to inspect the current style options before calling a tool. Read windframe://themes to look up standard Tailwind color names. Read windframe://style-context/{id} only after a tool returns that URI — it is the payload your agent uses to actually write the UI.

UI Styles

Available styles can change over time. Read the windframe://styles resource to get the current list. Common styles include:

Default
Linear UI
ShadCN UI
Pandora UI
Autumn UI
Enterprise UI
Notion UI

New styles are added regularly. Pick a style based on the surface you are building:

Surface	Try
Minimal product UI / dashboards	Linear UI, ShadCN UI
Marketing & landing pages	Pandora UI, Autumn UI, Default
Content-first / docs / wikis	Notion UI
Data-dense / B2B SaaS	Enterprise UI

Color Themes

You can use current, a custom hex color, or one of the standard Tailwind color names:

slate · gray · zinc · neutral · stone · red · orange · amber · yellow · lime · green · emerald · teal · cyan · sky · blue · indigo · violet · purple · fuchsia · pink · rose

Pass "current" if your project already has a brand color and you want the design context to honor it.

Plans

Every signed-in account can try the style-context tools with 3 free MCP calls. After that, a Windframe Pro or Lifetime plan unlocks unlimited MCP calls.

Upgrade at windframe.dev/pricing.

Prompt Writing Guide

For existing UI, write the prompt as a conversion request first: name the screen, choose the target style, and say what must stay unchanged. This tells the agent to call fetch_style_conversion_context before editing your files.

Example: a strong conversion prompt

Use Windframe MCP to convert the current settings page to Linear UI. Keep every setting, label, form field, validation state, and save flow intact. Preserve the responsive layout and use the project's current primary color. Update the spacing, typography, borders, cards, buttons, tabs, and empty states to match Linear UI.

For new UI, the best results come from specific, structured prompts. Include the page type, target audience, sections, copy, content counts, and any brand constraints.

Element	Vague	Specific
Page type	"A website"	"A SaaS landing page for an analytics product"
Sections	"Some sections"	"Hero, 3-feature grid, pricing, FAQ, footer"
Copy	(none)	"Headline: 'Turn data into decisions'"
CTAs	"Some buttons"	"'Start free trial' primary and 'Watch demo' secondary"
Content counts	(none)	"3 testimonials, 4 FAQ questions, 3 pricing tiers"
Brand constraints	(none)	"Use current primary color, avoid dark mode, include SOC 2 badge"

Example: a strong new-design prompt

Design a pricing section in Windframe's Linear UI style using the project's current primary color. Three tiers (Starter $0, Pro $29, Team $99/seat). Each tier shows 4 features. Include a "Most popular" badge on Pro. Add a small FAQ underneath with 4 questions about billing, cancellation, team seats, and refunds.

This prompt is specific enough that the returned style context can drive a complete, ship-ready section.

Troubleshooting

⚠️

My agent edits or generates UI but it doesn't match the style. The most common cause is that the agent skipped reading the windframe://style-context/... resource. Tell the agent to read the resource URI returned by the tool before writing any UI.

🔒

Tool returns pro_plan_required. Your free MCP calls have been used, or your account needs a Pro or Lifetime plan for unlimited access. Upgrade at windframe.dev/pricing and try again.

🔌

OAuth flow doesn't open a browser. Restart your client after adding the server config. If your client supports it, trigger the auth flow manually from its MCP settings panel.

🧭

Wrong style is applied. Pass uiStyle explicitly in your prompt instead of letting the agent guess. Example: "Use Windframe's Notion UI style."

What's next

Start by converting one existing screen ("Convert the dashboard to Linear UI"), then move up to full flows.
For new work, start with a single component ("Design a pricing card in Pandora UI"), then move up to full pages.
Pin a default style in your prompts to keep generation consistent across a project.
Combine fetch_style_conversion_context for older parts of your app with fetch_style_design_context for new sections.