mcpField
A
apply-aesthetic

apply-aesthetic

github.com/plugin87设计与 UI3.0k544 次安装1 天前更新
代码仓库

关于 apply-aesthetic

用于确定并应用视觉方向，同时兼顾无障碍要求的设计技能。它指导设计令牌映射、对比度检查、动效处理和审美审查。

主要功能

  1. 01推断设计简报与情绪
  2. 02选择原型或库系统
  3. 03映射语义与设计令牌
  4. 04检查色彩对比度和无障碍性
  5. 05应用动效并进行审美检查

适用场景

  1. 01为产品界面确定视觉方向
  2. 02将令牌适配到选定设计系统
  3. 03检查色彩选择是否符合对比度要求

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/plugin87/ux-ui-agent-skills --skill apply-aesthetic

安装后在 Claude Code 中输入/apply-aesthetic确认已加载。

详细介绍

技能：应用美学

步骤 0：工具包在这里吗？ 此技能会读取工具包中的文件。检查一次： ls ${CLAUDE_SKILL_DIR}/../../../tokens >/dev/null 2>&1 && echo KIT_OK || echo KIT_MISSING 只有在出现 KIT_MISSING 时才表示安装的仅是技能文件夹，这是 npx skills add 的行为。请直言说明，并引导用户使用 npx ux-ui-agent-skills init 或安装插件，然后停止。不要猜测 无法打开的文件内容。

选择并应用一种设计方向，同时不损害无障碍体验。

步骤

  1. 首先进行简要推断（必需）。 在使用任何令牌前，明确列出：行业／领域、受众和语气、结果必须呈现的一种情绪、动效深度，以及布局类型的顺序（${CLAUDE_SKILL_DIR}/../../../taste/design-taste.md → Brief Inference + Variance Mandate）。先生成再决定＝劣质设计。
  2. 在 ${CLAUDE_SKILL_DIR}/../../../taste/aesthetic-systems.md 中选择一种方向：
    • 一种原型（映射到我们的令牌的配方），或
    • 一种命名的库系统：使用 python3 ${CLAUDE_SKILL_DIR}/../../../scripts/design_systems.py list（或 search <term> / show <name>）浏览。然后运行 node ${CLAUDE_SKILL_DIR}/../../../scripts/library.mjs get <name>，并阅读它输出路径中的 DESIGN.md。npm 安装会携带索引，但不包含规范，因此需要通过此步骤获取规范（并与工具包提供的 sha256 校验）；如果规范已在磁盘上，则不会获取任何内容。如果输出 refused，请说明无法获取规范，并改用一种原型；切勿凭记忆编写规范。
  3. 应用库契约（位于 aesthetic-systems.md）：将 semantic.* 令牌重新指向所选系统的颜色角色；将排版／间距／圆角／阴影／动效映射到 ${CLAUDE_SKILL_DIR}/../../../tokens/*.json。
  4. 验证每一对映射颜色的对比度（${CLAUDE_SKILL_DIR}/../../../scripts/contrast.py / a11y-audit）。未达标的品牌色必须调整。品味不能凌驾于 POUR 之上。
  5. 按照 ${CLAUDE_SKILL_DIR}/../../../taste/motion-choreography.md 添加动效；运行 design-taste.md 中的美学预检。

输出

更新／覆盖语义令牌，并附上排版／间距／动效说明，然后通过 design-code 渲染。确认结果同时通过美学检查和无障碍检查。

评论

支持 Markdown