Windframe MCP Server

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, Cursor, VS Code, Codex, and others) can generate or convert Tailwind CSS interfaces using real design tokens, components, and color guidance.

Server URL

Windframe MCP is exposed over Streamable HTTP at:

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

Authentication is handled automatically by your MCP client via OAuth 2.0 + PKCE on the first tool call. You never need to create or paste an API key.

Quick Start

Pick the client you use, paste the config, restart, and sign in once. That is the whole setup.

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

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

Authenticate

Windframe MCP uses OAuth, so you do not paste API keys. On the first tool call:

1. Your client opens a browser window.
2. You sign in to your Windframe account and approve access.
3. Your client stores and refreshes the OAuth token automatically.

Ask for a Design

Try a prompt like this:

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:

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

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

Tools

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.

Example call:

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

Successful responses include a resource URI:

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 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.

Example call:

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

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

Resources

The server exposes these read-only MCP resources:

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:

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

The style-context tools require a Windframe Pro plan. If your account is not eligible, the tool returns a pro_plan_required error with a link to upgrade.

Upgrade at windframe.dev/pricing.

Prompt Writing Guide

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

Example: a strong 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

What's next

• 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_design_context for new sections with fetch_style_conversion_context to restyle older parts of your app to match.