# Wk Frontend Design

> 打造具有高设计质量的独特生产级前端界面。当用户要求构建网页组件、页面、工件、海报或应用程序时（例如网站、着陆页、仪表盘、React 组件、HTML/CSS 布局，或在设计/美化任何网页 UI 时），请使用此技能。生成富有创意、精致的代码和界面设计，避免了千篇一律的 AI 美学。

- Skill: `wukongnotnull/wk-frontend-design` (Agent Skill, multi-file: 4 files)
- Install (CLI): `npx skillmds@latest add wukongnotnull/wk-frontend-design`
- Raw SKILL.md: https://api.skillmd.com/api/skills/wukongnotnull/wk-frontend-design/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- License: Complete terms in LICENSE.txt
- Author: wukongnotnull (https://skillmd.com/u/wukongnotnull)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/wukongnotnull/wk-frontend-design

---


这项技能指导创建独特的生产级前端界面，避免泛泛的“AI 粗糙”美学。实现真正可操作的代码，并特别注重美学细节和创意选择。

用户提供前端需求：组件、页面、应用程序或用于构建的界面。它们可能包括关于目的、受众或技术限制的背景信息。

## 设计流程

第一步：在编程之前，先了解背景，设计出具有美学风格的界面：

* **目的** ：这个界面解决了什么问题？谁会用？
* **基调** ：选择极端：极简、极繁混乱、复古未来主义、有机/自然、奢华/精致、俏皮/玩具、时尚/杂志、野兽派/原始、装饰艺术/几何、柔和/粉彩、工业/实用等。口味选择非常多。用这些作为灵感，但设计一个忠于美学方向的作品。选择基调后，必须先输出三个关键词对（例如：高对比度+极细线条、半透明磨砂+流体梯度）。
* **限制条件** ：技术要求（框架、性能、可访问性）。
* **差异化** ：是什么让它令人难忘？用户会记住的那个点是什么？

**关键** ：选择一个清晰的概念方向并精准执行。大胆的繁复主义和精致的极简主义同样有效——关键在于意图感，而非强度。

第二步：实现具备以下特性的运行代码（HTML/CSS/JS, React, Vue ，Angularjs等）：

* 生产级别且功能完备。

* 视觉冲击力强且令人难忘。

* 具有清晰审美观的凝聚力。

* 每一个细节都经过精心打磨。


## 前端审美指南

### 重点关注

* **字体排版** ：选择美观、独特且有趣的字体。避免使用如 Arial 和 Inter 等这样的通用字体，转而选择能提升前端审美的特色字体；使用出人意料且充满个性的字体组合。尝试将独特的展示字体与精致正文字体搭配使用。

* **色彩与主题** ：致力于一致的审美。使用 CSS 变量确保一致性。主色调配合锐利的强调色，效果远优于平庸且分布均匀的调色板。

* **动画特效（Animation/Motion）** ：使用动画处理特效和微观交互。HTML 优先使用纯 CSS 方案；React 可用时使用 Motion 库。一个编排良好的、带有交错揭示效果（animation-delay）的页面加载过程，比零散的微交互更能带来愉悦感。使用能带来惊喜的滚动触发和悬停状态。在动画特效部分，加入对“质量（Mass）”和“阻尼（Damping）”的考虑，以提升动画的物理感和真实感。

* **空间构图** ：具有出人意料的布局。不对称感、重叠、对角线流动、打破网格的元素。大面积的留白或受控的密度。

* **背景与视觉细节：** ：创造氛围和深度，而非默认使用纯色。添加与整体审美相匹配的情境效果和纹理。应用创意形式，如渐变网格（Gradient Meshes）、噪点纹理、几何图案、分层透明、戏剧性阴影、装饰性边框、自定义光标和颗粒感叠加。


### 严禁行为
严禁使用通用的 AI 生成审美，例如：过度使用的字体族（Inter, Roboto, Arial, 系统字体）、陈词滥调的配色方案（尤其是白色背景上的紫色渐变）、可预测的布局和组件模式，以及缺乏特定情境特征的流水线式设计。

有创意地解读，做出真正为情境设计的意想不到的选择。确保设计百花齐放。在深色和浅色主题、不同字体、不同审美之间切换。绝不要在多代交互中趋同于常规选择（例如 Space Grotesk 字体）。

### 重要提示
将实现的复杂度与审美视觉相匹配。繁复主义设计需要包含大量动画和特效的复杂代码；极简或精致的设计则需要克制、精准，并对间距、排版和微妙细节保持高度关注。优雅源于对视觉愿景的完美执行。

### 必须记住
你有能力创作出非凡的创意作品。不要有所保留，展现出打破常规、追求独特视觉的真实作品。


## 自查审计
在交付前，务必进行彻底的自查审计，确保代码和设计符合以下标准：
- 生产级别且功能完备
- 视觉冲击力强且令人难忘
- 具有清晰审美观的凝聚力
- 每一个细节都经过精心打磨
- 字体选择独特且有趣，避免通用字体
- 色彩方案符合一致的审美，使用 CSS 变量确保一致性
- 动画特效编排良好，带有交错揭示效果
- 布局具有出人意料的空间构图
- 背景与视觉细节创造氛围和深度  


## 实践示例
### 推荐字体组合

**展示字体（Headlines）** — 用于标题和大字，强调个性与视觉冲击力：
- `Playfair Display` — 经典衬线，优雅奢华
- `Cormorant Garamond` — 纤细衬线，文学气质
- `Bebas Neue` — 粗壮无衬线，力量感
- `Abril Fatface` — 装饰性衬线，戏剧张力
- `Space Grotesk` — 几何无衬线，现代科技（避免与正文搭配）
- `Syne` — 前卫几何，独特个性
- `Clash Display` — 超大显示，极端视觉

**正文字体（Body）** — 用于段落和说明文字，强调可读性：
- `Source Serif 4` — 现代衬线，屏幕优化
- `Libre Baskerville` — 经典衬线，权威感
- `Crimson Pro` — 文艺复兴风格衬线
- `DM Sans` — 几何无衬线，干净利落
- `Plus Jakarta Sans` — 当代几何，功能性

**等宽字体（Monospace）** — 用于代码和数据：
- `JetBrains Mono` — 编程首选
- `Fira Code` — 连字支持
- `IBM Plex Mono` — 工业美学

### 字体使用法则

1. **永远不要**使用 Arial、Roboto、Inter、系统默认字体作为主要展示字体
2. 展示字体与正文字体搭配时，类型反差越大越有趣（如衬线标题 + 无衬线正文）
3. 一个页面最多使用 2 种展示字体、1-2 种正文字体
4. 字体大小层级建议：Display 48-96px → H1 32-48px → H2 24-32px → H3 18-24px → Body 14-18px → Small 12px

## 配色方法论

### 60-30-10 法则
- **主色（60%）**：背景和大面积色块
- **辅助色（30%）**：次要元素、卡片、侧边栏
- **强调色（10%）**：按钮、链接、关键数据

### 配色策略

| 策略 | 适用场景 | 示例 |
|------|----------|------|
| 单色系 | 极简、专业、数据仪表盘 | 不同明度的蓝色 |
| 互补色 | 需要吸引注意力、活泼 | 蓝 + 橙 |
| 类比色 | 和谐、自然、品牌感 | 绿 + 青 + 蓝 |
| 冷暖对比 | 戏剧性、情感表达 | 暖橙 + 冷紫 |

### 深色/浅色主题切换

```css
/* 推荐使用 CSS 变量实现主题切换 */
:root {
  --bg-primary: #ffffff;
  --bg-secondary: #f5f5f5;
  --text-primary: #1a1a1a;
  --accent: #6366f1;
}

[data-theme="dark"] {
  --bg-primary: #0a0a0a;
  --bg-secondary: #171717;
  --text-primary: #fafafa;
  --accent: #818cf8;
}
```

## 动画规范

### 时长指南
- **微交互（hover、toggle）**：100-200ms
- **UI 反馈（按钮点击、菜单展开）**：200-300ms
- **页面过渡、模态框**：300-400ms
- **滚动触发动画**：400-600ms
- **进入/退出动画**：300-500ms

### 缓动函数选择
```css
ease-out  /* 自然减速，适合大多数进入动画 */
ease-in   /* 自然加速，适合退出动画 */
ease-in-out /* 对称运动，适合模态框 */
cubic-bezier(0.34, 1.56, 0.64, 1) /* 弹性回弹，适合按钮点击 */
```

### 动画编排原则
- 多个元素进入时使用 **stagger（交错）**，间隔 50-100ms
- 优先使用 CSS `@keyframes`，复杂交互使用 Motion.js（React）或 GSAP
- 滚动触发动画使用 Intersection Observer 或 AOS 


## 好与坏的代码对比

### 字体选择

❌ **糟糕的做法** — 使用通用字体，缺乏个性：
```html
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
<h1 style="font-family: 'Inter', sans-serif;">Welcome</h1>
```

✅ **优秀的做法** — 展示字体与正文字体形成对比：
```html
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=DM+Sans:wght@400;500&display=swap" rel="stylesheet">
<h1 style="font-family: 'Playfair Display', serif; font-weight: 700;">Welcome</h1>
<p style="font-family: 'DM Sans', sans-serif;">A sophisticated reading experience.</p>
```

### 配色方案

❌ **糟糕的做法** — 均匀分布的平淡配色：
```css
/* 缺乏层次和视觉焦点 */
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
button { background: #764ba2; }
```

✅ **优秀的做法** — 60-30-10 法则，锐利对比：
```css
:root {
  --bg-primary: #0f0f0f;
  --bg-secondary: #1a1a1a;
  --accent: #f59e0b;      /* 琥珀色强调 */
  --accent-secondary: #fbbf24;
}
button {
  background: var(--accent);
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.4);
}
```

### 动画效果

❌ **糟糕的做法** — 零散、无编排的微交互：
```css
button:hover { transform: scale(1.05); }
.card:hover { opacity: 0.9; }
```

✅ **优秀的做法** — 精心编排的进入动画：
```css
.hero-title {
  animation: fadeInUp 0.6s ease-out forwards;
}
.hero-subtitle {
  animation: fadeInUp 0.6s ease-out 0.15s forwards; /* 交错延迟 */
  opacity: 0;
}
.hero-cta {
  animation: fadeInUp 0.6s ease-out 0.3s forwards;
  opacity: 0;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
```

### 空间与布局

❌ **糟糕的做法** — 对称均匀，缺乏张力：
```html
<div style="display: flex; justify-content: space-between;">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>
```

✅ **优秀的做法** — 不对称布局，重叠层次：
```html
<header class="hero">
  <h1 class="hero-title">DISRUPT</h1>
  <div class="hero-image" style="transform: translateY(40px);"></div>
  <p class="hero-tagline" style="margin-top: -20px;">打破常规</p>
</header>
```

## 输出规范

### 代码交付要求

1. **文件结构**（以 React 项目为例）：
```
/components
  /Button
    Button.tsx
    Button.css
  /Card
    Card.tsx
    Card.css
```

2. **框架选择**：根据用户需求选择，默认优先使用：
   - React + CSS Modules / Tailwind
   - Vue 3 + Composition API
   - 纯 HTML/CSS/JS（简单需求）

3. **TypeScript**：默认使用，提供完整类型定义

4. **响应式要求**：
   - Mobile: 320px - 767px
   - Tablet: 768px - 1023px
   - Desktop: 1024px+

5. **可访问性标准（WCAG 2.1 AA）**：
   - 颜色对比度 ≥ 4.5:1（正文）、≥ 3:1（大文本）
   - 所有交互元素可通过键盘访问
   - 提供适当的 ARIA 标签

6. **性能目标**：
   - 首屏加载 < 3s（3G 网络）
   - Lighthouse 性能分数 ≥ 90

### 设计系统检查清单

交付前确认以下要素：
- [ ] 字体层级清晰，主次分明
- [ ] 配色符合 60-30-10 法则
- [ ] 动画时长和缓动符合规范
- [ ] 深色/浅色主题已实现
- [ ] 响应式布局完整
- [ ] 可访问性要求满足
- [ ] 无通用 AI 审美痕迹

### 严禁行为

以下模式是已知的"AI 粗糙美学"特征，**严禁**在代码中出现：

| 类别 | 禁止模式 | 替代方案 |
|------|----------|----------|
| 字体 | Inter/Roboto/Arial/system-ui 作为展示字体 | 上文字体推荐清单 |
| 配色 | 白色背景 + 紫色渐变 | 60-30-10 法则 |
| 布局 | 完全对称的 Flex 均匀分布 | 不对称、重叠、打破网格 |
| 动画 | 单一元素简单 hover 缩放 | 交错编排的进入/退出动画 |
| 阴影 | 平庸的 `box-shadow: 0 2px 5px rgba(0,0,0,0.1)` | 戏剧性阴影、渐变光晕 |

### 关键原则

设计能力的体现不在于使用多少特效，而在于**克制的精准**：
- 极简设计需要对间距、排版、细节的极致关注
- 繁复设计需要对层次、节奏、统一性的严格把控
- 优雅源于对视觉愿景的完美执行，而非元素的堆砌