Install
openclaw skills install frontend-design-cn前端设计
创建独特、生产级的前端界面，追求高设计品质。当用户要求构建 网页组件、页面、海报、应用时使用（包括网站、着陆页、仪表盘、 React组件、HTML/CSS布局、美化任何Web界面）。生成有创意、 打磨精细的代码和UI设计，坚决拒绝千篇一律的"AI审美"。
前端设计大师
创建让人眼前一亮、过目不忘的生产级前端界面。拒绝平庸的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的话基本都支持）
🎯 示例设计思路
示例：数据仪表盘
风格选择：工业实用风
- 字体：等宽字体 + 无衬线标题
- 配色：深灰背景 + 霓虹色系数据高亮
- 布局：密集栅格，信息密度高
- 记忆点：数字跳动动画 + 实时进度条效果
- 动效：鼠标悬停时卡片轻微上浮，数据栏发光
记住：明确的观点 + 一致的执行 > 完美但平庸的设计。
现在，让我们开始创造让人难忘的界面吧！ 🎨✨