Anthropic Frontend Design

Wskazówki projektowe dla wyróżniającego się UI, które unika szablonowych domyślnych ustawień palety, typografii i układu

Autor: fcakyon · fcakyon/claude-codex-settings

Testowano · Działa ★ 9.2/10

Anthropic Frontend Design — Wskazówki projektowe dla wyróżniającego się UI, które unika szablonowych domyślnych ustawień palety, typografii i układu

Co robi ten skill

Umiejętność projektowa oparta wyłącznie na promptach, która kieruje Claude'a w stronę wyróżniającego się, celowego projektu wizualnego podczas tworzenia lub przekształcania UI: przypnij temat, zbuduj mały system tokenów koloru/typu/układu/sygnatury i wyprowadź jeden zapadający w pamięć element sygnaturowy zamiast sięgać po domyślne ustawienia. Uruchamia się, gdy użytkownik prosi o zaprojektowanie lub przeprojektowanie strony, sekcji hero lub interfejsu, wybranie typografii lub palety, lub naprawienie projektu, który wydaje się generyczny lub szablonowy. Wyraźnie wymienia trzy obecne domyślne wyglądy AI i sekcję hero z dużymi liczbami jako szablony, których należy unikać.

Raport z testu

Pobrano surowy SKILL.md i potwierdzono, że frontmatter jest parsowany z name+description (204 znaki) i licencją Apache-2.0; treść nie odwołuje się do żadnych skryptów ani plików (samodzielne wskazówki), więc nie ma nic do sprawdzenia i brak zagrożeń bezpieczeństwa. Zweryfikowano instalację w tymczasowym HOME za pomocą git clone + cp, umieszczając SKILL.md w ~/.claude/skills/anthropic-frontend-design/SKILL.md. Dla wyjścia zbudowałem dwa rzeczywiste artefakty hero dla tego samego briefu (zegar pływów dla rybaków przybrzeżnych): baseline.html i skill.html. Wersja bazowa odruchowo wygenerowała ciemny granat+błękit, jedną czcionkę systemową i dokładnie trzyrzędową sekcję statystyk z dużymi liczbami (10k+/99.9%/24-7), którą umiejętność wymienia jako szablonową odpowiedź; wersja zgodna z umiejętnością zrezygnowała ze statystyk na rzecz niestandardowego analogowego wskaźnika pływów (element sygnaturowy), użyła trzech celowych ról typograficznych (Oswald condensed / Spectral / Plex Mono), 6-heksowej palety morskiej wywodzącej się z tematu oraz aktywnego głosu użytkownika w tekście ("The bar is open. Cross before slack." / "Set my bar alert" vs "Never miss the tide again" / "Get Started").

Testowano: 2026-07-21 · Claude Code 2.x (agent harness)

Instalacja

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)

Komendy i przykładowe prompty

/anthropic-frontend-designWskazówki projektowe dla wyróżniającego się UI, które unika szablonowych domyślnych ustawień palety, typografii i układu

Skille uruchamiają się na zwykłe polecenia — bez komend do zapamiętania. Po instalacji aktywują go prompty takie jak te (po angielsku):

Build a landing page that does not look AI-generated
Design a polished dashboard component for the app
Create a distinctive pricing page layout

Pełny raport →