Frontend Design Skill 详解

创建避免"AI 风格"的高质量前端界面

基本信息

属性	值
名称	frontend-design
类别	创意设计
输出格式	HTML/CSS/JS, React, Vue 等
许可证	Apache 2.0

name: frontend-design
description: Create distinctive, production-grade frontend interfaces
with high design quality. Use this skill when the user asks to build
web components, pages, artifacts, posters, or applications (examples
include websites, landing pages, dashboards, React components, HTML/CSS
layouts, or when styling/beautifying any web UI). Generates creative,
polished code and UI design that avoids generic AI aesthetics.

---

1. 核心目标

1.1 避免"AI 风格"

这个 Skill 的核心目标是避免通用的 AI 生成美学——那种一眼就能认出是 AI 生成的设计。

1.2 设计思维框架

在编码前，必须回答四个问题：

问题	思考方向
目的	这个界面解决什么问题？谁使用它？
调性	选择一个极端：极简？复古未来？奢华？粗野？
约束	框架、性能、无障碍访问要求
差异化	什么让它令人难忘？用户会记住什么？

---

2. 必须避免的元素

2.1 "AI Slop" 清单

❌ 过度使用的字体
   - Inter
   - Roboto
   - Arial
   - 系统字体

❌ 陈词滥调的配色
   - 紫色渐变配白色背景
   - 蓝紫色科技风

❌ 可预测的布局
   - 过度居中
   - 均匀圆角
   - 对称网格

❌ 缺乏个性的组件
   - 通用卡片
   - 标准按钮
   - 无特色表单

---

3. 设计指南

3.1 字体选择

**原则**：选择美丽、独特、有趣的字体

✓ 好的选择：
- 特色展示字体配精致正文字体
- 意外但有个性的字体组合
- 与内容调性匹配的字体

✗ 避免：
- 通用字体（Inter, Roboto, Arial）
- 无差异化的系统字体
- 缺乏层次的单一字体

3.2 色彩与主题

**原则**：承诺统一的美学，主色配锐利强调色

- 使用 CSS 变量保持一致性
- 主导色 + 支持色 + 强调色
- 避免平均分配的胆怯调色板

3.3 动效

**原则**：关注高影响时刻

优先级：
1. 页面加载的交错展示（animation-delay）
2. 滚动触发效果
3. 悬停状态的惊喜

技术选择：
- HTML：优先 CSS-only 方案
- React：使用 Motion 库（如可用）

3.4 空间构图

**原则**：意外的布局创造记忆点

探索方向：
- 不对称
- 重叠
- 对角流
- 打破网格
- 大量负空间 或 可控密度

3.5 背景与视觉细节

**原则**：创造氛围和深度

可用技术：
- 渐变网格
- 噪点纹理
- 几何图案
- 分层透明
- 戏剧性阴影
- 装饰边框
- 自定义光标
- 颗粒叠加

---

4. 配色方案示例

4.1 经典系列

/* 经典蓝 */
--dark: #1C2833;
--slate: #2E4053;
--silver: #AAB7B8;
--off-white: #F4F6F6;

/* 午夜金 */
--gold: #BF9A4A;
--black: #000000;
--cream: #F4F6F6;

/* 炭灰红 */
--charcoal: #292929;
--red: #E33737;
--light-gray: #CCCBCB;

4.2 活力系列

/* 青橙珊瑚 */
--teal: #5EA8A7;
--deep-teal: #277884;
--coral: #FE4447;

/* 橙绿松石 */
--light-orange: #FC993E;
--grayish-turquoise: #667C6F;
--white: #FCFCFC;

/* 活力橙 */
--orange: #F96D00;
--light-gray: #F2F2F2;
--charcoal: #222831;

4.3 自然系列

/* 森林绿 */
--black: #191A19;
--green: #4E9F3D;
--dark-green: #1E5128;

/* 鼠尾草陶土 */
--sage: #87A96B;
--terracotta: #E07A5F;
--cream: #F4F1DE;
--charcoal: #2C2C2C;

/* 复古大地 */
--mustard: #E3B448;
--sage: #CBD18F;
--forest-green: #3A6B35;

4.4 复古与艺术系列

/* 复古彩虹 */
--purple: #722880;
--pink: #D72D51;
--orange: #EB5C18;
--amber: #F08800;
--gold: #DEB600;

/* 深紫祖母绿 */
--purple: #B165FB;
--dark-blue: #181B24;
--emerald: #40695B;

/* 粉紫 */
--pink: #F8275B;
--coral: #FF574A;
--rose: #FF737D;
--purple: #3D2F68;

---

5. 复杂度匹配原则

5.1 核心原则

**重要**：实现复杂度必须匹配美学愿景

- 极繁主义设计 → 需要精细的动画和效果代码
- 极简主义设计 → 需要克制、精确、对间距和字体的细致关注
- 优雅来自于执行愿景，而非复杂度本身

5.2 调性选择光谱

极简主义 ←──────────────────→ 极繁主义

精致/简洁    编辑/杂志风    戏剧/奢华    复古/怀旧    玩具/游戏    混沌/朋克

---

6. 技术实现

6.1 支持的技术栈

前端框架：
├── 原生 HTML + CSS + JavaScript
├── React
├── Vue
└── 其他现代框架

6.2 代码要求

**生产级标准**：
- 功能完整可用
- 视觉醒目且令人难忘
- 美学观点清晰一致
- 每个细节都经过精心打磨

---

7. 创意宣言

记住：Claude 能够创造非凡的创意作品。

不要保守。
展示当跳出框架思考、全力投入独特愿景时能真正创造什么。

每个设计都应该不同。
在亮色和暗色主题之间变化。
使用不同的字体。
采用不同的美学。

永远不要在不同项目中收敛到相同的选择。

---

8. 使用示例

8.1 触发方式

"帮我设计一个科技公司的着陆页"
"创建一个仪表板 UI"
"设计一个 React 组件库"
"美化这个表单"
"build a portfolio website"
"create a dark mode dashboard"

8.2 输出

功能完整的前端代码：HTML/CSS/JS、React 组件、Vue 组件等。

---

9. 本节小结

要点	说明
避免 AI 风格	不用 Inter/Roboto，不用紫色渐变
四问框架	目的、调性、约束、差异化
大胆选择	选择极端，精准执行
复杂度匹配	实现复杂度匹配美学愿景
每次不同	永不收敛到相同选择

---

返回：Skills 目录