Aesthetic

Strukturiertes BEAUTIFUL/RIGHT/SATISFYING/PEAK-Framework für UI-Design mit konkreten Timing- und Kontrastregeln

von mrgoonie · mrgoonie/claudekit-skills

Getestet · Funktioniert ★ 8.8/10

Aesthetic — Strukturiertes BEAUTIFUL/RIGHT/SATISFYING/PEAK-Framework für UI-Design mit konkreten Timing- und Kontrastregeln

Was es kann

Begleitet UI/UX-Design-Arbeit durch ein vierstufiges Framework (Ästhetik, Funktionalität, Mikrointeraktionen, Storytelling), gestützt auf Referenzdateien mit konkreten Werten — WCAG-Kontrastverhältnisse, 150-300ms-Animationstiming, Ease-out-/Ease-in-Kurven. Aktiviert sich beim Aufbau von Interfaces, bei der Analyse von Design-Inspiration oder beim Ergänzen von Mikrointeraktionen; die Workflows zur Inspirationserfassung und Bildgenerierung hängen von Begleit-Skills (chrome-devtools, ai-multimodal) im selben Repo ab.

Testbericht

Zweifache Anfrage zu Pricing-Card-Hierarchie und Hover-States: Die Baseline lieferte generische Stichpunkte, der Skill nannte konkrete Werte — 200ms Ease-out-Lift, WCAG-Kontrast 4,5:1, maximal 2-3 Schriftarten — aus den Referenzdateien.

Getestet am: 2026-07-10 · Claude Code 2.x (agent harness)

Installation

git clone https://github.com/mrgoonie/claudekit-skills
cd claudekit-skills
mkdir -p ~/.claude/skills
cp -r .claude/skills/aesthetic ~/.claude/skills/aesthetic

Befehle & Beispiel-Prompts

/aestheticStrukturiertes BEAUTIFUL/RIGHT/SATISFYING/PEAK-Framework für UI-Design mit konkreten Timing- und Kontrastregeln

Skills reagieren auf normale Anfragen — keine Slash-Befehle nötig. Nach der Installation aktivieren Prompts wie diese den Skill (auf Englisch):

Review this UI's contrast ratios against WCAG guidelines
Add micro-interactions with proper easing and timing
Make this interface feel more polished and satisfying

Vollständiger Testbericht (Englisch) →