Jak tvořit design pomocí AI, aniž by vypadal jako každý druhý

AI je rychlý junior

AI umí rychle vytvořit první návrh, napsat komponenty nebo upravit existující stránku. Nezná ale automaticky vaši značku, zákazníky ani důvod, proč má mít konkrétní web určitý charakter.

Právě konkrétnější zadání a připravené podklady obvykle vedou k lepším výsledkům než obecný prompt. Podobnou zkušenost popisuje AIFred při práci s Claude Design: design se dá vytvořit rychle, ale následné doladění a technické zpracování stále vyžadují čas.

Berte proto AI jako velmi rychlého juniorního kolegu:

• Umí připravit varianty a odpracovat rutinu.

• Potřebuje přesné zadání.

• Její první návrh není hotový produkt.

• Vy určujete vkus, priority a finální rozhodnutí.

Proč vzniká „AI design“

Modely se učí z velkého množství existujících webů. Když nedostanou specifické vedení, sáhnou po průměru, tedy po vzorcích, které se na internetu opakují nejčastěji.

Typické artefakty generovaného designu jsou:

• Fialové nebo modré gradienty bez vztahu ke značce.

• Tři stejné feature karty vedle sebe.

• Příliš mnoho pill tlačítek, badgeů a statusových teček.

• Umělé „tech“ prvky, například falešný terminál nebo dashboard složený jen z barevných divů.

• Textové ozdoby typu „TYPE / FORM / MOTION“.

• Šipka „scroll down“, přestože každý ví, že stránka pokračuje níže.

• Nahodilé kombinace radiusů, barev a stylů ilustrací.

Taste Skill tyto opakující se vzorce přímo označuje jako „anti-slop“ problematiku. Jeho pravidla například ve výchozím stavu zakazují tři stejné karty v řadě, AI-purple gradienty, falešná produktová rozhraní a dekorační statusové tečky.

Začněte dřív než promtem

Než otevřete Cursor, Claude Code nebo jiný AI nástroj, připravte si jednoduchý design brief. Nemusí to být dvacetistránkový dokument. Stačí odpovědět na pár otázek:

• Pro koho web je? Například: majitel malé pražírny, ne návštěvník obecného SaaS webu.

• Co má člověk udělat? Koupit produkt, objednat konzultaci, rezervovat termín?

• Jaký má být dojem? Klidný, syrový, prémiový, hravý, technický, redakční?

• Čemu se vyhnout? Třeba gradientům, ikonám v kolečkách, stockovým fotkám nebo příliš oblým rohům.

• Jaké podklady už existují? Logo, font, barvy, fotky, ukázky konkurence a inspirace.

Místo promptu:

Navrhni moderní web pro kavárnu.

zkuste napsat:

Navrhni web pro malou pražírnu výběrové kávy v Plzni. Cílovka jsou lidé, kteří řeší původ kávy a rádi chodí do lokálních podniků. Vizuál má být civilní, lehce redakční a hmatatelný, ne technologický. Použij teplou smetanovou, tmavou hnědou a jednu rezavou akcentní barvu. Vyhni se gradientům, třem stejným kartám, ikonám v kolečkách a generickým fotkám. Pracuj s velkou typografií, vlastními fotografiemi kávy a asymetrickou mřížkou.

AI pak nemá jen úkol „udělat hezký web“. Má jasné mantinely.

Nechte AI navrhovat varianty

Častá chyba je přijmout první návrh. První verze bývá spíš test, zda AI pochopila zadání.

Lepší postup:

1. Nechte vytvořit tři rozdílné směry, ne tři drobné obměny stejného layoutu.

2. Vyberte jeden podle toho, zda odpovídá značce a cíli stránky.

3. Nechte AI vysvětlit její rozhodnutí: hierarchii, práci s barvou, typografií a obsahem.

4. Teprve potom řešte detaily a implementaci.

Dobré zadání pro druhé kolo může znít:

Vytvoř tři skutečně rozdílné koncepty. První redakční a typografický, druhý fotografický a organický, třetí minimalistický produktový. Nepoužívej stejné rozložení hero sekce ani tři stejné feature karty.

Tím zabráníte tomu, aby AI jen přeskládala stejné bloky.

Budujte systém, ne obrázek

Design nepůsobí profesionálně proto, že má pěkný hero obrázek. Působí tak, protože se konzistentně chová na celé stránce: stejné rozestupy, typografie, barvy, tlačítka i tón textů.

Zapište si proto jednoduchá pravidla:

• Jedna hlavní akcentní barva.

• Jeden systém rohů: ostré, mírně zaoblené, nebo výrazně oblé.

• Dvě až tři úrovně velikosti textu.

• Omezený počet typů tlačítek.

• Jasně daný styl fotografií a ikon.

Taste Skill má pro to tři „zámky“: konzistenci akcentní barvy, konzistenci tvarů a jedno téma stránky, tedy světlé, tmavé nebo automatické. Nejde o dogma, ale o praktickou pojistku proti tomu, aby každá sekce vypadala, jako by ji navrhla jiná AI.

Impeccable: pomocník pro celý proces

Impeccable je sada příkazů a pravidel pro AI coding nástroje. Nesnaží se design vytvořit jedním promptem, ale vede proces od zadání přes kritiku až po finální vyladění. Pracuje například s kontextovými soubory PRODUCT.md a DESIGN.md, aby AI věděla, co produkt dělá a jak má vizuálně působit.

Instalace

Z kořene projektu spusťte:

bash

npx impeccable install

Pak v AI nástroji použijte:

text

/impeccable init

Nástroj vytvoří základní kontext a můžete pokračovat třeba příkazem:

text

/impeccable polish pricing page

Dokumentace uvádí podporu pro nástroje jako Claude Code, Cursor, Codex CLI nebo Gemini CLI; po instalaci je potřeba AI nástroj znovu načíst.

Co umí

• /impeccable shape pomůže vytvořit design brief ještě před psaním kódu.

• /impeccable critique udělá designovou revizi včetně skórování a automatické detekce problémů.

• /impeccable polish slouží pro finální dotažení detailů.

• /impeccable typeset řeší generickou nebo nekonzistentní typografii.

• /impeccable live dovolí vybírat prvky přímo v prohlížeči, vytvořit varianty a přijmout jednu do zdrojového kódu.

Klady a zápory

KladyZáporyImpeccableVede AI od briefu po kontrolu kvality, hodí se i pro existující projekt, má příkazy pro konkrétní designové problémy. Je obsáhlejší, takže se vyplatí věnovat chvíli nastavení kontextu a naučení příkazů.InstalaceJeden příkaz přes npx, následovaný inicializací v AI nástroji. Je určený hlavně pro lidi, kteří pracují s projektem a kódem, ne jen pro jednorázové generování obrázku webu.

Pro vývojáře je to dobrá volba, pokud nechcete pokaždé začínat od nuly a chcete mít designová pravidla uložená přímo v repozitáři.

Taste Skill: brzda proti generice

Taste Skill je jednodušší sada instrukcí ve formátu SKILL.md. AI agent si tento soubor přečte a při tvorbě frontendu se drží jeho pravidel.

Základní instalace v projektu je:

bash

npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"

Do projektu se přidá soubor SKILL.md; podle dokumentace není nutná další konfigurace. Aktuálně se ale ve výchozím nastavení instaluje experimentální verze 2, takže se její pravidla mohou ještě měnit.

Co hlídá

Taste Skill nejdřív čte zadání a z něj odvozuje rozložení, hustotu obsahu, pohyb i vhodný designový směr. Pokud zadání odpovídá známému design systému, například Material, Bootstrapu nebo shadcn, má použít jeho oficiální řešení místo vizuální napodobeniny.

Jeho největší výhodou jsou konkrétní zákazy opakovaných AI klišé. Mimo jiné omezuje:

• Fialové gradienty a mesh bloby.

• Tři identické karty v jedné řadě.

• Dekorační popisky, falešná čísla verzí a zbytečné statusové prvky.

• Falešná rozhraní místo skutečných screenshotů nebo relevantních vizuálů.

• Nesmyslné scroll listenery v JavaScriptu.

Klady a zápory

KladyZáporyTaste SkillRychlá instalace, žádná nutná konfigurace, jasná pravidla proti nejčastějším AI klišé. Pravidla mohou být pro specifickou značku příliš přísná a je potřeba je upravit.PřizpůsobeníSKILL.md lze upravit, doplnit o vlastní stylový manuál nebo z něj pravidla odstranit. Výchozí v2 je experimentální, proto se může chování mezi aktualizacemi změnit.

Taste Skill je vhodný jako rychlá pojistka pro každého, kdo generuje frontend v Cursoru, Claude Code, Codexu nebo podobném nástroji.

Nejlepší je kombinace

Taste Skill funguje jako stručný vkusový filtr: „Toto už prosím negeneruj.“ Impeccable je spíš procesní parťák: „Nejdřív pochop produkt, potom navrhni, zkritizuj a dolaď.“

Praktický workflow může vypadat takto:

1. Napište krátký brief a přidejte reálné podklady.

2. Přidejte Taste Skill, aby AI nesklouzla k nejběžnějším šablonám.

3. V Impeccable vytvořte kontext projektu pomocí /impeccable init.

4. Nechte si navrhnout několik skutečně odlišných směrů.

5. Vybraný směr implementujte po částech.

6. Pusťte /impeccable critique a opravte konkrétní slabiny.

7. Nakonec použijte /impeccable polish, ale jen tam, kde to zlepší použitelnost nebo charakter značky.aifred+1

Finální kontrola

Než design pustíte ven, položte si pět jednoduchých otázek:

• Poznal bych tuto stránku bez loga jako stránku této značky?

• Má každý vizuální prvek svůj důvod?

• Neopakují se karty, ikony a bloky jen proto, že je AI ráda generuje?

• Funguje stránka i bez animací?

• Vybral by si zákazník snadno hlavní akci?

AI vám může ušetřit hodiny práce. Vkus, kontext a schopnost říct „tohle je příliš generické“ ale zůstávají na vás. Nejlepší AI design nevzniká z nejdelšího promptu, ale z dobrých rozhodnutí v několika poctivých kolech.