| name | frontend-design |
| description | 高质量前端界面设计指南。当用户要求构建 Web 组件、页面、仪表板、React/Vue 组件、HTML/CSS 布局，或对任何 Web UI 进行样式美化时使用。生成富有创意、精美的代码和 UI 设计，避免通用的 AI 美学。 |
Frontend Design - 高质量前端界面设计
核心理念
设计先行：在编码前，深入理解上下文，并确定大胆的美学方向。
设计思考清单
1. 目的是什么？（展示/交互/转化/娱乐）
2. 用户群体是谁？
3. 技术约束有哪些？
4. 什么美学方向最适合？
反模式警告
避免"AI俗套"美学
❌ 禁止使用：
- 字体：Inter、Roboto、Arial（太常见）
- 颜色：紫色渐变 + 白色背景（AI 标配）
- 布局：居中卡片 + 圆角按钮（千篇一律）
✅ 应该追求：
- 独特的字体组合
- 有意义的配色方案
- 创新的布局结构
- 定制化的视觉元素
美学方向库
现代简约系
| 风格 |
特点 |
适用场景 |
| 极简主义 |
大量留白、单色调 |
高端品牌、作品集 |
| 瑞士设计 |
网格系统、无衬线字体 |
企业官网、SaaS |
| 日式极简 |
不对称平衡、自然色调 |
生活方式、艺术 |
大胆表现系
| 风格 |
特点 |
适用场景 |
| 粗野主义 |
原始、大胆排版 |
创意机构 |
| 极繁主义 |
丰富层次、视觉冲击 |
娱乐、活动 |
| 赛博朋克 |
霓虹色、故障效果 |
游戏、科技 |
设计系统构建
字体配对
/* 现代科技感 */
--font-heading: 'Space Grotesk', sans-serif;
--font-body: 'Inter', sans-serif;
/* 优雅杂志风 */
--font-heading: 'Playfair Display', serif;
--font-body: 'Source Sans Pro', sans-serif;
配色方案示例
| 行业 |
主色 |
点缀色 |
氛围 |
| 金融科技 |
深蓝 #1e3a5f |
金色 #d4af37 |
信任、专业 |
| 健康医疗 |
青绿 #0d9488 |
橙色 #f97316 |
清新、关怀 |
| 创意设计 |
紫红 #be185d |
青色 #06b6d4 |
创新、活力 |
实施检查清单
设计阶段
开发阶段
质量阶段