Anthropic Frontend Design

Designové pokyny pro výrazné UI, které se vyhýbá šablonovým výchozím nastavením v paletě, typu a rozvržení

od fcakyon · fcakyon/claude-codex-settings

Otestováno · Funguje ★ 9.2/10

Anthropic Frontend Design — Designové pokyny pro výrazné UI, které se vyhýbá šablonovým výchozím nastavením v paletě, typu a rozvržení

Co umí

Designový skill pouze s promptem, který vede Claude k výraznému, záměrnému vizuálnímu designu při tvorbě nebo přetváření UI: zaměřte se na předmět, vytvořte malý systém tokenů pro barvy/typ/rozvržení/signaturu a odvoďte jeden zapamatovatelný signaturní prvek namísto použití výchozích nastavení. Spouští se, když uživatel požádá o návrh nebo přepracování stránky, hrdiny nebo rozhraní, výběr typografie nebo palety, nebo opravu designu, který působí genericky nebo šablonovitě. Explicitně jmenuje tři současné výchozí AI vzhledy a hrdinu s velkými čísly jako šablony, kterým se má vyhnout.

Testovací report

Získal jsem SKILL.md v surové podobě a potvrdil, že frontmatter se parsuje s name+description (204 znaků) a licencí Apache-2.0; tělo neodkazuje na žádné skripty ani soubory (samostatné pokyny), takže nic ke kontrole a žádné bezpečnostní rizika. Ověřena instalace do dočasného HOME pomocí git clone + cp, umístění SKILL.md na ~/.claude/skills/anthropic-frontend-design/SKILL.md. Pro výstup jsem vytvořil dva skutečné hero artefakty pro stejný úkol (přílivové hodiny pro pobřežní rybáře): baseline.html a skill.html. Základní verze reflexivně vytvořila tmavě modrou+světle modrou, jedno systémové písmo a přesně řádek se třemi velkými čísly (10k+/99.9%/24-7), který skill jmenuje jako šablonovou odpověď; verze podle skillu vynechala statistiky pro zakázkový analogový přílivový ciferník (signaturní prvek), použila tři záměrné typové role (Oswald condensed / Spectral / Plex Mono), 6-hexadecimální mořskou paletu odvozenou od předmětu a aktivní hlasovou kopii pro koncového uživatele ("The bar is open. Cross before slack." / "Set my bar alert" vs "Never miss the tide again" / "Get Started").

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

Instalace

git clone --depth 1 https://github.com/fcakyon/claude-codex-settings.git /tmp/anthropic-frontend-design-src
mkdir -p ~/.claude/skills
cp -R /tmp/anthropic-frontend-design-src/plugins/frontend-design-skills/skills/anthropic-frontend-design ~/.claude/skills/anthropic-frontend-design
# Pure prompt-guidance skill: no scripts, no deps, no API keys, no external tools.
# Plugin-marketplace alternative:
#   /plugin marketplace add fcakyon/claude-codex-settings
#   then install the "frontend-design-skills" plugin (also bundles openai-frontend-design)

Příkazy a ukázkové prompty

/anthropic-frontend-designDesignové pokyny pro výrazné UI, které se vyhýbá šablonovým výchozím nastavením v paletě, typu a rozvržení

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 landing page that does not look AI-generated
Design a polished dashboard component for the app
Create a distinctive pricing page layout

Kompletní testovací report (anglicky) →