bulls-cows yy-design-ui
描述
创建符合国人审美的网页界面设计技能，专注于简洁、精致、和谐的设计风格，生成可直接使用的前端代码。
使用场景
- 用户要求设计网页、落地页、仪表板等界面
- 用户要求创建前端组件或页面
- 用户要求美化现有 UI
- 用户提到"中国风"、"本土化"、"国人审美"等关键词
不应触发：
- 审核已有 UI 代码质量或安全性（应使用
yy-frontend-review等代码审查技能） - 仅优化现有组件的逻辑实现，不涉及界面调整
- 生成 Logo、图标、插画等平面设计（非网页界面）
- 用户要求纯后端或非 Web 端 UI
技术约束
默认规则
- CSS 样式：默认使用原生 CSS，不引入 Tailwind、Bootstrap 等框架
- UI 组件：默认自行实现组件，不依赖 Element UI、Ant Design 等组件库
- 图表实现：简单图表使用 SVG 实现，不引入 Chart.js、ECharts 等库
- 外部资源：尽量不引入 CDN 资源，确保离线可用
例外情况
以下情况可使用第三方库（需在代码中说明原因）：
- 用户明确指定使用特定 CSS 框架或组件库
- 复杂图表（如地图、3D 图表）确实需要专业库支持
- 用户要求快速原型演示，明确接受外部依赖
指令
步骤 1. 理解需求
- 确认界面用途和目标用户
- 了解技术约束（框架、性能要求）
- 确认设计风格偏好
- 确认是否需要使用第三方库（默认不使用）
步骤 2. 确定设计方向
- 选择配色方案
- 确定字体组合
- 规划布局结构
步骤 3. 实现代码
- 技术选型：
- 默认使用原生 HTML/CSS/JS
- 图表使用 SVG 实现
- 不引入外部 CDN 资源
- 遵循设计原则（参考
resources/design-principles.md） - 确保响应式适配
步骤 4. 落地页/首页 Hero 区域设计规范
当设计落地页或产品首页时，遵循以下标准模式（完整代码模板见 templates/hero-template.md，设计原理见 resources/design-principles.md 第 7 节）：
- 布局：左侧文字 + 右侧视觉卡片的两栏网格（1.1fr:0.9fr），背景白→浅灰渐变
- 文字层次：Badge 标签 → 主标题(56px, w800) → 副标题(24px, w600) → 描述(16px, #86909c) → 按钮组
- 视觉卡片：白色圆角卡片 + 终端风格红黄绿三点装饰 +
float浮动动画 - 按钮：主按钮(主色背景+阴影) + 描边按钮(灰色边框)，hover 上移 2px
- 通用组件：Section 标题居中(36px/16px)、卡片 hover 上浮效果
- 响应式：≤968px 单栏，≤640px 小字号+按钮全宽
步骤 5. 优化细节
按以下检查清单逐项确认：
- 间距对齐：元素间距是否使用 8px 基准网格，视觉是否平衡
- 动效：交互反馈（hover/点击）是否在 200-300ms 内，动画是否流畅自然
- 可访问性：色彩对比度是否足够，按钮是否具备 :focus 状态，图片是否有 alt 文字
- 一致性：同类型组件的圆角、字号、间距是否统一
- 响应式：在 968px/640px 两个断点下布局和字号是否正确适配
步骤 6. 输出结果
输出包含：
- 设计说明：配色方案、字体选择、设计理念
- 完整代码：可直接运行的 HTML/CSS/JS 或组件代码
- 使用说明：如何集成和自定义
相关资源
resources/design-principles.md：设计原则详细说明（色彩搭配、字体选择、留白布局、动效交互、组件规范、Hero 区域设计）templates/hero-template.md：落地页 Hero 区域完整 HTML/CSS 代码模板examples/output.md：输出示例，展示设计界面后的预期输出格式examples/dashboard-demo.html：后台管理系统 Dashboard 完整示例代码