Frontend Design Pro — 专业前端设计技能包

概述

Frontend Design Pro 解决的是 AI 生成前端代码最普遍的痛点：能用，但不好看；能跑，但没质感。 大多数 AI 生成的 UI 都堆砌着默认的 Tailwind 类名、缺乏视觉层次、间距随意、动画缺失。本技能将专业设计师的审美判断和工程团队的设计规范编码为可执行指令，让 WorkBuddy 产出的前端代码达到产品级视觉水准。

这不是模板套用，而是设计系统的强制执行——从色彩理论、排版节奏、间距系统到微交互，每个细节都有据可依。

设计原则

原则一：视觉层次优先

好的 UI 第一眼就能让用户知道"看哪里"。WorkBuddy 生成代码时遵循：

• 大小对比：标题比正文大 2-3 倍，主操作按钮比次操作明显
• 色彩对比：关键信息高对比度，次要信息降低饱和度
• 空间呼吸：重要元素周围留更多空白，引导视觉焦点
• 权重区分：使用 font-weight 而非仅靠颜色区分层级

// ✅ 好的视觉层次
<div className="space-y-6">
  <h1 className="text-4xl font-bold tracking-tight text-gray-900">
    用户管理
  </h1>
  <p className="text-base text-gray-500">
    管理团队成员权限和角色配置
  </p>
</div>

// ❌ AI 默认的平庸写法
<div>
  <h1 style={{fontSize: "20px"}}>用户管理</h1>
  <p>管理团队成员权限和角色配置</p>
</div>

原则二：间距系统化

绝不使用随意的 margin/padding 值。一切间距基于 8px 基准网格：

原则三：色彩语义化

颜色不只是"好看"，而是承担信息传递功能：

• 主色：品牌色，用于主操作按钮、激活状态、Logo
• 语义色：success（绿）、warning（橙）、error（红）、info（蓝）
• 中性色阶：gray-50 到 gray-900，用于背景、文字、边框
• 禁用纯黑纯白：用 gray-900 替代 black，gray-50 替代 white

原则四：一致性高于创意

在同一个项目中，相似的功能必须使用相似的视觉模式。WorkBuddy 会：

• 识别项目中已有的组件模式并保持一致
• 同类操作按钮使用相同的视觉风格
• 表单输入框统一圆角、边框、聚焦样式

组件模式

按钮系统

// 主操作按钮 — 用于页面最重要的操作
<button className="
  inline-flex items-center justify-center gap-2
  rounded-lg bg-blue-600 px-4 py-2.5
  text-sm font-semibold text-white
  shadow-sm transition-all
  hover:bg-blue-700 hover:shadow-md
  focus-visible:outline focus-visible:outline-2
  focus-visible:outline-offset-2 focus-visible:outline-blue-600
  active:scale-[0.98]
  disabled:opacity-50 disabled:pointer-events-none
">
  创建项目
</button>

// 次操作按钮 — 用于辅助操作
<button className="
  inline-flex items-center justify-center gap-2
  rounded-lg border border-gray-300 bg-white px-4 py-2.5
  text-sm font-medium text-gray-700
  shadow-sm transition-all
  hover:bg-gray-50 hover:border-gray-400
  focus-visible:outline focus-visible:outline-2
  focus-visible:outline-offset-2 focus-visible:outline-blue-600
  active:scale-[0.98]
">
  取消
</button>

// 危险操作按钮
<button className="
  inline-flex items-center justify-center gap-2
  rounded-lg bg-red-600 px-4 py-2.5
  text-sm font-semibold text-white
  transition-all hover:bg-red-700
  active:scale-[0.98]
">
  删除
</button>

卡片模式

<div className="
  rounded-xl border border-gray-200 bg-white
  shadow-sm transition-shadow hover:shadow-md
">
  <div className="p-6">
    <div className="flex items-center justify-between">
      <h3 className="text-lg font-semibold text-gray-900">
        {title}
      </h3>
      <span className="rounded-full bg-blue-50 px-2.5 py-0.5
        text-xs font-medium text-blue-700">
        {badge}
      </span>
    </div>
    <p className="mt-2 text-sm text-gray-500">
      {description}
    </p>
  </div>
  <div className="border-t border-gray-100 bg-gray-50 px-6 py-3">
    {actions}
  </div>
</div>

表单输入

<div className="space-y-1.5">
  <label className="block text-sm font-medium text-gray-700">
    邮箱地址
    <span className="ml-0.5 text-red-500">*</span>
  </label>
  <input
    type="email"
    className="
      block w-full rounded-lg border border-gray-300
      bg-white px-3.5 py-2.5 text-sm text-gray-900
      placeholder:text-gray-400
      transition-colors
      focus:border-blue-500 focus:outline-none
      focus:ring-2 focus:ring-blue-500/20
      disabled:bg-gray-50 disabled:text-gray-400
    "
    placeholder="you@example.com"
  />
  <p className="text-xs text-gray-400">
    我们不会泄露你的邮箱地址
  </p>
</div>

数据表格

<div className="overflow-hidden rounded-xl border border-gray-200">
  <table className="w-full">
    <thead className="bg-gray-50">
      <tr>
        <th className="px-6 py-3 text-left text-xs font-semibold
          uppercase tracking-wider text-gray-500">
          名称
        </th>
        <th className="px-6 py-3 text-left text-xs font-semibold
          uppercase tracking-wider text-gray-500">
          状态
        </th>
      </tr>
    </thead>
    <tbody className="divide-y divide-gray-100 bg-white">
      {rows.map(row => (
        <tr className="transition-colors hover:bg-gray-50">
          <td className="px-6 py-4 text-sm text-gray-900">
            {row.name}
          </td>
          <td className="px-6 py-4">
            <StatusBadge status={row.status} />
          </td>
        </tr>
      ))}
    </tbody>
  </table>
</div>

设计系统

排版系统

圆角系统

阴影系统

/* 微妙阴影 — 默认状态 */
shadow-sm  /* 0 1px 2px rgba(0,0,0,0.05) */

/* 标准阴影 — 卡片 */
shadow     /* 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06) */

/* 突出阴影 — 悬停状态 */
shadow-md  /* 0 4px 6px rgba(0,0,0,0.1) */

/* 漂浮阴影 — 模态框/下拉菜单 */
shadow-lg  /* 0 10px 15px rgba(0,0,0,0.1) */

响应式与无障碍

响应式断点策略

WorkBuddy 生成代码时遵循 移动优先 原则：

// 从小屏幕开始设计，逐步增强
<div className="
  grid grid-cols-1          /* 移动端：单列 */
  sm:grid-cols-2            /* 平板：双列 */
  lg:grid-cols-3            /* 桌面：三列 */
  xl:grid-cols-4            /* 大屏：四列 */
  gap-4 sm:gap-6
">
  {items.map(item => <Card {...item} />)}
</div>

断点参考：

无障碍标准（a11y）

每个生成的组件必须满足 WCAG 2.1 AA 级标准：

颜色对比度：
- 正文文字与背景对比度 ≥ 4.5:1
- 大文字（18px+）对比度 ≥ 3:1
- 交互元素边框对比度 ≥ 3:1

键盘导航：

// 所有交互元素必须支持键盘操作
<button
  className="... focus-visible:outline focus-visible:outline-2
    focus-visible:outline-offset-2 focus-visible:outline-blue-600"
  onKeyDown={handleKeyDown}
>

语义化 HTML：
- 使用 <nav>, <main>, <article>, <section> 而非全部 <div>
- 表单使用 <label> 关联 <input>
- 图片提供 alt 属性
- 图标按钮提供 aria-label

焦点管理：
- 模态框打开时焦点移入，关闭时返回触发元素
- tabindex 顺序与视觉顺序一致
- 使用 :focus-visible 而非 :focus 避免鼠标点击时的焦点环

动画指南

动画原则

• 目的性：每个动画都要有明确目的（反馈、引导、过渡），不要为了动画而动画
• 时长：微交互 150-200ms，过渡 200-300ms，页面转场 300-500ms
• 缓动函数：优先使用 ease-out（元素进入）和 ease-in（元素离开）

常用动画模式

// 悬停反馈 — 按钮按下效果
className="transition-all active:scale-[0.98]"

// 卡片悬停浮起
className="transition-shadow hover:shadow-md"

// 列表项淡入
<div className="
  animate-in fade-in slide-in-from-bottom-2
  duration-300 ease-out
">

// 模态框出现
<div className="
  animate-in fade-in zoom-in-95
  duration-200 ease-out
">

// 加载骨架屏
<div className="animate-pulse rounded-lg bg-gray-200" />

工作流模式

工作流一：页面级 UI 生成

1. "帮我设计一个用户管理页面"
   → WorkBuddy 自动规划布局结构
   → 选择合适的组件模式组合
   → 应用设计系统的间距、排版、色彩规范
   → 生成完整的响应式代码

工作流二：组件库建设

1. "为我们的设计系统创建一套按钮组件"
   → 生成主操作、次操作、危险、幽灵四种变体
   → 包含 size 变体（sm/md/lg）
   → 自动处理 disabled/loading 状态
   → 生成对应的 Storybook stories

工作流三：UI 优化

1. "优化这个表单的视觉设计"
   → 分析现有代码的视觉问题
   → 应用间距系统和排版系统
   → 添加聚焦状态和过渡动画
   → 补充无障碍属性

常见问题

Q: 生成的代码依赖哪些库？

A: 默认使用 Tailwind CSS。如果项目使用其他 CSS 方案（styled-components、CSS Modules、UnoCSS），告知 WorkBuddy 后会自动适配。组件层面默认 React，也支持 Vue 和 Svelte。

Q: 如何与现有的设计系统共存？

A: 在项目根目录放置 design-tokens.json 或 .frontend-design-pro.yaml，WorkBuddy 会读取你的设计令牌（主色、间距基准、圆角等）并优先使用你的规范覆盖默认值。

Q: 支持深色模式吗？

A: 支持。所有生成的组件自动包含深色模式变体（dark: 前缀），并提供深色模式色彩映射建议。

Q: 生成的前端代码能直接用于生产环境吗？

A: 可以。Frontend Design Pro 的目标是产出接近生产水准的代码，但建议在上线前进行人工 Review，特别是复杂交互和业务逻辑部分。

Frontend Design Pro — 让 AI 生成的前端代码，从"能跑"到"好看"。