前端设计不仅仅是让页面"好看"，更是让用户能用得舒心。本文将带你了解前端设计的核心概念、常用框架、以及 Claude Code frontend-design skill 的使用方法。

一、什么是 frontend-design skill？

frontend-design 是 Claude Code 的官方技能，专门用于生成独特、生产级的前端界面。它能帮助：

• 构建 Web 组件、页面或应用
• 生成创意十足、精细的代码
• 避免"AI slop"（通用的 AI 美学）

安装方法

/plugin marketplace add anthropics/frontend-design
/plugin install frontend-design

或直接在插件市场搜索 “frontend-design” 安装。

二、设计思维

在使用 frontend-design 之前，需要明确以下要素：

1. 目的（Purpose）

这个界面解决什么问题？谁是用户？

2. 风格（Tone）

选择一个极端的风格方向：

• 极致简约 - brutalist / 极简主义
• 奢华精致 - luxury / refined
• 复古未来 - retro-futuristic
• 有机自然 - organic / natural
• 活泼俏皮 - playful / toy-like
• 杂志风格 - editorial / magazine
• 艺术装饰 - art deco / geometric
• 粉彩柔和 - soft / pastel
• 工业实用 - industrial / utilitarian

3. 约束（Constraints）

技术要求（框架、性能、无障碍访问）。

4. 差异化（Differentiation）

什么是让用户记住的亮点？

关键：选择一个清晰的概念方向，精确执行。

三、前端美学指南

1. 字体排版

• ❌ 避免：Inter、Arial、Roboto、系统默认字体
• ✅ 推荐：独特的显示字体 + 精致的正文字体

2. 颜色与主题

• 使用 CSS 变量保持一致性
• 主色 + 锐利的强调色

3. 动画

• 优先使用 CSS 解决方案
• 精心编排的页面加载动画
• 悬停状态带来惊喜

4. 空间布局

• 不对称、重叠、对角线流动
• 打破网格、留白

5. 背景与视觉细节

• 渐变网格、噪点纹理
• 几何图案、戏剧性阴影

❌ 避免

• 滥用字体（Inter、Roboto）
• 紫色渐变 + 白色背景
• 缺乏特性的设计

四、使用方法

基本使用

claude
# 然后描述需求
创建一个登录页面，风格：极简奢华，用户：设计师

指定风格

做一个数据分析仪表板，风格：赛博朋克

五、实战示例

示例 1：登录页面

创建一个登录页面：
- 风格：极致简约，黑色白色为主
- 用户：创意设计师
- 特点：有一个令人惊喜的交互动画
使用 React + CSS Modules

示例 2：仪表板

创建一个数据监控仪表板：
- 风格：赛博朋克，深色主题 + 霓虹色
- 功能：显示服务器指标、实时图表

示例 3：博客卡片

创建一个博客卡片组件：
- 风格：杂志风格，大胆的排版
- 悬停效果：优雅的放大动画

六、常见问题

Q1：生成的代码太普通怎么办？ A：更具体地描述风格方向，提供参考案例。

Q2：如何选择字体？ A：使用 Google Fonts，选择有特色的字体组合。

Q3：动画太多影响性能？ A：优先使用 CSS 动画，用 will-change 优化。

七、总结

frontend-design skill 的核心：

1. 避免 generic - 不做"AI 标准件"
2. 风格明确 - 选择方向并执行彻底
3. 生产级 - 生成真正可用的代码
4. 注重细节 - 每个细节都精心设计

记住：当你跳出框框思考并完全投入独特愿景时，Claude 能创造真正非凡的作品。

如果你经常感觉生成的代码"太普通"、“像 AI 生成的”，试试 frontend-design skill。

什么是前端设计？

前端设计（Frontend Design）涵盖了你与 Web 应用交互时看到和操作的一切。它包括：

• UI 设计（用户界面）- 视觉元素、布局、颜色
• UX 设计（用户体验）- 交互流程、操作体验
• 响应式设计 - 适配不同设备

前端设计核心原则

1. 一致性

保持视觉和交互的一致性：

• 相同的按钮样式在类似场景中保持一致
• 相同的交互行为（如点击反馈）
• 统一的颜色体系和字体

2. 层次分明

通过视觉层次引导用户注意力：

• 重要信息使用更大字体或更醒目的颜色
• 相关内容分组显示
• 使用留白分隔不同内容区块

3. 反馈及时

每个操作都应有明确的反馈：

• 按钮点击效果
• 加载状态提示
• 操作成功/失败提示

4. 简洁直观

减少用户的认知负担：

• 不必要的元素不显示
• 操作路径尽可能短
• 使用直观的图标和文字

常用前端框架

CSS 框架

UI 组件库

JS 框架

响应式设计

移动优先策略

/* 基础样式（移动端） */
.card {
  padding: 16px;
}

/* 平板及以上 */
@media (min-width: 768px) {
  .card {
    padding: 24px;
  }
}

/* 桌面端 */
@media (min-width: 1024px) {
  .card {
    padding: 32px;
    max-width: 1200px;
  }
}

常用断点

设计系统

什么是设计系统？

设计系统是一套完整的设计规范，包含：

• 设计令牌 - 颜色、间距、字体
• 组件 - 按钮、输入框、卡片
• 模式 - 常见交互模式

设计令牌示例

:root {
  /* 颜色 */
  --color-primary: #3b82f6;
  --color-success: #22c55e;
  --color-warning: #f59e0b;
  --color-error: #ef4444;
  
  /* 间距 */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  
  /* 圆角 */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;
  
  /* 字体 */
  --font-sans: system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, monospace;
}

组件规范示例

按钮组件：

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-md);
  font-weight: 500;
  transition: all 0.2s ease;
}

.btn-primary {
  background: var(--color-primary);
  color: white;
}

.btn-primary:hover {
  background: #2563eb;
}

.btn-primary:active {
  transform: scale(0.98);
}

颜色搭配

颜色功能

实用工具

• Color Palette Generator
• Tailwind Colors
• Open Color

字体排版

字体选择原则

1. 易读性 - 选择清晰易读的字体
2. 匹配度 - 与品牌调性匹配
3. 加载速度 - 优先使用系统字体或性能优化的 web 字体

推荐字体组合

现代简洁：

• 标题：Inter / SF Pro Display
• 正文：Inter / SF Pro Text

正式商务：

• 标题：Playfair Display
• 正文：Source Serif Pro

技术风格：

• 等宽字体：JetBrains Mono / Fira Code

字号规范

:root {
  --font-xs: 0.75rem;    /* 12px */
  --font-sm: 0.875rem;  /* 14px */
  --font-base: 1rem;    /* 16px */
  --font-lg: 1.125rem;  /* 18px */
  --font-xl: 1.25rem;  /* 20px */
  --font-2xl: 1.5rem; /* 24px */
  --font-3xl: 1.875rem; /* 30px */
  --font-4xl: 2.25rem; /* 36px */
}

常见设计模式

1. 卡片布局

function Card({ title, content, footer }) {
  return (
    <div class="card">
      <div class="card-header">{title}</div>
      <div class="card-body">{content}</div>
      {footer && <div class="card-footer">{footer}</div>}
    </div>
  );
}

2. 列表视图

• 简洁的列表项设计
• 悬停效果
• 操作按钮（编辑、删除）

3. 表单布局

• 标签对齐（上方/左侧）
• 错误提示位置
• 必填标识

4. 导航设计

• 顶部导航 - 适用于中后台
• 侧边导航 - 适用于管理后台
• 底部导航 - 适用于移动端

常用工具

设计工具

开发工具

资源

前端设计检查清单

上线前检查

• 响应式布局正常（移动端、平板、桌面）
• 所有交互有反馈（点击、加载、成功/失败）
• 颜色对比度符合 WCAG 标准
• 字体大小合适（最小 12px）
• 按钮可点击区域足够大（至少 44px）
• 表单验证提示清晰
• 加载状态显示
• 错误边界处理
• 暗色模式支持（可选）

总结

好的前端设计不是一蹴而就的，需要：

1. 理解用户 - 他们如何使用你的产品
2. 保持一致 - 统一的视觉和交互
3. 注重细节 - 反馈、状态、边界情况
4. 持续优化 - 根据用户反馈改进

记住：最好的设计是让用户感受不到设计的存在，用户能顺畅完成任务，就是好的设计。