Frontend Design System

Odklání frontend UI od generických AI-slop výchozích nastavení k výraznému designu

Otestováno · Funguje ★ 8.8/10

Co umí

Dovednost pro designové poradenství, která pojmenovává AI-slop anti-patterns (Inter font, purple-pink gradients, symmetric hero, even 3-column grids) a poskytuje konkrétní alternativy: serif/sans font pairings, non-default palettes, asymmetric layouts a restrained motion. Spouští se při tvorbě landing pages, dashboards nebo UI components. Balí themes.md a components.md s ready CSS.

Testovací report

Sestavil jsem stejnou hero section dvakrát: můj no-skill default skončil na Inter, purple-to-pink gradientu a centered symmetric layout, čímž zasáhl čtyři z anti-patterns, které skill explicitně jmenuje. Skill-guided verze použila DM Serif Display / DM Sans pairing, warm-white plus terracotta palette z themes.md, 5:7 asymmetric grid a offset-shadow button, čímž vyčistila všechny čtyři. Guidance-only skill s genuinely visible delta; 189-line themes.md a 351-line components.md jsou real, concrete references, nikoli filler.

Testováno: 2026-07-17 · Claude Code 2.x (agent harness)

Instalace

git clone https://github.com/oikon48/cc-frontend-skills
mkdir -p ~/.claude/skills
cd cc-frontend-skills && cp -r skills/frontend-design-system ~/.claude/skills/frontend-design-system

Příkazy a ukázkové prompty

/frontend-design-systemOdklání frontend UI od generických AI-slop výchozích nastavení k výraznému designu

Skilly se spouštějí běžnými požadavky — žádné příkazy k zapamatování. Po instalaci ho aktivují prompty jako tyto (anglicky):

Build a SaaS hero section that doesn't look like generic AI output.
Avoid the purple gradient and Inter font cliche for this landing page.
Give my dashboard an asymmetric layout with a distinctive color palette.

Kompletní testovací report (anglicky) →