ui-ux-design

UI/UX 设计

创建实用、易访问且视觉鲜明的界面。输出可运行的代码。

使用时机

在以下情况下自动启用：

• 用户请求 UI 组件、页面或应用程序
• 用户提到表单、仪表盘、着陆页、模态框
• 用户要求“设计”“构建”或“创建”任何界面
• 用户希望改进现有 UI/UX

工作流

第 1 步：评估上下文

编码前，先确定（内部推理）：

• 要解决的问题
• 目标用户
• 美学方向（参见 REFERENCES.md）
• 限制条件（框架、品牌、无障碍级别）

第 2 步：查阅参考资料

从 REFERENCES.md 获取实现所需的值：

• 调色板（符合 WCAG 的值）
• 字体搭配
• 组件模式（按钮、输入框、卡片等）
• 间距和排版设计令牌

第 3 步：生成代码

生成可运行的实现，并包含：

• 所有交互状态（悬停、焦点、激活、禁用、加载、错误）
• 语义化 HTML（button、nav、main，而不是满屏的 div）
• 移动端优先的响应式设计
• 便于维护的 CSS 变量

第 4 步：验证

交付前逐项检查清单。

输出要求

要求	标准
对比度	文本为 4.5:1，UI 组件为 3:1
焦点状态	所有交互元素都要有清晰可见的轮廓
触控目标	至少为 44×44px
减少动态效果	遵循 prefers-reduced-motion
标签	所有输入框都要有关联的标签
空状态	提供有帮助的消息和明确的操作
错误状态	说明发生了什么，以及如何修复

美学方向

选择鲜明的方向并坚持到底。 犹豫不决会产生千篇一律的输出。选择清晰的概念方向——极简主义、极繁主义、复古未来主义、编辑风、新粗野主义、有机风、奢华精致风或工业风——并精准呈现。大胆的极繁主义和精致的极简主义都行得通；失败之处在于不敢突出、落入平庸。

参见 REFERENCES.md，了解各个方向的特点。

风格	最适合
极简主义	效率工具、专业用途、作品集
玻璃拟态	仪表盘、科技产品
新粗野主义	创意项目、初创公司、鲜明品牌
编辑风	内容网站、出版物
有机风	消费级应用、健康养生、社区
深色模式	用户偏好、低光环境

生成不同的设计。切勿总是采用相同的展示字体（尤其是 Inter、Space Grotesk、Roboto），也不要总是使用相同的白底紫色渐变，以免呈现出 AI 默认输出的感觉。

反模式

避免以下千篇一律的 AI 输出特征：

• 白底紫色／蓝色渐变
• 到处使用 Inter／Roboto／系统字体
• 千篇一律的卡片布局
• 所有元素都使用带柔和阴影的圆角矩形
• 仅通过颜色传达含义（没有图标／文字辅助）
• 移除焦点轮廓
• 没有提供解决方案的错误消息

检查清单

复制并跟踪：

- [ ] Context assessed (problem, users, aesthetic direction)
- [ ] REFERENCES.md consulted for palette + fonts
- [ ] All interactive states implemented
- [ ] Loading and error states included
- [ ] Contrast meets WCAG AA
- [ ] Semantic HTML used
- [ ] Focus states visible
- [ ] Form inputs labeled
- [ ] prefers-reduced-motion respected
- [ ] Responsive breakpoints tested
- [ ] Empty states handled

恢复处理

问题	操作
用户不喜欢设计方向	从“美学方向”中提出 2-3 个备选方案
看起来太普通	检查“反模式”，采用鲜明的排版风格
存在无障碍方面的顾虑	检查对比度、焦点状态和语义化 HTML
状态不完整	按步骤系统地检查清单

---

许可证： MIT - 完整条款请参见 LICENSE 作者： Arvind Menon