stitch::code-to-designdi Google Labs

Stitch Code to Design Skill.

Una skill per Claude Code e Codex per il design UI: converte il codice frontend in un design Stitch tramite HTML statico ed estrazione del sistema di design.

Web & UI
File di design

Scarica OpenDesign Guida all'uso

google-labs-code/stitch-skills · plugins/stitch-design/skills/code-to-design/SKILL.mdSKILL.md

--- name: stitch::code-to-design description: - Convert frontend code (Vite, React, Angular, Vue, etc.) to a Stitch Design by chaining static HTML extraction, design system extraction, and file upload. **ALWAYS** use this skill when the user's intent is to move existing web apps or React/Angular/Vue components into Stitch (e.g., requests to "save", "migrate", or "upload"). You must use this skill even for simple "save" operations, as it is the only way to … --- ## Workflow

Front matter e intestazioni di sezione letti dal file upstream il 14/09/2026 · 3.645 caratteri completi

01 Cosa fa

Cosa fa lo Skill stitch::code-to-design in Claude Code e Codex

Sintesi, workflow e output, tutto letto dal SKILL.md della skill.

Dal SKILL.mdLetto il 14-09-2026 · non è un'esecuzione registrata

Nelle parole della skill

Converte una codebase frontend esistente (React + Vite, Next.js, Angular, Vue) in un Stitch Design concatenando tre skill: extract-static-html, extract-design-md e upload-to-stitch. È pensata per designer e sviluppatori che vogliono portare un'app in esecuzione o una directory web già compilata in Stitch, per poterci poi iterare.

Il workflow estrae un file HTML autonomo, scrive un design system in .stitch/DESIGN.md, crea il design system in Stitch, poi carica l'HTML come schermata con titolo corrispondente al percorso della route della pagina. È il percorso obbligatorio per le richieste di salvataggio, migrazione o caricamento, e la verifica dell'HTML è opzionale e non blocca mai l'esecuzione.

Che cosa produce

Un unico file HTML autonomo, ad esempio /path/to/extracted/standalone.html.
Una descrizione del design system scritta come DESIGN.md.
Una schermata caricata su Stitch il cui nome e titolo identificano la route dell'applicazione da cui proviene.

Vedi l'esempio di prompt ↗

Come funziona

01
Estrarre un file HTML autonomo
Passa il testimone alla skill extract-static-html, che lavora a partire dall'output della build o da un dev server in esecuzione, come Vite o Angular CLI ng serve, e produce un unico file HTML autonomo.
02
Verifica dell'offerta senza interruzioni
Dopo l'estrazione, comunichi all'utente dove si trova il file, in modo che possa verificarlo autonomamente in un browser, e l'esecuzione prosegue con il passaggio successivo in ogni caso.
03
Analizzare la fonte per ricavarne un design system
Lo skill extract-design-md legge i componenti, i foglio di stile e le configurazioni del tema del progetto, e il risultato viene scritto in un file di design system.
04
Creare il design system in Stitch
Lo skill manage-design-system carica DESIGN.md e chiama create_design_system_from_design_md con gli schemi richiesti.
05
Caricare l'HTML come schermata
Lo stesso script di caricamento invia l'HTML standalone utilizzando la chiave API di Stitch e il projectId, con l'argomento title impostato sulla route della pagina, in modo che la schermata sia identificabile in Stitch.

02 Trova la tua applicazione

Quando usare la skill stitch::code-to-design

Usa la skill stitch::code-to-design in Claude Code o Codex quando il lavoro è progettazione UI di questo tipo. Ambito e limiti qui sotto sono presi dal file della skill stessa.

Buona applicazione

Un'app già esistente scritta in React + Vite, Next.js, Angular o Vue che l'utente vuole spostare in Stitch e continuare a migliorare lì.
Una richiesta formulata in modo generico come salvare, migrare o caricare piuttosto che come un'attività di conversione esplicita.
Un progetto già in esecuzione su un dev server Vite o servito tramite Angular CLI ng serve.
Un workspace Angular organizzato con angular.json, template .html esterni, file del tema e componenti, tutti elementi che alimentano l'estrazione del design system.

Conosci i limiti

Non c'è nulla di eseguibile a cui puntare: il workflow richiede un dev server locale in esecuzione oppure una directory di applicazione web già compilata contenente index.html e asset.

Cosa fornire

Il projectId Stitch di destinazioneI caricamenti richiedono un progetto di destinazione; se non è noto, va cercato prima con list_projects.
Il percorso dell'HTML estrattoIl file standalone prodotto al passaggio 1 deve essere passato al passaggio di caricamento, insieme alla chiave API e al projectId.
I file sorgente del progettoComponenti, foglio di stile e configurazioni del tema sono ciò che l'analisi del design system legge per derivare DESIGN.md.

03 Dentro la skill

Regole che lo skill stitch::code-to-design fornisce a Claude Code e Codex

6 istruzioni concrete, valori predefiniti e limiti che SKILL.md imposta per l'agente — la parte del file che cambia il risultato.

Utilizzarlo sempre per intenti di salvataggio, migrazione o caricamento
Qualsiasi spostamento di app web esistenti o di componenti React/Angular/Vue in Stitch deve passare attraverso questo skill, anche per un semplice salvataggio, poiché è l'unico percorso che estrae anche il design system e collega gli asset.
Scrivere il design system in .stitch/DESIGN.md
Il file del design system va posizionato in .stitch/DESIGN.md e deve seguire la struttura definita dallo skill extract-design-md.
Non bloccarsi mai in attesa di verifica
La verifica dell'HTML estratto è guidata dall'utente e opzionale; l'agente deve procedere direttamente al passaggio del design system invece di attendere.
Etichettare il caricamento del design system
Passare l'argomento --generated-by 'stitch::code-to-design' durante il caricamento di DESIGN.md, in modo che l'origine del prodotto generato venga registrata.
Etichettare il caricamento dell'HTML in modo diverso
L'upload HTML utilizza l'altro marcatore, --generated-by 'stitch::extract-static-html', non quello per code-to-design.
Riutilizzare Una Sola API Key per Entrambi gli Upload
La Stitch API key fornita al passo 4 è la stessa chiave richiesta per l'upload HTML; non esiste una seconda credenziale.

04 Mettila al lavoro

Installa stitch::code-to-design in Claude Code o Codex

Un comando npx skills add, poi un primo task nel tuo agente e una checklist per il risultato.

Aggiungi stitch::code-to-design a Claude Code, Codex o il tuo agente

Eseguitelo nel Suo progetto; l'installer chiede a quale agente aggiungerlo.

Terminal

npx skills add https://github.com/google-labs-code/stitch-skills --skill stitch::code-to-design

Forma generica del CLI skills per plugins/stitch-design/skills/code-to-design/SKILL.md; il repository potrebbe documentare un proprio percorso.

Assegna alla skill un primo compito di progettazione UI

Redatto nei termini propri della skill; sostituisca le parti tra parentesi con il suo materiale.

Starter prompt

Take the frontend in [path to repo] and move it into my Stitch project [projectId]. The Vite dev server is already running at [http://localhost:5173]. Extract the standalone HTML, write the design system to .stitch/DESIGN.md, upload both, and title the screen '/[route]'.

Fonte: redatto a partire dal SKILL.md, nei termini propri della skill.

Verifica il primo risultato

Ciò che il SKILL.md stesso indica come risultato corretto:

Apra il file estratto in un browser per confermare che la pagina venga visualizzata come previsto.
Se l'utente torna con dei problemi dopo aver esaminato l'estrazione, li risolva prima di continuare il workflow.

In OpenDesign importi stitch::code-to-design dal suo link SKILL.md: Plugins → Add → Skill → Import from link, poi lo selezioni nella barra superiore.

Scarica OpenDesign Leggi il quickstart

05 Open source, tracciabile

Sorgente, licenza e verifica

Da dove provengono i dati di questa pagina e quando sono stati verificati l'ultima volta.

Author: Google Labs
Repository: github.com/google-labs-code/stitch-skills Branch main
File della skill: plugins/stitch-design/skills/code-to-design/SKILL.md Checksum del contenuto registrato alla verifica; commit 0337446
License: Apache-2.0 Da LICENSE.
Stelle del repository: 8.304 Snapshot GitHub acquisita il 2026-09-14 per l'intero repository google-labs-code/stitch-skills, che contiene 12 skill in questo catalogo. Non è una valutazione o un conteggio di utilizzo per stitch::code-to-design.
Verificato da OpenDesign: 14/09/2026 File sorgente, percorso, testo della licenza e conteggio delle stelle sono stati verificati. Non inclusa in OpenDesign main (verificato il 28/08/2026); un'esecuzione live non è stata registrata in questa pagina.

All'interno di SKILL.md

WorkflowIndica all'agente di seguire i passaggi elencati per convertire il codice esistente.
PrerequisitiRichiede un dev server in esecuzione o una directory dell'app compilata, oltre a un projectId Stitch.
PassaggiCinque passaggi ordinati, ognuno dei quali delega a un'altra skill o script.

Descrizione della skill

"- Converti codice frontend (Vite, React, Angular, Vue, ecc.) in un Design Stitch concatenando estrazione HTML statica, estrazione del design system e caricamento file. **USA SEMPRE** questa skill quando l'intento dell'utente è spostare app web esistenti o componenti React/Angular/Vue in Stitch (ad es. richieste di "salvare", "migrare" o "caricare"). Devi usare questa skill anche per semplici operazioni di "salvataggio", poiché è l'unico modo per assicurarsi che il design system venga estratto e gli asset siano collegati correttamente."

Descrizione dal front-matter di SKILL.md. Il file completo è di circa 3.645 caratteri. Leggi il file completo su GitHub.

06 Prima di installare

Domande sulla Skill stitch::code-to-design

Le risposte provengono dal SKILL.md letto il 2026-09-14, non da un'esecuzione registrata.

Carica solo una schermata, oppure costruisce anche il design system?

Entrambe le cose. Il file DESIGN.md viene caricato e il design system viene creato in Stitch tramite il workflow manage-design-system, che utilizza lo script di upload e la chiamata create_design_system_from_design_md con gli schemi richiesti.

Quale skill estrae effettivamente l'HTML dalla mia app?

extract-static-html esegue l'estrazione, producendo un unico file HTML autonomo a partire dall'output di build o da un dev server in esecuzione come quello Vite.

Stitch Code to Design

Esegui stitch::code-to-design su un task di design UI reale.

Scarica OpenDesign, importa stitch::code-to-design dal suo link SKILL.md, incolla il prompt qui sopra e leggi il piano prima del risultato.

Scarica OpenDesign Esplora tutte le skill

Terminale

npx skills add https://github.com/google-labs-code/stitch-skills --skill stitch::code-to-design