Habilidade de Código Claude Converte Designs do Stitch para Next.js com Zero Desvio de Pixel

O Que Esta Ferramenta Faz

Uma habilidade Claude Code (comando de barra) converte designs do Google Stitch AI em componentes Next.js enquanto previne o desvio de pixel que normalmente ocorre ao usar o Claude para esta tarefa. A ferramenta aborda pontos problemáticos específicos onde o Claude arredondaria valores como text-[15px] para text-sm, trocaria cores exatas como #1E293B por classes Tailwind aproximadas como bg-slate-800, perdesse recursos de imagem devido a URLs de CDN expiradas ou ignorasse fontes.

Recursos Principais e Processo

• Extrai HTML/CSS exato do Stitch via MCP - sem copiar-colar ou capturas de tela
• Preserva valores de pixel exatos por todo o processo (text-[15px] permanece text-[15px], não arredondado para uma classe Tailwind)
• Baixa todas as imagens do CDN do Stitch antes que as URLs expirem
• Mapeia todas as 29 fontes do Stitch para next/font/google corretamente
• Inclui 5 pontos de verificação obrigatórios que comparam a saída com a fonte antes de prosseguir
• Gera um relatório de auditoria completo mostrando exatamente o que foi preservado e o que exigiu decisões de julgamento
• Suporta mapeamento de componentes ShadCN/UI com substituições de estilo exatas

Instalação e Configuração

Instale com: curl -sL https://raw.githubusercontent.com/yshaish1/stitch-to-nextjs/main/install.sh | bash

A instalação também configura automaticamente o servidor stitch-mcp.

Por Que Pontos de Verificação São Necessários

Os pontos de verificação abordam a tendência do Claude de desviar para convenções Tailwind quando deixado por conta própria. O prompt da habilidade sinaliza explicitamente este padrão e força re-verificação em cada etapa. Embora não seja infalível, esta abordagem captura modos de falha comuns antes que se acumulem.

A ferramenta está disponível no GitHub: https://github.com/yshaish1/stitch-to-nextjs