stitch::extract-design-mddi Google Labs

Stitch Extract Design MD Skill.

Una skill per Claude Code e Codex per lavori di brand e sistema di design: estrae un DESIGN.md completo dal codice sorgente frontend in qualsiasi framework.

Brand e design system
DESIGN.md

Scarica OpenDesign Guida all'uso

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

--- name: stitch::extract-design-md description: - Extract a comprehensive design system (DESIGN.md) directly from frontend source code — React, Vue, Svelte, Angular, plain HTML/CSS, or any web framework. Analyzes component files, stylesheets, Tailwind configs, theme definitions, and design tokens to produce a rich, Stitch-compatible design system document. Use this skill whenever the user wants to reverse-engineer a design system from an existing codebase, audit … --- ## Why This Exists ## When to Use ## Prerequisites ## Workflow ## 1. Visual Theme & Atmosphere ## 2. Color Palette & Roles

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

01 Cosa fa

Cosa fa la skill stitch::extract-design-md 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

Questa skill legge una codebase frontend e scrive un DESIGN.md che catturi il suo linguaggio visivo, senza compilare o renderizzare l'app. Rileva il framework da package.json e dai file di configurazione (React, Vue, Svelte, Angular, Tailwind, CSS-in-JS, CSS puro), quindi analizza atmosfera, palette di colori e ruoli, tipografia, stili dei componenti, principi di layout e note per la generazione con Stitch.

L'output viene salvato in .stitch/DESIGN.md e deve iniziare con un blocco frontmatter YAML contenente name e una mappatura colors, perché altre skill lo analizzano. Pensata per designer e sviluppatori che fanno reverse engineering, audit o migrazione del design system di un progetto esistente.

Che cosa produce

Un documento DESIGN.md assemblato nel formato standard del design system.
Un blocco frontmatter YAML con name e una mappatura colors in cima al file, seguito dalle sezioni markdown.
Una sezione finale di note del design system per la generazione con Stitch, che copre linguaggio, riferimenti ai colori e prompt dei componenti.

Vedi l'esempio di prompt ↗

Come funziona

01
Rilevare il Framework e lo Stack
Esamina la root del progetto in cerca di file rivelatori come package.json, tailwind.config.js, postcss.config.js, theme.js o tokens.js, poi legge package.json per capire il framework, gli strumenti CSS e le eventuali librerie di design token.
02
Leggere il Riferimento del Framework Corrispondente
React/Next/Tailwind, Vue/Nuxt, Svelte, Angular e CSS puro dispongono ciascuno di un file di riferimento con pattern specifici per il framework per individuare colori, tipografia e spaziatura.
03
Estrarre la Palette di Colori e Assegnare i Ruoli
I colori provengono da proprietà personalizzate CSS, configurazione Tailwind, file di tema, stili dei componenti, classi con scope e oggetti CSS-in-JS, poi vengono raggruppati per funzione piuttosto che per tonalità.
04
Analizzare Componenti e Layout
La skill esamina bottoni, card, navigazione, campi di input e componenti specifici del dominio, oltre a griglia, spazio bianco, allineamento e comportamento responsive.
05
Scrivere il DESIGN.md
Tutto viene assemblato nel formato standard di DESIGN.md e scritto in una directory .stitch, creata se non esiste.
06
Passare Facoltativamente a Stitch
Se l'utente vuole che il design system venga caricato in Stitch, il file DESIGN.md scritto diventa l'input per lo skill manage-design-system.

02 Trova la tua applicazione

Quando usare la skill stitch::extract-design-md

Usa la skill stitch::extract-design-md in Claude Code o Codex quando il lavoro riguarda brand e design system di questo tipo. Idoneità e limiti sono presi dal file della skill stessa.

Buona applicazione

Hai una codebase frontend e vuoi che il suo design system venga estratto o documentato a partire dal codice sorgente.
L'app non può essere compilata o renderizzata, ma i file sorgente sono disponibili.
Vuoi migrare l'identità visiva esistente di un progetto in Stitch.
Lo styling in una codebase è incoerente e va unificato o riconciliato.

Conosci i limiti

Non è la via dell'HTML renderizzato; è ciò che fa lo skill design-md separato partendo dall'HTML renderizzato.
Non può essere eseguito senza accesso alla directory sorgente del progetto frontend.

Cosa fornire

File di tema o di token, se esistonoIndicare file theme. o tokens. fornisce la fonte più autorevole dei valori di design.
Nome del progetto e ID, se notoIl titolo del documento usa il nome del progetto; l'ID del progetto è incluso quando disponibile e altrimenti omesso.
Una decisione sul caricamento in StitchSe l'utente vuole che il design system venga caricato in Stitch, il workflow prosegue oltre la Fase 3 fino all'handoff di integrazione.

03 Dentro la skill

Regole che lo skill stitch::extract-design-md fornisce a Claude Code e Codex

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

Il frontmatter YAML è obbligatorio
Il file deve aprirsi con un blocco YAML contenente name e una mappatura colors, in linea con examples/DESIGN.md.
Nominare i colori per carattere, non per tinta
Ogni colore riceve un nome descrittivo che evoca il suo aspetto, così #294056 diventa "Deep Muted Teal-Navy" invece di "Blue".
Consolidare i colori quasi duplicati
I quasi duplicati come #333 e #2C2C2C vengono uniti sotto l'unico nome che rappresenta al meglio il colore previsto.
Partire dalla configurazione Tailwind
Un tailwind.config.js personalizzato è trattato come il design system stesso: da lì si estrae per primo, poi si controllano a campione i componenti per verificare eventuali override.
I file di tema hanno priorità sugli stili dei componenti
Un file di tema che definisce una palette rivela il design system previsto, mentre gli stili inline sparsi mostrano solo ciò che è stato effettivamente rilasciato.
Trattare le proprietà personalizzate CSS come intento
Una variabile come --brand-primary è un token di design deliberato, non un valore accessorio, e va rispettata come tale.
Scrivere le note di Stitch in linguaggio naturale
Le note di generazione descrivono i componenti in prosa, senza incollare sintassi CSS o proprietà grezze.
Mantieni l'Atmosfera Editoriale
La sezione atmosfera è scritta come testo editoriale su tono e filosofia, non come documentazione tecnica.

04 Mettila al lavoro

Installa stitch::extract-design-md 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::extract-design-md a Claude Code, Codex o al 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::extract-design-md

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

Assegna alla Skill un Primo Task di Lavoro su Brand e Design System

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

Starter prompt

Pull the design system out of [./src] for me — it's a Vue app with a theme.ts and some SCSS, and the dev server won't start right now. Group the colors by role, not by hue, give near-duplicates one descriptive name, and cover typography, buttons, cards, navigation and inputs. Write it to .stitch/DESIGN.md with the YAML frontmatter, and finish with a few Stitch generation prompts.

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:

Ogni colore ha un nome descrittivo, un codice hex e un ruolo funzionale.
La tipografia comprende la famiglia di font, una descrizione dei caratteri e l'intera gerarchia.
Gli stili dei componenti definiscono forma, colore, stati e transizioni.
Il layout definisce max-width, grid, breakpoint e la strategia di spaziatura.
Il documento cattura l'intento dietro lo stile, non solo i valori grezzi.

In OpenDesign importa stitch::extract-design-md dal suo link SKILL.md: Plugins → Add → Skill → Import from link, poi selezionalo 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/extract-design-md/SKILL.md Checksum del contenuto registrato alla verifica; commit 0337446
License: Apache-2.0 Da LICENSE.
Stelle del repository: 8.304 Snapshot GitHub acquisito il 2026-09-14 per l'intero repository google-labs-code/stitch-skills, che contiene 12 skill presenti in questo catalogo. Non è una valutazione o un conteggio di utilizzo per stitch::extract-design-md.
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

Perché EsisteLeggere il codice sorgente è più veloce dell'HTML renderizzato e funziona anche quando la build è rotta.
Quando UsarloAttivatori: estrarre, documentare, verificare, migrare un design system, unificare stili incoerenti.
PrerequisitiSolo accesso alla directory dei sorgenti; non sono richieste dipendenze di build o runtime.
WorkflowQuattro fasi: scoperta del progetto, estrazione approfondita, scrittura di DESIGN.md, integrazione opzionale con Stitch.
Checklist di QualitàElementi di verifica per colori, tipografia, componenti, layout, linguaggio, deduplicazione e intento.
Suggerimenti per un'Estrazione MiglioreAnalizza i commenti nel codice, preferisci librerie di token e file di tema, tratta la configurazione Tailwind come il sistema.

Descrizione della skill

"- Estrae un design system completo (DESIGN.md) direttamente dal codice sorgente frontend — React, Vue, Svelte, Angular, HTML/CSS semplice o qualsiasi framework web. Analizza file di componenti, fogli di stile, configurazioni Tailwind, definizioni di tema e token di design per produrre un documento di design system ricco e compatibile con Stitch. Usa questa skill ogni volta che l'utente vuole fare reverse-engineering di un design system da una codebase esistente, verificare il linguaggio visivo di un progetto, estrarre token di design dai file sorgente o comprendere i pattern di styling in un repository frontend — anche se dice semplicemente "che aspetto ha questa app?" o "estrai il design da questo codice."

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

06 Prima di installare

Domande sulla Skill stitch::extract-design-md

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

Devo installare le dipendenze o far compilare l'app prima?

No. La skill legge solo i file sorgente e non necessita di dipendenze di build o runtime, quindi funziona anche quando le dipendenze mancano o la build è rotta.

Quali framework e configurazioni di stile può gestire?

React, Vue, Svelte, Angular, HTML/CSS puro e qualsiasi framework web, incluse configurazioni Tailwind, CSS-in-JS e file di tema o token. I pattern di estrazione specifici per framework si trovano in file di riferimento che consulta per React/Tailwind, Vue, Svelte, Angular e CSS puro.

Perché il DESIGN.md necessita del frontmatter YAML?

Il blocco contiene il nome e la mappatura dei colori come dati strutturati che altre skill analizzano. Omettere questa parte, o i token colore principali, è un errore nell'uso corretto della skill.

Può pubblicare il design system completato su Stitch?

Questo passaggio è opzionale ed è gestito da un'altra skill: la Fase 4 passa il testimone a manage-design-system, che effettua le chiamate di creazione/aggiornamento MCP usando il DESIGN.md come input. Se desidera solo il documento, il lavoro termina dopo la Fase 3.

Stitch Extract Design MD

Esegui stitch::extract-design-md su un Task Reale di Lavoro su Brand e Design System.

Scarica OpenDesign, importa stitch::extract-design-md 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::extract-design-md