SuperAPI AI 工具集

apply-aesthetic

设计与创作

查看项目

更新于 10-16 08:06

技能介绍

用途:为 shadcn 项目选定并应用一个视觉方向(archetype 原型,或 138 个命名设计系统之一),在保证可访问性的前提下改变界面风格。

主要能力:

  • 强制先做 Brief Inference:写明行业/领域、受众与语气、必须达成的情绪形容词、动效深度、布局族序列。
  • 在 aesthetic-systems.md 中选择方向:原型,或命名库系统。
  • 应用 Library Contract:把 semantic.* tokens 重新指向所选系统的颜色角色,并将排版/间距/圆角/阴影/动效映射到 tokens/*.json。
  • 校验每个映射颜色对的对比度(contrast.py / a11y-audit),失败则调整,品味不覆盖 POUR。
  • 按 motion-choreography.md 添加动效,并运行 design-taste.md 的预检。

必要用法: browse: python3 .claude/skills/_ux-ui-shared/scripts/design_systems.py list search: python3 .claude/skills/_ux-ui-shared/scripts/design_systems.py search <term> show: python3 .claude/skills/_ux-ui-shared/scripts/design_systems.py show <name>

约束:shadcn-ui-design 是构建/编辑 UI 的权威;使用语义 Tailwind tokens(bg-primary、text-muted-foreground、border-border),不得硬编码颜色或原始 Tailwind 调色板(如 bg-blue-600);通过 npx shadcn@latest add … 添加 primitives,不要 fork components/ui/;保持 blue-primary 明暗主题。token 真源为 .claude/skills/_ux-ui-shared/tokens/.json,编译到 app/globals.css。输出为更新/覆盖后的语义 tokens 及排版、空间、动效说明,再经 design-code 渲染,并确认同时通过审美检查与可访问性。