Unslop UI skill: jak z vibecoded webu udělat design

Necháš Claude Code postavit landing page a za čtyři minuty máš fialový gradient, nadpis s přechodem, tři karty s emoji a tlačítko, které se při najetí myší zvětší. Funguje to, jenže každý, kdo se na to podívá, hned ví, že to nikdo nenavrhl. Unslop UI skill je skill pro Claude, který takové znaky hledá v kódu, hlásí je s číslem řádku a hlavně tě nutí rozhodnout se, jak má web vypadat, místo aby nechal rozhodnout model.

V článku najdeš, co skill dělá, jak ho nainstalovat, co z něj vyšlo v našem rychlém testu a kde má meze. Pokud ještě nevíš, jak skilly v Claude Code fungují, začni u návodu na vlastní Claude Skills.

01Co je Unslop UI skill

Skill vznikl v repozitáři vibecoded-design-tells (stav ke 2. 11. 2026, repozitář vznikl 16. 6. 2026 a má kolem 530 hvězdiček). Autor nejdřív změřil, podle čeho lidé na Redditu poznají, že web dělala AI, a teprve z těch dat napsal pravidla. Do analýzy šlo 3 214 533 příspěvků ze 47 subredditů o AI a SaaS a 3 033 komentářů ze 125 vláken typu „proč vypadají všechny AI weby stejně".

Důležité: skill ti nenavrhne hezký design a nemá oblíbený vzhled. Dělá dvě úzké věci:

• odstraňuje konkrétní znaky, kvůli kterým web vypadá jako vygenerovaný,
• vynucuje vědomé rozhodnutí tam, kde by model sáhl po výchozí volbě.

Právě druhý bod je to, co ho odlišuje od obecných „anti-slop" promptů. Autor sám píše, že nahradit jeden default jiným není unslop. V roce 2024 byl znakem fialovo-modrý gradient. Dnes je to krémové pozadí, patkové písmo a šalvějově zelený akcent, tedy vzhled, na který dnes vede i vestavěný frontend-design skill od Anthropicu. Unslop UI proto hlídá i tenhle „vkusný default".

02Co lidé na AI webech nejvíc kritizují

Podle tabulky komentářů v repozitáři vypadá pořadí takto (podíl ze 3 033 komentářů):

Hlavní zjištění je, že největší stížnost není na žádný konkrétní prvek. Lidé si stěžují, že weby poznají na první pohled a že vypadají všechny stejně. Autor upozorňuje, že jde o hlasitý online názor, ne o vědecký průzkum, takže důvěřuj spíš pořadí než přesným procentům.

Zajímavé je, co data vyvrátila. Mesh a aurora pozadí byly artefakt vyhledávání (většina zásahů byly URL s /blob/). Bento mřížky jsou na posledním místě s 0,1 % a lidé je spíš brání. Tmavý režim sám o sobě problém není, jen neočekávané záření. A shadcn ani Tailwind nejsou vada, vadí jejich nezměněné výchozí hodnoty. Scanner proto tyhle věci schválně nehlásí, aby tě nezahltil šumem.

03Jak skill nainstalovat

Skill má dva režimy a standalone scanner v Pythonu bez závislostí. Instalace pro Claude Code:

1. Stáhni repozitář do prázdné složky

git clone --depth 1 https://github.com/JCarterJohnson/vibecoded-design-tells.git

2. Rozbal skill do domovské složky skillů

unzip vibecoded-design-tells/skill/unslop-ui.skill -d ~/.claude/skills/

Na claude.ai nahraješ soubor unslop-ui.skill v nastavení skillů. Po instalaci se skill spustí, když Claude požádáš o stavbu, kontrolu nebo zbavení webu AI vzhledu, landing page nebo komponenty, i když nenapíšeš slovo vibe-coded.

3. Scanner funguje i bez instalace

python3 skill/scripts/devibe_scan.py ./tvuj-projekt
python3 skill/scripts/devibe_scan.py ./tvuj-projekt --severity high
python3 skill/scripts/devibe_scan.py ./tvuj-projekt --json

Prochází soubory .html, .css, .scss, .js, .jsx, .ts, .tsx, .vue, .svelte a .astro. Návratový kód se rovná počtu nálezů s vysokou závažností, takže ho můžeš dát do CI a nechat build spadnout.

04Režim build: nejdřív zadání, pak styl

Většina webů, které „vypadají jako AI", je problém zadání, ne stylování. Prompt bez specifikace dostane průměr trénovacích dat a ten je pro všechny stejný. Skill proto před generováním UI chce čtyři věci:

• Referenci. Jeden skutečný web, značku nebo screenshot, jehož jazyk má následovat. Podle autora to pomůže víc než všechna ostatní pravidla dohromady. „Moderní a čistý" nic neznamená.
• Barvu. Skutečnou barvu značky nebo vědomě zvolenou, řekni ji nahlas. Ne výchozí z frameworku a ne krémovou se šalvějí.
• Písmo. Konkrétní font nebo dvojici vybranou pro tenhle projekt a s důvodem.
• Záměr rozvržení. K čemu stránka slouží a co má návštěvník udělat jako první. Z toho plyne struktura, takže odpadne kostra „hero, tři karty, CTA".

Pokud nedáš žádné zadání, skill nemá vyrobit jeden průměrný výsledek. Má vybrat záměrnou variantu a říct, proč, nebo nabídnout dva až tři opravdu odlišné směry.

05Režim audit: scanner a vibe skóre

Při kontrole existujícího kódu se nejdřív spustí scanner a pak se opravuje podle priority. Řádek s komentářem unslop-ignore se přeskočí. Hodí se, když je fialová nebo patkové písmo skutečné rozhodnutí značky, aby audit zůstal důvěryhodný.

Scanner vidí jen mechanické znaky: barvy, fonty, gradienty, kombinaci krém plus patka. Nevidí soudržnost rozvržení, jednotné mezery ani text přetékající z kontejneru, a i to webu dodává „AI" vzhled. Po scanneru je proto potřeba projít stránku očima podle katalogu v references/tells.md.

06Vyzkoušeli jsme to: scanner na ukázkovém hero (2. 11. 2026)

Test jsme dělali lokálně na naklonovaném repozitáři, Python 3.12, bez jakéhokoli tarifu (skill je zdarma). Vytvořili jsme dva soubory, Hero.tsx a globals.css, a do nich schválně dali typický výstup vibe codingu: fialový gradient na pozadí, nadpis s gradientním textem, emoji v nadpisu a kartách, pilulkové tlačítko s neonovým stínem a písmo Inter.

Scanner vrátil:

• 14 nálezů ve 2 souborech, vibe skóre 33 a verdikt „STRONG AI-default look",
• 6 nálezů s vysokou závažností (AI fialová ve 3 řádcích, fialovo-modrý gradient ve 2, gradientní text v 1),
• 7 se střední (emoji jako ikony, velké zaoblení, hover-grow animace, neonové záření, písmo Inter),
• 1 s nízkou (marketingové klišé „Supercharge your workflow"),
• návratový kód 6, tedy přesně počet vysokých nálezů.

U každého nálezu byl soubor, řádek a návrh opravy. Co scanner v našem testu nenašel: rozvržení s centrovaným hero a třemi kartami vedle sebe (grid-cols-3) vůbec nehlásil, přestože katalog tohle schéma popisuje jako jeden ze znaků. To je přesně ta část, kterou musíš posoudit očima. Nezkoušeli jsme build režim na živém projektu ani skill v Claude Code s reálným zadáním, takže o kvalitě výsledného designu nic tvrdit nemůžeme.

07Jak opravovat, aby ses nedostal k dalšímu defaultu

Nejčastější chyba je mechanické přepsání. Z bg-purple-600 uděláš bg-emerald-700 a skóre klesne, ale pořád jsi nic nerozhodl. Skill to výslovně označuje za špatnou opravu. Dobrý postup:

1. Najdi barvu značky. Máš logo, tištěné materiály nebo existující web? Odtud vezmi barvu. Pokud nic nemáš, rozhodni se vědomě a poznamenej proč.
2. Vyber font podle charakteru. Dvojice displej plus text, ne Inter pro všechno.
3. Rozbij mřížku. Asymetrické hero s obsahem vlevo a skutečným screenshotem produktu vpravo funguje lépe než tři ikony s popisky.
4. Odstraň emoji z rozhraní. Použij skutečnou sadu SVG ikon, nebo žádné.
5. Přepiš copy. Napiš, co produkt skutečně dělá, s konkrétním číslem. „Supercharge your workflow" by obstálo na jakémkoli jiném webu.
6. Označ záměrné volby. Co je rozhodnutí, dostane unslop-ignore.

Související postup pro obsahovou stranu najdeš v článku o skillech Matta Pococka, kde stejně jako tady jde o to, aby agent nejdřív dostal pořádné zadání. A pokud stavíš landing page v nástroji, který brand drží za tebe, podívej se na Claude Design v praxi nebo na stránku nástroje Claude Design.

08Meze a na co si dát pozor

• Data jsou názor internetu. Autor přiznává, že jde o hlasitou online debatu a že počítání klíčových slov může minout sarkasmus nebo chytit jiný význam slova.
• Licence. README uvádí kód pod MIT. Sebraný text z Redditu patří původním autorům, viz soubor DATA_NOTE.md v repozitáři. Metadata GitHubu licenci neuvádějí, před nasazením ve firmě to ověř.
• Skill není designér. Odstraní znaky, ale vkus, značku a práci s rozvržením musíš dodat ty.
• Mladý projekt. Repozitář je z června 2026, poslední commit 24. 6. 2026. Pravidla se budou měnit stejně, jako se mění „default" vzhled AI webů.
• Nezaměňuj s textovým unslop. Existují podobně pojmenované skilly pro psaní, například v balíčku pstack od Cursoru. Ty hlídají fráze jako „delve" nebo nadužívání pomlček, ne design webu. Stejný repozitář obsahuje i skilly unslop-text a unslop-code, ale ty jsou pro psaní a kód.

Pokud generuješ UI přes agenta, kombinuje se to dobře se zadáním ve formě specifikace, viz spec-driven development se Spec Kit. A pro samotný Claude Code (stránka nástroje) je skill jen další soubor ve složce ~/.claude/skills/.

09Časté otázky

10Shrnutí

Unslop UI skill je užitečný hlavně jako pojistka v CI a jako připomínka, že design začíná zadáním. Nainstaluješ ho jedním příkazem, scanner si vyzkoušíš za minutu a největší hodnotu má zásada, že oprava nesmí být dalším defaultem. Začni u scanneru na jednom svém projektu, projdi nálezy s vysokou závažností a pak se vrať k otázce, jakou referenci a barvu má tvůj web mít.