Agentní programovací nástroje jako Claude Code, Codex nebo Cursor dokážou za pár minut vygenerovat funkční frontend s responzivním layoutem, animacemi a napojením na API. Problém je, že výsledek vypadá pokaždé skoro stejně — Inter font, fialovo-modrý gradient, zaoblené karty s ikonkami a hero sekce s abstraktní ilustrací. Vznikl pro to už i termín „AI slop design”. Následující text vysvětluje, proč k tomu dochází, a nabízí konkrétní techniky, jak z AI nástrojů dostat vizuálně odlišný výstup.
Proč AI generuje stále stejný design
Jazykové modely, které pohánějí agentní programovací nástroje, jsou trénovány na obrovském množství existujících webových stránek a repozitářů. V trénovacích datech dominují komponentové knihovny jako Tailwind UI, shadcn/ui nebo Material Design. Výstup modelu pak přirozeně konverguje k průměru toho, co viděl — a průměr milionu webů je šablona SaaS landing page.
Konkrétní znaky generického AI designu se opakují napříč nástroji: font Inter nebo Roboto, protože jsou v trénovacích datech nejčastější. Barevná paleta s převahou modré a fialové, protože to je statisticky nejpoužívanější kombinace na SaaS webech. Layout založený na mřížce karet (card grid) jako první vizuální dojem — protože komponentové knihovny karty nabízejí jako výchozí stavební blok. Matematicky přesné, ale emocionálně prázdné rozestupy. Generické hero sekce s abstraktní 3D ilustrací nebo stock fotografií.
Komponentové knihovny jako Fluent UI od Microsoftu nebo Material Design od Googlu jsou v tomto smyslu dvojsečná zbraň. Zajišťují konzistenci a přístupnost, což je cenné pro interní nástroje nebo dashboardy. Zároveň jsou ale hlavním důvodem, proč AI výstup vypadá uniformně — model tyto systémy reprodukuje, protože na nich byl trénován. Pokud chcete, aby váš web vypadal jako Microsoft Teams, Fluent UI je správná volba. Pokud chcete vlastní identitu, je to past.
Co změnit v promptech
Nejrychlejší cesta k vizuálně odlišnému výstupu nevyžaduje žádný nový nástroj — stačí změnit způsob, jakým s modelem komunikujete. OpenAI tento přístup podrobně popsalo v kontextu GPT-5.4 a principy platí pro všechny agentní nástroje.
Negativní instrukce jsou účinnější než pozitivní. Řekněte modelu explicitně, co nechcete: „žádný card grid jako úvodní stránka”, „nepoužívej font Inter ani Roboto”, „žádné zaoblené karty s ikonkami”, „žádný fialovo-modrý gradient”. Modely mají tendenci ignorovat vágní pozitivní instrukce typu „udělej to originální”, ale konkrétní zákazy respektují spolehlivěji.
Typografie je nejrychlejší páka. Výměna fontu je jedna řádka CSS a okamžitě změní charakter celé stránky. Místo generického font-family: 'Inter', sans-serif zadejte v promptu konkrétní kombinaci: „použij Space Grotesk pro nadpisy a Source Serif Pro pro tělo textu” nebo „nadpisový font DM Serif Display, textový Outfit”. Všechny zmíněné fonty jsou dostupné zdarma přes Google Fonts. OpenAI ve svém návodu doporučuje „expressive fonts beyond defaults like Inter or Roboto” — a je to pravděpodobně jediná rada z celého článku, která má okamžitý měřitelný dopad.
Barvy s kontextem místo generických palet. Prompt „použij moderní SaaS paletu” vygeneruje modrofialovou. Prompt „tmavě zelená a krémová, inspirace skandinávským minimalismem” nebo „černá a oranžová, průmyslový charakter” vygeneruje něco rozpoznatelného. Čím konkrétnější popis nálady, tím méně generický výstup.
Reálný obsah místo lorem ipsum. Když modelu dodáte skutečný název produktu, skutečné nadpisy a skutečný popis, výstup se strukturálně liší od generického wireframu. Model přizpůsobí layout délce textu, zvolí jinou hierarchii a vytvoří věrohodnější kopii.
Referenční screenshoty jako vstup. Claude Code i Codex pracují s obrázky. Udělejte screenshot 2–3 webů, jejichž vizuální styl se vám líbí, přiložte je k promptu a napište: „inspiruj se vizuálním stylem těchto stránek, ale nepoužívej stejné barvy ani layout”. Model získá konkrétní vizuální referenci místo abstraktního popisu.
Motion s účelem, ne jako dekorace. OpenAI doporučuje omezit animace na tři typy: jednu vstupní sekvenci v hero sekci, jeden scroll-linked nebo sticky efekt a jeden hover nebo reveal přechod. Každá animace musí mít důvod — vytváří hierarchii, orientuje uživatele nebo poskytuje zpětnou vazbu. „Použij motion pro vytvoření přítomnosti a hierarchie, ne pro šum,” shrnuje to zmíněný článek. Pro implementaci doporučují Framer Motion.
Design tokeny jako trvalé řešení
Jednorázové instrukce v promptu fungují, ale při každém novém dotazu je musíte opakovat. Trvalejší řešení je uložit vizuální identitu projektu jako design tokeny přímo do konfigurace agentního nástroje.
V Claude Code je samostatným řešením soubor CLAUDE.md v kořeni projektu, který může obsahovat sekci s designovými pravidly — použité fonty, barevnou paletu s hex kódy, pravidla pro spacing, border-radius, styl tlačítek. Agent tato pravidla načte při každém spuštění a aplikuje je automaticky. Podobně fungují Rules for AI v Cursoru nebo systémové instrukce v Codexu.
Příklad sekce v CLAUDE.md:
## Design systém
Fonty: DM Serif Display (nadpisy), Outfit (tělo textu), JetBrains Mono (kód)
Barvy: primární #1a4d2e (tmavě zelená), sekundární #f5f0e8 (krémová), akcent #d4a574 (teplá bronzová)
Border-radius: 0px pro karty, 4px pro tlačítka, 8px pro inputy
Spacing základ: 8px grid
Stín: nepoužívat box-shadow, místo toho border 1px solid #e5e0d8
Hero sekce: vždy full-bleed obrázek nebo gradient, nikdy inset s border-radius
Karty: používat jen když je nutná interakce, ne jako dekorativní prvek
Tento přístup má praktický důsledek — agentní nástroj generuje konzistentní vizuální identitu napříč všemi soubory a komponentami, aniž byste museli při každém požadavku opakovat designová pravidla.
Impeccable: design tokeny jako skill
Projekt Impeccable od Paula Bakause automatizuje vytváření designových pravidel. Nabízí hotovou sadu designových referencí a příkazů, které agentní nástroj naučí rozlišovat dobrý design od generického.
Bakaus není náhodný vývojář s pěkným README. Je autorem jQuery UI, vedl Chrome DevTools v Googlu a strávil přes dekádu na průsečíku designu a inženýrství. Impeccable staví na oficiálním frontend-design skillu od Anthropicu a rozšiřuje ho o sedm referenčních dokumentů pokrývajících typografii, barvy, prostorový design, motion, interakce, responzivitu a UX writing. Ke skillu přidává dvacet příkazů – /audit, /polish, /critique, /bolder, /quieter a další – které agent spouští v kontextu projektu.
Audit administrační části mého projektu v Impeccable
Nejužitečnější je příkaz /teach-impeccable. Agent projde codebase, identifikuje existující fonty, barvy a technický stack, a pak se zeptá na tři věci: kdo produkt používá a v jakém kontextu, jakou osobnost má brand mít, a jaký vizuální směr chcete. Odpovědi uloží do souboru .impeccable.md v kořeni projektu – a od té chvíle je všechny ostatní příkazy automaticky čtou. To je v praxi totéž jako ručně napsaná sekce v CLAUDE.md, ale strukturovaně a s konkrétními guardrails.
Reference soubory obsahují specifické a technicky správné rady: OKLCH místo HSL pro perceptuálně uniformní palety, tintované neutrály místo čistých šedých, exponenciální easing místo bounce animací, zákaz vnořených karet, explicitní seznam přeužívaných fontů, které se nemají používat. Agent tyto instrukce dostane do kontextu při každém generování, takže nemusíte pravidla opakovat. Impeccable funguje s Cursorem, Claude Code, Gemini CLI, Codexem i VS Code Copilotem – nainstaluje se jedním příkazem (npx skills add pbakaus/impeccable).
Praktický postup vypadá takto: nainstalujete skill, spustíte /teach-impeccable pro jednorázový onboarding, a pak při práci používáte příkazy podle potřeby – /audit pro technickou kontrolu přístupnosti a výkonu, /critique pro UX recenzi s bodováním podle Nielsenových heuristik, /polish jako finální průchod před nasazením, /bolder když je výstup příliš opatrný, /quieter když je naopak přehnaný.
Střízlivé hodnocení: Impeccable je v jádru sofistikovaný prompt engineering – lépe strukturovaný než ruční CLAUDE.md, ale stále prompt engineering. Neřeší fundamentální problém chybějící vizuální zpětné vazby, který adresují nástroje jako Pencil.dev nebo Paper.design. Agent s Impeccable generuje kód s lepšími designovými instrukcemi, ale stále nevidí výsledek. Druhé riziko je subtilnější – Impeccable má silný estetický názor (žádný bounce, žádný glassmorphismus, žádné čisté šedé), takže hrozí, že „Impeccable look” časem nahradí „AI slop look” jako nový rozpoznatelný průměr. Projekt je také relativně čerstvý (vydán v únoru 2026) a zatím nemá širokou validaci v produkčním nasazení. Ale jako výchozí bod pro týmy, které nemají vlastního designéra a chtějí se dostat nad úroveň generického AI výstupu, je to pravděpodobně nejrychlejší cesta, která aktuálně existuje.
Nástroje, které mění workflow
Promptové techniky řeší symptom, ne příčinu. Základní problém je, že agentní nástroj generuje kód bez vizuálního kontextu — „nevidí” výsledek a nemá referenční bod. Nová generace nástrojů se tento problém pokouší řešit tím, že propojuje vizuální design s kódem obousměrně.
Google Stitch: rychlý prototyp z popisu
Google Stitch je nástroj z Google Labs, který od března 2026 prošel výraznou aktualizací. Funguje jako AI-nativní nekonečné plátno, kde popíšete, co chcete, a model vygeneruje UI návrh.
Nejzajímavější je režim „Vibe Design” – místo specifikace konkrétních komponent popíšete záměr a pocit: „aplikace pro meditaci, klidná, minimalistická, hodně bílého prostoru”. Stitch vygeneruje několik vizuálních směrů odpovídajících této náladě. Voice Canvas umožňuje mluvit na plátno – AI se ptá na upřesnění a upravuje design v reálném čase. Nově podporuje generování až pěti obrazovek najednou a přímou manuální editaci textu, obrázků a rozestupů bez nutnosti znovu promptovat.
Pro napojení na agentní nástroje je klíčový nový SDK a MCP server, který umožňuje propojení s Claude Code, Gemini CLI nebo Cursorem. Export funguje do Figmy i jako čistý HTML/CSS kód. Stitch je zdarma s limitem 350 generací měsíčně.
Prakticky nejužitečnější funkcí je automaticky generovaný design systém. Stitch při navrhování na pozadí sestavuje kompletní sadu pravidel – typografické škály, barevné palety s odstíny, pravidla pro komponenty, elevaci i doporučení, co v rámci zvoleného vizuálního jazyka dělat a co ne. Celý systém exportuje jako soubor design.md – plain markdown, který zkopírujete do kořene projektu. Od té chvíle ho agentní nástroj čte při každém požadavku a generuje kód konzistentně s vaším vizuálním systémem. Bez design.md (nebo ručně psaných tokenů v CLAUDE.md) se design při každém novém promptu rozjíždí – barvy se posunují, fonty se mění, spacing ztrácí konzistenci. Jeden markdown soubor tento problém řeší.
Doporučené workflow: nahrajte screenshoty existující aplikace nebo 2–3 inspirační obrázky, popište směr a požadované fonty, vygenerujte více variant a kurátorsky vyberte nejlepší prvky z každé. Pak si v pravém panelu otevřete Design Systems, zkontrolujte vygenerovaná pravidla, exportujte design.md a přes MCP napojte Stitch na agentní nástroj – ten pak kromě pravidel čte i skutečný HTML/CSS z vašich rámců, ne jen jejich popis.
Střízlivé hodnocení: Stitch výrazně zrychluje prototypování – vygenerovat 6–12 variant a vybrat nejlepší je reálný a užitečný workflow. Ale „Vibe Design” je v jádru stále prompt engineering s hezčím rozhraním. Výstup konverguje ke stejnému průměru jako u ostatních nástrojů, jen rychleji. Automaticky generovaný design.md je výchozí bod, ne konečný výsledek – fonty a barvy se při přenosu do kódu ne vždy přenesou přesně a soubor je potřeba projít a upravit. Reálný přínos je v iterační rychlosti, v tom, že design systém dostanete jako vedlejší produkt navrhování místo ruční práce, a v tom, že export do Figmy umožňuje designérovi převzít výstup a doladit ho ručně.
Pencil.dev: design přímo v IDE
Pencil.dev vytvořil český vývojář Tomáš Krcha, spoluzakladatel Adobe XD s více než čtrnáctiletou zkušeností na průsečíku designu a inženýrství. Pencil řeší problém z opačné strany než Stitch — místo generování prototypů v samostatném nástroji přináší vizuální plátno přímo do vývojového prostředí.
Pencil funguje jako rozšíření pro Cursor, Windsurf i VS Code. Designové soubory používají formát .pen, což je obyčejný JSON, který žije v repozitáři vedle kódu. To znamená, že AI agenti — ať už v Cursoru, Claude Code nebo jakémkoli jiném nástroji s MCP podporou — mohou soubory přímo číst i zapisovat. Agent tak má při generování kódu plný vizuální kontext: ví, jak má výsledek vypadat, jaké jsou rozměry, barvy, fonty a hierarchie komponent.
Pencil nabízí i SWARM mód, ve kterém až šest AI agentů paralelně navrhuje na plátně — řeknete „navrhni aplikaci pro správu úkolů” a agenti generují varianty v různých stylech, z nichž vybíráte. V demech to vypadá efektně. V praxi je užitečnější jednodušší scénář: vývojář s vizuálním citem udělá návrh na plátně a agent ho implementuje s plným kontextem. To eliminuje hlavní problém agentních nástrojů — generování kódu bez vizuální reference. Pencil je k dispozici zdarma pro Mac, Windows i Linux.
Paper.design: kód jako plátno
Paper.design jde ještě dál v propojení designu a kódu — plátno samo je HTML/CSS canvas, takže design je od začátku kód. K tomu přidává GPU shadery (halftone, liquid metal, fluted glass), tedy vizuální efekty, které generický AI výstup typicky postrádá.
Pro agentní workflow je klíčový MCP server s 24 nástroji, přes které agent čte screenshoty, computed styles, hierarchii komponent a JSX výstup — a zároveň může vytvářet artboardy, měnit text, aktualizovat styly. Propojení funguje s Claude Code, Cursorem i VS Code Copilotem. Paper získal seed investici 4,2 milionu dolarů od Accel.
Paper.design a jeho promptování referenčních designů
v0 a další generátory
Za zmínku stojí v0 od Vercelu, který generuje React komponenty z textu a umožňuje iterativní úpravy. Podobně funguje Lovable nebo Bolt — všechny tyto nástroje zvládnou rychle vyrobit funkční prototyp. Společný limit je stejný: bez explicitního vizuálního zadání konvergují k průměru trénovacích dat.
Praktický workflow krok za krokem
Následující postup kombinuje promptové techniky s nástrojovým ekosystémem a funguje s libovolným agentním programovacím nástrojem:
1. Definujte design tokeny. Než začnete generovat kód, rozhodněte se o fontech, barvách, spacingu a pravidlech pro komponenty. Uložte je do CLAUDE.md, .cursorrules nebo systémových instrukcí. Toto je jednorázová investice, která se vrací u každého dalšího požadavku.
2. Najděte vizuální reference. Vyberte 2–3 existující weby, jejichž vizuální styl odpovídá vaší představě. Udělejte screenshoty. Nemusíte je kopírovat — jde o to dát modelu konkrétní vizuální kotvicí bod místo abstraktního popisu.
3. Vygenerujte prototyp. Použijte Stitch, v0 nebo přímo agentní nástroj k vygenerování první verze. V této fázi generujte více variant — ideálně 3–6 — a vyberte nejlepší základ.
4. Iterujte negativními instrukcemi. Místo „udělej to lepší” říkejte konkrétně, co odebrat nebo změnit: „odstraň card grid a nahraď ho full-width sekcemi”, „zmenši border-radius na 0”, „přesuň navigaci do levého sidebaru”. Negativní a konkrétní instrukce vedou k rychlejší konvergenci k požadovanému výsledku.
5. Propojte design s kódem. Pokud používáte Pencil.dev nebo Paper.design, agent má vizuální kontext automaticky přes MCP. Pokud ne, přiložte screenshot aktuálního stavu jako referenci ke každému požadavku na úpravu.
6. Manuální doladění. Projděte vygenerovaný kód a upravte detaily, které agent nezvládne — asymetrické layouty, nestandardní hover stavy, kontextové micro-copy, specifické animační timing. Tady je prostor pro lidský úsudek, který AI zatím nenahradí.
Co AI design stále neumí
Bylo by nečestné článek o AI designu zakončit bez pojmenování limitů. AI nástroje zvládnou zhruba 70 % designové práce za zlomek času, který by zabrala ruční implementace. Pro MVP, interní nástroj nebo prototyp je to dostatečné. Pro produkt s vlastní vizuální identitou je to výchozí bod, ne konečný výsledek.
Zbylých 30 % — brand identita, emoční rezonance, kontextové rozhodování o tom, co uživatel v daný moment potřebuje vidět — vyžaduje lidský úsudek. Designérská profese se nemění na „prompt engineering”. Mění se na kurátorství a editaci AI výstupů, což je jiná dovednost, ale stále dovednost, kterou stroj nemá.
SWARM mód v Pencil.dev a paralelní generování variant ve Stitch zní jako řešení — víc agentů, víc kreativity. V praxi šest agentů generujících paralelně konverguje ke stejnému průměru, jen rychleji. Kvantita variant nenahrazuje kvalitu vizuálního rozhodování.
Nástroje jako Stitch, Pencil.dev a Paper.design pomáhají tím, že dávají agentovi vizuální kontext, který mu dosud chyběl. Design tokeny a referenční obrázky pomáhají tím, že zužují prostor možných výstupů. Ale finální rozhodnutí o tom, co vypadá dobře a co ne, zůstává na člověku. A to je pravděpodobně poslední designová kompetence, kterou AI nahradí.