Apply Aesthetic

Applies a named design system or archetype to your UI tokens, contrast-checked

Works with setup

Test report

Verdict
Works with setup
Score
8.4/10
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-aesthetic Applies 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.