stitch::manage-design-systemdi Google Labs

Stitch Manage Design System Skill.

Una skill per Claude Code e Codex per lavori di brand e sistema di design: crea, aggiorna e applica sistemi di design in Stitch tramite strumenti MCP.

Brand e design system
Design system

Scarica OpenDesign Guida all'uso

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

--- name: stitch::manage-design-system description: - Manage design systems in Stitch using MCP tools. Includes retrieval of assets, creating/updating design systems in Stitch, and applying them to screens. --- ## 📥 Retrieval ## 🧠 Synthesis from Description ## 📝 Output Structure ## 🚀 Create or Update Design System in Stitch ## 🎨 Apply Design System to Screens ## 📋 Update Project Metadata

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

01 Cosa fa

Cosa Fa la Skill stitch::manage-design-system 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

Gestisce il design system che funge da fonte di verità di un progetto in Stitch, utilizzando strumenti MCP. Recupera i metadati del progetto e gli asset delle schermate (list_projects, list_screens, get_screen, read_url_content), sintetizza i token dalle schermate esistenti tramite la skill design-md oppure a partire da una semplice descrizione, scrive .stitch/DESIGN.md, poi carica il markdown e chiama create_design_system_from_design_md.

Un checkpoint vincolante richiede l'approvazione dell'utente per nome visualizzato, colori, font e arrotondamento prima che venga effettuato qualsiasi upload. Dopo la creazione, apply_design_system applica i token alle schermate esistenti utilizzando solo gli id delle istanze di schermata, e .stitch/metadata.json registra il progetto, le schermate e un riepilogo del design system.

Che cosa produce

Un file di design DESIGN.md generato per il progetto.
Un file .stitch/metadata.json che tiene traccia dell'id del progetto, del titolo, di tutte le schermate note e di un riepilogo del design system.
Token di design a livello di progetto conservati all'interno di Stitch, che i successivi prompt di generazione non devono ripetere.

Vedi l'esempio di prompt ↗

Come funziona

01
Recuperare gli Asset del Progetto e delle Schermate
list_projects individua il projectId di destinazione, list_screens fa emergere le schermate rappresentative come Home o Main Dashboard, e get_screen restituisce lo screenshot e gli URL di download dell'htmlCode prima che l'HTML venga recuperato.
02
Sintetizzare il Design System
Le schermate esistenti vengono interpretate con la skill design-md; un progetto completamente nuovo o una descrizione diretta vengono gestiti mappando prima le parole imprecise dell'utente su valori precisi.
03
Caricare DESIGN.md e Creare il Design System
Lo script di upload consigliato codifica il markdown in base64 in-process e lo invia all'endpoint batchCreate del progetto, superando i limiti di token in output; create_design_system_from_design_md viene poi eseguito con il projectId e l'istanza di schermata restituita.
04
Applicare il Sistema alle Schermate Esistenti
apply_design_system riceve il projectId, l'assetId e un elenco di istanze di schermata affinché le schermate già realizzate adottino i token memorizzati.

02 Trova la tua applicazione

Quando Usare la Skill stitch::manage-design-system

Usa la skill stitch::manage-design-system 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

Un progetto che necessita di un unico linguaggio di design autorevole che tenga insieme le schermate future.
Un nuovo progetto Stitch senza ancora schermate, in cui l'utente fornisce solo una descrizione scritta dello stile.
Ricostruire a ritroso un design system a partire da schermate già esistenti nel progetto.

Conosci i limiti

Qualsiasi DESIGN.md superiore a circa 5KB non può passare attraverso lo strumento di upload MCP diretto e richiede invece il percorso via script.
Le indicazioni su come descrivere gli elementi di design non si trovano in questo file; sono delegate a un'altra skill.
Lo schema completo dell'oggetto designSystem non è riportato qui; si trova in un file di riferimento separato.

Cosa fornire

L'id del progetto StitchIdentifica a quale progetto appartiene il design system ed è necessario allo script di upload e a ogni chiamata MCP successiva.
Schermate rappresentativeSchermate come Home o Main Dashboard fungono da fonte visiva quando i token vengono estratti da un progetto esistente.
Una descrizione di stile in linguaggio sempliceUtilizzata quando non esistono schermate, ad esempio una breve frase che indica palette, arrotondamento e font.
Argomenti dello script per l'uploadLo script di upload richiede id del progetto, percorso del file, chiave API e un valore generated-by passati sulla riga di comando.

03 Dentro la skill

Le regole che la skill stitch::manage-design-system 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.

Fermarsi per l'approvazione dell'utente prima dell'upload
La skill deve fermarsi e chiedere conferma prima di caricare qualsiasi elemento su Stitch, presentando nome visualizzato, colori principali, font e arrotondamento, e attendere un'approvazione esplicita.
Inviare solo id e sourceScreen durante l'applicazione
selectedScreenInstances non contiene alcun dato di posizione o dimensione, solo i due campi identificativi.
Escludere le istanze design-system dall'elenco dei target
Le istanze di tipo DESIGN_SYSTEM_INSTANCE vengono filtrate; solo le schermate reali vengono passate ad apply_design_system.
Indicare chi ha generato il markdown
L'argomento generated-by indica la skill o lo strumento che ha prodotto il DESIGN.md; se omesso, viene usata un'etichetta predefinita fissa.
Creare il sistema subito dopo l'upload
create_design_system_from_design_md viene chiamato immediatamente dopo il passaggio di upload, con projectId e selectedScreenInstance.
Leggere l'id dell'asset dal nome del design system
list_design_systems restituisce un nome nella forma assets/{assetId}; la parte dopo assets/ è l'assetId usato durante l'applicazione.

04 Mettila al lavoro

Installa stitch::manage-design-system 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::manage-design-system 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::manage-design-system

Forma generica della CLI skills per plugins/stitch-design/skills/manage-design-system/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

Here is the brand direction for [product name]: dark theme, blue and purple, rounded, Inter font. The Stitch project [projectId] has no screens yet, so please turn that into the DESIGN.md and create the design system in Stitch for me to approve.

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:

Verificare che l'upload abbia effettivamente restituito entrambi gli identificatori prima di procedere.
Verificare che sia lo script di upload sia la chiamata di creazione siano terminati, poiché solo allora i token vengono memorizzati a livello di progetto.
Recuperare gli id delle istanze di schermata da get_project invece di indovinarli, in modo che apply_design_system abbia target validi.
Verificare il DESIGN.md generato rispetto alla struttura definita altrove prima di caricarlo.

In OpenDesign importi stitch::manage-design-system 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/manage-design-system/SKILL.md Checksum del contenuto registrato alla verifica; commit 0337446
License: Apache-2.0 Da LICENSE.
Stelle del repository: 8.304 Snapshot GitHub del 14 settembre 2026 per l'intero repository google-labs-code/stitch-skills, che contiene 12 skill in questo catalogo. Non è una valutazione o conteggio d'uso per stitch::manage-design-system.
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

📥 RetrievalQuattro passaggi ordinati per estrarre asset di progetto, schermata e HTML tramite gli strumenti Stitch MCP.
🧠 Synthesis from DescriptionQuando riutilizzare la skill design-md e come trasformare una descrizione vaga in valori concreti.
📝 Output StructureIndica che DESIGN.md segue la struttura definita nella skill design-md.
🚀 Create or Update Design System in StitchFlusso di caricamento e creazione in due fasi, con un checkpoint obbligatorio di conferma da parte dell'utente.
🎨 Apply Design System to ScreensStruttura JSON esatta più i tre passaggi per raccogliere gli id necessari.
📋 Update Project MetadataScrive .stitch/metadata.json con id di progetto, titolo, schermate e riepilogo del sistema.
Schema ReferenceRimanda a reference/tool-schema.md per lo schema completo dell'oggetto designSystem.
💡 Best PracticesRimanda alla skill design-md per i consigli sulla descrizione degli elementi di design.

Descrizione della skill

"- Gestisce i design system in Stitch usando gli strumenti MCP. Include il recupero di asset, la creazione/aggiornamento di design system in Stitch e la loro applicazione alle schermate."

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

06 Prima di installare

Domande sulla skill stitch::manage-design-system

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

Viene caricato qualcosa su Stitch senza il mio consenso?

No. Esiste un checkpoint esplicito: la skill deve presentare un riepilogo del design system che sta per creare, comprendente nome visualizzato, colori chiave, font e arrotondamento, e attendere l'approvazione prima di caricare.

Cosa succede se il mio DESIGN.md è più grande di qualche KB?

Utilizzi lo script di upload consigliato invece dello strumento MCP diretto. Codifica il markdown in base64 in-process e lo invia all'endpoint batchCreate, evitando così i limiti dei token di output.

Da dove provengono gli id per applicare un design system?

get_project restituisce le screenInstances con il relativo id e sourceScreen, filtrate anche in questo caso solo per le schermate reali.

Può funzionare su un progetto completamente nuovo senza alcuna schermata?

Sì. Quando non ci sono schermate o l'utente fornisce una descrizione diretta, la skill mappa i termini vaghi in valori precisi, scegliendo codici hex concreti, famiglie di font e arrotondamento, e poi genera DESIGN.md.

Stitch Manage Design System

Esegui stitch::manage-design-system su un vero task di lavoro su brand e design-system.

Scarica OpenDesign, importa stitch::manage-design-system 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::manage-design-system