design-excellence

Design Excellence 作为 Toh Framework 的核心美学引擎，提供一套严谨的设计系统，防止常见的“AI 生成”视觉缺陷。其主要任务是确保由 AI 代理构建的界面具备人类手工开发的细腻度、克制与专业质感。通过标准化色彩哲学、排版刻度、间距标记与细腻的动作模式，此技能使 Design Reviewer 子代理能够系统性地审核并提升 UI 组件，以达到企业级标准。该系统明确拒绝过度渐变、不一致的边距与过大的字体等“AI 默认值”，转而推崇平衡的布局与原生的系统字体。

• 实作基于 Tailwind slate 色阶与单一强调色规则的严格色彩系统，以维持视觉一致性。

• 强制执行专业的排版阶层，包含针对页面标题、区块标题与内文的精确字级设定，确保易读性。

• 提供基于标准 Tailwind 间距的健全布局系统，防止常见自动化布局中拥挤或分散的感觉。

• 包含基于 Framer Motion 的完整动态函式库，强调功能性回馈而非浮夸的过度动画。

• 定义明确的设计反模式，主动避免纯黑文字、过度的字体粗细与不当的渐变使用。

• 作为 Design Reviewer 子代理的权威风格指南，支援自动化的视觉润饰与美学优化。

• 使用者应在界面感到太过通用或“AI 味”过重时，透过 /toh-design 或 'polish UI' 等指令触发此技能。

• 输入依赖当前组件树或页面布局的上下文；代理会根据定义的边距、间距与色彩标记进行评估。

• 输出内容包含重构后的 Tailwind class、修正后的组件结构，以及设定在 150-500ms 间的精准动画时长。

• 约束条件包含保持背景颜色接近白色或中性色以维护易读性，确保悬停状态使用原生的 transition-colors，并将每个应用程序的强调色限制为单一主色。此技能专为 Toh 框架生态系统优化，特别适用于需要高度信任感与专业外观的 SaaS 应用程序、管理仪表板与登录页面。