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
srclight : Serveur MCP d'indexation de code entièrement local avec intégrations Ollama
srclight est un serveur MCP pour l'indexation approfondie du code qui fonctionne à 100 % localement sans clés API ni appels cloud. Il utilise l'analyse syntaxique AST tree-sitter pour 11 langages, SQLite FTS5 pour la recherche par mots-clés, Ollama pour les embeddings, et la similarité cosinus accélérée par GPU via cupy.
Construire un système de connaissances auto-améliorant avec Claude Code et Obsidian
Un développeur a créé un système de 25 outils qui confère à Claude Code une mémoire persistante grâce à la recherche sémantique, aux graphes de connaissances et à la répétition espacée sur un coffre Obsidian. Le système indexe le contenu avec des embeddings bge-m3, détecte les contradictions, élagage automatique des notes obsolètes et génère automatiquement des cartes Obsidian Canvas.
Manifest prend désormais en charge les abonnements Claude Pro/Max sans clé API
Manifest, une couche de routage open source pour OpenClaw, permet désormais la connexion directe des abonnements Claude Pro ou Max sans nécessiter de clé API. Les utilisateurs disposant de clés API peuvent configurer un routage de secours lorsque les limites de débit de l'abonnement sont atteintes.
Spectr : Un MCP qui rédige des spécifications d'applications à partir d'enregistrements d'écran pour des clones Claude pixel parfaits
Spectr est un serveur MCP, un CLI et une compétence Claude Code qui prend un enregistrement d'écran .mp4/.mov d'une application iOS et génère un spec.md en 7 sections avec codes hexadécimaux, poids de police, espacements, transitions et graphe de navigation — éliminant les 30 minutes de rédaction manuelle de spécifications par écran.