vibe_coding/docs/guides/ui-specs-user.md

🎨 UI 规范 — 用户端（Case-Database-Frontend-user）

用户端设计规范。AI 在 Case-Database-Frontend-user/ 中还原设计稿或新建页面时参考本文档。 核心原则：移动优先、性能优先、品牌一致

---

1. 设计系统

项目	选型
CSS 方案	Tailwind CSS v3
图标	Lucide Icons（lucide-vue-next）
字体	系统字体栈（中文优先）
动效	CSS Transition（避免 JS 动画影响性能）

---

2. 色彩系统

:root {
  /* 品牌主色 — 根据实际品牌替换 */
  --color-primary: #3B82F6;       /* blue-500 */
  --color-primary-dark: #1D4ED8;  /* blue-700（hover） */
  --color-primary-light: #EFF6FF; /* blue-50（背景） */

  /* 功能色 */
  --color-success: #10B981;  /* green-500 */
  --color-warning: #F59E0B;  /* amber-500 */
  --color-danger:  #EF4444;  /* red-500 */
  --color-info:    #6B7280;  /* gray-500 */

  /* 文本层级 */
  --color-text-primary:   #111827;  /* gray-900 */
  --color-text-secondary: #6B7280;  /* gray-500 */
  --color-text-disabled:  #D1D5DB;  /* gray-300 */

  /* 背景 */
  --color-bg-page:  #F9FAFB;  /* gray-50 */
  --color-bg-card:  #FFFFFF;
  --color-border:   #E5E7EB;  /* gray-200 */
}

---

3. 字体规范

用途	大小	字重	Tailwind 类
页面大标题	24px / 1.5rem	700	text-2xl font-bold
卡片标题	18px / 1.125rem	600	text-lg font-semibold
正文	14px / 0.875rem	400	text-sm
辅助/标签	12px / 0.75rem	400	text-xs
按钮文字	14px / 0.875rem	500	text-sm font-medium

---

4. 间距系统（4px 基准）

场景	间距	Tailwind 类
行内元素间距	8px	gap-2 / space-x-2
卡片内边距	16px	p-4
区块间间距	24px	gap-6 / mb-6
页面两侧边距	16px（移动）/ 24px（桌面）	px-4 md:px-6
页面顶部安全区	16px	pt-4

---

5. 响应式断点（移动优先）

断点	最小宽度	典型设备	设计优先级
默认	375px	手机（主力）	⭐⭐⭐⭐⭐
sm	640px	大屏手机	⭐⭐⭐⭐
md	768px	平板竖屏	⭐⭐⭐
lg	1024px	平板横屏/小桌面	⭐⭐
xl	1280px	桌面	⭐

断点使用顺序（必须从小写起）：

<!-- ✅ 正确：移动端默认，再扩展 -->
<div class="w-full md:w-1/2 lg:w-1/3">

<!-- ❌ 错误：桌面优先写法 -->
<div class="w-1/3 lg:w-full">

---

6. 组件规范

按钮

<!-- 主要操作 -->
<button class="w-full rounded-lg bg-primary py-3 text-sm font-medium text-white active:opacity-80">
  立即购买
</button>

<!-- 次要操作 -->
<button class="w-full rounded-lg border border-gray-300 py-3 text-sm font-medium text-gray-700">
  加入购物车
</button>

规则：

• 移动端主操作按钮通常 w-full，高度 ≥ 44px
• 按钮文字简短（≤ 6 字）
• 加载中禁用按钮并显示 Spinner

卡片

<div class="rounded-xl bg-white p-4 shadow-sm">
  <!-- 内容 -->
</div>

空状态 / 错误状态（必须实现）

<!-- 空状态 -->
<div class="flex flex-col items-center py-16 text-gray-400">
  <LucidePackageOpen class="mb-3 h-12 w-12" />
  <p class="text-sm">暂无数据</p>
</div>

<!-- 骨架屏（优先于 Loading Spinner） -->
<div class="animate-pulse rounded-xl bg-gray-100 h-24 w-full" />

---

7. 触摸交互规范

• 所有可点击元素最小尺寸：44 × 44px
• 相邻可点击元素间距 ≥ 8px
• 列表项点击区域铺满整行
• 避免 hover 专属交互（移动端无 hover）

---

8. 视觉还原流程

1. 识别所属前端（用户端 = 本文档）
2. 分析设计稿的色彩、间距（对齐上方规范）
3. 移动端布局先行，再添加 md/lg 断点适配
4. 使用 Tailwind 语义类（避免任意值 w-[123px]）
5. 实现空状态、加载状态、错误状态
6. 验证触摸目标尺寸

---

最后更新: 2026-02-26