Prompty na vzhled

Vizuální směr

Nastaví základ, na kterém se pak staví. Bez tohohle dostaneš nejběžnější možný vzhled.

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

REFERENCE
Líbí se mi: [ODKAZY NEBO POPIS 2–3 WEBŮ]
Konkrétně se mi na nich líbí: [PROSTOR / TYPOGRAFIE / BAREVNOST / KLID]

POCIT
Má to působit jako: [PŘIROVNÁNÍ, NAPŘ. „dobře vytištěná kniha“]

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ě

Nejdřív mi napiš, jaký směr navrhuješ a proč, včetně palety a písem.
Počkej na potvrzení.

Odgenerizuj to

Když web funguje, ale vypadá jako každý druhý.

Podívej se na tenhle web očima designéra a řekni mi, co na něm
vypadá genericky – jako typický výstup AI.

Hledej hlavně:
- barevné přechody a zbytečné barvy
- vše zabalené do karet
- ikonky u každé položky
- nadpisy, které jsou velké jen proto, že to jde
- vycentrovaný text tam, kde by měl být zarovnaný vlevo
- prázdné marketingové fráze v textu
- příliš zaoblené rohy a příliš mnoho stínů

U každého bodu napiš, čím to nahradit. Zatím nic neměň.

Doladění typografie

Když web vypadá „nějak divně“ a nevíš proč, bývá to typografie.

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

1. Zkontroluj 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č.

Mobil

Po každé větší změně vzhledu.

Projdi web z hlediska mobilu a oprav problémy. U každého bodu napiš,
jestli byl v pořádku, nebo cos změnil:

1. Nikde se stránka nedá posunout vodorovně.
2. Nadpisy mají na úzké obrazovce menší velikost.
3. Navigace je na mobilu použitelná.
4. Klikatelné prvky mají aspoň 44×44 px.
5. Odsazení od okrajů je na mobilu menší než na desktopu.
6. Text má minimálně 16 px.

Testuj šířky 360, 768 a 1280 px.

Prázdné, načítací a chybové stavy

Rozdíl mezi rozdělanou a hotovou aplikací.

Projdi aplikaci a najdi všechna místa, kde se zobrazují data.

U každého mi napiš, co se stane, když:
- data ještě nejsou (načítá se)
- data jsou prázdná (uživatel zatím nic nemá)
- načtení selže

Kde některý ze stavů chybí, navrhni, co tam má být. Prázdný stav
má vždycky říct, co má uživatel udělat, ne jen „žádná data“.