Design Visual Frontend
Tvinger browser-verificeret UI-arbejde: ægte arketype, ingen falske metrics, ingen motivbunke
Testet · Virker
Hvad det gør
En frontend design-disciplin for kodningsagenter: klassificer overfladearketypen, skriv et kompakt beslutningsark før enhver UI-kode, verificer derefter den gengivne side mod otte ikke-kompenserende gennemgangsporte ved en fast viewport-matrix fra 390x844 til 2560x1080. Den begrænser generiske motiver som baggrundsgitter, glaspaneler og gradientglød til én, og forbyder opfundne metrics, testimonials og logoer brugt som troværdighed. Udløses ved opbygning, redesign eller gennemgang af websites, login- og formularflows, dashboards, admin-værktøjer og produktsider.
Testrapport
Byggede den samme login-side for lastbiludsendelse to gange og målte begge i en rigtig browser. Siden uden skill leverede tre opfundne metrics, fem stablede generiske motiver, 41px touch-mål, en statistik klippet af mobilhelten, ingen fejl, indlæsnings- eller deaktiveret tilstand, og ved 2560x1080 et 380px kort strandet i en tom halvdel — 15 procent af viewporten, hvilket er præcis den fejl, skillens Gate C nævner som et eksempel. Den skill-guidede side kom tilbage med nul opfundne fakta, nul motiver, 44px mål, ingen klipning, en role=alert fejl, der flytter fokus, en reel indlæsningstilstand og 37 meningsfulde noder på tværs af den brede viewport mod baselinens 17. Værd at vide, at dens egne gates ikke er et gummistempel: de markerede stadig tomme render ved 2560 og en afkortet terminalvælger ved 390 på den skill-byggede side, begge kun synlige på skærmbilledet og ikke i markup'en.
Testet: 2026-08-10 · Claude Code 2.x (agent harness)
Installation
git clone https://github.com/Xialiang98/design-visual-frontend.git ~/.claude/skills/design-visual-frontend
Kommandoer og eksempelprompter
/design-visual-frontendTvinger browser-verificeret UI-arbejde: ægte arketype, ingen falske metrics, ingen motivbunke
Skills udløses af almindelige forespørgsler — ingen kommandoer at huske. Efter installationen aktiverer prompter som disse skillen (på engelsk):
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