yy-design-ui

yy-design-ui

描述

创建符合国人审美的网页界面设计技能，专注于简洁、精致、和谐的设计风格，生成可直接使用的前端代码。

使用场景

• 用户要求设计网页、落地页、仪表板等界面
• 用户要求创建前端组件或页面
• 用户要求美化现有 UI
• 用户提到"中国风"、"本土化"、"国人审美"等关键词

不应触发：

• 审核已有 UI 代码质量或安全性（应使用 yy-frontend-review 等代码审查技能）
• 仅优化现有组件的逻辑实现，不涉及界面调整
• 生成 Logo、图标、插画等平面设计（非网页界面）
• 用户要求纯后端或非 Web 端 UI

技术约束

默认规则

1. CSS 样式：默认使用原生 CSS，不引入 Tailwind、Bootstrap 等框架
2. UI 组件：默认自行实现组件，不依赖 Element UI、Ant Design 等组件库
3. 图表实现：简单图表使用 SVG 实现，不引入 Chart.js、ECharts 等库
4. 外部资源：尽量不引入 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. 输出结果

输出包含：

1. 设计说明：配色方案、字体选择、设计理念
2. 完整代码：可直接运行的 HTML/CSS/JS 或组件代码
3. 使用说明：如何集成和自定义

相关资源

• resources/design-principles.md：设计原则详细说明（色彩搭配、字体选择、留白布局、动效交互、组件规范、Hero 区域设计）
• templates/hero-template.md：落地页 Hero 区域完整 HTML/CSS 代码模板
• examples/output.md：输出示例，展示设计界面后的预期输出格式
• examples/dashboard-demo.html：后台管理系统 Dashboard 完整示例代码