Claude Code Skill Convertit les Designs Stitch en Next.js sans Dérive de Pixel
Ce que fait cet outil
Une compétence Claude Code (commande slash) convertit les designs Google Stitch AI en composants Next.js tout en évitant le décalage de pixels qui se produit généralement lors de l'utilisation de Claude pour cette tâche. L'outil aborde des problèmes spécifiques où Claude arrondirait des valeurs comme text-[15px] en text-sm, remplacerait des couleurs exactes comme #1E293B par des classes Tailwind approximatives comme bg-slate-800, perdrait des ressources d'image à cause d'URLs CDN expirées, ou manquerait des polices.
Fonctionnalités clés et processus
- Extrait le HTML/CSS exact de Stitch via MCP - pas de copier-coller ou de captures d'écran
- Préserve les valeurs de pixels exactes tout au long (text-[15px] reste text-[15px], pas arrondi à une classe Tailwind)
- Télécharge toutes les images du CDN Stitch avant l'expiration des URLs
- Mappe les 29 polices Stitch à next/font/google correctement
- Inclut 5 points de contrôle de vérification obligatoires qui comparent la sortie à la source avant de continuer
- Génère un rapport d'audit complet montrant exactement ce qui a été préservé et ce qui a nécessité des décisions de jugement
- Prend en charge le mappage des composants ShadCN/UI avec des remplacements de style exacts
Installation et configuration
Installez avec : curl -sL https://raw.githubusercontent.com/yshaish1/stitch-to-nextjs/main/install.sh | bash
L'installation configure également automatiquement le serveur stitch-mcp.
Pourquoi les points de contrôle de vérification sont nécessaires
Les points de contrôle de vérification traitent de la tendance de Claude à dériver vers les conventions Tailwind lorsqu'il est laissé à lui-même. L'invite de la compétence signale explicitement ce modèle et force une revérification à chaque étape. Bien que pas infaillible, cette approche détecte les modes d'échec courants avant qu'ils ne s'accumulent.
L'outil est disponible sur GitHub : https://github.com/yshaish1/stitch-to-nextjs
📖 Read the full source: r/ClaudeAI
👀 See Also
Orchestrateur de flux de travail avec intégration CLI IA pour les tâches d'administration système
Un développeur a créé un orchestrateur de flux de travail basé sur des fichiers appelé 'workflow' qui s'intègre avec Claude Code, Codex CLI et Gemini CLI. Il génère, met à jour, corrige et affine des flux de travail YAML à partir de descriptions en langage naturel pour des tâches d'administration système.
Tableau de Bord Open Source Révèle les Coûts Réels de Calcul du Code Claude
Un développeur a rétro-conçu la formule de limite de taux de Claude Code pour créer un tableau de bord local qui affiche le pourcentage d'utilisation en temps réel, les coûts réels en dollars, le taux de consommation, les heures de pointe et quelles compétences/hooks sont déclenchés. L'outil a révélé qu'un forfait de 100$/mois a consommé 13 286$ en équivalent de calcul API en un mois.
Stoa Markets : un marché de GPU et de serveurs IA avec des devis vérifiés
Stoa est un marché pour l'achat et la vente de GPU et de serveurs IA neufs et d'occasion. Il standardise les demandes de devis, vérifie les contreparties et fournit des devis fermes, visant à améliorer la découverte des prix sur le marché des GPU.
Code-Graph-MCP : Le serveur MCP open source réduit l'utilisation de tokens de code par Claude de 40 à 60 %
code-graph-mcp est un serveur MCP qui indexe les bases de code dans un graphe de connaissances AST, remplaçant de multiples appels grep/read par des requêtes structurées uniques. Le développeur rapporte des économies de 40 à 60 % sur les tokens de session totale et 80 % d'appels d'outils en moins par tâche de navigation.