<aside> 💡
Guia completo do carrossel CB1410 de @SergioVitalHQ. Os 21 sites separados pelo que fazem, com link, preço, comando de instalação, o fluxo para montar uma landing page do zero no Claude Code usando todos na ordem certa e 9 prompts em português, do print da referência à revisão final.
</aside>
<aside> ⚠️
O que é grátis aqui. 18 dos 21 sites são gratuitos. 21st.dev, Aceternity UI e Magic UI têm parte grátis e plano pago, cobrado em dólar no cartão internacional. Os comandos e MCPs rodam no Claude Code, que exige o plano Pro ou superior (US$ 20 por mês, ou US$ 17 por mês no anual; em reais, o valor muda com o câmbio e o IOF). Números de componentes e preços conferidos em outubro de 2026 e mudam com frequência.
</aside>
| # | Site | Categoria | O que faz | Preço |
|---|---|---|---|---|
| 1 | Minimal Gallery | Inspiração | Sites escolhidos a dedo com bom gosto | Grátis |
| 2 | Kage | Inspiração | Designs de produtos reais que viram prompt | Grátis |
| 3 | AppShot Gallery | Inspiração | Telas de apps reais da App Store | Grátis |
| 4 | Component Gallery | Inspiração | Como 95 design systems resolvem cada componente | Grátis |
| 5 | **DESIGN.md (designmd.ai)** | Estilo para IA | Design systems prontos em DESIGN.md | Grátis (chave gratuita para baixar via MCP) |
| 6 | Refero Styles | Estilo para IA | Mais de 2.000 estilos de sites com DESIGN.md | Grátis |
| 7 | Jiro | Estilo para IA | Seções de landing page com prompt pronto | Grátis + Pro (pagamento único) |
| 8 | VibePrompt | Estilo para IA | Prompts de seção com prévia e código Tailwind | Grátis |
| 9 | 21st.dev | Componentes | Mais de 12.000 componentes da comunidade | Grátis (2 por dia) + Builder |
| 10 | shadcn/ui | Componentes | A base de quase tudo nesta lista | Grátis |
| 11 | Aceternity UI | Componentes | Componentes animados para landing page | Grátis + All-Access |
| 12 | Magic UI | Componentes | Mais de 150 componentes animados | Grátis + Pro |
| 13 | mapcn | Efeitos premium | Mapas prontos com marcadores e rotas | Grátis |
| 14 | Uiverse | Efeitos premium | Botões, toggles e loaders da comunidade | Grátis |
| 15 | Liquid Glass | Efeitos premium | Efeito de vidro líquido no estilo da Apple, em React | Grátis |
| 16 | Motion Primitives | Animação | Textos e blocos animados prontos | Grátis |
| 17 | Kinetics | Animação | Efeitos com física de mola em CSS, React ou prompt | Grátis |
| 18 | MicroKit UI | Animação | Microinterações de hover, clique e foco | Grátis |
| 19 | Anime.js | Animação | Biblioteca de animação em JavaScript | Grátis |
| 20 | Kitbitz | Arte | Mais de 2.000 ilustrações feitas à mão, CC0 | Grátis |
| 21 | 3dicons | Ícones 3D | Mais de 1.400 ícones 3D, CC0 | Grátis |
Nove passos no Claude Code, na ordem em que cada site entra. Os três primeiros você faz uma vez só por projeto.
Os comandos e os MCPs deste guia rodam no Claude Code, que vem a partir do plano Pro. No plano gratuito do Claude dá para usar os prompts 1, 2 e 5 no app, anexando o print, e copiar o código gerado para outro lugar.
<aside> 💡
Para rodar os comandos com npx, você precisa do Node.js instalado no computador, na versão LTS.
</aside>
Numa pasta vazia, crie um projeto Next.js já configurado com Tailwind e shadcn/ui, a base que quase todos os sites desta lista usam para instalar componentes. Depois abra o Claude Code na mesma pasta.
npx shadcn@latest init -t next
claude
Três sites desta lista têm servidor MCP sem conta nem chave: o do shadcn deixa o Claude buscar e instalar componentes de qualquer registro, o do Kage entrega prompts e prints de designs reais e o do Kitbitz busca as ilustrações.
npx shadcn@latest mcp init --client claude
claude mcp add --transport http kitbitz https://mcp.kitbitz.art
O comando do Kage fica em kage.design/mcp-setup, na aba Claude Code. Rode uma vez no terminal.
<aside> 💡
Reinicie o Claude Code e digite /mcp para conferir se os três aparecem conectados.
</aside>