Design Visual Frontend
Vynucuje prohlížečem ověřenou práci s UI: skutečný archetyp, žádné falešné metriky, žádná hromada motivů
Otestováno · Funguje
Co umí
Disciplína frontend designu pro kódovací agenty: klasifikace povrchového archetypu, napsání kompaktního rozhodovacího listu před jakýmkoli UI kódem, poté ověření vykreslené stránky proti osmi nekompenzujícím kontrolním branám na pevné matici viewportů od 390x844 do 2560x1080. Omezuje generické motivy, jako jsou pozadí mřížky, skleněné panely a gradientní záře, na jeden a zakazuje vymyšlené metriky, reference a loga používané jako důvěryhodnost. Spouští se na vytváření, redesign nebo kontrolu webových stránek, přihlašovacích a formulářových toků, dashboardů, administrátorských nástrojů a produktových stránek.
Testovací report
Vytvořil jsem stejnou přihlašovací stránku pro dispečink nákladní dopravy dvakrát a obě změřil ve skutečném prohlížeči. Stránka bez dovednosti dodala tři vymyšlené metriky, pět naskládaných generických motivů, 41px dotykové cíle, statistiku oříznutou z mobilního hrdiny, žádnou chybu, stav načítání nebo zakázaný stav, a při 2560x1080 380px kartu opuštěnou v prázdné polovině – 15 procent viewportu, což je přesně to selhání, které brána C dovednosti uvádí jako příklad. Stránka řízená dovedností se vrátila s nulovými vymyšlenými fakty, nulovými motivy, 44px cíli, bez oříznutí, chybou role=alert, která přesouvá fokus, skutečným stavem načítání a 37 smysluplnými uzly napříč širokým viewportem oproti 17 u základní verze. Stojí za to vědět, že její vlastní brány nejsou razítko: stále označily prázdné okraje při 2560 a zkrácený terminálový selektor při 390 na stránce vytvořené dovedností, obojí viditelné pouze na snímku obrazovky a nikoli v kódu.
Testováno: 2026-08-10 · Claude Code 2.x (agent harness)
Instalace
git clone https://github.com/Xialiang98/design-visual-frontend.git ~/.claude/skills/design-visual-frontend
Příkazy a ukázkové prompty
/design-visual-frontendVynucuje prohlížečem ověřenou práci s UI: skutečný archetyp, žádné falešné metriky, žádná hromada motivů
Skilly se spouštějí běžnými požadavky — žádné příkazy k zapamatování. Po instalaci ho aktivují prompty jako tyto (anglicky):
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