# Schizza Mockup HTML > Genera 2-3 varianti interattive di mockup HTML per confrontare diverse direzioni di design UI/UX prima di impegnarsi in un unico approccio. Esplora rapidamente diverse impostazioni visive e raccogli feedback. - Canonical: https://nanoskill.ai/it/skills/html-mockup-sketcher - Markdown: https://nanoskill.ai/it/skills/html-mockup-sketcher.md - Author: NousResearch - Published: 2026-06-04T05:30:00.000Z - Updated: 2026-07-21T18:34:02.819Z - Language: it - Source type: github - Popularity signal: 2137 ## Sources - https://github.com/NousResearch/hermes-agent ## Install ```shell npx skills add https://github.com/NousResearch/hermes-agent/tree/main/skills/creative/sketch ``` ## About Lo Schizza Mockup HTML è una potente competenza progettata per aiutare gli utenti a esplorare e confrontare rapidamente le direzioni di design UI/UX attraverso mockup HTML usa e getta. Invece di impegnarsi in un unico design, questo strumento genera 2-3 varianti interattive, consentendo un confronto fianco a fianco di diverse impostazioni visive. È ideale per l'esplorazione del design nelle fasi iniziali, aiutando a visualizzare concetti e raccogliere feedback prima di un investimento significativo nello sviluppo. Questa competenza si concentra sulla creazione di mockup HTML funzionali e interattivi che vanno oltre le immagini statiche. Ogni variante è un file HTML autonomo con CSS inline, font di sistema e contenuti realistici. Fondamentalmente, i mockup includono interattività di base come link cliccabili, stati hover e almeno una transizione di stato, fornendo una sensazione più tangibile dell'esperienza utente. Gli strumenti browser integrati consentono la verifica visiva, garantendo che i mockup siano puliti e privi di bug. Per facilitare un processo decisionale informato, lo Schizza Mockup HTML fornisce un confronto strutturato. Ogni variante è accompagnata da un dettagliato \`README.md\` che delinea i principi di design, le scelte chiave, i compromessi e i casi d'uso più adatti. Dopo la generazione, una tabella comparativa riassume le differenze tra le varie dimensioni del design, accompagnata da un'analisi soggettiva per aiutarti a selezionare un vincitore, combinare elementi o iterare ulteriormente. ## Key features - **Genera più varianti di design**: Produci simultaneamente 2-3 varianti distinte di mockup HTML, ognuna delle quali esplora una diversa impostazione di design (ad esempio, densità, enfasi, estetica, layout) per un confronto affiancato. - **Mockup HTML interattivi**: Crea file HTML auto-contenuti con CSS in linea, font di sistema e contenuti fittizi realistici. I mockup sono interattivi, consentendo collegamenti cliccabili, hover e almeno una transizione di stato. - **Verifica visiva con strumenti del browser**: Utilizza la navigazione integrata del browser e strumenti di visione per ispezionare e verificare visivamente ogni mockup HTML, assicurando che i layout siano puliti, leggibili e privi di bug prima della presentazione. - **Documentazione strutturata delle varianti**: Ogni variante di mockup HTML include un \`README.md\` che descrive in dettaglio la sua impostazione di design, le scelte chiave (layout, tipografia, colore, interazione), i compromessi e i casi d'uso ideali per facilitare un confronto informato. - **Tabella di analisi comparativa**: Presenta tutte le varianti di mockup HTML generate in una tabella comparativa, evidenziando le differenze in dimensioni chiave come densità, visibilità dell'azione principale, scansionabilità e sensazione generale, insieme a un riepilogo ragionato. ## Use cases - **Esplora direzioni di design UI/UX**: Genera e confronta rapidamente più varianti di mockup HTML per esplorare diverse idee di design dell'interfaccia utente e dell'esperienza utente prima di investire tempo significativo nello sviluppo. - **Raccogli feedback sui concetti visivi**: Presenta mockup HTML interattivi a stakeholder o utenti per raccogliere feedback precoci su varie direzioni visive, aiutando a perfezionare i concetti e prendere decisioni di design informate. - **Prototipazione rapida per nuove funzionalità**: Crea mockup HTML usa e getta per prototipare rapidamente nuove funzionalità o schermate, concentrandoti sulla funzionalità principale e il flusso visivo piuttosto che sul codice pronto per la produzione. ## Result preview Guarda HTML reali di siti web di hotel boutique generati da questa competenza dell'agente. ![the demo of HTML mockup Agent Skill](https://file.nanoskill.ai/HTML-mockup-demo-1.jpg) ![the demo of HTML mockup Agent Skill](https://file.nanoskill.ai/HTML-mockup-demo-2.jpg) ![the demo of HTML mockup Agent Skill](https://file.nanoskill.ai/HTML-mockup-demo-3.jpg) ![the demo of HTML mockup Agent Skill](https://file.nanoskill.ai/HTML-mockup-demo-4.jpg) ## Result walkthrough ### Passo 1：Installa Aggiungi la competenza al tuo agente. ![a simple demonstration of the first step in using HTML mockup](https://file.nanoskill.ai/HTML-mockup-step-1.jpg) ### Passo 2：Descrivi il tuo sito web Spiega le informazioni dettagliate (ad esempio, stile, tipo) del sito web che desideri creare. ![a simple demonstration of the second step in using HTML mockup](https://file.nanoskill.ai/HTML-mockup-step-2.jpg) ### Passo 3：Rivedi il risultato Rivedi e confronta i mockup HTML generati. ![a simple demonstration of the third step in using HTML mockup](https://file.nanoskill.ai/HTML-mockup-step-3.jpg) ## Skill definition # Sketch Usa questa abilità quando l'utente vuole **vedere una direzione di design prima di impegnarsi** in una — esplorando un'idea UI/UX come mockup HTML usa e getta. Il punto è generare 2-3 varianti interattive in modo che l'utente possa confrontare le direzioni visive fianco a fianco, non produrre codice distribuibile. Carica questa quando l'utente dice cose come "fammi uno sketch di questa schermata", "mostrami come potrebbe apparire X", "confronta il layout A con B", "dammi 2-3 interpretazioni su questa UI", "fammino vedere alcune varianti", "mockuppa questo prima che lo costruisca". ## Quando NON usarla - L'utente vuole un componente di produzione — usa `claude-design` o costruiscilo propriamente - L'utente vuole un artefatto HTML rifinito una tantum (landing page, deck) — `claude-design` - L'utente vuole un diagramma — `excalidraw`, `architecture-diagram` - Il design è già definito — costruiscilo e basta ## Se l'utente ha il sistema GSD completo installato Se `gsd-sketch` appare come abilità sorella (installata tramite `npx get-shit-done-cc --hermes`), preferisci **`gsd-sketch`** per il flusso di lavoro completo: `.planning/sketches/` persistente con MANIFEST, analisi in modalità frontiera, audit di coerenza tra gli sketch passati e integrazione con il resto di GSD. Questa abilità è la versione leggera standalone — sketching una tantum senza la macchina a stati. ## Metodo principale ``` raccolta → varianti → testa a testa → scegli il vincitore (o itera) ``` ### 1. Raccolta (salta se l'utente ti ha già dato abbastanza) Prima di generare varianti, ottieni tre cose — una domanda alla volta, non tutte insieme: 1. **Sensazione.** "Che sensazione dovrebbe dare? Aggettivi, emozioni, un'atmosfera." — *"calmo, editoriale, come Linear"* ti dice più di *"minimale"*. 2. **Riferimenti.** "Quali app, siti o prodotti catturano la sensazione che immagini?" — i riferimenti concreti battono le descrizioni astratte. 3. **Azione principale.** "Qual è la singola cosa più importante che un utente fa su questa schermata?" — le varianti dovrebbero tutte servirla bene; se non lo fanno, sono solo decorazioni. Rifletti brevemente su ogni risposta prima della domanda successiva. Se l'utente ti ha già dato tutte e tre in anticipo, salta direttamente alle varianti. ### 2. Varianti (2-3, mai 1, raramente 4+) Produci **2-3 varianti** in un colpo solo. Ogni variante è un file HTML completo e autonomo. Non descrivere le varianti — costruiscile. Il punto è il confronto. Ogni variante dovrebbe assumere una **posizione di design diversa**, non valori di pixel diversi. Tre buoni assi di varianti: - **Densità:** compatto / arioso / ultra-denso (scegli due poli contrastanti) - **Enfasi:** contenuto-prima / azione-prima / strumento-prima - **Estetica:** editoriale / utilitaristica / giocosa - **Layout:** singola colonna / barra laterale / pannello diviso - **Fondamento:** basato su card / contenuto nudo / stile documento Scegli un asse e tira da esso. Due varianti che differiscono solo per il colore dell'accento sono uno sforzo sprecato — l'utente non può distinguerle. **Nomenclatura delle varianti:** descrivi la posizione, non il numero. ``` sketches/ ├── 001-calm-editorial/ │ ├── index.html │ └── README.md ├── 001-utilitarian-dense/ │ ├── index.html │ └── README.md └── 001-playful-split/ ├── index.html └── README.md ``` ### 3. Rendili HTML reale Ogni variante è un **singolo file HTML autocontenuto**: - ` ``` ### 4. README della variante Il `README.md` di ogni variante risponde: ```markdown ## Variant: {nome posizione} ### Posizione di design Una frase sul principio che guida questa variante. ### Scelte chiave - Layout: ... - Tipografia: ... - Colore: ... - Interazione: ... ### Compromessi - Forte in: ... - Debole in: ... ### Ideale per - Il tipo di utente o caso d'uso che questa variante serve effettivamente ``` ### 5. Testa a testa Dopo che tutte le varianti sono state costruite, presentale come un confronto. Non limitarti a elencare — **esprimi un'opinione**: ```markdown ## Tre interpretazioni per la schermata home | Dimensione | Calmo editoriale | Utilitaristico denso | Giocoso diviso | |-----------|---------------------|----------------------|---------------| | Densità | Bassa | Alta | Media | | Visibilità azione principale | Bassa | Alta | Media | | Scansionabilità | Alta | Media | Bassa | | Sensazione | Calma, fidata | Tagliente, simile a uno strumento | Invitante, energica | **Il mio parere:** Utilitaristico denso per power user, calmo editoriale per pubblici orientati ai contenuti. Giocoso diviso è il più debole — cerca di fare entrambi e non si impegna in nessuno. ``` Lascia che l'utente scelga un vincitore, o combini due in un ibrido, o chieda un altro giro. ## Tematizzazione (quando il progetto ha un'identità visiva) Se l'utente ha un tema esistente (colori, font, token), metti i token condivisi in `sketches/themes/tokens.css` e fai `@import` in ogni variante. Mantieni i token minimi: ```css /* sketches/themes/tokens.css */ :root { --color-bg: #fafafa; --color-fg: #1a1a1a; --color-accent: #0066ff; --color-muted: #666; --radius: 8px; --font-display: "Inter", sans-serif; --font-body: -apple-system, BlinkMacSystemFont, sans-serif; } ``` Non tokenizzare eccessivamente uno sketch usa e getta — tre colori e un font di solito sono sufficienti. ## Barra di interattività Uno sketch è abbastanza interattivo quando l'utente può: 1. **Cliccare un'azione primaria** e qualcosa di visibile succede (cambio di stato, modale, toast, finta navigazione) 2. **Vedere una transizione di stato significativa** (filtrare una lista, togglare una modalità, aprire/chiudere un pannello) 3. **Hover su affordance riconoscibili** (pulsanti, righe, tab) Più di questo è sovra-ingegnerizzare un usa e getta. Meno di questo è uno screenshot. ## Modalità frontiera (scegliere cosa sketchare dopo) Se gli sketch esistono già e l'utente dice "cosa dovrei sketchare dopo?": - **Lacune di coerenza** — due varianti vincenti da sketch diversi hanno fatto scelte indipendenti che non sono state ancora composte insieme - **Schermate non sketchate** — referenziate ma mai esplorate - **Copertura degli stati** — percorso felice sketchato, ma non vuoto / caricamento / errore / 1000 elementi - **Lacune responsive** — validato solo a un viewport; regge su mobile / ultra-wide? - **Schemi di interazione** — esistono layout statici; transizioni, trascinamento, comportamento di scroll no Proponi 2-4 candidati nominati. Lascia che l'utente scelga. ## Output - Crea `sketches/` (o `.planning/sketches/` se l'utente sta usando convenzioni GSD) nella radice del repo - Una sottocartella per variante: `NNN-nome-posizione/index.html` + `README.md` - Di' all'utente come aprirli: `open sketches/001-calm-editorial/index.html` su macOS, `xdg-open` su Linux, `start` su Windows - Mantieni le varianti usa e getta — uno sketch che hai sentito il bisogno di preservare dovrebbe essere promosso a codice di progetto reale, non curato come un asset **Sequenza tipica di strumenti per una variante:** ``` terminal("mkdir -p sketches/001-calm-editorial") write_file("sketches/001-calm-editorial/index.html", "...") write_file("sketches/001-calm-editorial/README.md", "## Variant: Calm editorial\n...") browser_navigate(url="file://$(pwd)/sketches/001-calm-editorial/index.html") browser_vision(question="Come appare? Problemi di layout ovvi?") ``` Ripeti per ogni variante, poi presenta la tabella di confronto. ## Attribuzione Adattato dal flusso di lavoro `/gsd-sketch` del progetto GSD (Get Shit Done) — MIT © 2025 Lex Christopherson ([gsd-build/get-shit-done](https://github.com/gsd-build/get-shit-done)). Il sistema GSD completo offre stato dello sketch persistente, riferimenti a pattern di tema/variante e flussi di lavoro di audit di coerenza; installa con `npx get-shit-done-cc --hermes --global`. ## FAQ ### Che cos'è un mockup HTML? Un mockup HTML è una pagina web interattiva e usa e getta creata con HTML e uno stile di base (spesso CSS in linea) per visualizzare e confrontare rapidamente diverse idee di progettazione UI/UX. Non è destinato alla produzione ma all'esplorazione di design in fase iniziale. ### Quante varianti di mockup HTML genera questa competenza? Questa competenza genera in genere 2-3 varianti interattive di mockup HTML alla volta. L'obiettivo è fornire impostazioni di design contrastanti per il confronto, non un elenco esaustivo di piccole variazioni. ### Posso usare questa competenza per creare codice pronto per la produzione? No, questa competenza è progettata specificamente per mockup HTML 'usa e getta' per esplorare direzioni di design. Per componenti pronti per la produzione o artefatti rifiniti, dovresti usare altri strumenti o competenze come \`claude-design\`. ### Che tipo di interattività hanno i mockup HTML? I mockup HTML generati sono interattivi, il che significa che i collegamenti sono cliccabili, gli hover sono reali e c'è almeno una transizione di stato (ad esempio, aprire/chiudere un pannello, filtrare un elenco). Questo consente un'esperienza più realistica rispetto alle immagini statiche. ### In che modo questa competenza mi aiuta a confrontare diversi design? Dopo aver generato i mockup HTML, la competenza fornisce una tabella comparativa che evidenzia le differenze chiave in varie dimensioni di design (ad esempio, densità, layout, estetica). Offre anche un riepilogo ragionato per guidare il processo decisionale. ### Quali informazioni devo fornire per generare un mockup HTML? Per generare mockup HTML efficaci, ti verrà chiesto il 'feeling' desiderato (aggettivi, atmosfera), app/siti di riferimento che catturano quel feeling e l'unica 'azione principale' più importante che un utente esegue sullo schermo.