Claude Skill

apply-aesthetic

Apply a visual direction — an archetype (high-end agency, editorial minimal, brutalist, soft-SaaS, dark-tech) or one of 138 named design systems (apple, linear-app, stripe, vercel, notion, material, shadcn, spotify, tesla…) — by resolving it into the token system. Use when the us

LLM Mart · 0 points · 1 0 0

Virus-scanned Reviewed automatically before listing.

Full trust report

Download plugin87-ux-ui-agent-skills-.claude_skills_apply-aesthetic-278e9d9.zip · 1 KB

plugin87/ux-ui-agent-skills 1406 145 forks MIT Updated 10d ago

Part of plugin87/ux-ui-agent-skills — 18 skills

Install

skills CLI npx skills add https://github.com/plugin87/ux-ui-agent-skills/tree/main/.claude/skills/apply-aesthetic

Claude Code

claude plugin marketplace add https://llmmart.ai/marketplace.json && claude plugin install plugin87-ux-ui-agent-skills@llmmart

Git git clone https://github.com/plugin87/ux-ui-agent-skills.git

The skills CLI installs just this skill, for any of its supported agents. Claude Code installs the whole plugin87/ux-ui-agent-skills collection as a plugin from our marketplace. Git is the plain clone.

Skill manifest

Skill: Apply Aesthetic

Choose and apply a design direction without breaking accessibility.

Steps

Brief Inference first (mandatory) — before any tokens, name it: industry/domain, audience & tone, the one mood adjective the result must earn, motion depth, and the layout-family sequence (taste/design-taste.md → Brief Inference + Variance Mandate). Generating before deciding = slop.
Pick a direction in taste/aesthetic-systems.md:
- An archetype (recipe mapped to our tokens), or
- A named library system — browse with python3 scripts/design_systems.py list (or search <term> / show <name>); specs live in design-systems/library/<name>/DESIGN.md.
Apply the Library Contract (in aesthetic-systems.md): re-point semantic.* tokens to the chosen system's color roles; map typography/spacing/radius/shadow/motion to tokens/*.json.
Verify contrast of every mapped color pair (scripts/contrast.py / a11y-audit). A brand value that fails must be adjusted — taste never overrides POUR.
Add motion per taste/motion-choreography.md; run the pre-flight aesthetic check in design-taste.md.

Output

Updated/overridden semantic tokens + notes on type/space/motion, then render via design-code. Confirm the result passes both the aesthetic check and accessibility.

Files (ux-ui-agent-skills)

SKILL.md 1.7 KB

---
name: apply-aesthetic
description: Apply a visual direction — an archetype (high-end agency, editorial minimal, brutalist, soft-SaaS, dark-tech) or one of 138 named design systems (apple, linear-app, stripe, vercel, notion, material, shadcn, spotify, tesla…) — by resolving it into the token system. Use when the user wants a specific look/vibe/brand feel, or asks to make a design feel premium/expensive/non-generic.
invocation: model
---

# Skill: Apply Aesthetic

Choose and apply a design direction without breaking accessibility.

## Steps
1. **Brief Inference first (mandatory)** — before any tokens, name it: industry/domain, audience & tone, the one mood adjective the result must earn, motion depth, and the layout-family sequence (`taste/design-taste.md` → Brief Inference + Variance Mandate). Generating before deciding = slop.
2. Pick a direction in `taste/aesthetic-systems.md`:
   - An **archetype** (recipe mapped to our tokens), or
   - A **named library system** — browse with `python3 scripts/design_systems.py list` (or `search <term>` / `show <name>`); specs live in `design-systems/library/<name>/DESIGN.md`.
3. Apply the **Library Contract** (in `aesthetic-systems.md`): re-point `semantic.*` tokens to the chosen system's color roles; map typography/spacing/radius/shadow/motion to `tokens/*.json`.
4. **Verify contrast** of every mapped color pair (`scripts/contrast.py` / `a11y-audit`). A brand value that fails must be adjusted — taste never overrides POUR.
5. Add motion per `taste/motion-choreography.md`; run the pre-flight aesthetic check in `design-taste.md`.

## Output
Updated/overridden semantic tokens + notes on type/space/motion, then render via `design-code`. Confirm the result passes both the aesthetic check and accessibility.