Build Mode
Kurz
Modul 17 · Design s Claude Code

Jak zadat vzhled

Slova, kterými se dá popsat vizuál tak, aby výsledek nebyl náhoda.

12 minlekce 89/107

Po lekci umíš

  • Umíš popsat vzhled slovy, kterým agent rozumí
  • Víš, jak pracovat s referencí, aniž bys kopíroval
  • Umíš vzhled ladit po krocích místo najednou
Obsah lekce (5)

Zadání vzhledu je jiná disciplína než zadání funkce. U funkce se dá napsat, co má dělat. U vzhledu musíš popsat dojem – a to jde hůř.

Existují na to tři techniky.

1. Protiklady

Nejpoužitelnější způsob. Místo přídavných jmen dej volbu mezi dvěma póly.

Nefunguje

  • „Moderní.“
  • „Čisté.“
  • „Profesionální.“
  • „Hezké.“

Funguje

  • „Spíš vzdušné než hutné.“
  • „Spíš vážné než hravé.“
  • „Spíš redakční než dashboardové.“
  • „Spíš klidné než výrazné.“

2. Negativní vymezení

Často je snazší říct, co nechceš.

Prompt pro Claude Code

Vzhled s negativním vymezením

Když nevíš, co chceš, ale víš, co nechceš.

Uprav vzhled [ČEHO].

Směr:
- Spíš [X] než [Y].
- Spíš [X] než [Y].

Čemu se vyhni:
- Kartě kolem každé informace – používej mezery, oddělovače a typografii.
- Přechodům v barvě pozadí.
- Emoji místo ikon.
- Stínům, pokud nenesou informaci o vrstvení.
- Výchozí modré.

Nejdřív mi popiš, co se chystáš udělat, a čekej na souhlas.

3. Reference

Odkaz na existující web funguje dobře, ale musí být použitý správně.

  1. Nekopíruj, pojmenuj princip

    Ne „udělej to jako [web]“, ale „líbí se mi na [webu], jak má velký kontrast mezi nadpisem a textem a jak málo používá barvu“.

  2. Popiš, co konkrétně se ti líbí

    Rozvržení? Typografie? Rytmus? Barevnost? Každá z těch věcí je jiné zadání.

  3. Řekni, co z toho nechceš

    Reference bývá z jiného oboru a ne všechno se hodí.

Laď po krocích

Nejčastější chyba je zadat všechno najednou. Výsledkem je změna, kterou nedokážeš vyhodnotit.

  1. Typografie

    písma, velikosti, řádkování

  2. Prostor

    odsazení a rytmus

  3. Barva

    akcent a neutrály

  4. Detaily

    zaoblení, stavy, přechody

Prompt pro Claude Code

Jeden krok vzhledu

Ladění vzhledu po částech.

Uprav v projektu jen tuhle jednu vrstvu: [TYPOGRAFIE / PROSTOR / BARVA].

Pravidla:
- Nic jiného neměň. Když narazíš na něco, co by se hodilo upravit
taky, napiš to na konec jako doporučení, ale nedělej to.
- Používej hodnoty z DESIGN.md.
- Řekni mi před provedením, co konkrétně se změní.
- Po provedení mi napiš, na co se mám podívat v prohlížeči.

Když se výsledek nelíbí

Nepopisuj pocit, popiš pozorování.

Nepomůže

  • „Vypadá to divně.“
  • „Nelíbí se mi to.“
  • „Je to nudné.“

Pomůže

  • „Nadpis a text mají skoro stejnou velikost, nevidím hierarchii.“
  • „Mezi sekcemi je stejná mezera jako mezi odstavci, splývá to.“
  • „Všechno má stejnou váhu, oko neví, kam jít první.“
Prompt pro Claude Code

Řekni mi, proč to nefunguje

Když víš, že se ti to nelíbí, ale ne proč.

Nelíbí se mi vzhled [ČEHO], ale neumím pojmenovat proč.

Projdi to a řekni mi konkrétně:
1. Kde chybí hierarchie – co má být první a není.
2. Kde je prostor nekonzistentní.
3. Kde je typografie slabá – kontrast velikostí, řádkování, šířka řádku.
4. Kde je barva použitá jako dekorace místo jako informace.

U každého bodu napiš konkrétní návrh, ale zatím nic neměň.
Cvičení25 minut

Vezmi jednu stránku svého projektu a proveď jeden krok: jen typografii.

Nastav velikostní stupnici, řádkování a šířku textu. Nic jiného.

Podívej se na výsledek. Skoro určitě to bude o dost lepší, i když jsi nesáhl na barvu.

Co si odnést

  • Popisuj protiklady, ne přídavná jména: „spíš vzdušné než hutné“.
  • Negativní vymezení je často snazší a stejně účinné.
  • Reference slouží k pojmenování principu, ne ke kopírování.
  • Laď po vrstvách: typografie, prostor, barva, detaily. Nikdy všechno naráz.

Máš to za sebou?

Označ lekci jako hotovou, ať víš, kde jsi skončil. Nic se tím neuzamkne.

Obsah aktualizován: 21. srpna 2026