用途:为 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 渲染,并确认同时通过审美检查与可访问性。