Shadcn Studio MCP

Servidor Shadcn Studio MCP

Construye bloques de UI modernos y listos para producción, componentes y páginas completas en minutos usando Shadcn Studio. Se integra sin problemas con tu IDE favorito y es compatible con los frameworks más populares como React y Next.js.

🚀 ¿Qué es el Servidor Shadcn Studio MCP?

Shadcn Studio MCP Server es un constructor de Shadcn AI que te ayuda a crear, inspirar, refinar y convertir diseños de Figma en bloques impresionantes y listos para producción, componentes de UI y páginas completas usando bloques de Shadcn Studio. Se integra fácilmente directamente en tu IDE favorito para un flujo de trabajo rápido y eficiente.

Prueba Shadcn Studio MCP Server gratis hoy.

🛠️ Instalación

¡Hemos hecho la instalación súper fácil!

1. Accede a la Guía de Instalación y selecciona tu IDE (VS Code, Cursor, Windsurf, etc.).
2. Sigue las instrucciones paso a paso para configurar el MCP Server en tu IDE.
3. Comienza a usar Shadcn Studio MCP Server de forma gratuita.

Configuración Rápida (npx)

{
  "mcpServers": {
    "shadcn-studio-mcp": {
      "command": "npx",
      "args": ["-y", "shadcn-studio-mcp"]
    }
  }
}

Usuarios Pro (con Clave API y Correo Electrónico)

{
  "mcpServers": {
    "shadcn-studio-mcp": {
      "command": "npx",
      "args": ["-y", "shadcn-studio-mcp", "API_KEY=your-api-key", "EMAIL=your@email.com"]
    }
  }
}

Nota: Para funciones freemium, no se necesitan credenciales. Para funciones pro, se requieren tanto API_KEY como EMAIL.

📒 Documentación

Shadcn Studio MCP Server está diseñado para ser intuitivo y fácil de usar. Los comandos son simples y directos, lo que te permite crear, inspirar, refinar y convertir diseños de Figma en bloques de UI rápidamente.

Para documentación detallada sobre cómo usar Shadcn Studio MCP Server, consulta la Documentación de Shadcn Studio MCP.

🔧 Uso

Shadcn Studio MCP Server proporciona cuatro flujos de trabajo principales:

Comando	Descripción	Caso de uso
/cui	Crear UI	Personaliza e instala desde bloques existentes de Shadcn Studio
/iui	Inspirar UI	Genera nuevos bloques de UI creativos inspirados en los existentes
/rui	Refinar UI	Refina, edita o aplica temas a un bloque o página existente
/ftc	Figma a Código	Convierte diseños de Figma directamente en bloques de Shadcn Studio

Consulta la documentación completa aquí: Documentación de Shadcn Studio MCP.

Ejemplos

Crear UI (/cui):

/cui Create a hero section for an eLearning Academy site.
/cui Create a feature section for my SaaS landing page.
/cui Create a pricing section with a monthly/yearly toggle.

Inspirar UI (/iui):

/iui Create a hero section for my AI SaaS - AI Video Generator.
/iui Create a feature section for my productivity app.
/iui Build a testimonials section inspired by modern design trends.

Refinar UI (/rui):

/rui Update the theme to Modern Minimal.
/rui Replace the "Get Started" button with Login and Register buttons.
/rui Update the pricing card to Dynamic 3D Hover Card.
/rui Update the login button to animated ripple style.

Figma a Código (/ftc):

/ftc generate code for the selected figma frame using shadcn/studio blocks
/ftc Install matching shadcn/studio blocks for this design

📚 Documentación y Recursos

• Documentación Oficial
• Guía de Instalación
• Bloques de Shadcn Studio
• Componentes de Shadcn Studio
• Temas de Shadcn Studio
• Página de Inicio

Comunidad 🤝

Únete a la comunidad de Shadcn Studio para discutir la librería, hacer preguntas y compartir tus experiencias:

• 🐦 Síguenos en Twitter
• 💬 Discute en GitHub
• 🎮 Únete a nosotros en Discord

Contribuciones 📝

Corrige un error o añade una nueva funcionalidad. Puedes hacer una pull request y ver tu código en la próxima versión de Shadcn Studio MCP.

Antes de enviar una pull request, consulta las directrices de contribución.