version: "1.0.0" name: frontend-design description: 创建独具特色、生产级别的高质量前端界面。当用户要求构建Web组件、页面或应用，且视觉效果与代码质量同等重要时使用。 origin: ECC
前端设计
当任务不只是"让它能运行"而是"让它看起来有设计感"时使用本技能。
本技能适用于产品页面、仪表盘、应用外壳、组件或视觉系统，这些场景需要清晰的设计理念而非通用的AI风格UI。
何时使用
- 从零构建落地页、仪表盘或应用界面
- 将平淡的界面升级为有设计感且令人印象深刻的版本
- 将产品概念转化为具体的视觉方向
- 实现排版、布局和动效都很重要的前端界面
核心原则
选定一个方向并坚持执行。
安全平庸的UI通常比有少数大胆选择的强统一审美效果更差。
设计工作流
1. 先定义界面框架
在编码前确定：
- 用途
- 目标受众
- 情感基调
- 视觉方向
- 用户应该记住的一个核心点
可选方向：
- 极致极简
- 编辑风
- 工业风
- 奢华风
- 俏皮风
- 几何风
- 复古未来主义
- 柔软有机风
- 极繁主义
不要随意混合风格。选择一种并干净利落地落地。
2. 构建视觉系统
定义：
- 字体层级
- 颜色变量
- 间距节奏
- 布局逻辑
- 动效规则
- 表面/边框/阴影处理
使用CSS变量或项目的token系统，确保界面在迭代过程中保持一致性。
3. 有意识地做布局
优先选择：
- 能强化层级的不对称布局
- 能创造深度的元素重叠
- 能明确焦点的充足留白
- 仅在产品需要时使用密集布局
除非明确适配，不要默认使用对称卡片网格。
4. 让动效有意义
使用动画实现：
- 展现层级关系
- 分阶段展示信息
- 响应用户操作
- 创造一两个令人印象深刻的时刻
不要到处散落通用的微交互。一个精心设计的加载序列通常比二十个随机悬停效果更好。
优秀默认方案
排版
- 选择有特点的字体
- 合适的情况下将有辨识度的展示字体与易读的正文字体搭配
- 设计导向的页面避免使用通用默认字体
颜色
- 坚持使用清晰的调色板
- 一个主色加少量点缀色通常比权重均匀的彩虹调色板效果更好
- 除非产品真的需要，避免使用陈词滥调的紫色渐变加白色背景
背景
使用氛围感元素：
对于面向产品的页面，空白的纯色背景很少是最优选择。
布局
- 当布局效果更好时打破网格
- 有意识地使用对角线、偏移和分组
- 即使布局非常规也要保持阅读流程清晰
反模式
永远不要默认使用：
- 千篇一律的SaaS首屏
- 没有层级的通用卡片堆
- 没有系统的随机强调色
- 像占位符一样的排版
- 只是因为容易加而存在的动效
执行规则
- 在现有产品中工作时保留已建立的设计系统
- 让技术复杂度匹配视觉创意
- 保持可访问性和响应式能力
- 前端在桌面和移动端都应该感觉经过精心设计
质量门
交付前确认：
- 界面有清晰的视觉理念
- 排版和间距看起来经过精心设计
- 颜色和动效为产品服务，而非随机装饰
- 结果不像通用的AI生成UI
- 实现是生产级别的，而不只是视觉上好看