by 运行时依赖
安装命令
点击复制本土化适配说明
前端设计 安装说明： 安装命令：["openclaw skills install frontend-design-cn"] 该技能用于国内通用相关操作，可能需要相应的平台账号或API密钥
技能文档
前端设计大师
创建让人眼前一亮、过目不忘的生产级前端界面。拒绝平庸的AI生成审美，追求有态度、有观点、有细节的设计。
🎯 什么时候使用
立即触发：
用户说"帮我写个网页"、"做个前端页面" 用户要构建组件、仪表盘、着陆页、海报 用户要美化、优化、改版现有界面 用户提到React/Vue/HTML/CSS/布局等关键词
不要触发：
纯后端代码 数据处理脚本 非可视化的工具函数 🎨 设计前的关键决策
写第一行代码前，先想清楚这4件事：
- 明确目的
- 选择大胆的美学方向（必须选一个！）
⚠️ 严禁： 模糊的"现代简约风"。必须选一个明确的方向，并贯彻到底！
- 技术约束
- 记忆点设计
用户记住这个界面的那一个点是什么？
必须有且只有一个核心记忆点：
一个特别的动画效果 一种不寻常的布局方式 一个独特的字体组合 一个惊艳的背景纹理 一个意想不到的交互 🔑 五大设计原则
- 字体排版：拒绝平庸
✅ 应该做：
选择有性格的字体，避开Inter/Ro机器人o/Arial这些过度使用的字体 用一个有特色的标题字体 + 一个易读的正文字体 字号要有层级差异（不要都是14-16px） 大标题用字距（letter-spacing）制造高级感
❌ 不应该：
全用系统默认字体 字号差异太小，没有视觉层级 一行超过80字符（阅读困难）
- 色彩：大胆承诺
✅ 应该做：
用CSS变量确保一致性 主色调占70%，辅助色20%，强调色10% 大胆用单色或双色（少即是多） 深色/浅色模式都考虑
❌ 不应该：
紫色渐变配白色背景（烂大街了！） 彩虹色，什么颜色都有 对比度不够，文字看不清
- 动效：一击即中
✅ 应该做：
页面加载用交错动画（animation-delay） 滚动触发的渐入效果 悬停时的小惊喜（不要太夸张） 纯CSS动画优先（性能好）
❌ 不应该：
到处都是微交互，分散注意力 动画太长太抢戏（超过300ms） 一滚动什么都在动（晕）
- 空间布局：打破常规
✅ 应该做：
非对称布局（不要永远左右对称） 元素重叠制造层次感 斜向流动，打破水平垂直的单调 大胆留白（或者大胆密集） 偶尔有元素突破栅格
❌ 不应该：
永远居中，永远12栅格，永远flex 所有元素间距都一样 页面像个规矩的表格
- 背景与细节：制造氛围
✅ 可以加：
噪点纹理（grAIn/noise） 渐变网格（gradient mesh） 几何图案点缀 多层透明叠加 戏剧化的阴影 装饰性边框 自定义鼠标光标
❌ 永远纯白/纯黑背景（除非是极简风格）
🚫 绝对禁止的AI俗套
看到这些直接重写：
❌ Space Grotesk字体 - 每个AI生成的页面都在用 ❌ 紫色渐变 + 白色背景 - 看吐了 ❌ 永远的卡片布局 - 圆角12px，阴影，三点菜单 ❌ Hero标题永远3rem，正文永远1.25rem ❌ 永远居中，永远flex，永远column ❌ "glassmorphism"毛玻璃滥用 ❌ 所有按钮都是蓝底白字 💻 代码质量要求 生产级标准 代码可直接运行，不用用户修bug 响应式设计（手机/平板/桌面） 语义化HTML标签 注释关键决策（为什么这样设计） 复杂度匹配 极简风格 = 代码克制，细节在间距、字重 极繁风格 = 代码丰富，多层动画、装饰元素 风格决定代码量，不要反过来 📐 交付清单
每次交付必须包含：
✅ 完整可运行的代码（HTML/CSS/JS或组件） ✅ 设计说明（用了什么风格，核心记忆点是什么） ✅ 如果是多页面，说明页面间关系 ✅ 浏览器兼容性说明（纯CSS的话基本都支持） 🎯 示例设计思路
示例：数据仪表盘
风格选择：工业实用风
字体：等宽字体 + 无衬线标题 配色：深灰背景 + 霓虹色系数据高亮 布局：密集栅格，信息密度高 记忆点：数字跳动动画 + 实时进度条效果 动效：鼠标悬停时卡片轻微上浮，数据栏发光
记住：明确的观点 + 一致的执行 > 完美但平庸的设计。
现在，让我们开始创造让人难忘的界面吧！ 🎨✨