---
name: frontend-design
description: Creates unique, production-grade frontend interfaces with exceptional design quality. Use when user asks to build web components, pages, materials, posters, or applications (e.g., websites, landing pages, dashboards, React components, HTML/CSS layouts, or styling/beautifying any web UI). Generates creative, polished code and UI designs that avoid mediocre AI aesthetics.
---
# Frontend Design Skill
此技能指导创建独特的生产级前端界面，避免平庸的"AI 粗糙"美学。实现真正可用的代码，并高度关注美学细节和创意选择。
## When to Use This Skill
使用此技能当用户请求：
- 构建 Web 组件、页面或完整应用程序
- 创建着陆页、仪表盘或营销页面
- 设计 React、Vue 或原生 HTML/CSS 界面
- 美化或重新设计现有的 Web UI
- 创建海报、素材或视觉设计元素（用于 Web）
- 需要高设计品质和独特美学的任何前端项目
**关键触发词**: Web 组件、页面、应用、网站、着陆页、仪表盘、React 组件、HTML/CSS、UI 设计、美化、前端
## 核心原则
在编写代码之前，必须进行深入的设计思考。每个界面都应该是独特的、有意图的、令人难忘的。
### 设计思维流程
在实现任何代码之前，回答以下问题：
#### 1. 目的 (Purpose)
- **问题**: 此界面解决什么问题？
- **用户**: 谁使用它？在什么情境下使用？
- **目标**: 用户需要完成什么任务？
#### 2. 风格方向 (Style Direction)
选择一个**明确且大胆**的美学方向。不要选择"现代简约"这样的通用描述，而是选择极致的风格：
**风格选项**（但不限于这些）：
- **极简主义**: 极度克制，大量留白，精准排版
- **极致混乱**: 密集布局，重叠元素，视觉冲击
- **复古未来主义**: 80年代霓虹色，网格，合成波风格
- **有机/自然**: 流动形状，自然色调，柔和曲线
- **奢华/精致**: 优雅字体，金色点缀，精细细节
- **俏皮/玩具感**: 明亮色彩，圆角，趣味动画
- **编辑/杂志风格**: 大胆排版，网格系统，黑白为主
- **粗犷/原始**: 单色，硬边，实用主义
- **装饰艺术/几何**: 对称图案，几何形状，高对比度
- **柔和/粉彩**: 温和色彩，渐变，梦幻感
- **工业/实用**: 系统字体，单色，功能优先
- **新拟态**: 柔和阴影，浮雕效果，微妙深度
- **玻璃态**: 模糊背景，透明度，光感
**关键**: 选择清晰的概念方向并精准执行。大胆的极致主义和精致的极简主义都有效——关键在于**意图**，而不是强度。
#### 3. 技术限制 (Constraints)
- 使用什么框架？（React, Vue, 原生 HTML/CSS）
- 性能要求？（动画复杂度，文件大小）
- 可访问性要求？（ARIA 标签，键盘导航，色彩对比度）
- 浏览器兼容性？
#### 4. 差异化 (Differentiation)
- **记忆点**: 是什么让它令人难忘？
- **独特性**: 用户会记住哪一个细节？
- **惊喜**: 哪里会让用户眼前一亮？
## 前端美学指南
### 1. 排版 (Typography)
**原则**: 字体选择是设计的灵魂。
**Do**:
- ✅ 选择**独特且有个性**的字体
- ✅ 标题使用引人注目的字体，正文使用易读字体
- ✅ 尝试意想不到的字体配对
- ✅ 使用字体变体（font-weight, font-style）创造层次
- ✅ 精确控制字间距（letter-spacing）和行高（line-height）
**Don't**:
- ❌ 使用通用字体：Arial, Helvetica, Inter, Roboto, 系统字体
- ❌ 所有文本使用相同的字体和大小
- ❌ 忽略字体加载性能（使用 font-display: swap）
**推荐字体来源**:
- Google Fonts (选择小众、独特的字体)
- 自定义字体（如果项目允许）
**示例字体组合**:
```css
/* 极简编辑风格 */
--font-heading: 'Playfair Display', serif;
--font-body: 'Source Sans Pro', sans-serif;
/* 现代科技风格 */
--font-heading: 'Space Mono', monospace;
--font-body: 'DM Sans', sans-serif;
/* 优雅奢华风格 */
--font-heading: 'Cormorant Garamond', serif;
--font-body: 'Lato', sans-serif;
```
### 2. 颜色与主题 (Color & Theme)
**原则**: 颜色定义情绪和品牌。
**Do**:
- ✅ 使用 CSS 变量保持一致性
- ✅ 主色调 + 鲜明点缀色的组合
- ✅ 考虑色彩心理学（蓝色=信任，红色=紧迫，绿色=成功）
- ✅ 使用渐变营造深度（但要有品味）
- ✅ 保持色彩对比度（WCAG AA 标准：至少 4.5:1）
**Don't**:
- ❌ 俗套配色：白色背景 + 紫色渐变
- ❌ 过多颜色（3-5 个主色已足够）
- ❌ 忽略可访问性
**示例主题**:
```css
:root {
/* 极简黑白 */
--color-primary: #000000;
--color-secondary: #ffffff;
--color-accent: #ff3366;
/* 复古未来 */
--color-primary: #1a1a2e;
--color-secondary: #16213e;
--color-accent: #00fff5;
--color-highlight: #ff006e;
/* 自然有机 */
--color-primary: #2d6a4f;
--color-secondary: #52b788;
--color-accent: #ffc857;
}
```
### 3. 动效 (Animation & Motion)
**原则**: 动画应该增强体验，而不是分散注意力。
**Do**:
- ✅ 优先使用 CSS 动画（性能更好）
- ✅ 设计页面加载动画（首次印象）
- ✅ 使用 `animation-delay` 实现元素逐个显示
- ✅ 悬停状态添加微妙过渡
- ✅ 滚动触发动画（Intersection Observer）
- ✅ 对于 React，使用 Framer Motion 或 React Spring
**Don't**:
- ❌ 过度使用动画（每个元素都在动）
- ❌ 动画持续时间过长（> 500ms 会让人不耐烦）
- ❌ 忽略 `prefers-reduced-motion` 媒体查询
**示例动画**:
```css
/* 页面加载 - 元素逐个淡入 */
.fade-in-up {
animation: fadeInUp 0.6s ease-out forwards;
opacity: 0;
}
.fade-in-up:nth-child(1) { animation-delay: 0.1s; }
.fade-in-up:nth-child(2) { animation-delay: 0.2s; }
.fade-in-up:nth-child(3) { animation-delay: 0.3s; }
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* 悬停效果 */
.card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}
```
### 4. 空间构成 (Spatial Composition)
**原则**: 布局应该引导视线，创造视觉节奏。
**Do**:
- ✅ 尝试不对称布局
- ✅ 使用重叠元素创造深度
- ✅ 对角线流程引导视线
- ✅ 打破网格的元素（但有意图）
- ✅ 宽敞的留白或精心控制的密度
- ✅ 使用 Grid 和 Flexbox 创造复杂布局
**Don't**:
- ❌ 所有元素居中对齐
- ❌ 均匀分布的网格（无聊）
- ❌ 忽略响应式设计
**示例布局技巧**:
```css
/* 不对称网格 */
.grid-asymmetric {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 40px;
}
/* 重叠效果 */
.overlap-container {
position: relative;
}
.overlap-item {
position: absolute;
z-index: 2;
transform: translate(-20%, -20%);
}
/* 对角线流程 */
.diagonal-section {
transform: skewY(-3deg);
padding: 100px 0;
}
.diagonal-section > * {
transform: skewY(3deg);
}
```
### 5. 背景和视觉细节 (Background & Visual Details)
**原则**: 背景营造氛围和深度。
**Do**:
- ✅ 渐变网格
- ✅ 噪点纹理
- ✅ 几何图案
- ✅ 分层透明度
- ✅ 戏剧性阴影
- ✅ 装饰性边框
- ✅ 自定义光标（如果适合风格）
- ✅ 颗粒叠加效果
**Don't**:
- ❌ 纯色背景（除非极简风格）
- ❌ 低质量或不相关的库存图片
- ❌ 过度使用阴影（box-shadow 污染）
**示例背景效果**:
```css
/* 渐变网格背景 */
.gradient-grid {
background:
linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px),
linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
linear-gradient(135deg, #667eea 0%, #764ba2 100%);
background-size: 50px 50px, 50px 50px, 100% 100%;
}
/* 噪点纹理 */
.noise-texture {
position: relative;
}
.noise-texture::before {
content: '';
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.05'/%3E%3C/svg%3E");
pointer-events: none;
}
/* 玻璃态效果 */
.glass-card {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}
```
## 避免通用 AI 美学
**绝对禁止的元素**:
- ❌ 过度使用的字体：Inter, Roboto, Arial, 系统字体
- ❌ 俗套配色：白色背景 + 紫色渐变
- ❌ 可预测的布局模式（居中卡片网格）
- ❌ 缺乏特定上下文特征的千篇一律设计
**如何避免**:
- ✅ 为每个项目选择**不同**的字体
- ✅ 在浅色/深色主题之间变化
- ✅ 尝试不同的布局结构
- ✅ 添加独特的品牌元素和个性
## 实现复杂性与美学匹配
**关键原则**: 代码复杂度应与设计愿景相匹配。
### 极繁主义设计 → 复杂代码
- 大量动画和过渡效果
- 多层叠加元素
- 复杂的交互状态
- 详细的视觉效果（粒子、渐变、纹理）
```jsx
// 示例：复杂的动画卡片
{/* 复杂内容 */}
```
### 极简主义设计 → 精准代码
- 克制的动画（仅在关键时刻）
- 精确的间距和排版
- 细微的过渡效果
- 关注细节而非数量
```css
/* 示例：精致的极简主义 */
.minimal-card {
padding: 60px;
background: #ffffff;
border: 1px solid rgba(0,0,0,0.08);
transition: border-color 0.3s ease;
}
.minimal-card:hover {
border-color: rgba(0,0,0,0.2);
}
.minimal-card h2 {
font-family: 'Cormorant Garamond', serif;
font-size: 2.5rem;
font-weight: 300;
letter-spacing: -0.02em;
line-height: 1.2;
margin: 0 0 20px 0;
}
```
## 工作流程
### 第 1 步：理解需求
- 阅读用户请求，提取关键信息
- 确定项目类型（组件、页面、完整应用）
- 识别技术栈（React、Vue、原生 HTML/CSS）
### 第 2 步：设计思考
- 回答设计思维流程中的 4 个问题
- 选择明确的美学方向
- 在心中可视化最终效果
### 第 3 步：技术决策
- 选择框架和工具
- 决定动画库（Framer Motion、CSS、React Spring）
- 确定字体来源
### 第 4 步：实现
- 编写语义化 HTML 结构
- 实现 CSS 样式（使用 CSS 变量）
- 添加交互和动画
- 确保响应式设计
### 第 5 步：精细化
- 调整间距和排版
- 优化动画时间
- 测试不同屏幕尺寸
- 确保可访问性（ARIA、键盘导航）
## 示例场景
### 场景 1: 创建着陆页
**用户请求**: "帮我创建一个 SaaS 产品的着陆页"
**设计思考**:
- 目的：展示产品价值，吸引用户注册
- 风格：现代科技 + 编辑风格，使用 Space Grotesk 字体，黑白 + 蓝色点缀
- 布局：不对称，英雄区域占据 70% 屏幕，对角线流程
- 差异化：独特的字体配对，大胆的排版层次
**实现重点**:
- Hero section 使用大字号标题（4-6rem）
- 滚动触发的淡入动画
- 玻璃态 CTA 按钮
- 响应式网格展示功能
### 场景 2: 设计仪表盘
**用户请求**: "创建一个数据分析仪表盘"
**设计思考**:
- 目的：清晰展示数据，支持快速决策
- 风格：实用主义 + 精致，使用 IBM Plex Sans，深色主题
- 布局：网格系统，卡片式布局，数据可视化优先
- 差异化：微妙的动画过渡，悬停显示详细信息
**实现重点**:
- 深色背景减少眼睛疲劳
- 卡片使用柔和阴影和边框
- 图表使用鲜明的点缀色
- 加载状态使用骨架屏
### 场景 3: React 组件库
**用户请求**: "创建一套自定义按钮组件"
**设计思考**:
- 目的：可复用、可定制的按钮系统
- 风格：灵活，支持多种变体
- 技术：使用 styled-components 或 CSS modules
- 差异化：独特的悬停效果和加载状态
**实现重点**:
- 主按钮、次要按钮、文本按钮变体
- 大小变体（small, medium, large）
- 加载和禁用状态
- 平滑的过渡动画
## 代码质量标准
### 必须遵守:
- ✅ 语义化 HTML（``, `