Shadcn Studio MCP

O Shadcn Studio MCP Server é um construtor de IA Shadcn que ajuda você a criar, inspirar, refinar e converter designs do Figma em blocos impressionantes prontos para produção, componentes de UI e páginas completas usando blocos do Shadcn Studio.

GitHub

Experimente este MCPPatrocinado

Documentação

Servidor Shadcn Studio MCP

Crie blocos de UI modernos e prontos para produção, componentes e páginas completas em minutos usando o Shadcn Studio. Integra-se perfeitamente ao seu IDE favorito e suporta os frameworks mais populares, como React e Next.js.

🚀 O que é o Servidor Shadcn Studio MCP?

O Servidor Shadcn Studio MCP é um construtor Shadcn AI que ajuda você a criar, inspirar, refinar e converter designs do Figma em blocos impressionantes e prontos para produção, componentes de UI e páginas completas usando os blocos do Shadcn Studio. Ele se integra facilmente diretamente ao seu IDE favorito para um fluxo de trabalho rápido e eficiente.

Experimente o Servidor Shadcn Studio MCP gratuitamente hoje.

🛠️ Instalação

Tornamos a instalação super fácil!

Acesse o Guia de Instalação e selecione seu IDE (VS Code, Cursor, Windsurf, etc.).
Siga as instruções passo a passo para configurar o Servidor MCP no seu IDE.
Comece a usar o Servidor Shadcn Studio MCP gratuitamente.

Configuração Rápida (npx)

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

Usuários Pro (com Chave de API e E-mail)

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

Nota: Para recursos freemium, nenhuma credencial é necessária. Para recursos pro, tanto API_KEY quanto EMAIL são obrigatórios.

📒 Documentação

O Servidor Shadcn Studio MCP foi projetado para ser intuitivo e fácil de usar. Os comandos são simples e diretos, permitindo que você crie, inspire, refine e converta designs do Figma em blocos de UI rapidamente.

Para documentação detalhada sobre como usar o Servidor Shadcn Studio MCP, consulte a Documentação do Shadcn Studio MCP.

🔧 Uso

O Servidor Shadcn Studio MCP oferece quatro fluxos de trabalho principais:

Comando	Descrição	Caso de Uso
`/cui`	Criar UI	Personalize e instale a partir dos blocos existentes do Shadcn Studio
`/iui`	Inspirar UI	Gere novos blocos de UI criativos inspirados nos existentes
`/rui`	Refinar UI	Refine, edite ou aplique temas a um bloco ou página existente
`/ftc`	Figma para Código	Converta designs do Figma diretamente em blocos do Shadcn Studio

Veja a documentação completa aqui: Documentação do Shadcn Studio MCP.

Exemplos

Criar 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 para Código (/ftc):

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

📚 Documentação e Recursos

Comunidade 🤝

Junte-se à comunidade do Shadcn Studio para discutir a biblioteca, fazer perguntas e compartilhar suas experiências:

Contribuindo 📝

Corrija um bug ou adicione um novo recurso. Você pode fazer um pull request e ver seu código na próxima versão do Shadcn Studio MCP.

Antes de enviar um pull request, consulte as diretrizes de contribuição.