Apply Aesthetic
Applies a named design system or archetype to your UI tokens, contrast-checked
Test report
- Verdict
- Works with setup
- Score
- Tested
- Jul 21, 2026
- Environment
- Claude Code 2.x (agent harness)
- Upstream re-checked
- Aug 10, 2026 · e3f18e0
Cloned the repo and ran everything. Frontmatter parses (name+description). All spot-checked references return 200 and execute: scripts/design_systems.py list/search/show, and scripts/contrast.py (stdlib-only python3). Verified the "138 named design systems" claim exactly (ls design-systems/library = 138). Built two artifacts for a hero-CTA task: a baseline styled with default instincts, then the skill-followed Apple version. Concrete measured difference: baseline button white-on-#007bff FAILS WCAG AA (3.98:1), while following the skill's step-4 contrast gate drove the accent to Apple's #0071e3 (white 4.70:1 PASS) plus SF Pro Display 56/600 -0.28px, #000000 cinematic canvas, and 980px pill radius vs generic Arial/6px/bootstrap-blue. Verdict setup, not pass: the skill body references repo-root paths (taste/, scripts/, tokens/, design-systems/) that do not exist inside the skill folder, so a naive per-skill install is broken — you must have the whole repo present.
Scored on four weighted criteria — install, triggering, output vs. baseline, docs. How scoring works
- Installs cleanly 4/5
- Triggers reliably 5/5
- Output vs. baseline 8/10
- Docs & honesty 4/5
What Apply Aesthetic does
Resolves a chosen visual direction — an archetype (editorial-minimal, brutalist, dark-tech) or one of 138 named systems (apple, stripe, linear, vercel, notion) — into semantic design tokens, remapping color/type/spacing/radius/motion and re-verifying WCAG contrast on every mapped pair. Triggers when the user asks to make a UI feel like a specific brand, or wants a premium/expensive/non-generic look. Depends on the repo's companion taste/, scripts/, tokens/, and design-systems/ directories, so it must be installed as the whole repo, not the skill folder alone.
How to install Apply Aesthetic
git clone --depth 1 https://github.com/plugin87/ux-ui-agent-skills.git /tmp/apply-aesthetic-src
mkdir -p ~/.claude/skills
cp -R /tmp/apply-aesthetic-src/.claude/skills/apply-aesthetic ~/.claude/skills/apply-aesthetic
# NOT self-contained. The SKILL.md body references repo-ROOT resources by relative path:
# taste/aesthetic-systems.md, taste/design-taste.md, taste/motion-choreography.md,
# scripts/design_systems.py, scripts/contrast.py, tokens/*.json, design-systems/library/<name>/DESIGN.md
# Copying only the skill folder (above) leaves every one of those paths unresolved.
# To actually USE it, work inside the cloned repo so the sibling dirs resolve:
# cd /tmp/apply-aesthetic-src
# python3 scripts/design_systems.py list # browse the 138 systems
# python3 scripts/design_systems.py show apple # get the DESIGN.md path
# python3 scripts/contrast.py "#f5f5f7" "#000000" # verify a mapped pair
# Requires: python3 (scripts run stdlib-only; no pip deps observed).
Skills live in ~/.claude/skills/ (global) or .claude/skills/
(per-project). Restart Claude Code after installing.
Commands — how to trigger Apply Aesthetic
-
/apply-aestheticApplies a named design system or archetype to your UI tokens, contrast-checked
It also activates on plain-language prompts like these:
-
Make this design feel like Stripe's product -
Apply an editorial-minimal aesthetic to the site -
Give this UI a premium, non-generic feel
Frequently asked questions
- Is the Apply Aesthetic skill free?
- Yes. The skill itself is free from plugin87/ux-ui-agent-skills. SkillProof publishes the install command and an independent test verdict at no cost.
- Does Apply Aesthetic work with Claude Code?
- We tested it with Claude Code 2.x (agent harness) on Jul 21, 2026. Verdict: Works with setup. Cloned the repo and ran everything. Frontmatter parses (name+description). All spot-checked references return 200 and execute: scripts/design_systems.py list/search/show, and scripts/contrast.py (stdlib-only python3). Verified the "138 named design systems" claim exactly (ls design-systems/library = 138). Built two artifacts for a hero-CTA task: a baseline styled with default instincts, then the skill-followed Apple version. Concrete measured difference: baseline button white-on-#007bff FAILS WCAG AA (3.98:1), while following the skill's step-4 contrast gate drove the accent to Apple's #0071e3 (white 4.70:1 PASS) plus SF Pro Display 56/600 -0.28px, #000000 cinematic canvas, and 980px pill radius vs generic Arial/6px/bootstrap-blue. Verdict setup, not pass: the skill body references repo-root paths (taste/, scripts/, tokens/, design-systems/) that do not exist inside the skill folder, so a naive per-skill install is broken — you must have the whole repo present.
- What is the Apply Aesthetic SkillProof Score?
- 8.4/10 — installs cleanly 4/5, triggers reliably 5/5, output vs. baseline 8/10, docs & honesty 4/5.
- How do I install Apply Aesthetic?
- Copy the install command from this page, run it in your terminal, and restart Claude Code. Skills live in ~/.claude/skills/ (global) or .claude/skills/ inside a project.
- Can I use Apply Aesthetic with Cursor, Copilot, Gemini CLI, Codex or other AI tools?
- The SKILL.md format is native to Claude (Claude Code, Desktop, claude.ai). The instructions inside adapt to other assistants: Cursor rules, GitHub Copilot instructions, Windsurf rules, Custom GPTs, AGENTS.md for OpenAI Codex, and GEMINI.md for Google Gemini CLI — our conversion guides cover each, and the free converter on the tools page does the wrapping for you.