2. 生成 ASCII 结构图

用 ASCII 文本描述组件层级：

Card (卡片容器)
├── Header Row (标题行)
│   ├── Icon (图标)
│   └── Title (标题文字)
├── Divider (分隔线)
└── Content Row (内容区)
    ├── Item 1
    ├── Item 2
    └── Item 3

3. 提取设计 Token

分析截图提取精确的设计参数：

Token	说明	示例值
颜色	背景、文字、图标、边框	`#ffffff`, `#333333`
字号	标题、标签、数值	`15px`, `13px`, `30px`
字重	normal, 500, 700	`"500"`, `"700"`
字体	中文、数字字体	`PingFang SC`, `DIN Alternate`
圆角	卡片圆角	`8px`
间距	padding, gap	`[20, 24]`, `8`

4. 生成 .pen 文件

文件结构

{
  "version": "2.6",
  "children": [...],
  "variables": {...}
}

关键规则

变量只用于颜色

"fill": "$--card-bg"        // ✅ 正确
"fontSize": "$--title-size" // ❌ 错误
"fontSize": 15              // ✅ 正确

尺寸使用硬编码数字

"width": 560,
"height": 48,
"cornerRadius": 8,
"gap": 8,
"padding": [20, 24]

frame 节点基本结构

{
  "type": "frame",
  "id": "unique-id",
  "name": "Component Name",
  "reusable": true,          // 可复用组件设为true
  "width": 560,
  "fill": "$--card-bg",
  "cornerRadius": 8,
  "layout": "vertical",      // vertical | horizontal | none
  "gap": 8,
  "padding": [top, right, bottom, left] // 或单个值
}

text 节点结构

{
  "type": "text",
  "id": "title",
  "name": "Title",
  "fill": "$--title-color",
  "content": "标题文字",
  "lineHeight": 1.5,
  "fontFamily": "PingFang SC",
  "fontSize": 15,
  "fontWeight": "500"
}

icon_font 节点结构

{
  "type": "icon_font",
  "id": "icon",
  "width": 20,
  "height": 20,
  "iconFontName": "chevrons-right",  // lucide 图标名
  "iconFontFamily": "lucide",
  "fill": "$--icon-color"
}

布局属性
- layout: "vertical" | "horizontal" | "none"
- justifyContent: "space_between" | "center" | "flex_start" | "flex_end"
- alignItems: "center" | "flex_start" | "flex_end"
- width: 数字 | "fill_container"

variables 定义

"variables": {
  "--card-bg": {
    "type": "color",
    "value": "#ffffff"
  }
}

常用设计 Token 模板

"variables": {
  "--card-bg": { "type": "color", "value": "#ffffff" },
  "--header-bg": { "type": "color", "value": "#fafbfc" },
  "--divider-color": { "type": "color", "value": "#f0f0f0" },
  "--icon-color": { "type": "color", "value": "#4285f4" },
  "--title-color": { "type": "color", "value": "#333333" },
  "--label-color": { "type": "color", "value": "#8c8c8c" },
  "--value-color": { "type": "color", "value": "#333333" },
  "--value-danger": { "type": "color", "value": "#fa5151" }
}

参考文件

目标文件: pencil-new.pen

2. 生成 ASCII 结构图

3. 提取设计 Token

4. 生成 .pen 文件

文件结构

关键规则

常用设计 Token 模板

参考文件

验证清单

Pencil Component Generator

Pencil Component Generator

流程概述

详细步骤

1. 分析截图