Stitch Code to Design
Transformer du code frontend existant en design Stitch â extraction HTML, extraction du design system, tĂ©lĂ©versement
- Quoi
- Transformer du code frontend existant en design Stitch â extraction HTML, extraction du design system, tĂ©lĂ©versement
- Coût
- Gratuit
- Prérequis
- un projet Google Stitch (projectId), une clĂ© API Stitch (service payant), un serveur de dĂ©veloppement local en cours d'exĂ©cution ou une app web construite, et les skills frĂšres extract-static-html, extract-design-md, upload-to-stitch du mĂȘme dĂ©pĂŽt
- Installation
- Copiez le prompt dâinstallation ci-dessous dans votre Muse â votre agent fait le reste.
đł SĂ©lectionnĂ© par Skill Harbor â un skill orchestrateur (son vrai nom est `stitch::code-to-design`) qui dĂ©place du code frontend existant â React, Vite, Next.js, Angular, Vue â vers un design Google Stitch pour itĂ©rer dessus. Il enchaĂźne trois skills frĂšres en sĂ©quence : extraire un fichier HTML autonome depuis le build ou le serveur de dĂ©veloppement, extraire un design system (`DESIGN.md`) depuis le code source incluant les configs Angular et les fichiers de thĂšme, puis tĂ©lĂ©verser les deux vers un projet Stitch avec une clĂ© API Stitch. NĂ©cessite les skills frĂšres du mĂȘme dĂ©pĂŽt (extract-static-html, extract-design-md, upload-to-stitch / manage-design-system), un `projectId` Stitch cible et une clĂ© API Stitch â un service payant. Notes honnĂȘtes : cette fiche ne couvre que le fichier orchestrateur ; les frĂšres sont des skills sĂ©parĂ©s non inclus ici, et le skill ne vĂ©rifie jamais automatiquement le rĂ©sultat d'extraction (le contrĂŽle visuel dans le navigateur est laissĂ© Ă l'utilisateur). CrĂ©dit : @google-labs-code. Skill Harbor ne vĂ©rifie jamais le code, examinez-le vous-mĂȘme avant usage.
Version :
Installation
PrĂ©requis : un projet Google Stitch (projectId), une clĂ© API Stitch (service payant), un serveur de dĂ©veloppement local en cours d'exĂ©cution ou une app web construite, et les skills frĂšres extract-static-html, extract-design-md, upload-to-stitch du mĂȘme dĂ©pĂŽt Installe-moi « Stitch : du code au design ». Transformer du code frontend existant en design Stitch â extraction HTML statique, extraction du design system, tĂ©lĂ©versement DĂ©pĂŽt : https://github.com/google-labs-code/stitch-skills/blob/main/plugins/stitch-design/skills/code-to-design/SKILL.md 1. RĂ©cupĂšre le fichier SKILL.md du skill google-labs-code-stitch-skills-stitch-design depuis le dĂ©pĂŽt dans un dossier temporaire et rĂ©sume en une ou deux phrases ce qu'il fait. 2. ContrĂŽle de sĂ©curitĂ© : examine le SKILL.md et les scripts pour tout contenu suspect (appels rĂ©seau inattendus, commandes shell, rĂ©colte d'identifiants). Ce dĂ©pĂŽt ne doit contenir aucun secret dans le code ; les identifiants passent uniquement par le coffre sĂ©curisĂ©, les hĂŽtes autorisĂ©s sont dĂ©clarĂ©s dans le SKILL.md. VĂ©rifie que c'est bien le cas ; STOP sur le moindre signal d'alerte et prĂ©viens-moi. 3. Installe-le comme skill : copie le SKILL.md et ses fichiers auxiliaires dans le rĂ©pertoire des skills de l'agent, dans un dossier nommĂ© « google-labs-code-stitch-skills-stitch-design ». 4. VĂ©rifie sans appels rĂ©seau : frontmatter valide, fichiers en place. 5. Indique ce qui a Ă©tĂ© installĂ©, oĂč, et ce qu'il me reste Ă faire moi-mĂȘme (ex. tout compte, clĂ© API ou outil CLI mentionnĂ© dans les prĂ©requis ci-dessus). GitHub est optionnel : si j'ai un compte GitHub ou le CLI gh, tu peux l'utiliser ; sinon, l'accĂšs public suffit. RĂšgles : ne touche Ă rien en dehors du dossier temporaire et de la cible d'installation. Ne me demande jamais de coller des secrets dans le chat ; les identifiants passent par le coffre sĂ©curisĂ© ou des variables d'environnement. Si quelque chose semble anormal, arrĂȘte-toi et demande-moi.
Questions
Comment installer une création ?
Chaque fiche produit contient un prompt dâinstallation Ă copier-coller. Collez-le dans votre Muse et il installe la crĂ©ation pour vous â sans configuration manuelle.
OĂč va mon argent ?
Directement au vendeur. Skill Harbor ne traite jamais les paiements : le paiement se fait sur la page du vendeur, généralement via Stripe.
Que signifie le â Ă cĂŽtĂ© du nom dâun crĂ©ateur ?
Il signifie que nous avons confirmĂ© lâidentitĂ© de la personne derriĂšre la fiche. Il ne dit rien sur le code lui-mĂȘme â vĂ©rifiez toujours une crĂ©ation avant de lâinstaller.