Jak zadat vzhled, aby to nevypadalo genericky

Když Claudovi napíšeš „udělej to hezky“, dostaneš přesně to, co dostane každý, kdo napíše to samé. Fialovomodrý přechod, tři karty se zaoblenými rohy, ikonky a věta o tom, jak měníte budoucnost.

Tahle lekce je o tom, jak z toho ven.

Proč vibe-coded weby vypadají stejně

Model nemá tvůj vkus. Když mu nedáš směr, sáhne po tom nejběžnějším – a nejběžnější je právě to, co vidíš na tisících stránek.

Není to chyba modelu. Je to chybějící informace.

Jak popsat vizuální směr

Přídavná jména nestačí. „Moderní“ znamená pro každého něco jiného. Použij tři konkrétnější způsoby:

1. Ukaž referenci

   Nejsilnější nástroj. Najdi dva tři weby, které se ti líbí, a pošli odkazy nebo screenshoty. Claude Code umí pracovat s obrázky.

2. Popiš, co NEchceš

   Často účinnější než popsat, co chceš. „Žádné přechody. Žádné karty. Žádné ikonky.“ je jasná instrukce.

3. Popiš pocit a použij přirovnání

   „Má to působit jako dobře vytištěná kniha, ne jako aplikace.“ „Spíš galerie než e-shop.“ Přirovnání nese víc informace než přídavné jméno.

Pojďme nastavit vizuální směr webu. Zatím neměň obsah, jen vzhled.

REFERENCE
Líbí se mi: [ODKAZY NEBO POPIS 2–3 WEBŮ]
Na těch webech se mi líbí konkrétně: [CO PŘESNĚ – prostor, typografie,
barevnost, klid…]

POCIT
Má to působit jako: [PŘIROVNÁNÍ]

NECHCI
- žádné barevné přechody na pozadí
- žádné karty se stínem kolem každého odstavce
- žádné ikonky u nadpisů
- žádné emoji jako ikony
- žádné obrovské nadpisy přes celou obrazovku

TECHNICKY
- jedna akcentová barva, jinak neutrální odstíny
- systém velikostí písma a mezer, ne náhodné hodnoty
- barvy a velikosti jako proměnné na jednom místě, ať se dají měnit

Nejdřív mi napiš, jaký směr navrhuješ a proč, včetně konkrétní palety
a písem. Počkej na potvrzení, než začneš měnit soubory.

Proč „proměnné na jednom místě“

Poslední technický bod je důležitější, než se zdá.

Práce se screenshoty

Claude Code umí číst obrázky. Využij to:

1. Ukaž referenci

   Ulož screenshot webu, který se ti líbí, do složky projektu a napiš: „Podívej se na reference.png. Tenhle typ rozvržení a klidu chci.“

2. Ukaž problém

   Když něco vypadá špatně, udělej screenshot a napiš: „Tady je, jak to vypadá. Nadpis kolduje s obrázkem. Oprav to.“ Je to mnohem rychlejší než popisovat slovy.

3. Ukaž mobil

   Zúžený prohlížeč, screenshot, hotovo. O responzivitě je celá lekce dál v modulu.

Typografie dělá většinu práce

Když nevíš, kudy dál, začni u písma a mezer. Dvě věci, které udělají největší rozdíl:

• Jedna rodina písma, dvě až tři velikosti pro nadpisy, jedna pro text. Nic víc.
• Šířka textu kolem 60–75 znaků na řádek. Text přes celou šířku obrazovky se čte špatně a vypadá lacině.

Zaměř se jen na typografii, nic jiného neměň.

1. Zkontroluj, jestli máme jasnou hierarchii velikostí – ať se na první
 pohled pozná, co je nadpis, co podnadpis a co běžný text.
2. Omez šířku odstavců na 60–75 znaků na řádek.
3. Zkontroluj řádkování – text má mít vzdušnější řádkování než nadpisy.
4. Ověř kontrast textu proti pozadí podle WCAG AA.

Napiš mi, co jsi změnil a proč.