ui-design

UI Design Skill

此技能是视觉相关工作的唯一入口。

适用于任何面向用户的 HTML/CSS/JS 输出：落地页、仪表板、产品 UI、内部工具和作品集页面。

---

Step 1 — 选择构建路径

编码前请谨慎选择：

• Track A（手工构建）：静态预览、原生 HTML/CSS/JS、快速定制页面
• Track B（组件库）：使用 shadcn/ui、HeroUI 或 coss ui 的 React/Vite/Next 项目

构建路径的选择和组件库策略始终由 ui-design 负责。

---

Step 2 — Taste Overlay Contract（必需）

在 ui-design 工作流中，针对以下 3 个风格模块调用 taste-skill：

1. Brief Inference
2. Design Dials（布局变化 / 动效强度 / 视觉密度）
3. Anti-slop hard rules

职责边界

• ui-design 负责工程质量和交付。
• taste-skill 提供风格方向和反模板审美约束。

这样可以避免与 ui-design 的工程参考内容（组件库、a11y、预览、数据仪表板实现）重叠。

---

Step 3 — 执行顺序（每次都遵循）

1. 使用 ui-design 选择 Track A/B。
2. 编写 UI 代码前，先执行 taste Brief Inference。
3. 应用 taste Design Dials，确定风格方向。
4. 对于任何交互页面，先制定动效计划（动画内容、原因、频率、时长、缓动方式、减少动效的处理路径）。
5. 按照 ui-design 工程规则实现（a11y/主题/响应式/组件策略/性能）。
6. 交付前，将 taste Anti-slop 检查作为最终风格关卡。

一句话总结：

• taste 决定风格特征
• ui-design 确保实现稳健

硬性规则：如果页面包含交互，动效设计就是必需项（至少包括触感反馈和状态转换反馈）。看起来静态的交互状态会被视为未完成的 UI。

---

Step 4 — 冲突裁决

规则发生重叠时：

• 风格冲突 → 以 taste-skill 为准
• 工程安全性/正确性冲突 → 以 ui-design 为准

工程安全性包括：无障碍性、响应式稳定性、交互可靠性、运行时正确性和性能约束。

---

Step 5 — 在哪里查看/下载 taste-skill（无本地镜像）

不要维护本地镜像或版本标记文件。

始终直接从 GitHub 读取/更新 taste 规则：

• 仓库：https://github.com/Leonxlnx/taste-skill
• 要参考的主要技能：https://github.com/Leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md
• 原始下载 URL：https://raw.githubusercontent.com/Leonxlnx/taste-skill/main/skills/taste-skill/SKILL.md
• 完整技能包目录：https://github.com/Leonxlnx/taste-skill/tree/main/skills

taste-skill 更新时，直接重新检查 GitHub 源，并在 ui-design overlay contract 中应用所需更改。

---

工程参考

文件	用途
references/design-process.md	工程质量关卡（a11y/主题/响应式/交互/运行时检查清单）
references/component-libraries.md	shadcn/ui · HeroUI · coss ui 选择 + 查询工作流
references/animations.md	动效实现标准、交互动效要求（与 emil-design-eng 决策框架集成）以及 GSAP 使用说明
references/charts.md	Chart.js/ECharts 实现模式
references/dashboards.md	数据来源、实时更新、仪表板结构、性能
taste-skill GitHub 源	直接从 GitHub 读取风格规则：https://github.com/Leonxlnx/taste-skill/tree/main/skills