# Yy Design UI

> 创建符合国人审美的网页界面设计。当用户需要设计网页、组件、页面或应用界面时使用。 专注于简洁、精致、和谐的设计风格，生成可直接使用的前端代码。 不用于审核已有 UI 代码、优化现有组件实现，也不用于生成纯后端代码或非 Web 端 UI。

- Skill: `bulls-cows/yy-design-ui` (Agent Skill, multi-file: 6 files)
- Install (CLI): `npx skillmds@latest add bulls-cows/yy-design-ui`
- Raw SKILL.md: https://api.skillmd.com/api/skills/bulls-cows/yy-design-ui/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: bulls-cows (https://skillmd.com/u/bulls-cows)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/bulls-cows/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 完整示例代码