Design con metodo: prima il wireframe approvato, poi il codice.
Una pipeline fissa dal riferimento visivo a wireframe.json, wireframe.svg, approvazione, codice e audit. La skill cura estetica e gusto; l'ingegneria front-end resta a schematize-web.
$ schematize install designSoglie non negoziabili
Mai disattivati per andare più veloci. Elenco completo nella skill.
Wireframe approvato prima del codice
Il JSON è la fonte di verità e l'SVG è la figura; una pagina intera si ferma e chiede lo stack prima di costruire, e il builder legge il JSON, mai l'SVG.
Media generati mai da Claude
Rileva Codex e Gemini, chiede quale usare e delega a schematize-models; se non ce n'è nessuno, lo dice senza giri di parole e offre un archivio di immagini o un asset del cliente.
Le icone sono SVG, mai emoji
SVG inline (sprite di 22 simboli incluso); l'SVG strutturale come un diagramma è codice, ma l'illustrazione figurativa conta come visual generato.
Contrasto e DOM misurati, non supposti
I rapporti di contrasto, le scale e le durate vengono dai file di riferimento e dagli auditor in scripts/, con test a rosso piantato; non si lavora a memoria.
Rifiuti anti-AI-slop
Un elenco unificato di rifiuti, con controprova e conflitti tra fonti già risolti, blocca l'aspetto generico da generatore.
Chiede solo ciò che cambia il lavoro
Individua la modalità (Persuadere, Operare, Leggere, Vivere) e quanto inventare; decide il resto e lo registra in meta.suposicoes. Senza argomento un comando chiede e non parte mai da solo.
Comandi
Installati in .claude/commands/. Usa /design-help in qualsiasi momento.
/design-animateMovimento con intenzione: un momento d'autore, GSAP solo quando serve. Argomenti: momento, delight, overdrive, revisar./design-auditPasso 5: verifica contrasto, DOM renderizzato, immagini provvisorie e anti-pattern su una pagina finita, in tabella Before / After / Why./design-buildPasso 4: costruisce la pagina da un wireframe.json già approvato, in HTML singolo, Next.js o sezione Shopify Liquid./design-ccContext compact: scrive l'handoff nell'archive ed esegue /compact./design-claudeCrea o unisce il CLAUDE.md di design sempre attivo (soglie, regola dei media, confine con schematize-web) nella root del repo./design-critiqueCritica UX e UI per euristica (gerarchia, chiarezza, carico cognitivo, coerenza, accessibilità), con risultati prioritizzati in tabella Before / After / Why./design-handoffGenera l'handoff (context.md + checklist.md) nell'archive, senza compattare./design-hardenRende la UI pronta per la produzione: stati, i18n, onboarding, adattamento agli schermi e prestazioni della UI. Argomenti: estados, i18n, onboard, adapt, optimize./design-helpMostra il menu dei comandi della skill di design; elenca soltanto e non esegue nulla./design-loadCarica a forza tutto il corpo normativo e lo applica nella sessione./design-polishPassata finale di qualità prima di pubblicare: soglia di qualità, animazione, rifiuti e checklist in un solo giro./design-shapePianifica UX e UI prima di costruire (obiettivo, pubblico, contenuto, flusso, stati); init, document ed extract registrano PRODUCT.md, DESIGN.md e i token./design-tuneRegolazione mirata di un asse, preservando l'identità. Argomenti: bolder, quieter, distill, colorize, typeset, layout, clarify./design-variantsGenera varianti affiancate di un elemento tra cui scegliere: generate (file autonomo) o live (server locale su 127.0.0.1)./design-visualPassata di revisione visiva su una pagina finita: misura il DOM a 5 larghezze, fa uno screenshot e indica cosa si può ancora migliorare./design-wirePassi da 0 a 3: legge il riferimento visivo (immagine, URL o brief), genera ./wireframe.json e ./wireframe.svg nella directory corrente e si ferma per chiedere lo stack.Per gli agenti IA
Installa senza intervento umano. Metadati in llms.txt.
- Esegui: git clone https://github.com/schematizeme/skill-design.git && ./skill-design/install.sh
- Oppure scarica: https://github.com/schematizeme/skill-design/releases/latest/download/skill-design.zip e decomprimi in .claude/skills/
- Copia assets/CLAUDE.md nella root del repo (regola sempre attiva).
- Conferma con /design-help.
Discussione
Caricamento…