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
Utiliser un serveur MCP pour optimiser les applications React Native avec Claude Code
Un serveur MCP diffuse en direct des données d'exécution d'une application React Native vers Claude Code, identifiant des problèmes de performance comme le battement du store Zustand et des re-rendus inutiles.
Qwen3.6:27b + Agent Go personnalisé : une alternative locale à Claude Code
Un développeur teste Qwen3.6:27b en Q8 sur un RTX 6000 (96 Go), affirme qu'il rivalise avec Claude Code pour le codage quotidien, et publie en open source un agent Go minimal sans plugins ni MCP.
Gemma Gem : Agent IA embarqué pour l'automatisation de navigateur via WebGPU
Gemma Gem est une extension Chrome qui exécute le modèle Gemma 4 de Google (2B ou 4B) entièrement sur l'appareil en utilisant WebGPU, sans clés API ni dépendances cloud. Elle fournit des outils pour lire le contenu des pages, capturer des écrans, cliquer sur des éléments, saisir du texte, faire défiler et exécuter du JavaScript via une interface de chat.
Serveur MCP Freddy connecte les wearables aux agents IA avec connexion sans interface
Freddy est un serveur MCP personnel qui connecte des wearables (Polar, Oura, Withings, Suunto, Intervals.icu, Hevy, plus WHOOP, Strava, Dexcom en bêta) à des clients IA comme Claude Code, ChatGPT et Notion AI via OAuth. Une nouvelle connexion sans tête (headless sign-in) permet des workflows planifiés pour des agents autonomes.