83.3K+Scarica
Vai alla guida all’uso
design-mddi Google Labs

Design MD Skill.

Una skill per Claude Code e Codex dedicata al lavoro su brand e design system: analizza progetti Stitch e scrive un DESIGN.md semantico.

  • Brand e design system
  • DESIGN.md
Scarica OpenDesignGuida all'uso
google-labs-code/stitch-skills · plugins/stitch-utilities/skills/design-md/SKILL.mdSKILL.md
--- name: design-md description: Analyze Stitch projects and synthesize a semantic design system into DESIGN.md files --- ## Prerequisites ## The Goal ## Retrieval and Networking ## Analysis & Synthesis Instructions ## Output Guidelines ## Output Format (DESIGN.md Structure)
Front matter e intestazioni di sezione letti dal file originale il 14/09/2026 · 7.644 caratteri in totale

01 Cosa fa

Cosa fa la skill 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 trasforma un progetto Stitch esistente in un DESIGN.md che serve come fonte di verità per richiedere a Stitch di generare nuove schermate nello stesso linguaggio di design. È pensata per designer e sviluppatori con accesso a Stitch MCP e almeno una schermata progettata: la skill scopre il namespace MCP, risolve gli ID di progetto e schermata, recupera l'oggetto schermata insieme al suo HTML e screenshot, e legge il designTheme del progetto.

Documenta poi il tema visivo e l'atmosfera, i colori come nomi descrittivi con codici hex e ruoli funzionali, la tipografia, gli stili dei componenti e i principi di layout, in un linguaggio di design evocativo piuttosto che con valori tecnici grezzi.

Che cosa produce

  • Un design system in cinque parti che copre tema visivo e atmosfera, la palette colori con i ruoli, le regole tipografiche, gli stili dei componenti per pulsanti, card e campi di input, e i principi di layout.
Vedi l'esempio di prompt ↗

Come funziona

  1. 01
    Scoprire il Namespace MCP

    Eseguire list_tools per trovare il prefisso MCP di Stitch, poi riutilizzare quel prefisso per ogni chiamata successiva al server.

  2. 02
    Risolvere Progetto e Schermata

    Elencare i progetti posseduti quando non viene fornito nessun Project ID, poi elencare le schermate per l'ID numerico del progetto e far corrispondere un titolo di schermata come Home o Landing Page.

  3. 03
    Recuperare l'Oggetto Schermata e gli Asset

    get_screen restituisce gli URL di download dello screenshot e dell'HTML, le dimensioni dello schermo, il tipo di dispositivo e designTheme; l'HTML viene poi scaricato e analizzato per individuare classi Tailwind e pattern di componenti.

  4. 04
    Leggere il Design Theme a livello di progetto

    Una chiamata get_project con il percorso completo projects/{id} restituisce l'oggetto designTheme con modalità colore, font, arrotondamento e colori personalizzati.

  5. 05
    Sintetizzare il Sistema Semantico

    Estragga i design token dalla schermata, catturi l'atmosfera generale con aggettivi evocativi e traduca i valori tecnici in un linguaggio descrittivo.

  6. 06
    Scrivere DESIGN.md

    Crei il file DESIGN.md nella directory del progetto seguendo esattamente il formato prescritto in cinque sezioni.

02 Trova la tua applicazione

Quando usare la skill design-md

Usa la skill design-md in Claude Code o Codex quando il lavoro riguarda brand e design-system di questo tipo. Adattabilità e limiti sotto sono tratti dal file della skill stessa.

Buona applicazione

  • Ha già un progetto Stitch contenente almeno una schermata progettata e desidera estrarne un design system scritto.
  • Desidera una fonte di verità per guidare Stitch nella generazione di nuove schermate coerenti con un linguaggio di design esistente.
  • Conosce il progetto solo tramite titolo o URL e desidera che lo skill trovi l'ID del progetto tra quelli di sua proprietà.
  • Desidera che l'atmosfera venga descritta tramite aggettivi evocativi, non con una semplice riformulazione del CSS.

Conosci i limiti

  • Non può funzionare senza il Stitch MCP Server e un progetto Stitch che abbia già una schermata progettata.
  • Produce un design system in Markdown, non nuove schermate; il file DESIGN.md è l'input per un successivo prompting su Stitch.
  • Il gergo tecnico non tradotto, come rounded-xl, è indicato esplicitamente come un errore da evitare.
  • Omettere i codici hex mantenendo solo i nomi descrittivi dei colori è indicato come un errore.

Cosa fornire

  • Project ID (opzionale)Se non viene fornito, lo skill elenca i progetti di proprietà e individua l'obiettivo in base a titolo o pattern dell'URL.
  • Screen ID (opzionale)Se non viene fornito, lo skill esamina i titoli delle schermate per identificare quella di destinazione.
  • Stitch Effective Prompting GuideRiferimento per il linguaggio e i pattern che il resoconto di design dovrebbe utilizzare.

03 Dentro la skill

Regole che lo Skill design-md Fornisce a Claude Code e Codex

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

  1. Solo ID Numerici

    Passi projectId e screenId come ID numerici, mai come percorso completo projects/{id}, eccetto per get_project, che richiede il nome completo.

  2. Mai un Colore Nudo

    Ogni colore riceve un nome descrittivo in linguaggio naturale, il codice hex esatto tra parentesi e il suo ruolo funzionale, come Deep Muted Teal-Navy (#294056) usato per le azioni primarie.

  3. Traduca la Geometria, Non la Citi

    Converta i valori di border-radius e layout in descrizioni fisiche: rounded-full diventa A forma di pillola, rounded-lg diventa Angoli leggermente arrotondati, rounded-none diventa Netto, con spigoli squadrati.

  4. Vietare un Vocabolario Generico

    Evitare termini come blu o arrotondato; preferire Ocean-deep Cerulean (#0077B6) o Bordi delicatamente curvi.

  5. Rispettare la Struttura Prescritta

    Il file si apre con il titolo del progetto e il Project ID, seguiti da cinque sezioni numerate: Visual Theme & Atmosphere, Color Palette & Roles, Typography Rules, Component Stylings, Layout Principles.

  6. Spiegare il Perché, Non Solo il Cosa

    Includere i valori esatti tra parentesi dopo la formulazione descrittiva, e specificare sempre a cosa serve ciascun elemento di design.

  7. Mantenere la Terminologia Coerente

    Usare la stessa terminologia in tutto il documento affinché il design system risulti un unico sistema coerente.

04 Mettila al lavoro

Installa 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 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 design-md

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

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

Adatta questo prompt con i tuoi contenuti e vincoli, poi eseguilo in Claude Code o Codex.

Example prompt
Use the Stitch MCP Server to get the Furniture Collection project

Fonte: esempio SKILL.md (testuale).

Verifica il primo risultato

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

  • Verificare che il formato corrisponda esattamente alla struttura DESIGN.md prescritta, e non a un layout improvvisato.
  • Verificare che ogni codice colore sia corretto e che ciascun colore mantenga sia un nome descrittivo che il proprio valore hex.
  • Verificare che il ruolo funzionale di ogni elemento sia dichiarato, non solo il suo aspetto.
  • Verificare che la sezione sull'atmosfera sia specifica e non vaga, e che ombre e spaziature non siano state omesse.

In OpenDesign design-md è incluso: Plugins → Skills, selezionarlo nella barra superiore.

Scarica OpenDesignLeggi 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-utilities/skills/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 acquisita il 14 settembre 2026 per l'intero repository google-labs-code/stitch-skills, che contiene 12 skill in questo catalogo. Non è un rating o un conteggio di utilizzo per design-md.
Verificato da OpenDesign
14 settembre 2026 Il file sorgente, il percorso, il testo della licenza e il conteggio delle stelle sono stati verificati. Incluso nella build principale di OpenDesign (verificato il 28 agosto 2026); non è stata registrata un'esecuzione live su questa pagina.

All'interno di SKILL.md

  1. PanoramicaDefinisce DESIGN.md come fonte di verità per il prompting di nuove schermate Stitch.
  2. PrerequisitiRichiede accesso a Stitch MCP, una schermata progettata e la guida al prompting.
  3. L'ObiettivoRibadisce che Stitch legge descrizioni visive supportate da valori di colore specifici.
  4. Recupero e NetworkingSei passaggi: namespace, progetto, schermata, metadati, download degli asset, designTheme del progetto.
  5. Istruzioni di Analisi e SintesiEstrarre identità, atmosfera, tavolozza colori, geometria ed elevazione.
  6. Linee Guida per l'OutputSolo linguaggio descrittivo, Markdown pulito, codici hex esatti, spiegare il perché.
  7. Formato di Output (Struttura DESIGN.md)Struttura Markdown a cinque sezioni predefinita da compilare testualmente.
  8. Esempio d'UsoPercorso guidato utilizzando il progetto Furniture Collection e la sua pagina Home.
  9. Best PracticeEssere descrittivi, funzionali, coerenti, visivi e precisi.
  10. Consigli per riuscire benePrima il quadro generale, cerca i pattern, assegna nomi semantici, documenta la gerarchia.
  11. Errori comuni da evitareNessun gergo non tradotto, nessun codice mancante, nessuna descrizione vaga o incompleta.
Descrizione della skill
"Analizza progetti Stitch e sintetizza un design system semantico in file DESIGN.md"

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

06 Prima di installare

Domande sulla skill design-md

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

Quali strumenti usa la skill per raggiungere Stitch?

Dichiara gli strumenti stitch più Read, Write e web_fetch. In pratica esegue prima list_tools per trovare il prefisso MCP, poi chiama list_projects, list_screens, get_screen e get_project con quel prefisso.

Cosa ottengo esattamente alla fine?

Un file DESIGN.md creato nella directory del progetto, strutturato come titolo e ID del progetto seguiti da sezioni su tema visivo e atmosfera, palette colori e ruoli, regole tipografiche, stili dei componenti e principi di layout. È pensato per essere riutilizzato come fonte di verità quando si chiede a Stitch di generare nuove schermate.

Sostituisce il farlo manualmente?

Esegue l'estrazione e la stesura per lei, ma con un requisito di vocabolario specifico: i colori ricevono nomi evocativi più codici hex esatti e ruoli funzionali, e i valori di raggio diventano frasi come Forma a pillola o Spigoli netti e squadrati invece di nomi di classi grezzi. Chiede inoltre di spiegare il perché di ogni decisione.

Design MD

Esegui design-md su un Brand Reale e un Task di Lavoro su design-system.

Lo skill design-md è incluso in OpenDesign. Scarica l'app, seleziona lo skill in Plugins → Skills, incolla il prompt qui sopra e leggi il piano prima del risultato.

Scarica OpenDesignEsplora tutte le skill
Terminale
npx skills add https://github.com/google-labs-code/stitch-skills --skill design-md