---
name: frontend-design
description: 前端界面设计生成 — 创作独特、生产级的前端界面。避免通用 AI 审美，追求大胆、令人印象深刻的设计风格。支持组件、页面、仪表盘、落地页等各类 Web UI。
triggers:
  - "设计页面"
  - "前端设计"
  - "UI设计"
  - "创建界面"
  - "设计组件"
  - "网页设计"
  - "落地页"
  - "仪表盘设计"
  - "美化界面"
  - "制作网页"
tools:
  - read
  - write
  - bash
---

# 前端设计技能

创作独特、生产级的前端界面，避免通用的"AI味"审美，追求令人印象深刻的真实设计。

## 设计思维流程

在编码之前，先理解上下文并确定**大胆的美学方向**：

### 1. 分析需求

- **目的**: 界面解决什么问题？谁在使用？
- **基调**: 选择一个极端方向：
  - 极简主义
  - 赛博朋克
  - 复古未来
  - 自然有机
  - 奢华精致
  - 玩具趣味
  - 编辑杂志风
  - 粗野主义
  - Art Deco
  - 柔和马卡龙
  - 工业实用
- **约束**: 技术要求（框架、性能、可访问性）
- **差异化**: 什么让这个设计**令人难忘**？

### 2. 选择技术栈

| 场景 | 推荐技术 |
|------|---------|
| 单页面/组件 | HTML + Tailwind CSS |
| 交互应用 | React + Tailwind CSS |
| 数据仪表盘 | React + Recharts/D3 |
| 动画丰富 | HTML + GSAP/Framer Motion |
| 静态展示 | 纯 HTML/CSS/JS |

### 3. 设计执行原则

- **生产级质量**: 代码可直接用于生产
- **视觉冲击力**: 令人过目不忘
- **美学一致性**: 清晰的设计观点
- **细节精致**: 每个像素都经过思考

## 输出规范

**强制要求**: 入口 HTML 文件必须命名为 `index.html`

### 文件结构

```
output/
├── index.html      # 入口文件
├── styles.css      # 样式文件（可选）
└── script.js       # 脚本文件（可选）
```

### 质量标准

1. **布局**: 清晰的视觉层次，合理的间距和对齐
2. **色彩**: 大胆但不混乱，有明确的色彩策略
3. **排版**: 字体选择与主题一致，字号层次分明
4. **交互**: 悬停效果、过渡动画、状态反馈
5. **响应式**: 适配桌面和移动端
6. **可访问性**: 合理的对比度、语义化HTML、ARIA标签

## 常见设计模式

### 落地页
```
Hero区域 → 特性展示 → 社会证明 → CTA → Footer
```

### 仪表盘
```
顶部导航 → 侧边栏 → 数据卡片 → 图表区 → 数据表格
```

### 博客/内容
```
导航 → 文章列表/详情 → 侧边栏 → 评论 → Footer
```

## 反模式（避免）

- 通用渐变背景 + 居中标题（太平庸）
- 过度使用阴影和圆角（失去个性）
- 全白背景 + 蓝色按钮（默认 Bootstrap 味）
- 堆砌动画（干扰内容）
- 不考虑实际内容的占位符设计

## 示例输出

当用户说"设计一个 AI 产品落地页"时：

1. 确定美学方向（如：深色科技风 + 霓虹强调色）
2. 选择技术栈（HTML + Tailwind CDN）
3. 构建完整页面（Hero + 特性 + 演示 + CTA）
4. 包含实际内容和有意义的交互
5. 输出可直接在浏览器打开的 `index.html`