1

.opencode/skills/pancli-design/SKILL.md

@@ -0,0 +1,856 @@
+---
+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 设计团队