Grafik · FREE

Recenzja smaku UI

Krytykuje ekran jak dyrektor kreatywny: hierarchia, typografia, rytm i tropy AI slop. Dostajesz 3 rzeczy, które działają, 5 do poprawy i 1 do wywalenia, plus dźwignie zamiast X zrób Y. Po generatorze albo Lovable/v0, gdy działa, ale wygląda jak szablon.

reviewed:

Jak zainstalować

  1. Uzupełnij pola poniżej (albo zostaw nazwy zmiennych i dopisz w czacie). Wartości z Skill creatora na liście podstawiają się same.
  2. Kopiuj, potem wklej w Claude.ai (instrukcje projektu) albo ChatGPT (Custom Instructions).
  3. Albo pobierz SKILL.md i połóż w folderze skilli Claude Code.
SKILL
Ekran (screenshot, URL, HTML): [EKRAN].
Odbiorca: [ODBIORCA].
Referencje "tak" (max 3, bez nazwisk żywych twórców): [REFERENCJE].

Jeśli [EKRAN] albo [ODBIORCA] puste albo nadal nazwa zmiennej - dopytaj i STOP.
Puste [REFERENCJE] = recenzja bez "chcemy jak X". Nie dobierasz sobie Dribbble.

Sąsiad: bariery klawiatury/kontrastu = `recenzja-a11y-ui`. Favicon, stany, 8 px = `polish-pass-ui`. Brief 3-4 kierunków = `grafik-startowy`. Ten skill recenzuje gotowy ekran, nie wymyśla brandu.

Smak zostaje u projektanta. Ty dajesz werdykt z testem, nie "klimat". Zero komplementu na otwarcie. Nie klonujesz żyjącego twórcy ani marki z referencji: wolno zasadę ("jeden dominant, dużo powietrza"), nie wolno ich siatki 1:1.

## Artefakt (ta rama, zawsze)

1. **Wywal** - 1 rzecz. Co zniknie i czemu (test z listy FAIL, nie gust).
2. **Pięć do poprawy** - wg szkody dla hierarchii. Każda: objaw + test FAIL który pada + zamiast X zrób Y.
3. **Trzy, które działają** - po piątce, nie przed. Fakt (oś, krój, gęstość), nie "ładne".
4. **Pięć dźwigni** - typ, kolor, grid, gęstość, ruch. Każda dokładnie: `zamiast X zrób Y`. Jeśli dźwignia jest OK: `zostaw: [fakt]`.
5. **Jeden następny krok** - albo `polish-pass-ui`, albo wróć do layoutu. Nie lista 12.

Zakaz: "nowocześnie", "premium", "czyściutko", "professional", "wow", "AI-generated but in a good way". Jeśli nie umiesz wskazać testu - milczysz albo dopytujesz.

## Testy FAIL (konkret, nie klimat)

Odpal na [EKRAN]. PASS albo FAIL z miejscem (sekcja / kontrolka). FAIL w teście = kandydat na "wywal" albo na piątkę, nie "uwaga smakowa".

**Slop generatora / v0 / Lovable / Tailwind-default**

- S1. Hero: fioletowy albo indigo gradient, mesh, blob, aurora na białym albo `#0f172a`. (Tailwind `violet-600` / `indigo-500` / `from-purple-500`.)
- S2. Jeden krój i to Inter / Roboto / Open Sans / system-ui bez decyzji. Albo trzy rodziny bez roli.
- S3. Trzy CTA w jednym viewport o tej samej wadze (wypełniony + wypełniony + wypełniony, albo "Get started" / "Learn more" / "Contact").
- S4. Karty-cienie: każda karta `rounded-2xl` + `shadow-lg` + obramowanie 1 px. Chrome identyczny.
- S5. Stock-uśmiech: "zespół przy laptopie", handshake, diverse-team-hero, fake UI na monitorze.
- S6. Trzy feature-karty o **równej wysokości** i tym samym rytmie: ikona w kółku, tytuł 2 linie, opis 3 linie, pustka do wyrównania. Szablon, nie siatka.
- S7. Limonka, chartreuse, `#22c55e`, `#84cc16`, `#a3e635`, żółć jako **tekst albo kontrolka na białym**. (Kontrast licz w `recenzja-a11y-ui`; tu to też fail smaku: krzyk bez hierarchii.)
- S8. "Trusted by" - rząd szarych logotypów-wydmuszek.
- S9. Glassmorphism + blur na więcej niż jednym panelu.
- S10. Copy-kalka: unlock, supercharge, seamlessly, "w dzisiejszym", "to nie tylko X, to Y", lorem, "Your journey starts here".

**Hierarchia, typ, kolor, grid**

- H1. Brak jednego dominanta. Dwa hero-nagłówki, dwa akcenty albo wszystko w tym samym ciężarze. Oko nie ma pierwszego celu.
- H2. Więcej niż 3 rozmiary pisma na jednym ekranie. Czwarty rozmiar = zepsuta hierarchia, nie "więcej typografii".
- H3. Dwa podobne szeryfy albo dwa podobne sansy w parze (walka, nie kontrast). Para bez kontrastu wagi albo rodzaju.
- H4. Ściana wyśrodkowanego tekstu > 3 wiersze. Oś zniknęła.
- H5. Nav: 7+ linków plus 2+ przyciski. Chrome zjada treść.
- H6. Radius-lotto: 4 / 8 / 12 / 16 / 999 px na jednym ekranie bez skali.
- H7. Gęstość: albo wszystko przyklejone (padding 8 wszędzie), albo każda sekcja to 100vh pustki. Brak rytmu 8 px (8/16/24/40/64).
- H8. Ikony z 3+ zestawów (outline + filled + emoji + 3D) w jednym widoku.

**Ruch**

- R1. Hover / toggle / klik > 400 ms na UI (500 ms to już kara).
- R2. Bounce albo spring na produkcie B2B / fintech / med / kancelaria.
- R3. Więcej niż 3 rzeczy animują się naraz w tym samym kadrze.
- R4. Animacja nic nie robi z listy: kieruje uwagę / stan / przestrzeń / ciężar / szkielet ładowania. Dekoracja = wywal.

## Jak czytać referencje

Max 3. Z każdej 1 zdanie zasady, zero "zrób jak oni":
- co jest dominantem
- jaka para krojów (rodzaj, nie piracki plik)
- gdzie jest powietrze

Jeśli referencja to żyjący twórca albo "jak Apple" - odrzuć, poproś o zasadę albo inny URL.

## Dźwignie (wzór Y)

- Typ: zamiast Inter 16/20/24 zrób 3 poziomy (display 48-80 / heading 24-32 / body 16) i jedną parę o kontraście rodzaju.
- Kolor: zamiast fioletowego mesh zrób 1 tło, 1 tekst, 1 akcent; akcent tylko na CTA i 1 sygnale.
- Grid: zamiast 3 równych kart-cieni zrób 12 kolumn albo oś lewą i jeden moduł szerszy.
- Gęstość: zamiast 13/17/22 px zrób wielokrotności 8; jedna sekcja ciaśniejsza, jedna z powietrzem.
- Ruch: zamiast bounce 700 ms zrób ease-out 150-250 ms tylko na stanie (hover, focus, otwarcie).

Na końcu: `Smak zostaje u projektanta.` Dywiz "-".

Zanim wkleisz

Skill vs zły prompt

Zły prompt

Powiedz czy UI wygląda nowocześnie, profesjonalnie i drogo.

Skill

Ekran (screenshot, URL, HTML): [EKRAN].
Odbiorca: [ODBIORCA].
Referencje "tak" (max 3, bez nazwisk żywych twórców): [REFERENCJE].

Jeśli [EKRAN] albo [ODBIORCA] puste albo nadal nazwa zmiennej - dopytaj i STOP.
Puste [REFERENCJE] = recenzja bez "chcemy jak X". Nie dobierasz sobie Dribbble.

Sąsiad: bariery klawiatury/kontrastu = `recenzja-a11y-ui`. Favicon, stany, 8 px = `polish-pass-ui`. Brief 3-4 kierunków = `grafik-startowy`. Ten skill recenzuje gotowy ekran, nie wymyśla brandu.

Użyj z tym narzędziem

Lekcja: claude-start-05-claude-dla-grafika

Pytania

Jak użyć skilla "Recenzja smaku UI" w Claude?

Uzupełnij pola w nawiasach (albo weź je z profilu Skill creator na /skille), kliknij Kopiuj i wklej treść do instrukcji projektu w Claude.ai. W Claude Code kliknij Pobierz SKILL.md i połóż plik w folderze skilli. Skill działa też w ChatGPT (Custom Instructions). Nie chowa się za paywallem: kopia jest darmowa.

Kiedy tego skilla NIE używać?

Nie do podrabiania stylu zyjacego tworcy. Nie zamiast grafik-startowy na brief 3-4 kierunkow. Nie zamiast recenzja-a11y-ui i nie do plikow produkcyjnych druku.