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
La réutilisation du cache KV pour les conversations longues sur Apple Silicon offre une accélération de 200x
Un développeur a mis en œuvre la réutilisation du cache KV basé sur des sessions pour l'inférence LLM locale en utilisant le framework MLX d'Apple, obtenant une amélioration de 200x du temps jusqu'au premier token pour une longueur de contexte de 100K. L'approche conserve le cache KV en mémoire à travers les tours de conversation, ne traitant que les nouveaux tokens.
Intégration TTS xAI pour Home Assistant construite avec Claude — Répo complet
Un développeur a utilisé Claude pour créer une intégration Home Assistant personnalisée pour l'API TTS de xAI (voix Eve) avec une interface de configuration complète, cinq voix et des balises vocales.
OpenHelm : Un Planificateur de Tâches en Arrière-plan Local pour Claude Code avec Logique de Réessai Autocorrectrice
OpenHelm est une application basée sur Tauri qui exécute des tâches Claude Code en arrière-plan selon un planning, stocke tous les états localement dans SQLite, et inclut une boucle de réessai auto-correctrice qui ajuste les instructions après des échecs.
Octopoda MCP Server ajoute une mémoire persistante, une détection de boucles et des pistes d'audit à Claude Code
Un développeur a créé Octopoda, un serveur MCP qui s'intègre à Claude Code pour fournir une mémoire persistante, une détection de boucles, des pistes d'audit et des espaces de connaissances partagés pour les agents IA. Le système utilise PostgreSQL avec pgvector pour la recherche sémantique, FastAPI et un tableau de bord React.