elegant-design

“优雅设计”(Elegant Design) 技能为创建高性能、易用且精致的网页界面提供了一套结构化且基于哲学指导的框架。此技能专为在 React 和 Next.js 生态系统中工作的软件工程师和 UI 开发人员所设计。它强调一种刻意的设计流程，在技术性能与用户体验之间取得平衡，确保从版面模式到复杂交互组件的每一个界面元素都具有明确的目的。

• 提供利用现代设计系统（包括 shadcn/ui、daisyUI 和 HeroUI）的专家指引，以进行快速且一致的组件开发。

• 针对复杂 UI 需求提供专门的实现模式，例如终端模拟器、代码语法高亮、实时流式内容以及 Markdown 渲染的聊天界面。

• 建立符合无障碍标准 (WCAG) 与响应式设计的强大工作流程，确保界面在各种设备和屏幕阅读器上皆能顺畅运作。

• 整合 OODA 循环规划模板（观察、定位、决定、行动），在编写代码前绘制复杂的用户旅程与状态转换。

• 涵盖性能优化的最佳实践，包括懒加载 (lazy loading)、代码分割，以及达成 Core Web Vitals 目标。

• 包含视觉基础指导，涵盖字体排版 (Geist, JetBrains Mono)、语义化颜色标记，以及 8px 间距系统以维持视觉一致性。

• 用户在制作新技术界面原型或升级现有开发者工具时应启用此技能，以确保达到专业水准。

• 预期的输入包括项目需求、组件规格或无障碍目标；预期的输出包括结构化的 React/Next.js 代码、组件架构计划以及流程图 (Graphviz/DOT)。

• 限制条件包括强烈偏好原子化设计原则（从原子到页面）以及移动优先的响应式方法论。

• 通过直接引用排版、版面设计及专门交互模块（如差异比较查看器与日志控制台）的基础指南，与现有的开发工作流程紧密结合。