yy-design-ui
创建符合国人审美的网页界面设计技能，专注于简洁、精致、和谐的设计风格。
When to use
- 用户要求设计网页、落地页、仪表板等界面
- 用户要求创建前端组件或页面
- 用户要求美化现有 UI
- 用户提到"中国风"、"本土化"、"国人审美"等关键词
Don't use when
- 用户要求后端 API 设计
- 用户要求数据库设计
- 用户要求纯逻辑功能实现，不涉及界面
设计原则
1. 简洁和谐
- 克制的设计：避免过度装饰，追求"少即是多"
- 视觉平衡：元素之间保持和谐的视觉关系
- 一致性：保持整体风格统一，避免风格混搭
2. 色彩搭配
推荐配色方案：
- 清新淡雅：浅灰 + 白色 + 点缀色（如 #1890ff 蓝色）
- 商务稳重：深蓝 + 浅灰 + 白色
- 温暖舒适：米色 + 暖灰 + 橙色点缀
- 现代简约：黑白灰 + 单一强调色
色彩原则：
- 主色不超过 3 种
- 强调色用于关键操作和重要信息
- 背景色保持柔和，避免刺眼
- 文字与背景对比度适中，保护眼睛
3. 中文字体选择
推荐字体组合：
| 场景 | 标题字体 | 正文字体 |
|---|---|---|
| 企业官网 | 思源黑体 / 苹方 | 苹方 / 系统默认 |
| 电商平台 | 阿里巴巴普惠体 | 苹方 / 思源黑体 |
| 内容平台 | 思源宋体 | 苹方 / 思源黑体 |
| 工具应用 | 苹方 / 系统默认 | 系统默认 |
字体使用原则：
- 优先使用系统内置字体，减少加载时间
- 标题可用特色字体，正文保持易读性
- 行高设置为 1.5-1.8，提升阅读体验
- 字重变化控制在 2-3 种以内
4. 留白与布局
留白原则：
- 元素间距保持呼吸感，避免拥挤
- 重要内容周围留更多空白
- 使用 8px 基准网格系统
- 页面边距至少 20px
布局建议：
- 采用清晰的视觉层级
- 重要信息放在视觉焦点区域
- 避免信息过载，一屏内容适度
- 响应式设计，适配不同屏幕
5. 动效与交互
动效原则：
- 动效简洁流畅，时长控制在 200-300ms
- 避免过度动画，影响性能和体验
- 悬停、点击等交互反馈及时
- 过渡动画使用 ease-in-out 缓动函数
交互建议：
- 按钮点击有明显反馈
- 表单验证即时提示
- 加载状态清晰展示
- 操作结果明确告知
6. 组件设计规范
按钮：
- 圆角 4-8px，避免过于尖锐或圆润
- 主要按钮使用主题色，次要按钮使用描边样式
- 按钮高度 32-40px，最小点击区域 44px
表单：
- 输入框高度 32-40px
- 标签与输入框间距 8px
- 错误提示清晰明确
- 必填项标识明显
卡片：
- 圆角 8-12px
- 阴影轻柔，避免过重
- 内边距 16-24px
- 卡片间距 16-24px
Steps
- 理解需求
- 确认界面用途和目标用户 - 了解技术约束（框架、性能要求） - 确认设计风格偏好
- 确定设计方向
- 选择配色方案 - 确定字体组合 - 规划布局结构
- 实现代码
- 使用 HTML/CSS/JS 或指定框架 - 遵循上述设计原则 - 确保响应式适配
- 优化细节
- 调整间距和对齐 - 添加适当的动效 - 检查可访问性
Output contract
输出包含：
- 设计说明：配色方案、字体选择、设计理念
- 完整代码：可直接运行的 HTML/CSS/JS 或组件代码
- 使用说明：如何集成和自定义
注意事项
- 不使用 Inter、Roboto 等西文字体作为主要中文字体
- 避免紫色渐变等"AI 生成"常见配色
- 不追求"炫酷"效果，以实用和美观为平衡
- 保持代码整洁，便于后续维护