Windframe MCP
Proporciona contexto de estilos y tokens para diseñar o rediseñar interfaces web en cualquier framework.
Documentación
🚀 ¡Acabamos de lanzar! Gusto de diseño UI de Apple para agentes de IA: crea interfaces pulidas usando el estilo de diseño de Apple. Pruébalo ahora →
Dale a tu agente de IA un gusto de diseño de clase mundial
Windframe MCP les brinda a Claude Code, Codex, Cursor, OpenCode, VS Code y otros agentes compatibles con MCP sistemas de diseño reales con los tokens y la dirección visual necesarios para crear interfaces pulidas y consistentes.
Incluye 3 llamadas MCP gratuitas. Las cuentas Pro y Lifetime desbloquean llamadas ilimitadas.
Únete a más de 18,000 desarrolladores que construyen con Windframe
Qué cambia
Convierte la salida genérica de IA en diseño de producto intencional
Dale a tu agente las decisiones de tipografía, espaciado, color y componentes detrás de un lenguaje de diseño coherente en lugar de dejar que adivine.
AaAaAatracking-tight · text-balance
space-1 → space-12
radii
Tokens de diseño reales
Linear, ShadCN, Notion, Pandora, Apple UI, Stripe UI y más. Tu agente obtiene sistemas reales de tipografía, espaciado y color en lugar de adivinar valores.
// agent.tsx
const tokens = await
windframe.style(
'linear'
)
// → listo ✓
MCP conectado
Dentro de tu editor
Genera, itera y publica UI directamente dentro de Claude Code, Codex, Cursor, OpenCode o VS Code. Sin cambios de contexto.
TSXbutton.tsx
<button
className="
px-4 py-2.5
rounded-lg
bg-neutral-900
text-white
font-medium"
>
Código Tailwind de producción
Clases de utilidad limpias que coinciden con los tokens de cada estilo. Se integra en cualquier proyecto sin retrabajo.
Linear UI
ShadCN UI
Pandora UI
Apple UI
Notion UI
Stripe UI
Una biblioteca creciente de estilos
Elige un tono para la superficie que estás construyendo: UI de producto minimalista, marketing audaz, enterprise con mucho contenido, cálido y expresivo. Se agregan nuevos sistemas regularmente.
Una sola fuente de gusto de diseño para cada agente de codificación
Elige tu cliente para ver los pasos de configuración. La autenticación se ejecuta mediante OAuth estándar en el primer uso.
Claude Code CLI
1
Ejecuta el siguiente comando en tu terminal:claude mcp add --transport http windframe-mcp https://mcp.windframe.dev/mcp
o
2
Agrégalo manualmente a ~/.claude.json:
{
"mcpServers": {
"windframe-mcp": {
"type": "http",
"url": "https://mcp.windframe.dev/mcp"
}
}
}
4
Reinicia Claude Code. Claude Code debería iniciar el flujo de autenticación automáticamente; si no lo hace, haz una llamada simple a una herramienta de Windframe con un prompt como Use Windframe MCP to list the available styles.
5
Inicia sesión o regístrate con tu cuenta de Windframe cuando se te pida autenticarte.
Mismo prompt. Resultado diferente.
Qué sucede cuando aplicas un sistema de diseño real a la misma UI generada por IA.
Antes: IA genérica
Después: Windframe MCP
Estilos de diseño
Lenguaje de diseño reconocible. Detalles de implementación reales.
Elige estilos inspirados en las empresas que establecieron el estándar en diseño de productos. Previsualiza cada uno y luego dale su sistema completo a tu agente.
Se integra en la pila que ya usas
HTML 
React 
Next.js 
Vue.js 
Nuxt.js 
Angular
Svelte
Astro 
SolidJS 
Rails
Preguntas frecuentes
Todo lo que podrías querer saber sobre Windframe MCP, planes y configuración.
Windframe MCP les da a los agentes de codificación con IA el gusto de diseño detrás de los productos mejor diseñados del mundo. Conecta Claude Code, Codex, Cursor, OpenCode, VS Code y otros clientes MCP a sistemas de diseño reales, componentes y tokens de Tailwind, para que el resultado se vea diseñado intencionalmente en lugar de ensamblado.
Sí. Puedes probar Windframe MCP con 3 llamadas gratuitas después de iniciar sesión. Las cuentas Pro y Lifetime desbloquean llamadas MCP ilimitadas, y el agente permanece conectado entre sesiones después de OAuth.
Cualquier cosa que hable el Protocolo de Contexto de Modelo (MCP) sobre HTTP. Soportamos oficialmente Claude Code, Codex, Cursor, OpenCode, VS Code y Antigravity, y el servidor funciona con cualquier otro cliente compatible con MCP.
Linear UI, ShadCN UI, Enterprise, Notion UI, Pandora UI, Autumn, Apple UI, Stripe UI, Default y más. Cada uno incluye tokens reales de tipografía, espaciado y color, además de una biblioteca creciente de temas de color de Tailwind. Se agregan nuevos sistemas regularmente.
El código generado sigue el enfoque de estilo existente de tu proyecto y el sistema de diseño elegido. Tu agente puede usar Tailwind CSS, CSS plano, Módulos CSS u otro patrón que se ajuste a tu proyecto.
No. Windframe MCP funciona con Tailwind CSS, CSS plano, Módulos CSS y otros enfoques de estilo. Tu agente sigue la forma en que tu proyecto ya está construido.
Sí. El código generado a través de tu cuenta de Windframe es tuyo para publicarlo en trabajo con clientes, productos y proyectos comerciales.
En la primera llamada a una herramienta MCP, tu agente activa un flujo estándar de OAuth 2.0 + PKCE. Inicias sesión o te registras una vez con tu cuenta de Windframe y el agente permanece conectado para futuras sesiones.
Dale a tu agente mejores instintos de diseño
Conecta Windframe MCP y convierte sistemas de diseño de clase mundial en UI de Tailwind pulida y lista para producción.
Sistemas de diseño realesBiblioteca crecienteCualquier cliente MCP