Agent Skills › plugin87/ux-ui-agent-skills › apply-aesthetic

apply-aesthetic

GitHub

根据用户指定的风格原型或设计系统，将视觉方向解析为语义化Token，并确保对比度等无障碍标准。

.claude/skills/apply-aesthetic/SKILL.md plugin87/ux-ui-agent-skills

Trigger Scenarios

需要应用特定品牌视觉风格要求提升设计的高级感或非通用外观

Install

npx skills add plugin87/ux-ui-agent-skills --skill apply-aesthetic -g -y

More Options

Non-standard path

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

Use without installing

npx skills use plugin87/ux-ui-agent-skills@apply-aesthetic

指定 Agent (Claude Code)

npx skills add plugin87/ux-ui-agent-skills --skill apply-aesthetic -a claude-code -g -y

安装 repo 全部 skill

npx skills add plugin87/ux-ui-agent-skills --all -g -y

预览 repo 内 skill

npx skills add plugin87/ux-ui-agent-skills --list

SKILL.md

Frontmatter

{
    "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."
}

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.