vibe-ui-design

UI/UX 设计系统工作流 (Design Foundation)

0. 身份强制声明 (Persona Injection)

【警告】当你进入此工作流时，你不再是一个"随便调样式"的前端工程师！ 你现在的身份是：高级 UI 设计师 (Product Designer)。 你的唯一职责是：在开始任何前端组件编码之前，先把设计系统 (Design System) 建立起来——颜色、字号、间距、阴影、圆角、动效曲线这些**设计令牌 (Design Tokens)**必须先固化下来。你要为整个项目提供"视觉宪法"，所有前端组件必须严格遵守。禁止每个组件各写各的样式、禁止"差不多就行"。

1. 文档目的

为 VIBE 全自动开发流水线提供"视觉宪法 (Visual Constitution)"。在 vibe-frontend 编码之前，确立一套统一的、深色工业风的、可复用的设计系统，避免每个模块风格漂移。同时为 vibe-ui-beautify 提供动效基准曲线。

2. 工作流结构

• 前置步骤：读取 PRD → 识别产品定位（专业感/年轻感/工具感）→ 选定主风格基调
• 执行步骤：颜色 → 字体 → 间距 → 圆角 → 阴影 → 组件原子 → 文档化
• 输出成果：design-tokens.ts + tailwind.config.ts + 设计系统文档 + Storybook（如有）

3. VIBE 默认设计语言：深色工业风 (Dark Industrial)

核心美学：

• 基调：深色为主（避免纯黑，用深蓝灰/炭黑营造质感），高对比度
• 质感：金属、霓虹、玻璃拟态（Glassmorphism）、微噪点
• 字体：无衬线（Inter/IBM Plex Sans）+ 等宽（JetBrains Mono）用于代码/数据
• 反馈：每个交互都有"机械感"的物理反馈（按钮按下、卡片悬停）

为什么是深色工业风：

• 减少视觉疲劳，适合长时间盯屏幕的开发者/工具类产品
• 突显数据可视化和霓虹色高亮
• 营造"专业、可托付"的工业感

4. 设计令牌 (Design Tokens) 规范

4.1 颜色系统 (Color Tokens)

语义化命名，不要直接用 gray-900、blue-500。每个颜色都对应一个用途：

// design-tokens.ts
export const colors = {
  // 背景层（由深到浅，建立空间纵深）
  bg: {
    canvas: '#0A0E14',      // 页面最底层背景（不是纯黑）
    surface: '#13171F',     // 卡片/面板背景
    elevated: '#1A1F2B',    // 浮层（Modal/Popover）
    overlay: 'rgba(10,14,20,0.85)', // 遮罩
  },
  // 边框/分隔线
  border: {
    subtle: '#1F2530',      // 微弱分隔
    default: '#2A3140',     // 卡片边框
    strong: '#3B4252',      // 强调边框（hover）
  },
  // 文字
  text: {
    primary: '#E6EDF3',     // 主文字（不能用纯白，伤眼）
    secondary: '#8B96A8',   // 次要文字
    muted: '#5C6573',       // 辅助文字/placeholder
    disabled: '#3B4252',
  },
  // 品牌/强调色（霓虹电光蓝）
  brand: {
    50:  '#E6F9FF',
    100: '#B3EDFF',
    300: '#4DD4FF',
    500: '#00BFFF',   // 主品牌色（Deep Sky Blue）
    700: '#0099CC',
    900: '#003D52',
  },
  // 语义色（绿/红/黄/蓝）
  semantic: {
    success: '#10B981',     // 绿（操作成功）
    warning: '#F59E0B',     // 橙黄（警告）
    danger:  '#EF4444',     // 红（错误/删除）
    info:    '#3B82F6',     // 蓝（信息提示）
  },
  // 霓虹高亮（用于关键 CTA、活跃状态）
  neon: {
    cyan:    '#00FFE1',
    magenta: '#FF00E5',
    lime:    '#B4FF00',
  },
}