Jak se v designu vyhnout AI slopu: systém, wireframe a kritická revize

Proč samotný prompt nestačí

Opravdu stačí napsat „chci prémiový web“? Ne. Lepší prompt zlepší výsledek, ale generický vzhled neodstraní. AI často přehlcuje návrh obsahem, špatně rozloží prvky a skládá obrazovky do vizuálních vzorců, které už mají tisíce podobných webů.

Bez zadaných omezení model vybírá pravděpodobné variace z tréninkových dat. Výsledek tak vypadá jako průměr moderních webů: indigo gradienty, velké hero sekce, tři stejné karty a nadbytečné ikonové prvky. Nejde o chybu jediného modelu. Jde o výchozí prior, který prompt může jen částečně potlačit.

Slovo „čistý“ nebo „prémiový“ proto nestačí. Potřebujete designový systém a uzavřenou smyčku kontroly, která výstup znovu porovná s měřitelnými pravidly.

Designový systém před vizuálním návrhem

Diskuze mezi marketéry a designéry přinesla jeden zásadní postup: oddělte obsah a strukturu od povrchové grafiky. Nejdřív rozhodněte, co má návrh sdělovat a v jakém pořadí. Typografii, barvu a dekoraci řešte až poté.

Mezi diskutujícími se opakovaně objevovaly tyto zásahy:

• omezená škála barev místo volného výběru;
• typografie a velikosti nadpisů stanovené předem;
• měřítko rozestupů, například mřížka založená na násobcích 8 px;
• bezpečné zóny a jednotné zarovnání;
• omezený počet variant stejného typu karty;
• zákaz konkrétních vzorů, například přechodových gradientů nebo nadměrného počtu nadpisů;
• referenční screenshoty nebo moodboard místo neurčitých slov.

Veřejný repozitář unslop-ui-skill od Claudiu Sararu tento přístup formalizuje. Obsahuje pravidla pro práci AI nástrojů, katalog přibližně 100 designových znaků v devíti kategoriích a ukázkovou HTML hero sekci. Jde o pravidla pro generování, ne automatickou záruku výsledku.

ZDROJ: github.com ↗

Wireframe před vizuálním návrhem

Nejdřív vytvořte několik rychlých variant. Vyberte silnější směr a teprve potom generujte high-fidelity návrh. V diskuzi se objevovaly i čtyři grafické koncepty, ze kterých byl jeden převeden do HTML a CSS.

Wireframe zde plní funkci omezení prostoru. Rozhodnete o hierarchii, pořadí obsahu a poměru ploch dříve, než model začne přidávat lesklé efekty. Není to jen „drátěný náčrt“. Je to nástroj na rozhodování.

Po výběru struktury připravte krátký znovupoužitelný prompt:

Vytvoř [popis scény] pro [cílové publikum].
Použij [typografii, barvy, rozestupy a bezpečné zóny] a zachovej schválený wireframe.
Pro každou sekci omez obsah na [obsahové limity] a použij [seznam materiálů].
Aplikuj [cílový styl] bez generických vzorců AI landing pages.
Vyhnni se [nežádoucí artefaktům] a nadměrným gradientům, opakovaným kartám, dekorativním ikonám a obrovským nadpisům.
Vrať [požadovaný formát] a seznam designových rozhodnutí k revizi.

Pravidla uložte do dokumentu v repozitáři. Claude Code pak může stejná omezení používat při jednotlivých iteracích, aniž by se celý systém znovu hledal v konverzaci.

Jak to funguje pod kapotou a kde má postup limity

Samotný příkaz „nedělej tohle“ nemusí přepsat silnou prior modelu. Přeměňte proto kritiku na měřitelné podmínky: konkrétní barvy, počet prvků, velikosti písma, rozestupy nebo zakázané vzory. Uzavřený cyklus návrh → kritika → oprava → další kontrola zajistí, že se model nevrátí k výchozímu rozložení.

Jednorázová revize podle dojmu nestačí. Výstup znovu ověřte proti seznamu pravidel. Kritický audit doplní komunitní zkušenost mechanickou vysvětlující vrstvou.

Metoda má čtyři limity:

1. Prompt není systém. Konkrétní omezení pomáhají, ale nenahrazují architekturu komponent ani redakční rozhodnutí.
2. Ruční kód může reprodukovovat stejné klišé. Převod do HTML a CSS bez tokenů, škály a komponent jen přesune problém do stylesheetu.
3. Automatický audit neověří všechno. Subjektivní hierarchii, „levný“ vzhled či celkový tok nelze spolehlivě změřit bez referenčního vzorku.
4. Časová úspora není totéž co kvalita. AI může rychle připravit první verzi, konečné rozhodnutí o hierarchii a sdělení ale zůstává na člověku.

Wireframe je proto vhodný pro produkty, kde záleží na struktuře a použitelnosti. Generátor obrázků je vhodný pro ilustraci nebo vizuální variantu, nikoli jako autor UX architektury.

Kdy převést návrh do kódu a jak jej zkontrolovat

U webů se v diskuzi osvědčila kombinace AI a ruční práce. První koncept převeďte do HTML a CSS. Výsledek otevřete v prohlížeči a otestujte ve skutečné velikosti. Zkontrolujte hierarchii, čitelnost, hustotu textu, konzistenci a chování na různých šířkách.

Řešení frontend-ui-ux-skill od overseek944, respektive Manava Patela, doplňuje pravidla pro front-end a UX. Jde o Claude Code Agent Skill rozdělený do pěti pilířů: interakce a informační design, vizuální systém, architektura, přístupnost a výkon. Repo zahrnuje také doplňkové reference k přístupnosti, výkonu, antipatternům a architektuře komponent.

Samostatný open-source nástroj ui-ux-audit od imYChaudhary22 je orientovaný na automatickou kontrolu živého i lokálního webu. Podle dostupného README testuje rozlišení 1440 × 900 a 390 × 844, pořizuje snímky celé stránky a měří například kontrast, velikost klikacích cílů, rozestupy mimo 8px mřížku, přetečení, focus i reduced-motion. Nálezy rozděluje na Blocker, Major a Minor a pro každý má uvést místo, porušený princip, naměřenou hodnotu a konkrétní opravu. Nástroj lze podle README používat přes Claude Code plugin, přes npx nebo bez agenta.

ZDROJ: github.com ↗

Nástroje plní tři různé úkoly. unslop-ui-skill řeší generování a vizuální pravidla. frontend-ui-ux-skill pomáhá s front-endovými a UX zásadami. ui-ux-audit kontroluje výsledný web. Jejich pořadí je logické: pravidla před generováním, audit po implementaci. Všechny tři repozitáře jsou pod licencí MIT.

Co si z toho vzít

• Začněte systémem: obsah, hierarchie, typografie, barvy, rozestupy a zákazy.
• Nejdřív vyberte strukturu ve wireframu; vizuální efekty nechť přijdou až poté.
• Formulujte omezení měřitelně a vždy výsledek znovu zkontrolujte.
• Převod do HTML a CSS použijte jako test skutečného rozhraní, ne jako automatickou opravu vzhledu.
• Použijte unslop-ui-skill pro pravidla, frontend-ui-ux-skill pro UX a ui-ux-audit pro kontrolu výsledku.
• Pro grafiku spolupracujte s nástroji z nabídky, například ChatGPT pro rychlé varianty nebo Stable Diffusion pro lokální generování; výsledek stále posuzujte podle obsahu, hierarchie a cíle publikace.