Vai alla guida all’uso
create-design-mddi Julien Thibeaut

Create Design MD Skill.

Una skill per Claude Code e Codex per il lavoro su brand e design system: crea o aggiorna un DESIGN.md da un repository di prodotto esistente o da un sito web pubblico.

  • Brand e design system
  • DESIGN.md
ibelick/ui-skills · skills/create-design-md/SKILL.mdSKILL.md
--- name: create-design-md description: Create or update a DESIGN.md from an existing product repository or public website. Use when asked to document an interface's design language, reconstruct its visual system, extract design tokens and guidance from current evidence, or give coding agents persistent UI context. Do not modify product source or promote accidental implementation patterns into design decisions. --- ## Boundaries ## 1. Choose the mode ## Shared evidence pipeline ## 2. Trace the evidence ## 3. Decide what belongs ## 4. Write the document
Intestazione e titoli di sezione letti dal file upstream il 14/09/2026 · 16.176 caratteri in totale

01 Cosa fa

Cosa fa lo skill create-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

Trasforma un prodotto esistente in un contratto di design scritto. In modalità repository analizza i token, i temi, i primitivi condivisi e le route renderizzate di un prodotto locale e scrive DESIGN.md alla radice di quel prodotto; in modalità URL ricostruisce una bozza a partire dal DOM, dagli stili calcolati e dai fogli di stile caricati, a larghezza desktop e mobile.

Entrambe le modalità condividono un'unica pipeline di evidenze — ruolo, valore, fonte, ambito, ricorrenza, confidenza — e un unico schema di token piatto, con target di esportazione css-tailwind, json-tailwind o dtcg. I valori sopravvivono solo se una fonte autorevole li nomina o superano un controllo a tre prove, e il documento non viene rilasciato finché lint ed esportazione non hanno successo. Non modifica nulla se non DESIGN.md.

Che cosa produce

  • Una bozza di DESIGN.md ricostruita e scritta nell'area di lavoro corrente in modalità URL, etichettata come bozza.
  • Un report che elenca la modalità e il prodotto o URL analizzato, le fonti autorevoli utilizzate, e i conflitti o le aree non supportate escluse dal documento.
  • I risultati finali di lint ed esportazione, che devono entrambi avere esito positivo prima che il documento venga restituito.
Vedi l'esempio di prompt ↗

Come funziona

  1. 01
    Scelta della Modalità

    Modalità repository quando è disponibile un repository di prodotto locale, con scrittura di DESIGN.md alla radice di quel prodotto; modalità URL quando viene fornito solo un URL pubblico, producendo una bozza ricostruita nell'area di lavoro corrente.

  2. 02
    Raccolta delle Evidenze e Registrazione della Provenienza

    Ogni candidato viene registrato con la propria fonte, ambito e ricorrenza prima di qualsiasi normalizzazione, così entrambe le modalità alimentano la stessa pipeline di registrazione.

  3. 03
    Normalizzazione nello Schema di DESIGN.md

    I candidati incerti, locali senza un contratto, o non rilevanti per l'implementazione vengono scartati; il resto viene mappato nello schema canonico di token piatto.

  4. 04
    Blocco della Bozza Dietro la Validazione

    Il markdown viene scritto solo dopo che il frontmatter analizzato supera i controlli di forma, così il testo non viene mai redatto prima e poi adattato allo YAML.

  5. 05
    Lint ed Esportazione

    Viene eseguito prima il lint strutturale, poi un'esportazione di compatibilità nel target selezionato, e ogni categoria popolata deve apparire nell'output.

  6. 06
    Report su Modalità, Fonti e Lacune

    Il report indica la modalità e il prodotto o URL analizzato, le fonti autorevoli utilizzate, ciò che è stato omesso come non supportato, e i risultati di lint ed esportazione.

02 Trova la tua applicazione

Quando utilizzare lo skill create-design-md

Usa la skill create-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

  • Documentare il linguaggio di design di un'interfaccia e ricostruirne il sistema visivo a partire dalle evidenze attuali nel codebase.
  • Fornire agli agenti di codice un contesto UI persistente invece di ripetere le decisioni di design per ogni task.
  • Un sito pubblico senza codice sorgente disponibile, dove è accettabile una bozza ricostruita a partire da DOM, stili calcolati e CSS caricato.

Conosci i limiti

  • Modificare il codice sorgente, le dipendenze o la configurazione del prodotto per adattarli al design documentato — solo il file DESIGN.md è nell'ambito.
  • Leggere i nomi interni dei token, la proprietà dei componenti o intenti non documentati da un sito web live: le evidenze da URL non possono stabilirli.
  • Lavorare senza un'ispezione del browser renderizzato; screenshot o file sorgente devono essere richiesti invece di essere inferiti dal testo o dall'HTML.
  • Scaricare ogni token o componente individuato — gli inventari esaustivi sono esplicitamente fuori ambito.

Cosa fornire

  • Quale prodotto, se il repo ne contiene diversiL'utente deve indicare il prodotto distribuibile da documentare; se la proprietà non è chiara, la skill chiede prima di scrivere.
  • Un URL pubblico più accesso al browser renderizzatoLa modalità URL analizza il DOM, gli stili calcolati e i foglio di stile pubblici caricati a larghezze desktop e mobile; gli screenshot da soli non possono stabilire valori esatti.
  • Un target di esportazione non predefinito, se presenteL'output URL usa come predefinito css-tailwind a meno che l'utente non specifichi un altro target, poiché i nomi dei token devono restare validi per quello.

03 Dentro la skill

Regole che la Skill create-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.

  1. Tocca Solo il Documento

    La modalità repository non deve modificare il codice sorgente del prodotto, le dipendenze, la configurazione o i file generati, e non deve promuovere pattern di implementazione accidentali a decisioni di design.

  2. Preferisci le Prove del Repository

    La modalità repository viene scelta ogni volta che il codice sorgente è disponibile; un URL fornito può verificare la presentazione renderizzata ma non sostituisce mai le prove del repository.

  3. Uno Schema, Solo Forme di Mapping

    I gruppi di token sono mapping, mai sequenze, ed entrambe le modalità devono usare gli stessi nomi di token piatti senza introdurre un secondo schema.

  4. Scegli il Target di Esportazione Prima di Scrivere

    css-tailwind per Tailwind v4, json-tailwind per Tailwind v3, e dtcg altrimenti; i nomi dei token devono essere validi per il target scelto.

  5. Tre Prove per le Affermazioni in Modalità URL

    Un'affermazione in modalità URL richiede osservazione, base e conseguenza; se manca una prova, l'affermazione viene omessa piuttosto che ipotizzata.

  6. Emetti Solo Nomi di Token Validi per regex

    Ogni nome di token emesso deve corrispondere a ^[a-zA-Z0-9][a-zA-Z0-9-]*$; qualsiasi chiave che non soddisfa questo requisito viene rifiutata e riscritta.

  7. Normalizza un Singolo Token di Livello group

    Un singolo token sorgente come --radius diventa rounded.base; sm, md, lg e xl non vengono mai derivati da classi utility o valori ripetuti.

  8. Nessun Rilascio con Validazione Fallita

    Il documento non viene mai restituito mentre il lint o l'esportazione falliscono, e una categoria popolata assente dall'esportazione viene trattata come un fallimento dello schema.

04 Mettila al lavoro

Installa create-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 create-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/ibelick/ui-skills --skill create-design-md

Forma generica della CLI skills per skills/create-design-md/SKILL.md; il repository può documentare il 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
Here's the repo for [product] — please document its design language in a DESIGN.md at the root. Pull the token names, typography scales and radius values out of our theme file, and leave out anything our shared components don't actually render. We ship on Tailwind v4, so keep the export compatibility in mind.

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:

  • Esegui esattamente un'esportazione di compatibilità nel target selezionato precedentemente e ispeziona l'output.
  • Per css-tailwind, verifica che i colori vengano mappati a --color-, la famiglia a --font-, la dimensione a --text-, rounded a --radius- e la spaziatura a --spacing-; un blocco di tipografia popolato che non emette né --font- né --text-* significa che il documento deve essere riscritto.
  • Prima di salvare, rileggi il frontmatter analizzato e autorigetta i figli scalari di tipografia o le chiavi rounded assenti dalla fonte di riferimento.
  • Quando si aggiorna un documento esistente, mantenere temporaneamente i contenuti originali e confrontarli con il nuovo file, ripristinando ogni decisione accettata che sia stata rimossa.
  • Verificare la specifica installata prima di codificare le modalità del tema e ricorrere a una tabella Themes solo se le modalità non sono supportate.

In OpenDesign importare create-design-md dal suo link SKILL.md: Plugins → Add → Skill → Import from link, quindi selezionarlo nella barra superiore.

05 Open source, tracciabile

Sorgente, licenza e verifica

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

Repository
github.com/ibelick/ui-skills Branch main
File della skill
skills/create-design-md/SKILL.md Checksum del contenuto registrato alla verifica; commit 79081ab
License
MIT Da LICENSE.
Stelle del repository
8.402 Snapshot GitHub acquisito il 14/09/2026 per l'intero repository ibelick/ui-skills, che contiene 5 skill presenti in questo catalogo. Non è un punteggio o un conteggio di utilizzo per create-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

  1. LimitiSolo modifiche a DESIGN.md; nessuno schema concorrente, nessun elenco esaustivo di ogni token individuato.
  2. 1. Scegliere la modalitàModalità repository o URL, cosa ciascuna può dimostrare e quando è necessario chiedere prima.
  3. Pipeline di evidenze condivisaPipeline di registrazione in sei fasi e criteri di omissione che entrambe le modalità devono rispettare.
  4. 2. Tracciare le evidenzeOrdine di ispezione per i repository; elenco di campionamento, prove e registro delle evidenze per gli URL.
  5. 3. Decidere cosa includereStruttura dello schema, scelta del target di esportazione, gestione dei temi e cosa il testo può affermare.
  6. 4. Scrivere il documentoFrontmatter minimo, ordine delle sezioni consentito e cosa eliminare prima di salvare.
  7. 5. ValidareLint, un'esportazione, controlli di categoria e confronto di un documento aggiornato.
  8. 6. RiportareCosa restituire: modalità, target verificato, fonti, omissioni, risultati della validazione.
Descrizione della skill
Crea o aggiorna un DESIGN.md da un repository di prodotto esistente o da un sito web pubblico. Usa quando ti viene chiesto di documentare il linguaggio di design di un'interfaccia, ricostruire il suo sistema visivo, estrarre token di design e linee guida dalle evidenze attuali, o fornire agli agenti di codice un contesto UI persistente. Non modificare il codice sorgente del prodotto né promuovere pattern di implementazione accidentali in decisioni di design.

Descrizione front-matter da SKILL.md. Il file completo contiene circa 16.176 caratteri. Leggi il file completo su GitHub.

Crea Design MD

Esegui create-design-md su un Task Reale di Lavoro su Brand e Design System.

Scarica OpenDesign, importa create-design-md dal link SKILL.md, incolla il prompt qui sopra e leggi il piano prima del risultato.

Terminale
npx skills add https://github.com/ibelick/ui-skills --skill create-design-md

OpenDesign Desktop

Un solo design system. Il tuo brand, coerente ovunque

Nel Vibe Design Workspace completo, applica le stesse regole di brand a siti, presentazioni, prototipi interattivi, dashboard, immagini e video HTML. Collega Codex, Claude Code, Cursor e gli altri agenti di coding locali e crea gratis.

  • Siti, presentazioni, prototipi, dashboard, immagini e video
  • Oltre 140 design system e la libreria completa di template e skill
  • Codex locale e oltre 21 agenti di coding · Gratis
Scarica gratis

Disponibile per macOS e Windows