UI 设计规范指南

技能文档

---
name: ui-design-guide
title: UI 设计规范指南
description: Web 与小程序界面设计规范指南。当用户需要在编码前确定视觉方向、界面层级、排版布局、配色与设计规格，或需要产出高保真原型、避免通用 AI 风格、做设计自检时使用。触发词：UI 设计、视觉方向、设计规格、界面原型、排版配色、高保真原型、设计规范。
category: 开发工具
---

# UI 设计规范指南

本技能用于 Web 与小程序前端界面的视觉设计与原型产出，核心目标是：在写任何界面代码之前，先明确设计意图并输出设计规格，避免落入千篇一律的通用 AI 风格。

## 技能工作流

### 步骤 1：判定是否适用

适用场景：

- 用户需要确定视觉方向、产出设计规格、创建原型，或对界面做排版、字体、配色、视觉层级决策。
- 用户提出「设计」「原型」「观感」「风格」等需求，而不是直接照搬已定稿的实现。
- 实现阶段应遵循项目内对应的前端开发规范（Web 或小程序），而不是临时决定。

不适用场景：

- 纯后端任务、数据库设计或与界面无关的 API 工作。
- 已定稿 UI 的直接实现，不需要新的设计决策。
- 视觉方向已经明确、只做常规前端编码的请求。

常见错误：

- 还没输出设计规格就开始写 JSX、WXML 或 CSS。
- 退回到通用 AI 布局，而不是明确的美学方向。
- 设计意图尚不清晰就贸然进入实现。
- 视觉概念确定后忽略平台约束。

### 步骤 2：输出设计规格（强制，任何代码之前）

**写任何界面代码之前，必须显式输出以下分析：**

```
DESIGN SPECIFICATION
====================
1. Purpose Statement: [2-3 sentences about problem/users/context]
2. Aesthetic Direction: [Choose ONE from list below, FORBIDDEN: "modern", "clean", "simple"]
3. Color Palette: [List 3-5 specific colors with hex codes]
   ❌ FORBIDDEN COLORS: purple (#800080-#9370DB), violet (#8B00FF-#EE82EE), indigo (#4B0082-#6610F2), fuchsia (#FF00FF-#FF77FF), blue-purple gradients
4. Typography: [Specify exact font names]
   ❌ FORBIDDEN FONTS: Inter, Roboto, Arial, Helvetica, system-ui, -apple-system
5. Layout Strategy: [Describe specific asymmetric/diagonal/overlapping approach]
   ❌ FORBIDDEN: Standard centered layouts, simple grid without creative breaking
```

**可选美学方向：**

- 极简硬朗（Brutally minimal）
- 极繁混乱（Maximalist chaos）
- 复古未来（Retro-futuristic）
- 有机自然（Organic/natural）
- 奢华精致（Luxury/refined）
- 趣味玩具感（Playful/toy-like）
- 杂志编辑风（Editorial/magazine）
- 粗野主义（Brutalist/raw）
- 装饰艺术/几何（Art deco/geometric）
- 柔和粉彩（Soft/pastel）
- 工业实用（Industrial/utilitarian）

**关键**：选择一个清晰的概念方向并精确执行。极简与极繁都可行——关键是意图明确，而非强度堆砌。

### 步骤 3：确定美学方向与配色字体

结合上下文选择方向与视觉语言：

- **教育类应用**：杂志编辑/有机自然/复古未来（避免套路蓝）
- **效率工具类**：粗野主义/工业风/奢华风
- **社交类**：趣味感/极繁/柔和粉彩
- **金融类**：奢华风/装饰艺术/极简硬朗

🚨 **触发词自检**——若发现自己正要写下这些组合，立即停下并重新审视：

- "gradient" + "purple/violet/indigo/fuchsia/blue-purple"
- "card" + "centered" + "shadow"
- "Inter" / "Roboto" / "system-ui"
- "modern" / "clean" / "simple"（且没有具体风格方向）
- 用 emoji 字符（🚀、⭐、❤️ 等）当图标

**处理方式**：回到设计规格 → 改选其他美学方向 → 再继续。

排版与配色细则：

- **避免通用字体**：不用 Arial、Inter、Roboto、系统字体等烂大街字体
- **选择有辨识度的字体**：显示字体与正文字体搭配，组合需契合整体美学方向
- **统一美学**：用 CSS 变量保持一致性
- **主色+强调色**：主导色配锐利强调色，比平均分配的配色更有效
- **主题一致**：按美学方向选深色或浅色主题，色彩与整体风格匹配
- **品牌覆盖豁免**：若产品已规定品牌色板或字体体系，可使用既有 tokens，但必须在设计规格中显式说明覆盖了哪些默认禁令及原因；覆盖范围应尽量收窄，保持整体质量标准

### 步骤 4：实现高保真原型

设计流程依次为：用户体验分析 → 产品界面规划 → 美学方向确定 → 高保真 UI 设计 → 前端原型实现 → 真实感增强。

实现要求：

- 用 Tailwind CSS 做样式，**必须使用专业图标库**（FontAwesome、Heroicons 等）——**绝不用 emoji 当图标**
- 拆分代码文件，保持结构清晰
- **真实感增强**：用真实 UI 图片替代占位图（可从 Unsplash、Pexels、Apple 官方 UI 资源挑选）；需要视频素材时可用 Vimeo 资源

**下载远程素材（图片/图标/字体）：**

- **macOS / Linux**：`curl -L --fail -o assets/images/logo.png "https://example.com/logo.png"`（父目录不存在时加 `--create-dirs`；也可用 `wget`）
- **Windows (PowerShell)**：`Invoke-WebRequest -Uri "https://example.com/logo.png" -OutFile "assets\images\logo.png"`（或在 cmd / PowerShell 5.1+ 中用 `curl.exe -L -o assets/images/logo.png <url>`，Windows 10 1803+ 自带）

注意事项：

- 始终用 `-L`/`--location`（curl）或 `-UseBasicParsing`（PowerShell）以跟随重定向。
- 优先 HTTPS 链接；避免内网/私有地址（可能被网络策略拦截或因安全原因被拒）。

动效与细节：

- **动效策略**：用动画做效果与微交互；HTML 项目优先纯 CSS 方案，React 项目可用 Motion 库
- **高光时刻**：聚焦关键瞬间，一次编排好的页面加载动画（用 animation-delay 做错峰呈现）胜过零散微交互
- **交互惊喜**：用滚动触发与 hover 状态制造惊喜
- **打破常规**：使用非预期布局、不对称、重叠、斜向流；打破网格；控制留白或密度
- **背景与氛围**：营造氛围与纵深而非默认纯色；可运用渐变网格、噪点纹理、几何图案、层叠透明、戏剧性阴影、装饰边框、自定义光标、颗粒叠加等创意形式

**❌ 反面模式（绝不可用的代码示例）：**

```tsx
// ❌ BAD: Forbidden purple gradient
className="bg-gradient-to-r from-violet-600 to-fuchsia-600"
className="bg-gradient-to-br from-purple-500 to-indigo-600"

// ✅ GOOD: Context-specific alternatives
className="bg-gradient-to-br from-amber-50 via-orange-50 to-rose-50" // Warm editorial
className="bg-gradient-to-tr from-emerald-900 to-teal-700" // Dark organic
className="bg-[#FF6B35] to-[#F7931E]" // Bold retro-futuristic

// ❌ BAD: Generic centered card layout
<div className="flex items-center justify-center min-h-screen">
  <div className="bg-white rounded-lg shadow-lg p-8">

// ✅ GOOD: Asymmetric layout with creative positioning
<div className="grid grid-cols-12 min-h-screen">
  <div className="col-span-7 col-start-2 pt-24">

// ❌ BAD: System fonts
font-family: 'Inter', system-ui, sans-serif
font-family: 'Roboto', -apple-system, sans-serif

// ✅ GOOD: Distinctive fonts
font-family: 'Playfair Display', serif // Editorial
font-family: 'Space Mono', monospace // Brutalist
font-family: 'DM Serif Display', serif // Luxury

// ❌ BAD: Emoji icons
<span>🚀</span>
<button>⭐ Favorite</button>

// ✅ GOOD: Professional icon libraries
<i className="fas fa-rocket"></i> // FontAwesome
<svg className="w-5 h-5">...</svg> // Heroicons
```

创意实现原则：

- **创意解读**：创造性地理解需求，做非预期选择，让设计真正贴合场景
- **避免重复**：每次设计都应不同——深浅主题、不同字体、不同美学风格间变化
- **避免趋同**：不要收敛到常见选择（如 Space Grotesk）
- **复杂度匹配**：实现复杂度需匹配美学愿景——极繁设计需要大量动画与效果的精致代码；极简或精致设计需要克制、精确，以及对间距、排版与细节的细心打磨

**设计约束**：无特别要求时最多产出 4 个页面；不必顾虑生成体量与复杂度，确保应用内容充实。

**实现质量要求**：

- **生产级质量**：功能完整、可直接进入开发
- **视觉冲击**：视觉出众、令人难忘
- **美学一致**：有清晰的美学立场，协调统一
- **细节精雕**：每个细节都经过仔细打磨

图标规范：

- **❌ 禁止 emoji 图标**：绝不用 emoji 字符当图标（🚀、⭐、❤️ 等）
- **✅ 必须用专业图标库**：FontAwesome（多数项目推荐）、Heroicons（Tailwind 项目）、Material Icons、Feather Icons、Lucide Icons
- **图标一致性**：全项目使用同一图标库，保证视觉统一
- **图标风格**：与整体美学方向和色板匹配

### 步骤 5：自检清单（提交代码前）

**对生成的代码执行以下检查：**

1. **配色审计**：
   ```bash
   # Search for forbidden colors in your code
   grep -iE "(violet|purple|indigo|fuchsia)" [your-file]
   # If found → VIOLATION → Choose alternative from Design Specification
   ```

2. **字体审计**：
   ```bash
   # Search for forbidden fonts
   grep -iE "(Inter|Roboto|system-ui|Arial|-apple-system)" [your-file]
   # If found → VIOLATION → Use distinctive font from Design Specification
   ```

3. **图标审计**：
   ```bash
   # Search for emoji usage (common emoji patterns)
   grep -iE "(🚀|⭐|❤️|👍|🔥|💡|🎉|✨)" [your-file]
   # If found → VIOLATION → Replace with FontAwesome or other professional icon library
   # Verify icon library is properly imported and used
   ```

4. **布局审计**：
   - 布局是否使用不对称/斜向/重叠？（要求：是）
   - 是否有创意的破格设计？（要求：是）
   - 是否只有居中元素加对称间距？（允许：否）

5. **设计规格符合度**：
   - 是否在代码之前输出了 DESIGN SPECIFICATION？（要求：是）
   - 代码是否符合声明的美学方向？（要求：是）

**任一审计不通过 → 用正确方式重新设计。**

生成任何页面前，先完成 [UI 设计自检清单](checklist.md)。

记住：你完全有能力做出卓越的创意作品。不要保留，跳出思维定式，全力投入一个独特的视觉愿景，展现真正的创造力。

使用说明

# UI 设计规范指南

面向 Web 与小程序的界面设计规范技能：在编码前先确定视觉方向并输出设计规格，产出可直接进入开发的高保真原型。

## 核心能力

- 编码前强制输出设计规格（目的、美学方向、配色、字体、布局策略）
- 提供多种可选美学方向，规避通用 AI 风格（禁用紫色系渐变、Inter/Roboto 等滥用字体、emoji 图标）
- 覆盖排版、配色、动效、图标、空间构图与背景细节的完整设计规范
- 内置 grep 自检清单，提交前逐项审计配色、字体、图标与布局

## 最简用法

示例 1：说「用这个技能为在线教育产品确定 UI 视觉方向并输出设计规格」，会先得到包含美学方向、配色与字体的规格说明，再进入原型实现。

示例 2：说「为这个记账小程序做一个高保真界面原型」，会按工作流完成设计规格 → 美学与配色决策 → 原型实现 → 自检清单。

## 说明

- 适用场景：Web/小程序页面与组件的视觉设计、原型产出与设计自检；不适用于纯后端或已定稿 UI 的直接实现。
- 详细工作流见 SKILL.md，生成界面前建议先过 checklist.md。

如何安装此技能？

访问技能市场，点击「安装」按钮，按提示将技能包放入 AI 编程助手的 skills 目录即可。