Design Visual Frontend
Fuerza el trabajo de UI verificado por navegador: arquetipo real, sin métricas falsas, sin acumulación de motivos
Probado · Funciona
Qué hace
Una frontend design discipline para coding agents: classify the surface archetype, write a compact decision sheet before any UI code, then verify the rendered page against eight non-compensating review gates at a fixed viewport matrix from 390x844 a 2560x1080. It caps generic motifs such as background grids, glass panels y gradient glow at one, y bans invented metrics, testimonials y logos used as credibility. Se activa on building, redesigning o reviewing websites, login y form flows, dashboards, admin tools y product pages.
Informe de la prueba
Se construyó el same trucking-dispatch login page twice y measured both in a real browser. La no-skill page shipped three invented metrics, five stacked generic motifs, 41px touch targets, a stat clipped off the mobile hero, no error, loading o disabled state, y at 2560x1080 a 380px card marooned in an empty half — 15 percent del viewport, which is the exact failure que la skill's Gate C names as an example. La skill-guided page came back con zero invented facts, zero motifs, 44px targets, no clipping, a role=alert error que moves focus, a real loading state, y 37 meaningful nodes across the wide viewport against the baseline's 17. Worth knowing that its own gates are not a rubber stamp: they still flagged empty gutters at 2560 y a truncated terminal selector at 390 on the skill-built page, both only visible in the screenshot y not in the markup.
Probado el: 2026-08-10 · Claude Code 2.x (agent harness)
Instalación
git clone https://github.com/Xialiang98/design-visual-frontend.git ~/.claude/skills/design-visual-frontend
Comandos y prompts de ejemplo
/design-visual-frontendFuerza el trabajo de UI verificado por navegador: arquetipo real, sin métricas falsas, sin acumulación de motivos
Los skills se activan con peticiones en lenguaje natural, sin comandos que memorizar. Tras instalarlo, prompts como estos lo activan (en inglés):
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