Design Visual Frontend
Tvingar webbläsarverifierat UI-arbete: verklig arketyp, inga falska mätvärden, ingen motivhög
Testad · Fungerar
Vad den gör
En frontend-designdisciplin för kodningsagenter: klassificera ytans arketyp, skriv ett kompakt beslutsblad innan någon UI-kod, verifiera sedan den renderade sidan mot åtta icke-kompenserande granskningsgrindar vid en fast viewport-matris från 390x844 till 2560x1080. Den begränsar generiska motiv som bakgrundsrutnät, glaspaneler och gradientglöd till ett, och förbjuder uppfunna mätvärden, vittnesmål och logotyper som används som trovärdighet. Utlöses vid byggande, omdesign eller granskning av webbplatser, inloggnings- och formulärflöden, dashboards, adminverktyg och produktsidor.
Testrapport
Byggde samma inloggningssida för lastbilstransporter två gånger och mätte båda i en riktig webbläsare. Sidan utan färdighet levererade tre uppfunna mätvärden, fem staplade generiska motiv, 41px touch targets, en statistik klippt från mobilhjälten, inget fel, laddnings- eller inaktiverat tillstånd, och vid 2560x1080 ett 380px kort strandat i en tom halva — 15 procent av viewporten, vilket är exakt det misslyckande som färdighetens Gate C nämner som ett exempel. Den färdighetsstyrda sidan kom tillbaka med noll uppfunna fakta, noll motiv, 44px targets, ingen klippning, ett role=alert-fel som flyttar fokus, ett verkligt laddningstillstånd, och 37 meningsfulla noder över den breda viewporten mot baslinjens 17. Värt att veta att dess egna grindar inte är en gummistämpel: de flaggade fortfarande tomma rännor vid 2560 och en trunkerad terminalväljare vid 390 på den färdighetsbyggda sidan, båda endast synliga i skärmdumpen och inte i markupen.
Testad: 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
Kommandon och exempelprompter
/design-visual-frontendTvingar webbläsarverifierat UI-arbete: verklig arketyp, inga falska mätvärden, ingen motivhög
Skills triggas av vanliga förfrågningar — inga kommandon att memorera. Efter installationen aktiverar prompter som dessa skillen (på engelska):
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