前端设计
📖 技能介绍
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俗套
看到这些直接重写：
- ❌ Space Grotesk字体 - 每个AI生成的页面都在用
- ❌ 紫色渐变 + 白色背景 - 看吐了
- ❌ 永远的卡片布局 - 圆角12px，阴影，三点菜单
- ❌ Hero标题永远3rem，正文永远1.25rem
- ❌ 永远居中，永远flex，永远column
- ❌ "glassmorphism"毛玻璃滥用
- ❌ 所有按钮都是蓝底白字
💻 代码质量要求
生产级标准
- 代码可直接运行，不用用户修bug
- 响应式设计（手机/平板/桌面）
- 语义化HTML标签
- 注释关键决策（为什么这样设计）
复杂度匹配
- 极简风格 = 代码克制，细节在间距、字重
- 极繁风格 = 代码丰富，多层动画、装饰元素
- 风格决定代码量，不要反过来
📐 交付清单
每次交付必须包含：
- ✅ 完整可运行的代码（HTML/CSS/JS或组件）
- ✅ 设计说明（用了什么风格，核心记忆点是什么）
- ✅ 如果是多页面，说明页面间关系
- ✅ 浏览器兼容性说明（纯CSS的话基本都支持）
🎯 示例设计思路
示例：数据仪表盘
风格选择：工业实用风 - 字体：等宽字体 + 无衬线标题 - 配色：深灰背景 + 霓虹色系数据高亮 - 布局：密集栅格，信息密度高 - 记忆点：数字跳动动画 + 实时进度条效果 - 动效：鼠标悬停时卡片轻微上浮，数据栏发光
记住：明确的观点 + 一致的执行 > 完美但平庸的设计。
现在，让我们开始创造让人难忘的界面吧！ 🎨✨
🤖 AI 评测
这个Skill质量不错，专注于提升前端界面的设计品质，拒绝千篇一律的AI审美。它提供了详细的设计指导原则和明确的风格选择方向，能帮助生成更有特色的前端界面。优点是设计观点鲜明、实操性强；不足是缺少实际的设计示例，文件内容比较单一。对于需要高质量前端界面的用户来说，这是一个值得使用的设计工具。
