design-engineer

设计工程师

概述

使用此技能，将粗糙或仅能运行的前端作品打磨成经过精心设计、可交付的界面。先了解应用，保留技术栈的本地惯例，然后改进实际产品界面，而不是添加泛泛的装饰。

快速开始

1. 如果目标是文档网站、产品落地页、组件库、工作室应用、仪表板或技术类开源网站，请阅读 references/design-language.md。如需了解 Jakub Krehel 和 Emil Kowalski 的技能参考或 Sales CRM 示例，请阅读 设计工艺参考。
2. 如果要构建组件库、添加可复用的基础组件，或从现有源码中寻找软件包／组件模式，请阅读 references/implementation-patterns.md。如果要查找组件、比较库，或实现本地 UI 工具包中缺少的模式，请阅读 UI 组件。
3. 在更改导航、命令面板、表格、表单、复制操作、加载／空白／错误状态、对话框、图表或移动端流程之前，请阅读 references/interaction-language.md。
4. 在选择设计工程工具、设计转代码工作流、事实来源策略、素材来源或灵感库时，请阅读 references/design-tools.md。
5. 在添加动画、过渡、加载器、状态指示器或图标之前，请阅读 references/motion-and-icons.md。
6. 完成最小但完整的设计改进，让实际工作流得到提升。
7. 如果可用，请运行应用的类型检查／构建／测试，然后在浏览器中跨桌面端和移动端直观验证已编辑的屏幕。

工作流

1. 了解界面

• 判断屏幕属于文档／产品网站、运营应用、仪表板、编辑器、组件库、身份验证界面，还是交互式演示。
• 修改样式前，先打开主要路由／组件及其本地基础组件。
• 优先采用现有库和模式：本地 UI 组件、cn 助手、Tailwind 令牌、shadcn/Radix 基础组件、lucide 图标、文档／主题包、已安装的动效库，以及现有的数据／加载流程。
• 对于缺少的 UI 组件，请参考组件文档寻找合适的来源，查看其当前文档，然后将最精简实用的组件适配到本地系统。导入注册表代码前，请检查底层基础组件和依赖项的版本。
• 如果用户指定了灵感仓库、URL、截图或文件，请直接检查这些来源。除非用户在当前任务中提供，否则不要依赖私有／本地示例路径。

2. 确定设计方向

• 根据产品的用途选择方向，而不是追随泛泛的潮流。
• 对于文档和开源软件网站，优先考虑首屏中鲜明的产品信息、实用的安装／代码入口、清晰的导航、搜索、示例，以及相关的 Agent／AI 易读特性。
• 对于工作室／仪表板／效率应用，优先考虑信息密度、易于浏览、稳定的控件、键盘操作、命令面板／搜索、清晰的加载／空白／错误状态，以及克制的视觉层级，而非营销式构图。
• 使用令牌定义视觉规则：背景、前景、弱化文本、边框、强调色、圆角、阴影、间距、字体比例、动效时长／缓动。

3. 设计完整状态，而不只是理想路径

在认定 UI 已完成之前，覆盖预期状态：

• 加载、骨架屏、待处理和乐观状态
• 包含实用后续操作的空白状态
• 错误和拒绝访问／未授权状态
• 成功／确认反馈
• 适用时的悬停、焦点可见、按下、禁用、选中、当前路由和拖动／重新排序状态
• 移动端导航、长文本、溢出、窄卡片和触控目标

4. 应用设计规范

• 让主屏幕一打开就能使用；除非任务要求创建营销落地页，否则不要用营销落地页替代应用功能。
• 尽可能使用应用中的真实内容、实际产品功能和真实数据结构。
• 通过明确的尺寸、网格轨道、最小/最大约束、宽高比和溢出行为，保持布局稳定。
• 为易于识别的工具操作使用图标。优先使用已有的 lucide-react；只有当代码库中已经存在相应视觉风格时，才使用本地图像素图标或自定义图标。
• 仅在重复条目、小组件、模态框或确实需要框定的工具中使用卡片。避免卡片中嵌套卡片。
• 避免使用装饰性光球、单调渐变、散景背景和通用玻璃面板，除非代码库已经克制地使用了这些元素。
• 确保文本在移动端和桌面端都不会溢出容器；先调整布局，再考虑大幅缩小字号。
• 遵循 prefers-reduced-motion，避免使用会掩盖延迟或妨碍理解的动画。

5. 像设计工程师一样验证

完成前：

• 运行仓库中常用的格式化、代码检查、类型检查、构建和测试命令。
• 对于前端应用，在条件允许时启动开发服务器，并在浏览器中检查修改过的路由。
• 检查桌面端和移动端的显示宽度，确认没有重叠、文本裁切、对比度不足、滚动异常、画布空白、控制台错误或加载停滞状态。
• 对于 3D 或以画布为主的工作，确认画布内容非空、画面完整、响应式且可交互。
• 总结修改的文件和执行的验证。

捆绑资源

• scripts/design_audit.py：快速扫描项目的技术栈、UI 文件、动画/图标、颜色、圆角和视觉风险信号。
• references/design-language.md：适用于文档、开源项目网站、仪表板和工作室应用的通用技术产品设计语言。
• references/design-craft.md：来自 better-ui 和 emil-design-eng 的标注指导，以及一份经过检查的 Sales CRM 参考，用于打造信息密集型业务界面。
• references/implementation-patterns.md：用于构建精致应用和组件库的包与组件实现模式。
• references/ui-components.md：来自 Designeer 和其他库的精选组件资源，附有针对表单、导航、数据、上传、动画、营销和 AI 界面的任务配方。
• references/interaction-language.md：适用于导航、命令、复制、表单、表格、图表、状态、对话框和移动端的交互规范。
• references/design-tools.md：面向设计工程师的工具目录和选择指南。
• references/motion-and-icons.md：动画术语、加载器/图标选择和动画实现规则。

示例请求

• “使用 $design-engineer，让这个文档主页显得精心设计且具有技术可信度。”
• “润色这个仪表板，让它呈现信息密集、可用于生产环境的工作室应用质感。”
• “改进这个表格的加载、空数据和错误状态。”
• “添加得体的动画和状态加载器，同时避免让应用显得嘈杂。”
• “让这个开源文档网站适配响应式布局，且视觉风格统一。”
• “在 Designeer 上查找组件，并将文件上传器、可搜索组合框和活动面板改造后用于此应用。”
• “参考 Jakub Krehel 和 Emil Kowalski 的作品，润色这个 CRM 的表格、筛选器和微交互。”