🎯 设计工具与 Design System

设计工具全景：为什么设计不只是"画 UI"

很多开发者对"设计"的理解停留在"画个好看的界面"，但实际上在 SaaS 产品中，设计工具链解决的是三个核心问题：

2026 年的设计工具栈已经远超"画图软件"的范畴——它是一个从设计决策到代码实现的完整管道。

Figma — 设计协作的行业标准

是什么

Figma 是基于浏览器的协作式界面设计工具，几乎垄断了产品设计领域。它不只是"画图"，而是一个完整的设计操作系统——支持组件系统、自动布局、变体、设计 Token、原型交互、开发者交付，以及庞大的插件生态。

核心能力

Figma 开发者模式

2023 年推出的 Dev Mode 让开发者有独立的查看视角：

• 直接查看 CSS 属性（对应代码值）
• Inspect 元素的间距、颜色、字体
• 复制 Tailwind class 或 CSS 变量
• 标注开发状态（Ready for Dev / In Progress）
• 链接到 GitHub issue/PR

何时用 Figma

替代方案

Tailwind CSS — 实用优先的 CSS 框架

是什么

Tailwind CSS 是一个实用优先（Utility-First）的 CSS 框架，提供大量原子化的 CSS class（如 flex、pt-4、text-center、rotate-90），让你直接在 HTML 中组合样式，而不是写自定义 CSS。

在 2026 年，Tailwind 已经成为 SaaS 前端的事实标准——Next.js 官方模板默认 Tailwind，shadcn/ui 基于 Tailwind 构建，Vercel 生态全面拥抱。

核心哲学

核心特性

Design Token 集成

Tailwind 的 tailwind.config.js 就是 Design Token 的代码实现：

// tailwind.config.ts
import type { Config } from 'tailwindcss'

const config: Config = {
  theme: {
    extend: {
      colors: {
        // 与 Figma Variables 一一对应
        primary: {
          50:  '#eef2ff',
          100: '#e0e7ff',
          500: '#6366f1',
          600: '#4f46e5',
          700: '#4338ca',
          900: '#312e81',
        },
        surface: {
          DEFAULT: '#0a0b10',
          card:    '#13151e',
          hover:   '#1a1d2b',
        }
      },
      spacing: {
        // 8px 网格系统
        '18': '4.5rem',
        '88': '22rem',
      },
      borderRadius: {
        '4xl': '2rem',
      },
      fontSize: {
        '2xs': ['0.625rem', { lineHeight: '0.9rem' }],
      }
    }
  },
  plugins: [],
}
export default config

暗色模式

Tailwind 的 dark: 前缀让主题切换极其简单：

<!-- 自动适配暗色模式 -->
<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100">
  <h1 class="text-2xl font-bold">标题</h1>
  <p class="text-gray-500 dark:text-gray-400">描述文本</p>
</div>

策略选择：media（跟随系统）vs class（手动控制）。SaaS 产品推荐 class，因为需要用户主动切换。

响应式设计

<!-- Mobile-first 响应式 -->
<div class="
  grid grid-cols-1        /* 手机：单列 */
  md:grid-cols-2          /* 平板：双列 */
  lg:grid-cols-3          /* 桌面：三列 */
  gap-4 md:gap-6 lg:gap-8 /* 间距递增 */
">
  {items.map(item => <Card key={item.id} />)}
</div>

组件抽象模式

Tailwind 不是让你永远写原子 class，而是提供了正确的抽象层级：

// 1. 组件抽取（最常见）
function Button({ variant = 'primary', size = 'md', children }) {
  const base = 'inline-flex items-center justify-center rounded-lg font-medium transition-colors'
  const variants = {
    primary: 'bg-primary-600 text-white hover:bg-primary-700',
    secondary: 'bg-gray-100 text-gray-900 hover:bg-gray-200',
    ghost: 'text-gray-600 hover:bg-gray-100',
  }
  const sizes = {
    sm: 'h-8 px-3 text-sm',
    md: 'h-10 px-4 text-sm',
    lg: 'h-12 px-6 text-base',
  }
  return (
    <button className={`${base} ${variants[variant]} ${sizes[size]}`}>
      {children}
    </button>
  )
}

// 2. @apply（少用，仅用于无法组件化的场景）
// 在 CSS 文件中：
// .btn-primary { @apply bg-primary-600 text-white rounded-lg px-4 py-2; }

// 3. Tailwind Variants / cva（推荐，类型安全）
import { cva } from 'class-variance-authority'
const button = cva('inline-flex rounded-lg font-medium transition-colors', {
  variants: {
    variant: {
      primary: 'bg-primary-600 text-white hover:bg-primary-700',
      secondary: 'bg-gray-100 text-gray-900 hover:bg-gray-200',
    },
    size: {
      sm: 'h-8 px-3 text-sm',
      md: 'h-10 px-4 text-sm',
    }
  },
  defaultVariants: { variant: 'primary', size: 'md' }
})

何时用 Tailwind

替代方案对比

Design System — 从零构建可扩展的设计系统

是什么

Design System 不只是"组件库"——它是一套可复用的设计决策系统，包括 Token、组件、模式、文档、和使用指南。好的 Design System 让团队不再重复做设计决策，而是"用已有的决策组合新功能"。

Design System 的层次架构

Design Token 实战

Design Token 是 Design System 的核心，它是设计决策的变量化：

// tokens/color.ts — 颜色 Token
export const colors = {
  // 基础色板（来自 Figma Variables）
  slate: {
    50:  '#f8fafc', 100: '#f1f5f9', 200: '#e2e8f0',
    300: '#cbd5e1', 400: '#94a3b8', 500: '#64748b',
    600: '#475569', 700: '#334155', 800: '#1e293b',
    900: '#0f172a', 950: '#020617',
  },

  // 语义色（业务含义 > 色值本身）
  interactive: {
    default:  'slate.800',
    hover:    'slate.700',
    active:   'slate.900',
    disabled: 'slate.300',
  },
  feedback: {
    success: 'emerald.500',
    warning: 'amber.500',
    error:   'red.500',
    info:    'blue.500',
  },
} as const

// tokens/spacing.ts — 间距 Token
export const spacing = {
  0:  '0px',
  1:  '4px',   // 基本单位 4px
  2:  '8px',
  3:  '12px',
  4:  '16px',
  5:  '20px',
  6:  '24px',
  8:  '32px',
  10: '40px',
  12: '48px',
  16: '64px',
  20: '80px',
} as const

// tokens/typography.ts — 排版 Token
export const typography = {
  fontFamily: {
    sans: ['Inter', 'system-ui', 'sans-serif'],
    mono: ['JetBrains Mono', 'Fira Code', 'monospace'],
  },
  fontSize: {
    xs:   ['0.75rem',  { lineHeight: '1rem' }],
    sm:   ['0.875rem', { lineHeight: '1.25rem' }],
    base: ['1rem',     { lineHeight: '1.5rem' }],
    lg:   ['1.125rem', { lineHeight: '1.75rem' }],
    xl:   ['1.25rem',  { lineHeight: '1.75rem' }],
    '2xl': ['1.5rem',  { lineHeight: '2rem' }],
  },
  fontWeight: {
    normal: '400',
    medium: '500',
    semibold: '600',
    bold: '700',
  },
} as const

Token 到 CSS 的管道

// 使用 Style Dictionary 将 Token 转换为多平台输出
// config.json
{
  "source": ["tokens/**/*.ts"],
  "platforms": {
    "css": {
      "transformGroup": "css",
      "buildPath": "dist/css/",
      "files": [{
        "destination": "tokens.css",
        "format": "css/variables",
        "options": { "outputReferences": true }
      }]
    },
    "tailwind": {
      "transformGroup": "js",
      "buildPath": "dist/tailwind/",
      "files": [{
        "destination": "tokens.js",
        "format": "javascript/es6"
      }]
    },
    "ios": {
      "transformGroup": "ios-swift",
      "buildPath": "dist/ios/",
      "files": [{
        "destination": "DesignTokens.swift",
        "format": "ios-swift/class.swift"
      }]
    }
  }
}

组件文档模式

每个组件都需要文档，最佳实践是使用 Storybook + MDX：

// Button.stories.tsx
import type { Meta, StoryObj } from '@storybook/react'
import { Button } from './Button'

const meta: Meta<typeof Button> = {
  title: 'Components/Button',
  component: Button,
  tags: ['autodocs'],
  argTypes: {
    variant: {
      control: 'select',
      options: ['primary', 'secondary', 'ghost', 'danger'],
      description: '按钮变体',
      table: {
        defaultValue: { summary: 'primary' },
      },
    },
    size: {
      control: 'select',
      options: ['sm', 'md', 'lg'],
      description: '尺寸',
    },
  },
}

export default meta
type Story = StoryObj<typeof Button>

export const Primary: Story = {
  args: { variant: 'primary', children: '主要按钮' },
}

export const AllVariants: Story = {
  render: () => (
    <div className="flex gap-4">
      <Button variant="primary">Primary</Button>
      <Button variant="secondary">Secondary</Button>
      <Button variant="ghost">Ghost</Button>
      <Button variant="danger">Danger</Button>
    </div>
  ),
}

SaaS Design System Checklist

shadcn/ui — 组件即代码的新范式

是什么

shadcn/ui 不是传统的组件库——它不是一个 npm 包。它是一组可复制到项目中的高质量 React 组件代码，基于 Radix UI 原语 + Tailwind CSS + class-variance-authority 构建。你通过 CLI 拷贝组件到项目中，拥有完全控制权。

为什么 shadcn/ui 赢了

实战：用 shadcn/ui 构建组件

# 初始化
npx shadcn-ui@latest init

# 添加组件
npx shadcn-ui@latest add button
npx shadcn-ui@latest add dialog
npx shadcn-ui@latest add table
npx shadcn-ui@latest add form  # 包含 react-hook-form + zod 集成

# 生成的文件在 components/ui/ 下
# 你可以直接编辑它们！

// components/ui/button.tsx — shadcn/ui 生成的按钮组件
import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/lib/utils"

const buttonVariants = cva(
  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground hover:bg-primary/90",
        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
        ghost: "hover:bg-accent hover:text-accent-foreground",
        link: "text-primary underline-offset-4 hover:underline",
      },
      size: {
        default: "h-10 px-4 py-2",
        sm: "h-9 rounded-md px-3",
        lg: "h-11 rounded-md px-8",
        icon: "h-10 w-10",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
)

export interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {
  asChild?: boolean
}

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant, size, asChild = false, ...props }, ref) => {
    const Comp = asChild ? Slot : "button"
    return (
      <Comp
        className={cn(buttonVariants({ variant, size, className }))}
        ref={ref}
        {...props}
      />
    )
  }
)
Button.displayName = "Button"

export { Button, buttonVariants }

shadcn/ui 与其他组件库对比

图标与图片资源

图标方案

import { Settings, User, ChevronRight } from 'lucide-react'

function NavItem({ icon: Icon, label }) {
  return (
    <button className="flex items-center gap-2 px-3 py-2 hover:bg-gray-100 rounded-lg">
      <Icon className="h-4 w-4" />
      <span>{label}</span>
      <ChevronRight className="h-4 w-4 ml-auto text-gray-400" />
    </button>
  )
}

图标方案对比

图片与插画

AI 辅助设计：v0 / Galileo / Midjourney

v0 — Vercel 的 AI UI 生成器

v0.dev 可以通过自然语言描述生成 React + Tailwind + shadcn/ui 组件代码：

// Prompt: "创建一个 SaaS 定价卡片，包含三个等级：免费/专业/企业，专业版高亮推荐"

// v0 生成的代码（可直接使用）
function PricingCard() {
  return (
    <div className="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-5xl mx-auto">
      {plans.map((plan) => (
        <div key={plan.name} className={cn(
          "rounded-xl border p-6",
          plan.featured
            ? "border-primary bg-primary/5 ring-2 ring-primary"
            : "border-border bg-card"
        )}>
          {plan.featured && (
            <Badge className="mb-4">推荐</Badge>
          )}
          <h3 className="text-xl font-bold">{plan.name}</h3>
          <div className="mt-4">
            <span className="text-4xl font-bold">¥{plan.price}</span>
            {plan.price > 0 && <span className="text-muted-foreground">/月</span>}
          </div>
          <Button className="w-full mt-6" variant={plan.featured ? "default" : "outline"}>
            {plan.price === 0 ? "免费开始" : "立即订阅"}
          </Button>
          <ul className="mt-6 space-y-3">
            {plan.features.map((f) => (
              <li key={f} className="flex items-center gap-2 text-sm">
                <Check className="h-4 w-4 text-primary" /> {f}
              </li>
            ))}
          </ul>
        </div>
      ))}
    </div>
  )
}

AI 设计工具对比

设计到开发的工作流

理想工作流

小团队捷径：Code-First 设计

没有专职设计师？跳过 Figma，直接用代码设计：

// 1. 用 shadcn/ui 组装页面
// 2. 用 Tailwind 实时调整样式
// 3. 用 Storybook 做组件文档
// 4. 用 v0 生成初始结构

// 示例：10 分钟搭出 Dashboard 骨架
export default function Dashboard() {
  return (
    <div className="flex h-screen">
      {/* 侧边栏 */}
      <aside className="w-64 border-r bg-card p-4">
        <div className="flex items-center gap-2 mb-8">
          <Logo className="h-8 w-8" />
          <span className="font-bold text-lg">MySaaS</span>
        </div>
        <nav className="space-y-1">
          {navItems.map(item => (
            <NavItem key={item.href} {...item} />
          ))}
        </nav>
      </aside>

      {/* 主内容 */}
      <main className="flex-1 overflow-auto">
        <header className="border-b px-6 py-4 flex items-center justify-between">
          <h1 className="text-xl font-bold">概览</h1>
          <div className="flex items-center gap-4">
            <Button variant="outline" size="sm">导出</Button>
            <Avatar><AvatarImage src={user.avatar} /></Avatar>
          </div>
        </header>
        <div className="p-6">
          {/* 统计卡片 */}
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
            <StatCard title="收入" value="¥128,400" change={+12.5} />
            <StatCard title="用户" value="2,847" change={+8.2} />
            <StatCard title="转化率" value="3.24%" change={-0.8} />
          </div>
          {/* 图表区域 */}
          <Card>
            <CardHeader>
              <CardTitle>收入趋势</CardTitle>
            </CardHeader>
            <CardContent>
              <RevenueChart />
            </CardContent>
          </Card>
        </div>
      </main>
    </div>
  )
}

视觉回归测试

// 使用 Playwright 做组件截图对比
import { test, expect } from '@playwright/test'

test('PricingCard 视觉回归', async ({ page }) => {
  await page.goto('/components/pricing-card')
  const card = page.locator('[data-testid="pricing-card"]')
  await expect(card).toHaveScreenshot('pricing-card.png', {
    maxDiffPixelRatio: 0.01, // 允许 1% 像素差异
  })
})

// CI 中自动运行
// .github/workflows/visual.yml
// on: [pull_request]
// jobs:
//   visual:
//     runs-on: ubuntu-latest
//     steps:
//       - uses: actions/checkout@v4
//       - run: npm ci && npx playwright install
//       - run: npx playwright test --update-snapshots
//       - uses: actions/upload-artifact@v4  # 失败时上传 diff

工具对比与选型

按团队阶段选型

推荐：Code-First 设计
├── Tailwind CSS + shadcn/ui（直接在代码中设计）
├── v0.dev（AI 生成初始布局）
├── Excalidraw（快速线框图）
├── Lucide Icons
└── 跳过 Figma

推荐：Figma + Code 双轨
├── Figma（设计稿 + 组件库 + Dev Mode 交付）
├── Tailwind CSS + shadcn/ui（代码实现）
├── Figma Variables → Style Dictionary → Tailwind Config
├── Storybook（组件文档 + 视觉回归）
└── Chromatic（自动化视觉测试）

推荐：完整 Design System 管道
├── Figma Enterprise（分支、团队库、分析）
├── Design Token Pipeline（Figma → Style Dictionary → 多平台）
├── Storybook + Chromatic（文档 + 回归）
├── 自建组件库（基于 Radix + Tailwind + CVA）
├── Figma Plugin 自动同步 Token
└── 专职 Design System 团队维护

完整工具矩阵

常见坑与反模式

延伸阅读与链接