Design Visual Frontend
Impone un lavoro UI verificato dal browser: archetipo reale, nessuna metrica falsa, nessun accumulo di motivi
Promosso
Cosa fa
Una disciplina di frontend design per coding agents: classify the surface archetype, write a compact decision sheet prima di qualsiasi codice UI, quindi verify the rendered page rispetto a eight non-compensating review gates a una fixed viewport matrix da 390x844 a 2560x1080. Limita i generic motifs come background grids, glass panels e gradient glow a uno, e bans invented metrics, testimonials e logos usati come credibility. Si attiva sulla costruzione, riprogettazione o revisione di websites, login e form flows, dashboards, admin tools e product pages.
Rapporto di test
Ho costruito la stessa trucking-dispatch login page due volte e le ho misurate entrambe in un real browser. La pagina senza skill ha fornito three invented metrics, five stacked generic motifs, 41px touch targets, una stat clipped off the mobile hero, no error, loading o disabled state, e a 2560x1080 una 380px card marooned in un empty half — 15 percento del viewport, che è l'esatto failure che il Gate C della skill nomina come esempio. La pagina guidata dalla skill è tornata con zero invented facts, zero motifs, 44px targets, no clipping, un role=alert error che moves focus, un real loading state, e 37 meaningful nodes attraverso il wide viewport contro i 17 della baseline. Vale la pena sapere che i suoi gates non sono un rubber stamp: hanno comunque segnalato empty gutters a 2560 e un truncated terminal selector a 390 sulla pagina costruita con la skill, entrambi visibili solo nello screenshot e non nel markup.
Testato il: 2026-08-10 · Claude Code 2.x (agent harness)
Installazione
git clone https://github.com/Xialiang98/design-visual-frontend.git ~/.claude/skills/design-visual-frontend
Comandi e prompt di esempio
/design-visual-frontendImpone un lavoro UI verificato dal browser: archetipo reale, nessuna metrica falsa, nessun accumulo di motivi
Gli skill si attivano con richieste in linguaggio naturale, senza comandi da ricordare. Dopo l'installazione, prompt come questi lo attivano (in inglese):
Build a login page for a trucking dispatch platform, dispatcher useReview this UI against responsive breakpoints from mobile to 4KClassify this page's archetype and write a UI decision sheet first