Design Visual Frontend
Wymusza weryfikowaną przeglądarkowo pracę UI: prawdziwy archetyp, bez fałszywych metryk, bez stosu motywów
Testowano · Działa
Co robi ten skill
Dyscyplina projektowania frontendowego dla agentów kodujących: klasyfikuj archetyp powierzchni, napisz kompaktowy arkusz decyzji przed jakimkolwiek kodem UI, a następnie zweryfikuj wyrenderowaną stronę w stosunku do ośmiu niekompensujących bram recenzji w stałej matrycy widoku od 390x844 do 2560x1080. Ogranicza ogólne motywy, takie jak siatki tła, szklane panele i gradientowe poświaty do jednego, i zakazuje wymyślonych metryk, referencji i logo używanych jako wiarygodność. Uruchamia się na budowanie, przeprojektowywanie lub przeglądanie stron internetowych, przepływów logowania i formularzy, pulpitów nawigacyjnych, narzędzi administracyjnych i stron produktów.
Raport z testu
Zbudowano tę samą stronę logowania do dyspozytorni ciężarówek dwukrotnie i zmierzono obie w prawdziwej przeglądarce. Strona bez umiejętności zawierała trzy wymyślone metryki, pięć ułożonych ogólnych motywów, cele dotykowe 41px, statystykę obciętą z mobilnego bohatera, brak stanu błędu, ładowania lub wyłączenia, a przy 2560x1080 kartę 380px osamotnioną w pustej połowie — 15 procent obszaru widoku, co jest dokładnie taką awarią, którą Gate C umiejętności podaje jako przykład. Strona kierowana umiejętnością wróciła z zerem wymyślonych faktów, zerem motywów, celami 44px, bez obcinania, błędem `role=alert`, który przenosi fokus, prawdziwym stanem ładowania i 37 znaczącymi węzłami w szerokim obszarze widoku w porównaniu do 17 w wersji bazowej. Warto wiedzieć, że jej własne bramy nie są pieczątką: nadal oznaczały puste rynny przy 2560 i obcięty selektor terminala przy 390 na stronie zbudowanej umiejętnością, oba widoczne tylko na zrzucie ekranu, a nie w znacznikach.
Testowano: 2026-08-10 · Claude Code 2.x (agent harness)
Instalacja
git clone https://github.com/Xialiang98/design-visual-frontend.git ~/.claude/skills/design-visual-frontend
Komendy i przykładowe prompty
/design-visual-frontendWymusza weryfikowaną przeglądarkowo pracę UI: prawdziwy archetyp, bez fałszywych metryk, bez stosu motywów
Skille uruchamiają się na zwykłe polecenia — bez komend do zapamiętania. Po instalacji aktywują go prompty takie jak te (po angielsku):
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