前端设计

SKILL.md

---
name: frontend-design
version: 1.0.0
description: >
  创建独特、生产级的前端界面，追求高设计品质。当用户要求构建
  网页组件、页面、海报、应用时使用（包括网站、着陆页、仪表盘、
  React组件、HTML/CSS布局、美化任何Web界面）。生成有创意、
  打磨精细的代码和UI设计，坚决拒绝千篇一律的"AI审美"。
metadata:
  author: 移植并优化自 Anthropic
  category: design
---

# 前端设计大师

创建让人眼前一亮、过目不忘的生产级前端界面。拒绝平庸的AI生成审美，追求有态度、有观点、有细节的设计。

---

## 🎯 什么时候使用

**立即触发：**
- 用户说"帮我写个网页"、"做个前端页面"
- 用户要构建组件、仪表盘、着陆页、海报
- 用户要美化、优化、改版现有界面
- 用户提到React/Vue/HTML/CSS/布局等关键词

**不要触发：**
- 纯后端代码
- 数据处理脚本
- 非可视化的工具函数

---

## 🎨 设计前的关键决策

**写第一行代码前，先想清楚这4件事：**

### 1. 明确目的
- 这个界面解决什么问题？
- 谁在用它？（开发者/消费者/管理层/孩子）
- 用户第一眼应该注意到什么？

### 2. 选择大胆的美学方向（必须选一个！）

| 风格 | 描述 | 适用场景 |
|------|------|---------|
| **极简主义** | 极致留白，少即是多，每个元素都有理由 | 高端产品、作品集 |
| **极繁主义** | 信息爆炸，重叠，分层，视觉冲击 | 艺术节、时尚品牌 |
| **复古未来** | 80年代电脑风，CRT效果，像素感 | 科技、游戏、NFT |
| **有机自然** | 曲线、渐变、柔和、流动感 | 健康、生活方式 |
| **奢华精致** | 高对比度，精细排版，黑金/白金配色 | 奢侈品、高端服务 |
| **趣味玩具** | 圆润、明亮、可爱、互动感强 | 面向儿童、娱乐产品 |
| **杂志编辑** | 栅格系统，大标题，图文穿插 | 媒体、博客、内容站 |
| **粗野主义** | 原始、直接、边框、黑白为主 | 艺术、先锋品牌 |
| **装饰艺术** | 几何图案，对称，金色点缀 | 高端活动、酒店 |
| **柔和马卡龙** | 低饱和度，圆型，软阴影 | 社交、女性向产品 |
| **工业实用** | 功能优先，等宽字体，仪表盘风格 | 工具、数据产品 |

⚠️ **严禁：** 模糊的"现代简约风"。必须选一个明确的方向，并贯彻到底！

### 3. 技术约束
- 用什么框架？（纯HTML/React/Vue）
- 性能要求？（纯CSS优先，尽量少JS）
- 无障碍要求？

### 4. 记忆点设计
> **用户记住这个界面的那一个点是什么？**

必须有且只有一个核心记忆点：
- 一个特别的动画效果
- 一种不寻常的布局方式
- 一个独特的字体组合
- 一个惊艳的背景纹理
- 一个意想不到的交互

---

## 🔑 五大设计原则

### 1. 字体排版：拒绝平庸

✅ **应该做：**
- 选择有性格的字体，避开Inter/Roboto/Arial这些过度使用的字体
- 用一个有特色的标题字体 + 一个易读的正文字体
- 字号要有层级差异（不要都是14-16px）
- 大标题用字距（letter-spacing）制造高级感

❌ **不应该：**
- 全用系统默认字体
- 字号差异太小，没有视觉层级
- 一行超过80字符（阅读困难）

### 2. 色彩：大胆承诺

✅ **应该做：**
- 用CSS变量确保一致性
- 主色调占70%，辅助色20%，强调色10%
- 大胆用单色或双色（少即是多）
- 深色/浅色模式都考虑

❌ **不应该：**
- 紫色渐变配白色背景（烂大街了！）
- 彩虹色，什么颜色都有
- 对比度不够，文字看不清

### 3. 动效：一击即中

✅ **应该做：**
- 页面加载用交错动画（animation-delay）
- 滚动触发的渐入效果
- 悬停时的小惊喜（不要太夸张）
- 纯CSS动画优先（性能好）

❌ **不应该：**
- 到处都是微交互，分散注意力
- 动画太长太抢戏（超过300ms）
- 一滚动什么都在动（晕）

### 4. 空间布局：打破常规

✅ **应该做：**
- 非对称布局（不要永远左右对称）
- 元素重叠制造层次感
- 斜向流动，打破水平垂直的单调
- 大胆留白（或者大胆密集）
- 偶尔有元素突破栅格

❌ **不应该：**
- 永远居中，永远12栅格，永远flex
- 所有元素间距都一样
- 页面像个规矩的表格

### 5. 背景与细节：制造氛围

✅ **可以加：**
- 噪点纹理（grain/noise）
- 渐变网格（gradient mesh）
- 几何图案点缀
- 多层透明叠加
- 戏剧化的阴影
- 装饰性边框
- 自定义鼠标光标

❌ **永远纯白/纯黑背景（除非是极简风格）**

---

## 🚫 绝对禁止的AI俗套

看到这些直接重写：

1. ❌ **Space Grotesk字体** - 每个AI生成的页面都在用
2. ❌ **紫色渐变 + 白色背景** - 看吐了
3. ❌ **永远的卡片布局** - 圆角12px，阴影，三点菜单
4. ❌ **Hero标题永远3rem，正文永远1.25rem**
5. ❌ **永远居中，永远flex，永远column**
6. ❌ **"glassmorphism"毛玻璃滥用**
7. ❌ **所有按钮都是蓝底白字**

---

## 💻 代码质量要求

### 生产级标准
- 代码可直接运行，不用用户修bug
- 响应式设计（手机/平板/桌面）
- 语义化HTML标签
- 注释关键决策（为什么这样设计）

### 复杂度匹配
- **极简风格** = 代码克制，细节在间距、字重
- **极繁风格** = 代码丰富，多层动画、装饰元素
- 风格决定代码量，不要反过来

---

## 📐 交付清单

每次交付必须包含：

1. ✅ 完整可运行的代码（HTML/CSS/JS或组件）
2. ✅ 设计说明（用了什么风格，核心记忆点是什么）
3. ✅ 如果是多页面，说明页面间关系
4. ✅ 浏览器兼容性说明（纯CSS的话基本都支持）

---

## 🎯 示例设计思路

> **示例：数据仪表盘**
> 
> **风格选择：工业实用风**
> - 字体：等宽字体 + 无衬线标题
> - 配色：深灰背景 + 霓虹色系数据高亮
> - 布局：密集栅格，信息密度高
> - 记忆点：数字跳动动画 + 实时进度条效果
> - 动效：鼠标悬停时卡片轻微上浮，数据栏发光

记住：**明确的观点 + 一致的执行 > 完美但平庸的设计**。

---

**现在，让我们开始创造让人难忘的界面吧！** 🎨✨