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

apply-aesthetic

GitHub

根据用户指定的视觉风格或设计系统,解析并应用语义化Token(颜色、排版等),同时确保无障碍对比度和动效规范,实现特定品牌视觉感。

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

触发场景

用户要求应用特定设计风格或原型 用户希望提升界面的高级感或品牌一致性

安装

npx skills add plugin87/ux-ui-agent-skills --skill apply-aesthetic -g -y
更多选项

非标准路径

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

不安装直接使用

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 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_MISSING On KIT_MISSING only the skill folders were installed, which is what npx skills add does. Say so plainly, point the user at npx ux-ui-agent-skills init or 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

  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 (${CLAUDE_SKILL_DIR}/../../../taste/design-taste.md → Brief Inference + Variance Mandate). Generating before deciding = slop.
  2. 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 (or search <term> / show <name>). Then run node ${CLAUDE_SKILL_DIR}/../../../scripts/library.mjs get <name> and read the DESIGN.md at 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 prints refused, say the spec could not be fetched and pick from an archetype instead; never write a spec from memory.
  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 ${CLAUDE_SKILL_DIR}/../../../tokens/*.json.
  4. 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.
  5. Add motion per ${CLAUDE_SKILL_DIR}/../../../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.

版本历史

  • 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

同 Skill 集合

.claude/skills/a11y-audit/SKILL.md
.claude/skills/brandkit/SKILL.md
.claude/skills/critique/SKILL.md
.claude/skills/design-code/SKILL.md
.claude/skills/design-component/SKILL.md
.claude/skills/design-doctrine/SKILL.md
.claude/skills/design-qa/SKILL.md
.claude/skills/design-review/SKILL.md
.claude/skills/design-tokens/SKILL.md
.claude/skills/figma-integration/SKILL.md
.claude/skills/gate/SKILL.md
.claude/skills/governance/SKILL.md
.claude/skills/grill-me/SKILL.md
.claude/skills/image-to-code/SKILL.md
.claude/skills/migrate-design-system/SKILL.md
.claude/skills/observe/SKILL.md
.claude/skills/performance/SKILL.md
.claude/skills/prototype/SKILL.md
.claude/skills/redesign/SKILL.md
.claude/skills/scaffold-project/SKILL.md
.claude/skills/ship/SKILL.md
.claude/skills/token-build/SKILL.md
.claude/skills/ux-writing/SKILL.md
.claude/skills/data-dashboard/SKILL.md
.claude/skills/design-screen/SKILL.md

元信息

文件数
0
版本
def84a7
Hash
e5262b59
收录时间
2026-07-25 07:40

首页 - Wiki
Copyright © 2011-2026 iteam. Current version is 2.155.2. UTC+08:00, 2026-11-04 17:04
浙ICP备14020137号-1