Windframe MCP
Ele fornece contexto de estilo e tokens para projetar ou reformular UIs web em qualquer framework.
Documentação
🚀 Acabamos de lançarGosto de design da Apple para agentes de IA — crie UIs refinadas usando o estilo de design da Apple.Experimente agora →
Dê ao seu agente de IA um gosto de design de classe mundial
O Windframe MCP dá ao Claude Code, Codex, Cursor, OpenCode, VS Code e outros agentes compatíveis com MCP sistemas de design reais, com os tokens e a direção visual necessários para criar interfaces refinadas e consistentes.
Inclui 3 chamadas MCP gratuitas. Contas Pro e Vitalícias desbloqueiam chamadas ilimitadas.
Junte-se a mais de 18.000 desenvolvedores criando com Windframe
O que muda
Transforme saídas genéricas de IA em design de produto intencional
Dê ao seu agente as decisões de tipografia, espaçamento, cor e componentes por trás de uma linguagem de design coerente, em vez de deixá-lo adivinhar.
AaAaAatracking-tight · text-balance
space-1 → space-12
radii
Tokens de design reais
Linear, ShadCN, Notion, Pandora, Apple UI, Stripe UI e mais. Seu agente recebe sistemas reais de tipografia, espaçamento e cor, em vez de adivinhar valores.
// agent.tsx
const tokens = await
windframe.style(
'linear'
)
// → pronto ✓
MCP conectado
Dentro do seu editor
Gere, itere e publique UI diretamente no Claude Code, Codex, Cursor, OpenCode ou VS Code. Sem troca de contexto.
TSXbutton.tsx
<button
className="
px-4 py-2.5
rounded-lg
bg-neutral-900
text-white
font-medium"
>
Código Tailwind de produção
Classes utilitárias limpas que correspondem aos tokens de cada estilo. Integra-se a qualquer projeto sem retrabalho.
Linear UI
ShadCN UI
Pandora UI
Apple UI
Notion UI
Stripe UI
Uma biblioteca crescente de estilos
Escolha um tom para a superfície que você está criando: UI de produto minimalista, marketing ousado, enterprise com muito conteúdo, caloroso e expressivo. Novos sistemas são adicionados regularmente.
Uma única fonte de gosto de design para cada agente de codificação
Escolha seu cliente para ver as etapas de configuração. A autenticação ocorre via OAuth padrão no primeiro uso.
Claude Code CLI
1
Execute o seguinte comando no seu terminal:claude mcp add --transport http windframe-mcp https://mcp.windframe.dev/mcp
ou
2
Adicione manualmente em ~/.claude.json:
{
"mcpServers": {
"windframe-mcp": {
"type": "http",
"url": "https://mcp.windframe.dev/mcp"
}
}
}
4
Reinicie o Claude Code. O Claude Code deve iniciar o fluxo de autenticação automaticamente; se não iniciar, faça uma chamada de ferramenta simples do Windframe com um prompt como Use Windframe MCP to list the available styles.
5
Entre ou cadastre-se com sua conta Windframe quando solicitado a autenticar.
Mesmo prompt. Resultado diferente.
O que acontece quando você aplica um sistema de design real à mesma UI gerada por IA.
Antes: IA genérica
Depois: Windframe MCP
Estilos de design
Linguagem de design reconhecível. Detalhes reais de implementação.
Escolha estilos inspirados nas empresas que definem o padrão em design de produto. Visualize cada um e depois entregue seu sistema completo ao seu agente.
Integra-se à stack que você já usa
HTML 
React 
Next.js 
Vue.js 
Nuxt.js 
Angular
Svelte
Astro 
SolidJS 
Rails
Perguntas frequentes
Tudo o que você pode querer saber sobre o Windframe MCP, planos e configuração.
O Windframe MCP dá aos agentes de codificação de IA o gosto de design por trás dos produtos mais bem projetados do mundo. Ele conecta Claude Code, Codex, Cursor, OpenCode, VS Code e outros clientes MCP a sistemas de design reais, componentes e tokens Tailwind, para que o resultado pareça intencionalmente projetado, em vez de montado.
Sim. Você pode experimentar o Windframe MCP com 3 chamadas gratuitas após entrar. Contas Pro e Vitalícias desbloqueiam chamadas MCP ilimitadas, e o agente permanece conectado entre sessões após o OAuth.
Qualquer coisa que fale o Model Context Protocol via HTTP. Suportamos oficialmente Claude Code, Codex, Cursor, OpenCode, VS Code e Antigravity, e o servidor funciona com qualquer outro cliente compatível com MCP.
Linear UI, ShadCN UI, Enterprise, Notion UI, Pandora UI, Autumn, Apple UI, Stripe UI, Default e mais. Cada um inclui tokens reais de tipografia, espaçamento e cor, além de uma biblioteca crescente de temas de cores Tailwind. Novos sistemas são adicionados regularmente.
O código gerado segue a abordagem de estilo existente do seu projeto e o sistema de design escolhido. Seu agente pode usar Tailwind CSS, CSS puro, CSS Modules ou outro padrão que se adapte ao seu projeto.
Não. O Windframe MCP funciona com Tailwind CSS, CSS puro, CSS Modules e outras abordagens de estilo. Seu agente segue a forma como seu projeto já é construído.
Sim. O código gerado através da sua conta Windframe é seu para publicar em trabalhos de clientes, produtos e projetos comerciais.
Na primeira chamada de ferramenta MCP, seu agente aciona um fluxo padrão de OAuth 2.0 + PKCE. Você entra ou se cadastra uma vez com sua conta Windframe e o agente permanece conectado para sessões futuras.
Dê ao seu agente melhores instintos de design
Conecte o Windframe MCP e transforme sistemas de design de classe mundial em UI Tailwind refinada e pronta para produção.
Sistemas de design reaisBiblioteca crescenteQualquer cliente MCP