apply-aesthetic
GitHub根据用户指定的视觉风格或设计系统,解析并应用语义化Token(颜色、排版等),同时确保无障碍对比度和动效规范,实现特定品牌视觉感。
触发场景
安装
npx skills add plugin87/ux-ui-agent-skills --skill apply-aesthetic -g -y
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 2,144 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
Step 0: is the kit here? This skill reads files from the kit. Check once:
ls ${CLAUDE_SKILL_DIR}/../../../tokens >/dev/null 2>&1 && echo KIT_OK || echo KIT_MISSINGOnKIT_MISSINGonly the skill folders were installed, which is whatnpx skills adddoes. Say so plainly, point the user atnpx ux-ui-agent-skills initor the plugin install, and stop. Do not guess the contents of a file you could not open.
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 (
${CLAUDE_SKILL_DIR}/../../../taste/design-taste.md→ Brief Inference + Variance Mandate). Generating before deciding = slop. - Pick a direction in
${CLAUDE_SKILL_DIR}/../../../taste/aesthetic-systems.md:- An archetype (recipe mapped to our tokens), or
- A named library system: browse with
python3 ${CLAUDE_SKILL_DIR}/../../../scripts/design_systems.py list(orsearch <term>/show <name>). Then runnode ${CLAUDE_SKILL_DIR}/../../../scripts/library.mjs get <name>and read theDESIGN.mdat the path it prints. An npm install carries the index and no spec, so this is what fetches it (checked against the sha256 the kit ships); where the spec is already on disk it fetches nothing. If it printsrefused, say the spec could not be fetched and pick from an archetype instead; never write a spec from memory.
- Apply the Library Contract (in
aesthetic-systems.md): re-pointsemantic.*tokens to the chosen system's color roles; map typography/spacing/radius/shadow/motion to${CLAUDE_SKILL_DIR}/../../../tokens/*.json. - Verify contrast of every mapped color pair (
${CLAUDE_SKILL_DIR}/../../../scripts/contrast.py/a11y-audit). A brand value that fails must be adjusted. Taste never overrides POUR. - Add motion per
${CLAUDE_SKILL_DIR}/../../../taste/motion-choreography.md; run the pre-flight aesthetic check indesign-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.
版本历史
-
def84a7
当前 2026-11-03 02:20
v3.0版本重构:全面移除连字符,更新文档与脚本;新增2144个设计系统的按需获取机制及验证测试。
-
62092bd
2026-10-19 09:18
新增安装路径检测逻辑,解决因缺少 KIT 导致的引用失效问题。
- 2ffb677 2026-08-28 11:59
- 93a7fbb 2026-07-25 07:40


