stitch::generate-designdi Google Labs

Stitch Generate Design Skill.

Una skill per Claude Code e Codex per il design UI: genera, modifica e varia schermate in Stitch da testo o immagini di riferimento.

Web & UI
File di design

Scarica OpenDesign Guida all'uso

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

--- name: stitch::generate-design description: - Generate new screens from text prompts or images, edit existing screens with prompts and design system tokens, and generate design variants using Stitch MCP. Includes prompt enhancement pipeline, design mappings, professional UI/UX terminology, design tokens and theme system capabilities. --- ## 🎨 Prompt Enhancement Pipeline ## Steps ## 💡 Tips

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

01 Cosa fa

Cosa fa la skill stitch::generate-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

Questa skill guida Stitch MCP attraverso quattro flussi: generare una nuova schermata da testo, ricreare un'immagine o un mockup, modificare una schermata esistente e generare varianti. Prima di qualsiasi chiamata di generazione o modifica, esegue una pipeline di potenziamento del prompt che risolve il progetto e il design system, sostituisce le formulazioni vaghe con terminologia UI/UX tratta dalle sue mappature di design e formatta il prompt intorno a layout, contenuto e struttura, usando un template con sezioni PLATFORM e PAGE STRUCTURE.

Lo stile visivo resta a livello di progetto, quindi i prompt di generazione non devono contenere codici hex, font o valori di arrotondamento. Il feedback dell'AI viene mostrato dopo ogni chiamata e gli asset vengono scaricati in .stitch/designs.

Che cosa produce

L'HTML e lo screenshot della schermata generata, scaricati nella directory .stitch/designs.
La descrizione testuale dell'AI e i suggerimenti restituiti in outputComponents, mostrati all'utente.
Schermate varianti per la direzione scelta, in batch da uno a cinque.

Vedi l'esempio di prompt ↗

Come funziona

01
Potenziare il Prompt Prima di Tutto
La pipeline è obbligatoria, non opzionale: l'agente riscrive la richiesta dell'utente prima che gli sia permesso chiamare uno strumento di generazione o modifica di Stitch.
02
Verificare Cosa Stila Già il Progetto
Se il progetto ha già un design system, colori, font e arrotondamento vengono applicati a livello di progetto, quindi il prompt potenziato deve escludere completamente lo stile visivo.
03
Formattare il Prompt come Platform Più Sezioni di Pagina
Le nuove schermate seguono un template che indica prima lo scopo generale, poi PLATFORM, poi una PAGE STRUCTURE numerata che va da Header a Footer.
04
Scegliere Uno dei Quattro Flussi
La richiesta viene instradata verso Generate from Text, Generate from Image, Edit o Generate Variants prima che venga chiamato qualsiasi strumento.

02 Trova la tua applicazione

Quando usare la skill stitch::generate-design

Usa la skill stitch::generate-design in Claude Code o Codex quando il lavoro riguarda il design UI di questo tipo. Idoneità e limiti di seguito sono tratti dal file della skill stessa.

Buona applicazione

Avviare una schermata completamente nuova a partire da una descrizione scritta della pagina.
Ricreare qualcosa che già possiedi come immagine, screenshot o mockup.
Apportare una modifica mirata a una schermata già esistente nel progetto.
Esplorare layout, schemi di colore o testi alternativi per una schermata che già si possiede.

Conosci i limiti

Non genera schermate prima che esista un design system: se il progetto non ne ha uno, il lavoro viene affidato prima allo skill manage-design-system.
Il caricamento di un'immagine non avviene qui; l'immagine diventa prima contenuto della schermata tramite lo skill di upload, e solo dopo viene perfezionata con modifiche.

Cosa fornire

InputQuesto è ciò che la pipeline di miglioramento riscrive in un prompt Stitch strutturato.
Il progetto di destinazioneL'agente cerca il progetto tramite id, e ne crea uno solo quando non esiste un progetto adatto.
La schermata per modifiche o variantiModifiche e varianti richiedono sia il projectId che lo screenId, individuati elencando o recuperando le schermate.

03 Dentro la skill

Regole che lo Skill stitch::generate-design Impone 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.

Nessuna Fuga del Tema nei Prompt di Generazione
Non inserire mai codici hex, nomi di font o ruoli di colore in un prompt di generazione; il design system gestisce tutto lo stile visivo e i conflitti di duplicazione.
Codici Hex Solo Durante la Modifica
I valori hex esatti sono consentiti per una corrispondenza precisa dei colori nei prompt di modifica, che è l'unico caso in cui il divieto sui prompt di generazione non si applica.
Mostrare Sempre outputComponents
Dopo ogni chiamata a uno strumento Stitch, l'agente deve mostrare all'utente la Text Description e i Suggestions restituiti, non solo la schermata risultante.
Modificare Piuttosto che Rigenerare
La rigenerazione completa è riservata a un layout fondamentalmente errato; tutto il resto dovrebbe passare attraverso modifiche mirate.
Sovrascrivere le Copie Locali Dopo una Modifica
Gli URL aggiornati di HTML e screenshot vengono scaricati nuovamente sopra i file precedenti, così i file locali riflettono le modifiche più recenti.
Mantenere .stitch/metadata.json Sincronizzato
Dopo aver scaricato gli asset, il metadata viene aggiornato con i titoli delle schermate modificati o i nuovi ID delle schermate; il file tiene traccia di tutte le schermate, i tipi di dispositivo e le informazioni sul design system.

04 Mettila al lavoro

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

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

Assegna alla skill un primo compito di progettazione UI

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

Example prompt

This is a dashboard mockup — recreate it with a proper data table, sidebar navigation, and chart widgets.

Fonte: esempio SKILL.md (testuale).

Verifica il primo risultato

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

Osservare la schermata risultante e confermare che le modifiche richieste siano effettivamente state applicate.
Se il risultato non è esattamente quello previsto, continuare nel flusso di Modifica invece di rigenerare; ripetere con un nuovo prompt specifico quando è necessaria ulteriore rifinitura.
Prima di generare, verificare se esiste un design system per il progetto.

In OpenDesign importa stitch::generate-design 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/generate-design/SKILL.md Checksum del contenuto registrato alla verifica; commit 0337446
License: Apache-2.0 Da LICENSE.
Stelle del repository: 8.304 Snapshot GitHub scattato 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::generate-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

🎨 Pipeline di potenziamento del promptAnalizza il contesto, sostituisce i termini vaghi, struttura il prompt, fa emergere gli insight dell'IA
PassaggiSelezione della modalità più i flussi di testo, immagine, modifica e varianti con le relative chiamate ai tool
💡 SuggerimentiSia strutturale, contenuto prima di tutto, rifinitura iterativa, nessuna contaminazione del tema, modifiche mirate
📚 RiferimentiMappature di design, parole chiave per il prompting e un esempio di prompt potenziato prima/dopo

Descrizione della skill

"- Genera nuove schermate da prompt testuali o immagini, modifica schermate esistenti con prompt e token del design system e genera varianti di design usando Stitch MCP. Include pipeline di miglioramento dei prompt, mappature di design, terminologia professionale UI/UX, token di design e capacità di sistema di temi."

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

06 Prima di installare

Domande sulla skill stitch::generate-design

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

Devo configurare i nomi dei tool prima che funzioni?

La skill chiama i tool Stitch MCP come list_projects, generate_screen_from_text ed edit_screens, e la sua nota specifica di seguire il proprio system prompt per la gestione dei prefissi dei tool MCP. Quindi la convenzione dei prefissi deriva dalla configurazione dell'utente, non dalla skill.

In cosa differiscono le varianti dalle modifiche?

Le modifiche cambiano la schermata che si ha; le varianti esplorano alternative intorno ad essa tramite il tool generate_variants. È possibile guidare la direzione con creativeRange — REFINE per sottile, EXPLORE per equilibrato, REIMAGINE per radicale — e restringere gli aspetti oppure lasciarli vuoti per averli tutti.

Posso partire da uno screenshot o un mockup invece che da una descrizione?

Sì. L'immagine viene affidata alla skill upload-to-stitch per inserirla nel progetto, dopodiché l'agente trova il nuovo screenId e affina il design con un prompt di modifica che descrive cosa aggiustare o ricreare.

Stitch Generate Design

Esegui stitch::generate-design su un task di progettazione UI reale.

Scarica OpenDesign, importa stitch::generate-design dal suo link SKILL.md, incolla il prompt 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::generate-design