design-htmldi Garry Tan

Design HTML Skill.

Una skill per Claude Code e Codex dedicata al design UI: produce HTML/CSS di qualità produttiva a partire da una direzione di design concordata.

Web & UI
HTML

Scarica OpenDesign Guida all'uso

garrytan/gstack · design-html/SKILL.mdSKILL.md

--- name: design-html description: Design finalization: generates production-quality Pretext-native HTML/CSS. (gstack) --- ## When to invoke this skill ## Confusion Protocol ## Claimed Limitations Need Evidence ## Continuous Checkpoint Mode ## Context Health (soft directive) ## Question Tuning (skip entirely if QUESTION_TUNING: false)

Front matter e intestazioni di sezione letti dal file originale il 14/09/2026 · 54.976 caratteri in totale

01 Cosa fa

Cosa fa la Skill design-html 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

Genera HTML/CSS di qualità produttiva con layout di testo Pretext-native in cui il testo si riadatta realmente, le altezze si calcolano dinamicamente e i layout si adattano al ridimensionamento. Funziona a partire da mockup approvati (/design-shotgun), piani del CEO (/plan-ceo-review), contesto di design review o descrizioni dell'utente. Instrada verso il livello API Pretext corretto in base alla complessità del design (i layout semplici usano prepare + layout; le UI di chat usano prepareWithSegments + walkLineRanges; le composizioni editoriali usano layoutNextLine per il testo attorno a ostacoli).

30KB di overhead, zero dipendenze. Produce file HTML autonomi (con Pretext vendored incorporato) o componenti di framework (React/Svelte/Vue). Per impostazione predefinita usa HTML vanilla con un server a live reload per un'anteprima immediata nel browser. Niente lorem ipsum: estrae contenuti reali dai mockup o genera testo realistico a partire dai piani.

Che cosa produce

File HTML autonomo con Pretext vendored incorporato, proprietà CSS personalizzate ricavate dai token, HTML5 semantico, contenteditable + MutationObserver per l'editing live, ResizeObserver per il rilayout al ridimensionamento, salvato in ~/.gstack/projects/$SLUG/designs/<screen-name>-YYYYMMDD/finalized.html
File di componente di framework (React TSX/JSX, Svelte, Vue) con import di Pretext aggiunti alle dipendenze del progetto, salvato in ~/.gstack/projects/$SLUG/designs/<screen-name>-YYYYMMDD/finalized.[tsx|svelte|vue]
Metadati finalized.json insieme all'HTML, contenenti il percorso source_mockup, il percorso source_plan, la modalità (approved-mockup/plan-driven/freeform/evolve), pretext_tier, la scelta del framework, il numero di iterazioni, la data, il nome della schermata, il branch
File DESIGN.md nel formato open DESIGN.md se l'utente accetta la proposta di estrazione, contenente proprietà CSS personalizzate, famiglie di font, palette colori, scala degli spazi, raggio dei bordi, valori delle ombre estratti dall'HTML generato

Vedi l'esempio di prompt ↗

Come funziona

01
Rileva il contesto di design e instrada
Verifica la presenza di approved.json da /design-shotgun, piani CEO, varianti di design o token DESIGN.md.
02
Estrai la spec di implementazione
Se è disponibile il binario del design, esegue il comando prompt sul PNG approvato per estrarre colori, tipografia, struttura del layout tramite GPT-4o vision.
03
Instradamento smart delle API Pretext
Classifica il design in un livello: i layout semplici usano prepare + layout per altezze sensibili al resize; le griglie di card usano lo stesso approccio per l'auto-dimensionamento; le UI di chat usano prepareWithSegments + walkLineRanges per bolle che si adattano perfettamente; le composizioni editoriali usano layoutNextLine per il testo attorno agli ostacoli.
04
Genera HTML nativo per Pretext
Scrive un singolo file con Pretext vendorizzato inline (o fallback CDN), custom property CSS derivate dai token, HTML5 semantico, contenteditable + MutationObserver per l'editing in tempo reale, ResizeObserver per il relayout al resize, contenuti reali estratti dal mockup o dal piano.
05
Scansione anti-slop prima dell'anteprima
Se è disponibile il rilevatore di design, esegue una scansione della pagina finalizzata per individuare pattern AI-slop (gradienti viola, griglie di card identiche, CTA generiche non provenienti dal mockup).

02 Trova la tua applicazione

Quando usare la skill design-html

Usa la skill design-html in Claude Code o Codex quando il lavoro riguarda UI design di questo tipo. Ambito e limiti qui sotto sono presi dal file della skill stessa.

Buona applicazione

Creazione di una dashboard, pagina elenco o griglia di card in cui le card devono auto-dimensionarsi in base al contenuto senza altezze hardcoded
Implementazione di una UI di chat o messaggistica in cui le bolle devono aderire strettamente al testo e calcolare correttamente la larghezza minima
Finalizzazione di un design dopo un mockup approvato da /design-shotgun, una strategia di prodotto da /plan-ceo-review, o un contesto esistente da /plan-design-review
Realizzazione di una composizione editoriale, un layout da blog o una pagina ricca di contenuti in cui il testo deve fluire dinamicamente attorno a ostacoli o immagini

Conosci i limiti

Progetti che richiedono contenuti segnaposto o lorem ipsum—la skill genera sempre contenuti reali estratti da mockup, piani o descrizioni dell'utente
Esecuzioni automatizzate senza revisione umana—la proposta di installazione del rilevatore di design e il ciclo di rifinitura richiedono decisioni dell'utente tramite AskUserQuestion

Cosa fornire

PNG del mockup di design approvatoPercorso della variante approvata da /design-shotgun salvato in approved.json, oppure percorso PNG fornito dall'utente.
Piano CEO o note di design reviewFile Markdown da /plan-ceo-review o /plan-design-review contenente la visione di prodotto, i requisiti UI, i flussi utente, il pubblico target, la sensazione visiva, la struttura dei contenuti.
Token DESIGN.mdFile del design system del repository con colori del brand, famiglia di font, scala di spaziatura, raggio dei bordi, valori delle ombre.
Descrizione dell'utente per la modalità freeformQuando non esiste un mockup o un piano, l'utente fornisce scopo/pubblico, sensazione visiva (scuro/chiaro, giocoso/serio, denso/spazioso), struttura dei contenuti, siti di riferimento.
finalized.html precedente per la modalità evolveHTML finalizzato esistente da una sessione precedente.

03 Dentro la skill

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

Usa sempre Pretext per il layout del testo
Anche se il design appare semplice, Pretext garantisce un calcolo corretto dell'altezza al resize. L'overhead è di 30KB. Ogni pagina ne beneficia.
Solo contenuto reale, mai testo segnaposto
Quando esiste un mockup, estrai il testo da esso. In modalità plan-driven, usa il contenuto del piano. In modalità freeform, genera contenuto realistico in base alla descrizione dell'utente.
Fedeltà alla fonte di verità sopra l'eleganza del codice
Quando esiste un mockup approvato, riproducilo pixel per pixel. Se ciò richiede width: 312px invece di una classe CSS grid, è corretto.
Modifiche chirurgiche nel ciclo di rifinitura, mai rigenerare
Usa lo strumento Edit per apportare modifiche mirate, non lo strumento Write per rigenerare l'intero file. L'utente potrebbe aver effettuato modifiche manuali tramite contenteditable che devono essere preservate.
Una pagina per invocazione
Per design multi-pagina, esegui /design-html una volta per pagina. Ogni esecuzione produce un file HTML.
Blacklist AI-slop applicata di default
Non includere mai gradienti viola/blu, palette crema e serif, testo con gradiente, griglie generiche di funzionalità a 3 colonne, griglie di card identiche, layout con tutto centrato, kicker sopra i titoli, righe di metriche hero, blob decorativi, bordi luminosi, foto stock segnaposto, CTA generiche, card con angoli arrotondati e ombre, decorazioni con emoji, testimonianze generiche o hero divisi standardizzati—a meno che il mockup approvato non ne contenga uno, DESIGN.md lo autorizzi, o l'utente lo richieda esplicitamente indicando una volta il compromesso.

04 Mettila al lavoro

Installa design-html 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-html 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/garrytan/gstack --skill design-html

Forma CLI generica skills per design-html/SKILL.md; il repository potrebbe documentare il proprio percorso.

Assegna alla skill un primo compito di progettazione UI

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

Starter prompt

Finalize the design for our [product name] landing page. I have an approved mockup from /design-shotgun at [path to approved.json]. The page needs a hero section with dynamic text that reflows on resize, a 3-card feature grid where cards self-size based on content, and a pricing table. Use our brand colors from DESIGN.md and make sure all text is editable in the browser so I can tweak copy live. Output as vanilla HTML first so I can preview immediately, then I'll ask for a React component version once the design is locked.

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:

Server di live reload avviato su http://localhost:PORT/finalized.html così l'utente può ridimensionare la finestra per verificare che il testo si adatti dinamicamente e cliccare su qualsiasi testo per verificare che il layout contenteditable si ricalcoli istantaneamente
PNG del mockup approvato mostrato in linea per il confronto visivo durante il ciclo di rifinitura, se presente; altrimenti il feedback dell'utente durante il ciclo è la fonte di verità per le modalità plan-driven o freeform
Conferma del caricamento dei font tramite document.fonts.ready come gate prima della prima chiamata a prepare(), per garantire che le metriche del testo siano corrette per il calcolo del layout Pretext
L'utente confirma 'done' / 'ship it' / 'looks good' / 'perfect' nel ciclo di rifinitura dopo aver testato il comportamento di ridimensionamento e la modifica live del testo, massimo 10 iterazioni prima di proporre di continuare o chiamare done

In OpenDesign importa design-html 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: Garry Tan
Repository: github.com/garrytan/gstack Branch main
File della skill: design-html/SKILL.md Checksum del contenuto registrato alla verifica; commit 71f6048
License: MIT Da LICENSE.
Stelle del repository: 132.921 Snapshot GitHub preso il 2026-09-14 per l'intero repository garrytan/gstack, che contiene 7 skill in questo catalogo. Non è un rating o conteggio di utilizzo per design-html.
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

Quando invocare questo skillFunziona con mockup approvati, piani del CEO, contesto di design review o descrizioni dell'utente per HTML/CSS di produzione
Preambolo (eseguire prima)Esegue gstack-skill-start, legge le righe STATUS, gestisce la modalità degradata, segue i blocchi GSTACK_INSTRUCTION per onboarding/consenso
Operazioni sicure in modalità pianoOperazioni consentite in modalità piano: codex exec/review, scritture in ~/.gstack/, file di piano, open per gli artifact
Invocazione dello skill durante la modalità pianoLe istruzioni dello skill sono eseguibili, non di riferimento; AskUserQuestion soddisfa il fine turno; ExitPlanMode solo dopo il completamento del workflow
Formato AskUserQuestionLa risoluzione dello strumento si dirama in base a SESSION_KIND; spawned sceglie automaticamente l'opzione raccomandata; Conductor usa il testo in prosa; gestione del fallback in caso di errore
Sincronizzazione degli artifact (avvio skill)Agisce sull'output di skill-start: suggerimento GBrain, stato di salute ARTIFACTS_SYNC, gate di consenso privacy una tantum tramite GSTACK_INSTRUCTION
Patch comportamentale specifica per il modello (claude)Disciplina della todo-list, riflettere prima di azioni pesanti, strumenti dedicati preferiti a Bash—preferenze subordinate alle istruzioni dello skill
VoceVoce GStack: parti dal punto chiave, dettagli concreti, collega le scelte ai risultati dell'utente, diretto sulla qualità, chiusure delimitate
Recupero del contestoRecupera gli artefatti recenti, le review, la timeline, le decisioni, l'ultimo checkpoint; suggerisce la skill successiva se RECENT_PATTERN ne implica una
Stile di scritturaChiarisce il gergo specialistico alla prima occorrenza, formula le domande in termini di risultati, usa frasi brevi in forma attiva, salta se EXPLAIN_LEVEL: terse
Principio di completezza — Boil the OceanL'IA rende economica la completezza; consiglia una copertura completa; Completeness: X/10 quando le opzioni differiscono in copertura
Protocollo di confusionePer ambiguità ad alto rischio FERMATI, nominala, presenta 2-3 opzioni con i relativi compromessi, chiedi—non per la codifica di routine

Descrizione della skill

Finalizzazione del design: genera HTML/CSS nativo Pretext di qualità production. (gstack)

Descrizione introduttiva da SKILL.md. Il file completo è di circa 54.976 caratteri. Leggi il file completo su GitHub.

06 Prima di installare

Domande sulla skill design-html

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

Funziona con il mio progetto React/Svelte/Vue o solo con HTML puro?

Entrambi. Il passaggio 2.5 rileva il tuo framework in package.json e chiede se preferisci HTML puro (file di anteprima autonomo, consigliato per la prima passata) o un componente nativo del framework con hook Pretext. Se non viene rilevato alcun framework, il valore predefinito è HTML puro. Per l'output basato su framework puoi scegliere TypeScript o JavaScript.

Design HTML

Esegui design-html su un compito di progettazione UI reale.

Scarica OpenDesign, importa design-html 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/garrytan/gstack --skill design-html