---
name: pancli-design
description: 专业的设计技能，用于使用 pancli (pencil tools) 创建现代化、一致的 EmailBill 移动端 UI 设计
license: MIT
compatibility: Requires pencil_* tools (batch_design, batch_get, etc.)
metadata:
  author: EmailBill Design Team
  version: "2.0.0"
  generatedBy: opencode
  lastUpdated: "2026-02-03"
  source: ".pans/v2.pen 日历设计 (亮色/暗色)"
---

# pancli-design - EmailBill UI 设计系统

> 专业的设计技能，用于使用 pancli (pencil tools) 创建现代化、一致的移动端 UI 设计。

## 何时使用此技能

**总是使用此技能当:**
- 使用 pancli 创建新的 UI 界面或组件
- 修改现有的 .pen 设计文件
- 处理亮色/暗色主题设计
- 为 EmailBill 项目设计移动端优先的界面

**触发条件:**
- 用户提到 "画设计图"、"设计"、"UI"、"界面"、"pancli"、".pen"
- 任务涉及 `pencil_*` 工具
- 创建视觉原型或模型

## 核心设计原则

### 1. 现代移动端优先设计

**布局标准:**
- 移动视口: 375px 宽度 (iPhone SE 基准)
- 安全区域: 尊重 iOS/Android 安全区域边距
- 触摸目标: 交互元素最小 44x44px
- 间距比例: 4px, 8px, 12px, 16px, 24px, 32px (8px 基础网格)
- 圆角半径: 12px (卡片), 16px (对话框), 24px (药丸/标签), 8px (按钮)
- 卡片阴影: `0 2px 12px rgba(0,0,0,0.08)` 用于突出表面

**避免 AI 设计痕迹:**
- 不要使用通用的 "Dashboard" 占位符文本
- 不要使用图库照片或 Lorem Ipsum
- 不要使用过饱和的主色 (#007AFF, 不是 #0088FF)
- 不要使用生硬的阴影或渐变
- 不要使用 Comic Sans, Papyrus 或装饰性字体
- 使用代码库中的真实中文业务术语

### 2. 统一色彩系统 (基于实际 v2.pen 日历设计)

**亮色主题:**
```css
/* 背景色 - 基于实际设计 */
--background-page: #FFFFFF       /* 页面背景 (Calendar frame fill) */
--background-card: #F6F7F8       /* 卡片背景 (statsCard, tCard fills) */
--background-accent: #F5F5F5     /* 强调背景 (notif button) */

/* 文本色 - 基于实际设计 */
--text-primary: #1A1A1A          /* 主文本 (titles, labels) */
--text-secondary: #6B7280        /* 次要文本 (dates, subtitles) */
--text-tertiary: #9CA3AF         /* 三级文本 (weekday labels) */

/* 语义色 - 基于实际设计 */
--accent-red: #FF6B6B            /* 支出/负数 (expense icon) */
--accent-yellow: #FCD34D         /* 警告/中性 (coffee icon) */
--accent-green: #F0FDF4          /* 收入/正数 (badge background) */
--accent-blue: #E0E7FF           /* 智能标签 (smart button) */
--accent-warm: #FFFBEB           /* 温暖色调 (badge background) */

/* 主操作色 */
--primary: #3B82F6               /* 主色调 (FAB button from Budget Stats) */

/* 边框与分割线 */
--border: #E5E7EB                /* 边框颜色 (从设计推断) */
```

**暗色主题:**
```css
/* 背景色 - 基于实际暗色设计 */
--background-page: #09090B       /* 页面背景 (Calendar Dark frame) */
--background-card: #18181B       /* 卡片背景 (dark statsCard, tCard) */
--background-accent: #27272A     /* 强调背景 (dark notif, tCat) */

/* 文本色 - 基于实际暗色设计 */
--text-primary: #F4F4F5          /* 主文本 (dark titles) */
--text-secondary: #A1A1AA        /* 次要文本 (dark dates, subtitles) */
--text-tertiary: #71717A         /* 三级文本 (dark weekday labels) */

/* 语义色 - 暗色模式适配 */
--accent-red: #FF6B6B            /* 保持一致 */
--accent-yellow: #FCD34D         /* 保持一致 */
--accent-green: #064E3B          /* 深绿 (dark badge) */
--accent-blue: #312E81           /* 深蓝 (dark smart button) */
--accent-warm: #451A03           /* 深暖色 (dark badge) */

/* 主操作色 */
--primary: #3B82F6               /* 保持一致 */

/* 边框与分割线 */
--border: #3F3F46                /* 深色边框 */
```

**颜色使用规则:**
- **页面背景**: 亮色 `#FFFFFF`, 暗色 `#09090B`
- **卡片背景**: 亮色 `#F6F7F8`, 暗色 `#18181B`
- **主文本**: 亮色 `#1A1A1A`, 暗色 `#F4F4F5`
- **次要文本**: 亮色 `#6B7280`, 暗色 `#A1A1AA`
- **支出/负数**: `#FF6B6B` (两种模式一致)
- **主操作按钮**: `#3B82F6` (两种模式一致)
- **圆角**: 12px (小按钮), 16px (卡片), 20px (统计卡片), 22px (图标按钮)
- **阴影**: 亮色使用柔和阴影, 暗色使用更深的阴影或无阴影
- **避免**: 纯黑 (#000000) 或纯白 (#FFFFFF) 文本

### 3. 排版系统 (基于实际 v2.pen 设计)

**字体栈:**
```css
/* 标题与大标题 - 基于 v2.pen */
font-family: 'Bricolage Grotesque', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

/* 正文与界面 - 基于 v2.pen */
font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'PingFang SC', sans-serif;

/* 备选: 系统默认 */
font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', sans-serif;
```

**字号比例 (从实际设计提取):**
| 用途 | 字体 | 大小 | 粗细 | 示例 |
|------|------|------|------|------|
| 大标题数值 | Bricolage Grotesque | 32px | 800 | ¥ 1,248.50 (statsVal) |
| 页面标题 | DM Sans | 24px | 500 | 2026年1月 (subtitle) |
| 章节标题 | Bricolage Grotesque | 18px | 700 | 每日统计, 交易记录 (titles) |
| 正文文本 | DM Sans | 15px | 600 | Lunch, Coffee (交易名称) |
| 说明文字 | DM Sans | 13px | 500 | 12:30 PM, Total Spent (标签) |
| 微型文字 | DM Sans | 12px | 600 | 一二三四五六日 (星期) |

**中文文本规则:**
- 使用简体中文
- 真实业务术语: "每日统计" (daily stats), "交易记录" (transactions)
- 行高: 1.4-1.6 保证可读性
- 使用真实业务术语，避免 Lorem Ipsum

### 4. 组件库 (基于实际 v2.pen 设计)

**卡片 (基于 statsCard, tCard):**
```
统计卡片 (大卡片):
  - 背景: #F6F7F8 (亮色), #18181B (暗色)
  - 内边距: 20px
  - 圆角: 20px
  - 间距: 12px (元素之间)
  - 布局: 垂直

交易卡片 (列表卡片):
  - 背景: #F6F7F8 (亮色), #18181B (暗色)  
  - 内边距: 16px
  - 圆角: 16px
  - 间距: 14px (水平元素)
  - 高度: 自适应内容
```

**按钮 (基于实际设计):**
```
图标按钮 (通知按钮):
  - 尺寸: 44x44px
  - 圆角: 22px (完全圆形)
  - 背景: #F5F5F5 (亮色), #27272A (暗色)
  - 图标大小: 20px
  
标签按钮:
  - 内边距: 6px 10px / 6px 12px
  - 圆角: 12px
  - 字体: DM Sans 13px/500
  - 颜色:
    - 温暖色: #FFFBEB (亮色), #451A03 (暗色)
    - 绿色: #F0FDF4 (亮色), #064E3B (暗色)
    - 蓝色: #E0E7FF (亮色), #312E81 (暗色)

悬浮按钮 (FAB):
  - 尺寸: 56x56px
  - 圆角: 28px
  - 背景: #3B82F6
  - 描边: 4px 白色边框
  - 阴影: 提升效果
```

**图标与文字:**
```
图标容器:
  - 尺寸: 44x44px
  - 圆角: 22px
  - 背景: #FFFFFF (亮色), #27272A (暗色)
  - 图标: 20px (lucide 字体)
  - 颜色: #FF6B6B (星标), #FCD34D (咖啡)

章节标题:
  - 字体: Bricolage Grotesque 18px/700
  - 颜色: #1A1A1A (亮色), #F4F4F5 (暗色)
  
大数值:
  - 字体: Bricolage Grotesque 32px/800
  - 颜色: #1A1A1A (亮色), #F4F4F5 (暗色)
```

**布局模式 (基于 Calendar 结构):**
```
页面容器:
  - 宽度: 402px (设计视口)
  - 布局: 垂直
  - 内边距: 24px (容器边距)
  - 间距: 16px (章节之间)

头部区域:
  - 内边距: 8px 24px
  - 布局: 水平, 两端对齐
  - 对齐项: 居中

内容区域:
  - 内边距: 24px
  - 间距: 12-16px
  - 布局: 垂直
```

### 5. 布局模式

**页面结构 (Flex 容器):**
```
.page-container-flex:
  - display: flex
  - flex-direction: column
  - height: 100%
  - overflow: hidden
  
  结构:
    1. van-nav-bar (固定高度)
    2. van-tabs 或 sticky-header
    3. scroll-content (flex: 1, overflow-y: auto)
    4. bottom-button 或 van-tabbar (固定)
```

**导航栏背景透明化 (一致性模式):**
```css
/* 设置页面容器背景色 */
:deep(.van-nav-bar) {
  background: transparent !important;
}
```
**重要:** 项目中所有视图都采用此模式，使导航栏背景透明，与页面背景融合。实现此效果时，请确保：
- 页面容器有明确的背景色 (亮色: #FFFFFF, 暗色: #09090B)
- 导航栏始终使用 `:deep(.van-nav-bar)` 选择器
- 必须添加 `!important` 覆盖 Vant 默认样式
- 在 `<style scoped>` 块中添加此规则

**安全区域处理:**
```css
/* iPhone 刘海底部内边距 */
padding-bottom: env(safe-area-inset-bottom, 0px);

/* 状态栏顶部内边距 */
padding-top: max(0px, calc(env(safe-area-inset-top, 0px) * 0.75));
```

**固定元素:**
```css
.sticky-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--van-background-2);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  margin: 12px;
  padding: 12px 16px;
}
```

### 6. 交互模式

**触摸反馈:**
- 激活状态: 点击时 scale(0.95)
- 涟漪效果: 使用 Vant 内置触摸反馈
- 悬停状态: 12% 透明度叠加 (网页端)

**加载状态:**
```
van-pull-refresh:
  - 用于顶层可滚动内容
  - 最小高度: calc(100vh - nav - tabbar)
  
van-loading:
  - 容器内居中
  - 尺寸: 内联 24px, 页面 32px
```

**空状态:**
```
van-empty:
  - 图标: 60px 大小
  - 描述: 14px, var(--van-text-color-2)
  - 内边距: 垂直 48px
```

**悬浮操作:**
```
van-floating-bubble:
  - 图标大小: 24px
  - 位置: 右下角, 距底部 100px (避开 tabbar)
  - 磁吸: 贴靠 x 轴边缘
```

### 7. 数据可视化

**预算进度条:**
```
渐变逻辑:
  支出 (0% → 100%):
    - 0%:  #40a9ff (安全蓝)
    - 40%: #36cfc9 (青色过渡)
    - 70%: #faad14 (警告黄)
    - 100%: #ff4d4f (危险红)
  
  收入 (0% → 100%):
    - 0%:  #f5222d (深红 - 未开始)
    - 45%: #ffcccc (浅红)
    - 50%: #f0f2f5 (中性灰)
    - 55%: #bae7ff (浅蓝)
    - 100%: #1890ff (深蓝 - 达成)
```

**金额显示:**
```css
.amount {
  font-family: 'DIN Alternate', system-ui;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.expense { color: var(--van-danger-color); }
.income { color: var(--van-success-color); }
```

**图表 (如果使用):**
- 折线图: 2px 笔画, 圆角连接
- 柱状图: 8px 圆角, 4px 间距
- 颜色: 使用语义色阶
- 网格线: 1px, 8% 透明度

### 8. 主题切换 (亮色/暗色)

**实现策略:**
```javascript
// 自动检测系统偏好
const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches
theme.value = isDark ? 'dark' : 'light'
document.documentElement.setAttribute('data-theme', theme.value)
```

**设计文件要求:**
- **必须同时创建亮色和暗色变体**
- 使用 Vant 的主题变量 (自动切换)
- 测试对比度: WCAG AA 最低标准 (文本 4.5:1)
- 暗色模式适配:
  - 减少卡片阴影至 0 2px 8px rgba(0,0,0,0.24)
  - 增加边框对比度
  - 白色文本柔化至 #e5e5e5

**pancli 工作流:**
```
1. 先创建亮色主题设计
2. 复制帧用于暗色模式
3. 使用 replace_all_matching_properties 批量更新:
   - 背景颜色
   - 文本颜色
   - 边框颜色
4. 手动调整阴影和叠加
5. 命名帧: "[屏幕名称] - Light" / "[屏幕名称] - Dark"
```

### 9. 命名约定

**帧名称:**
```
格式: [模块] - [屏幕] - [变体]

示例:
  ✅ Budget - List View - Light
  ✅ Budget - Edit Dialog - Dark
  ✅ Transaction - Card Component
  ✅ Statistics - Chart Section
  
  ❌ Screen1
  ❌ Frame_Copy_2
  ❌ New Design
```

**组件层级:**
```
可复用组件:
  - 前缀 "Component/"
  - 示例: "Component/BudgetCard"
  
屏幕:
  - 按模块分组
  - 示例: "Budget/ListView", "Budget/EditForm"
```

**图层命名:**
```
内部元素可用中文:
  ✅ 预算卡片背景
  ✅ 金额文本
  ✅ 操作按钮组
  
组件用英文:
  ✅ CardBackground
  ✅ AmountLabel
  ✅ ActionButtons
```

### 10. 质量检查清单

**完成设计前:**
- [ ] 同时创建了亮色和暗色主题
- [ ] 所有文本使用真实中文业务术语 (无 Lorem Ipsum)
- [ ] 交互元素 ≥ 44x44px
- [ ] 间距遵循 8px 网格
- [ ] 颜色使用语义变量 (非硬编码十六进制)
- [ ] 圆角: 12px/16px/24px 保持一致
- [ ] 尊重安全区域边距 (底部: 50px + 安全区域)
- [ ] 帧正确命名 模块/屏幕/变体
- [ ] 可复用组件标记为 `reusable: true`
- [ ] 字号匹配字号比例 (12/14/16/18/24)
- [ ] 数字数据使用 DIN Alternate
- [ ] 无 AI 生成的占位内容
- [ ] 已截图并视觉验证
- [ ] 导航栏背景设置为透明 (`:deep(.van-nav-bar) { background: transparent !important; }`)

**无障碍:**
- [ ] 正文对比度 ≥ 4.5:1
- [ ] 大文本对比度 ≥ 3:1 (18px+)
- [ ] 触摸目标清晰分离 (最小 8px 间距)
- [ ] 颜色不是信息的唯一指示器

## PANCLI 工作流程

### 阶段 1: 设置与风格选择

```typescript
// 1. 获取编辑器状态
pencil_get_editor_state(include_schema: true)

// 2. 获取设计指南
pencil_get_guidelines(topic: "landing-page") // 或 "design-system"

// 3. 选择合适的风格指南
pencil_get_style_guide_tags() // 获取可用标签

// 4. 使用标签获取风格指南
pencil_get_style_guide(tags: [
  "mobile",        // 必需
  "webapp",        // 类应用界面
  "modern",        // 简洁, 现代
  "minimal",       // 避免杂乱
  "professional",  // 商业环境
  "blue",          // 主色提示
  "fintech"        // 如果可用
])
```

### 阶段 2: 创建亮色主题设计

```typescript
// 5. 读取现有组件 (如果有)
pencil_batch_get(
  filePath: "designs/emailbill.pen",
  patterns: [{ reusable: true }],
  readDepth: 2
)

// 6. 创建亮色主题屏幕
pencil_batch_design(
  filePath: "designs/emailbill.pen",
  operations: `
    screen=I(document, {
      type: "frame",
      name: "Budget - List View - Light",
      width: 375,
      height: 812,
      fill: "#FFFFFF",
      layout: "vertical",
      placeholder: true
    })
    
    navbar=I(screen, {
      type: "frame",
      name: "Navbar",
      width: "fill_container",
      height: 44,
      fill: "transparent",
      layout: "horizontal",
      padding: [12, 16, 12, 16]
    })
    
    title=I(navbar, {
      type: "text",
      content: "预算管理",
      fontSize: 16,
      fontWeight: "600",
      textColor: "#1A1A1A"
    })
    
    // ... 更多操作
  `
)
```

### 阶段 3: 创建暗色主题变体

```typescript
// 7. 复制亮色主题帧
pencil_batch_design(
  operations: `
    darkScreen=C("light-screen-id", document, {
      name: "Budget - List View - Dark",
      positionDirection: "right",
      positionPadding: 48
    })
  `
)

// 8. 批量替换暗色主题颜色
pencil_replace_all_matching_properties(
  parents: ["dark-screen-id"],
  properties: {
    fillColor: [
      { from: "#FFFFFF", to: "#09090B" },   // 页面背景
      { from: "#F6F7F8", to: "#18181B" },   // 卡片背景
      { from: "#F5F5F5", to: "#27272A" }    // 边框
    ],
    textColor: [
      { from: "#1A1A1A", to: "#F4F4F5" },   // 主文本
      { from: "#6B7280", to: "#A1A1AA" },   // 次要
      { from: "#9CA3AF", to: "#71717A" }    // 三级
    ]
  }
)

// 9. 手动调整暗色模式阴影 (如需要)
pencil_batch_design(
  operations: `
    U("dark-card-id", {
      shadow: {
        x: 0,
        y: 2,
        blur: 8,
        color: "rgba(0,0,0,0.24)"
      }
    })
  `
)
```

### 阶段 4: 验证

```typescript
// 10. 对两种主题截图
pencil_get_screenshot(nodeId: "light-screen-id")
pencil_get_screenshot(nodeId: "dark-screen-id")

// 11. 检查布局问题
pencil_snapshot_layout(
  parentId: "light-screen-id",
  problemsOnly: true
)

// 12. 验证所有唯一属性
pencil_search_all_unique_properties(
  parents: ["light-screen-id"],
  properties: ["fillColor", "textColor", "fontSize"]
)
```

## 代码库实际示例

### 示例 1: 预算卡片组件

```
组件结构:
  BudgetCard (375x120px)
    ├─ CardBackground (#ffffff, 16px 圆角, 阴影)
    ├─ HeaderRow (水平布局)
    │   ├─ CategoryName (16px, 600 粗细)
    │   └─ PeriodLabel (12px, 次要颜色)
    ├─ ProgressBar (基于比例渐变)
    │   └─ ProgressFill (高度: 8px, 圆角: 4px)
    ├─ AmountRow (水平布局, 两端对齐)
    │   ├─ CurrentAmount (DIN, 18px, 危险色)
    │   ├─ LimitAmount (DIN, 14px, 次要)
    │   └─ RemainingAmount (DIN, 14px, 成功色)
    └─ FooterActions (可选, 储蓄按钮)
```

**pancli 实现:**
```typescript
card=I(parent, {
  type: "frame",
  name: "BudgetCard",
  width: "fill_container",
  height: 120,
  fill: "#ffffff",
  cornerRadius: [16, 16, 16, 16],
  shadow: { x: 0, y: 2, blur: 12, color: "rgba(0,0,0,0.08)" },
  stroke: { color: "#ebedf0", thickness: 1 },
  padding: [16, 16, 16, 16],
  layout: "vertical",
  gap: 12,
  placeholder: true
})

header=I(card, {
  type: "frame",
  layout: "horizontal",
  width: "fill_container",
  height: "hug_contents"
})

categoryName=I(header, {
  type: "text",
  content: "日常开销",
  fontSize: 16,
  fontWeight: "600",
  textColor: "#323233"
})

// 带渐变的进度条
progressBar=I(card, {
  type: "frame",
  width: "fill_container",
  height: 8,
  fill: "#f0f0f0",
  cornerRadius: [4, 4, 4, 4]
})

progressFill=I(progressBar, {
  type: "frame",
  width: "75%", // 75% 进度示例
  height: 8,
  fill: "linear-gradient(90deg, #40a9ff 0%, #faad14 100%)",
  cornerRadius: [4, 4, 4, 4]
})
```

### 示例 2: 带日期选择器的固定头部

```
固定头部模式 (来自 BudgetView):
  ├─ 位置: sticky, top: 0
  ├─ 背景: var(--van-background-2)
  ├─ 圆角: 12px
  ├─ 阴影: 0 2px 8px rgba(0,0,0,0.04)
  ├─ 内边距: 12px 16px
  ├─ 内容: "2024年1月" + 下拉箭头图标
```

### 示例 3: 滑动删除列表项

```
van-swipe-cell 模式:
  ├─ 内容: BudgetCard 组件
  ├─ 右侧操作: 删除按钮
  │   ├─ 宽度: 60px
  │   ├─ 背景: var(--van-danger-color)
  │   ├─ 文本: "删除"
  │   └─ 全高 (100%)
```

## 避免的反模式

**❌ 不要这样做:**
```
// 通用 AI 生成内容
title=I(navbar, {
  type: "text",
  content: "Dashboard", // ❌ 使用 "预算管理" 代替
  fontSize: 20,         // ❌ 按字号比例使用 16px
  fontWeight: "bold"    // ❌ 使用数字值 600
})

// 不一致的间距
card=I(parent, {
  padding: [15, 13, 17, 14] // ❌ 使用 8px 网格: [16, 16, 16, 16]
})

// 硬编码颜色而非语义
amount=I(card, {
  textColor: "#ff0000" // ❌ 使用 var(--van-danger-color) 或 "#ee0a24"
})

// 缺少暗色模式
// ❌ 只创建亮色主题没有暗色变体

// 糟糕的命名
frame=I(document, {
  name: "Frame_123" // ❌ 使用 "Budget - List View - Light"
})
```

**✅ 应该这样做:**
```typescript
// 真实业务术语
title=I(navbar, {
  type: "text",
  content: "预算管理",
  fontSize: 16,
  fontWeight: "600",
  textColor: "#323233"
})

// 一致的 8px 网格间距
card=I(parent, {
  padding: [16, 16, 16, 16],
  gap: 12
})

// 语义颜色变量
amount=I(card, {
  textColor: "#ee0a24", // 一致的危险色
  fontFamily: "DIN Alternate"
})

// 总是创建两种主题
lightScreen=I(document, { name: "Budget - List - Light" })
darkScreen=C(lightScreen, document, { 
  name: "Budget - List - Dark",
  positionDirection: "right"
})

// 清晰的描述性名称
card=I(parent, {
  name: "BudgetCard",
  reusable: true
})
```

## 委派与任务管理

**使用此技能时:**

```typescript
// 委派设计任务时加载此技能
delegate_task(
  category: "visual-engineering",
  load_skills: ["pancli-design", "frontend-ui-ux"],
  description: "创建预算列表屏幕设计",
  prompt: `
    任务: 为 EmailBill 应用创建移动端预算列表屏幕设计
    
    预期结果:
    - 375x812px 亮色主题设计
    - 暗色主题变体 (复制并适配)
    - 可复用的 BudgetCard 组件
    - 两种主题的截图验证
    
    必需工具:
    - pencil_get_style_guide_tags
    - pencil_get_style_guide
    - pencil_batch_design
    - pencil_batch_get
    - pencil_replace_all_matching_properties
    - pencil_get_screenshot
    
    必须做:
    - 严格遵循 pancli-design 技能指南
    - 使用真实中文业务术语 (预算, 账单, 分类)
    - 创建亮色和暗色两种主题
    - 使用 8px 网格间距系统
    - 遵循 Vant UI 组件模式
    - 使用 模块-屏幕-变体 格式命名帧
    - 使用语义颜色变量
    - 数字显示应用 DIN Alternate
    - 导航栏背景必须设置为透明 (:deep(.van-nav-bar) { background: transparent !important; })
    - 截图验证
    
    不得做:
    - 使用 Lorem Ipsum 或占位文本
    - 只创建亮色主题没有暗色变体
    - 使用任意间距 (必须遵循 8px 网格)
    - 硬编码颜色 (使用语义变量)
    - 使用通用 "Dashboard" 标签
    - 跳过截图验证
    - 创建名为 "Frame_1", "Copy" 等的帧
    
    上下文:
    - 移动视口: 375px 宽度
    - 设计系统: 基于 Vant UI
    - 配色方案: #1989fa 主色, #ee0a24 危险, #07c160 成功
    - 字体: 中文系统默认, 数字 DIN Alternate
    - designs/emailbill.pen 中的现有组件 (用 batch_get 检查)
  `,
  run_in_background: false
)
```

## 快速参考 (基于实际 v2.pen 设计)

**颜色面板:**
| 名称 | 亮色 | 暗色 | 用途 |
|------|------|------|------|
| 页面背景 | #FFFFFF | #09090B | 页面背景 |
| 卡片背景 | #F6F7F8 | #18181B | 卡片表面 |
| 强调背景 | #F5F5F5 | #27272A | 按钮, 图标容器 |
| 主文本 | #1A1A1A | #F4F4F5 | 主要文本 |
| 次要文本 | #6B7280 | #A1A1AA | 次要文本 |
| 三级文本 | #9CA3AF | #71717A | 三级文本 |
| 主色 | #3B82F6 | #3B82F6 | 操作, FAB |
| 红色 | #FF6B6B | #FF6B6B | 支出, 警告 |
| 黄色 | #FCD34D | #FCD34D | 警告 |
| 绿色 | #F0FDF4 | #064E3B | 收入标签 |
| 蓝色 | #E0E7FF | #312E81 | 信息标签 |

**排版 (实际字体):**
| 用途 | 字体 | 大小 | 粗细 |
|------|------|------|------|
| 大数值 | Bricolage Grotesque | 32px | 800 |
| 页面标题 | DM Sans | 24px | 500 |
| 章节标题 | Bricolage Grotesque | 18px | 700 |
| 正文 | DM Sans | 15px | 600 |
| 说明 | DM Sans | 13px | 500 |
| 微型标签 | DM Sans | 12px | 600 |

**间距与布局 (实际数值):**
- 容器内边距: 24px (主区域), 20px (卡片), 16px (小卡片)
- 间距比例: 2px, 4px, 8px, 12px, 14px, 16px
- 图标大小: 20px
- 图标按钮: 44x44px
- FAB 按钮: 56x56px

**圆角 (实际数值):**
- 小按钮/标签: 12px
- 卡片: 16px, 20px
- 图标按钮: 22px (圆形)
- FAB: 28px (圆形)

**触摸目标:** 最小 44x44px

**视口:** 402px (设计宽度), 移动端优先

---

**版本:** 2.0.0 (使用 v2.pen 实际设计值更新)  
**最后更新:** 2026-02-03  
**来源:** .pans/v2.pen 日历 (亮色/暗色)  
**维护者:** EmailBill 设计团队