核心目标：全面掌握 Pencil 的安装配置、MCP 协议集成、Vibe Design 自然语言设计、AI Agent 驱动代码生成、设计系统搭建和生产级工作流，实现"描述即设计、设计即代码"的全新开发范式。

前置知识：熟悉 VS Code / Cursor 等现代 IDE，了解 MCP（Model Context Protocol）基本概念，有前端开发经验更佳。

---

1.1 什么是 Pencil

Pencil 是由 High Agency, Inc. 开发的一款 AI 原生 IDE 设计画布，获得 a16z 和 Speedrun VC 联合投资。它从根本上打破了"设计师用 Figma → 导出 → 前端开发用 VS Code"的传统割裂流程，将无限矢量画布嵌入 IDE，通过 MCP 协议驱动 AI 生成代码。

1.1.1 核心创新——为什么用 Pencil

维度	传统模式 (Figma + IDE)	Pencil 模式
设计工具	Figma（独立桌面/Web）	IDE 内嵌画布（.pen 文件）
代码生成	插件导出（质量低）	AI Agent 原生生成（高质量）
版本控制	Figma 历史版本	Git（.pen 文件即设计文件）
协作方式	Figma 链接分享	Git PR/MR + 设计审查
从设计到代码	小时级	分钟级
AI 集成	需要第三方的插件	MCP 原生协议
成本	$$$ （Figma 订阅）	免费插件 + AI API 费用

Pencil 不是 Figma 的替代品，而是一种全新的开发范式——把设计直接嵌入代码仓库，用 AI 桥接设计与实现。

1.1.2 架构概览

---

1.2 安装与第一个设计

1.2.1 安装方式

# ── 方式一：VS Code / Cursor 扩展（推荐） ──
# 在扩展市场搜索 "Pencil"，认准开发者 High Agency
# 安装后左侧活动栏会出现 Pencil 图标

# ── 方式二：命令行安装扩展 ──
code --install-extension highagency.pencil

# ── 方式三：Pencil CLI（终端使用） ──
npm install -g @pencil.dev/cli
pencil --version

注意：不要安装 Pencil Project（evolus/pencil）的独立桌面应用。Pencil.dev 是 IDE 原生工具，安装方式完全不同。

1.2.2 创建第一个 .pen 设计文件

# 在项目中创建 .pen 文件
# 方式 1: 点击左侧 Pencil 图标 → "New .pen file"
# 方式 2: 直接在 VS Code 资源管理器中新建 *.pen 文件
# 方式 3: 终端创建
echo '{}' > my-design.pen

.pen 文件本质上是纯文本格式的设计文档，可直接纳入 Git 版本控制：

git add my-design.pen
git commit -m "feat: add initial UI design"

1.2.3 第一个 Vibe Design——自然语言驱动设计

在画布打开后，直接在 AI 对话框中输入自然语言描述：

使用 Pencil MCP 在当前活跃画布上设计一个音乐播放器 App：
- 苹果风格，浅色系主题
- 包含播放主页、歌单列表、播放详情页
- 底部导航栏：首页、发现、我的
- 播放器控件：播放/暂停、上一首/下一首、进度条

AI 会调用 Pencil MCP 工具，在画布中自动生成完整的设计稿。如果对结果不满意，继续用自然语言迭代：

把主色调从蓝色改为你的品牌色
在播放详情页加上歌词滚动显示
播放按钮加大 20%，改为圆形

---

2.1 MCP 协议集成——Pencil 的核心引擎

2.1.1 MCP 配置

Pencil 通过 MCP（Model Context Protocol）暴露设计能力给 AI Agent。安装插件后，AI 工具自动检测 Pencil MCP Server。

// VS Code settings.json — Pencil 配置
{
    "pencil.mcp.enabled": true,
    "pencil.mcp.port": 0,          // 0 = 自动分配端口
    "pencil.formatOnSave": true,
    "pencil.defaultCanvasWidth": 1440,
    "pencil.defaultCanvasHeight": 900,
    
    // AI 工具联动
    "pencil.ai.autoConnect": true,
    "pencil.ai.defaultModel": "claude-sonnet-4-20250514"
}

2.1.2 支持的 AI Agent

AI Agent	集成方式	设计能力	代码质量	推荐场景
Claude Code	原生扩展	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐	审美最佳，推荐首选
Cursor	MCP + Agent	⭐⭐⭐⭐⭐	⭐⭐⭐⭐	设计+代码双面板
Codex (OpenAI)	MCP 协议	⭐⭐⭐⭐	⭐⭐⭐⭐	速度快，效率高
Gemini CLI	MCP 协议	⭐⭐⭐	⭐⭐⭐⭐	成本最低
Windsurf	原生扩展	⭐⭐⭐⭐	⭐⭐⭐	一体化体验好
GitHub Copilot	MCP 协议	⭐⭐⭐	⭐⭐⭐⭐	已在使用 Copilot 的团队

2.1.3 MCP 工具调用流程

---

2.2 设计系统——.pen 文件格式深度解析

2.2.1 .pen 文件结构

# my-app.pen — Pencil 设计文件（纯文本 YAML 格式）
version: "1.0"
metadata:
  name: "音乐播放器"
  author: "team-frontend"
  created: "2026-06-07T10:00:00Z"
  updated: "2026-06-07T14:30:00Z"
  theme: "apple-light"

canvas:
  width: 1440
  height: 900
  background: "#F5F5F7"

screens:
  - id: "home"
    name: "首页"
    elements:
      - id: "header"
        type: "container"
        position: { x: 0, y: 0, width: 1440, height: 64 }
        children: [...]
      - id: "nav-bar"
        type: "bottom-navigation"
        items:
          - { icon: "home", label: "首页", route: "/" }
          - { icon: "search", label: "发现", route: "/discover" }
          - { icon: "user", label: "我的", route: "/profile" }

  - id: "player"
    name: "播放详情"
    elements:
      - id: "album-art"
        type: "image"
        src: "@placeholder/album"
        style:
          borderRadius: 16
          shadow: "0 8px 32px rgba(0,0,0,0.12)"
      - id: "controls"
        type: "player-controls"
        layout: "horizontal"
        children:
          - { type: "icon-button", icon: "shuffle" }
          - { type: "icon-button", icon: "prev" }
          - { type: "play-button", size: "large" }
          - { type: "icon-button", icon: "next" }
          - { type: "icon-button", icon: "repeat" }

design_tokens:
  colors:
    primary: "#007AFF"
    secondary: "#5856D6"
    background: "#F5F5F7"
    surface: "#FFFFFF"
    text_primary: "#1D1D1F"
    text_secondary: "#86868B"
  spacing:
    xs: 4
    sm: 8
    md: 16
    lg: 24
    xl: 32
  typography:
    heading:
      fontFamily: "SF Pro Display"
      fontSize: 34
      fontWeight: 700
    body:
      fontFamily: "SF Pro Text"
      fontSize: 17
      fontWeight: 400
  radii:
    sm: 8
    md: 12
    lg: 16
    full: 9999

2.2.2 设计 Token 系统

---

3.1 Vibe Design——自然语言驱动的设计工作流

3.1.1 提示词工程

## ✅ 好的提示词示例

### 场景一：从零开始设计
"使用 Pencil MCP 为我的 SaaS 后台设计一套管理面板：
- 侧边栏导航：仪表盘、用户管理、订单管理、设置
- 仪表盘包含：统计卡片（用户数、收入、订单数、转化率）、
  最近订单表格、收入趋势折线图
- 颜色风格：简洁专业，深蓝主色调 #1a56db
- 参考 Linear / Notion 的设计语言"

### 场景二：迭代优化
"将侧边栏从深色改为浅色主题
把统计卡片改为玻璃磨砂效果（glassmorphism）
在表格上方添加搜索框和日期筛选器
数据表格增加分页组件"

### 场景三：Figma 导入 + 改进
"我已经将 Figma 设计稿拖入画布，
请优化以下内容：
1. 统一所有按钮的圆角和间距
2. 修复首页和详情页的颜色不一致问题
3. 给所有卡片添加悬停动效"

## ❌ 差的提示词
"做个好看的管理后台"                    ← 太模糊
"改一下颜色"                            ← 缺少具体方向
"和 XX App 一样"                        ← 没有提供参考细节

3.1.2 分步迭代策略

3.1.3 设计风格参考库

风格关键词	视觉效果	适用场景
Apple Design Language	毛玻璃、大圆角、SF 字体、留白	消费级 App、内容平台
Material Design 3	卡片、阴影层级、FAB、动态颜色	Android 应用、企业后台
Neubrutalism	粗边框、硬阴影、高饱和色	创意网站、开发者工具
Glassmorphism	半透明、背景模糊、渐变边框	仪表盘、金融应用
Minimal Swiss	网格系统、黑白为主、无衬线体	文档站、个人博客
Linear / Notion style	微妙的边框、柔和的阴影、深色模式	生产力工具、SaaS

# 在提示词中加入风格引用
"以 Linear App 的风格设计一个任务管理面板"
"参考 Stripe 官网的渐变和阴影处理方式来设计支付页面"

---

3.2 设计到代码——从画布到可运行项目

3.2.1 代码生成流程

# 设计确认后，在 AI 对话框中输入:

"将这个设计转化为完整的 Next.js 14 (App Router) 项目：
- 使用 TypeScript
- Tailwind CSS 样式
- 组件拆分合理（每个 screen 一个 page 或 layout）
- 使用 Lucide React 图标库
- 支持深色/浅色模式切换
- 已定义的设计 Token 自动映射为 Tailwind CSS 变量"

# AI 将执行:
# 1. 读取 .pen 文件中的所有 screen 和 element
# 2. 提取 design_tokens 映射为 Tailwind config
# 3. 逐 screen 生成对应的 page.tsx / layout.tsx
# 4. 提取公共组件（导航栏、卡片等）
# 5. 生成路由配置

3.2.2 生成的代码结构

my-app/
├── src/
│   ├── app/
│   │   ├── layout.tsx          # 全局布局 + 主题 Provider
│   │   ├── page.tsx             # 首页 (映射 home screen)
│   │   ├── discover/
│   │   │   └── page.tsx         # 发现页
│   │   └── player/
│   │       └── page.tsx         # 播放详情页
│   ├── components/
│   │   ├── ui/
│   │   │   ├── Button.tsx       # 按钮组件
│   │   │   ├── Card.tsx         # 卡片组件
│   │   │   ├── Input.tsx        # 输入框组件
│   │   │   └── PlayerControls.tsx
│   │   ├── layout/
│   │   │   ├── BottomNav.tsx    # 底部导航栏
│   │   │   └── Header.tsx       # 顶部栏
│   │   └── shared/
│   │       └── ...
│   ├── lib/
│   │   ├── design-tokens.ts     # 设计 Token 映射
│   │   └── utils.ts
│   └── styles/
│       └── globals.css          # Tailwind 全局样式
├── tailwind.config.ts           # 注入 Design Tokens
├── my-app.pen                   # 设计源文件（同仓管理）
└── package.json

// tailwind.config.ts — 设计 Token 自动映射
import type { Config } from "tailwindcss";

const config: Config = {
  theme: {
    extend: {
      colors: {
        primary: "#007AFF",
        secondary: "#5856D6",
        surface: "#FFFFFF",
        "text-primary": "#1D1D1F",
        "text-secondary": "#86868B",
      },
      spacing: {
        xs: "4px",
        sm: "8px",
        md: "16px",
        lg: "24px",
        xl: "32px",
      },
      borderRadius: {
        sm: "8px",
        md: "12px",
        lg: "16px",
        full: "9999px",
      },
      fontFamily: {
        heading: ['"SF Pro Display"', "system-ui", "sans-serif"],
        body: ['"SF Pro Text"', "system-ui", "sans-serif"],
      },
    },
  },
};

export default config;

3.2.3 设计 Token → 代码映射表

.pen Token	Tailwind CSS	CSS Variables	React/Vue
colors.primary	bg-primary text-primary	var(--color-primary)	theme.colors.primary
colors.secondary	bg-secondary	var(--color-secondary)	theme.colors.secondary
spacing.md	p-md / m-md / gap-md	var(--spacing-md)	theme.spacing.md
typography.heading	font-heading text-[34px] font-bold	var(--font-heading)	theme.fontFamily.heading
radii.lg	rounded-lg	var(--radius-lg)	theme.borderRadius.lg

---

4.1 设计系统——企业级设计规范管理

4.1.1 设计 SKILL 定义

# DESIGN_SKILL.md — 存放在项目根目录，AI Agent 自动加载

## 品牌设计规范
- 主色: #1a56db (Deep Blue)
- 辅色: #f59e0b (Amber)
- 成功色: #10b981 (Emerald)
- 错误色: #ef4444 (Red)
- 背景: #f8fafc (Slate 50)
- 卡片: #ffffff

## 组件规范
### 按钮
- 主按钮: 背景主色，白色文字，圆角 lg，hover 加深 10%
- 次按钮: 透明背景，主色边框，主色文字
- 幽灵按钮: 无边框，hover 显示浅色背景
- 高度: sm=32px, md=40px, lg=48px

### 输入框
- 边框: 1px solid #e2e8f0 (Slate 200)
- Focus: 边框变主色，ring-2 ring-primary/20
- Error: 边框变错误色
- 高度统一 40px

### 卡片
- 背景白色，rounded-lg，阴影 shadow-sm
- hover 时阴影 shadow-md + translateY(-1px)
- 内边距 p-lg

### 表格
- 表头: 灰色背景 bg-slate-50，半粗体
- 行: 奇偶行交替颜色（白 / slate-50）
- hover 行: bg-primary/5

## 间距系统
- 页面外边距: 24px (lg)
- 卡片间距: 16px (md)
- 内容间距: 12px
- 紧凑间距: 8px (sm)

## 字体系统
- 标题: Inter, 24px/700
- 副标题: Inter, 18px/600
- 正文: Inter, 14px/400
- 辅助文字: Inter, 12px/400, text-secondary

4.1.2 多设计方案并行生成（AI Multiplayer）

# 通过定义多个 SKILL 文件，让 AI 生成多套设计方案

# SKILL: minimal.md
"设计风格：极简瑞士风格，黑白色调，大留白，
 Helvetica Neue 字体，最小化装饰元素"

# SKILL: vibrant.md  
"设计风格：现代活力风格，高饱和渐变色彩，
 圆角 + 毛玻璃效果，Playful 的微交互"

# SKILL: enterprise.md
"设计风格：企业级沉稳风格，深蓝色系，
 清晰的信息层级，数据可视化优先"

# 同时在 Pencil 中打开 3 个 .pen 文件
# 分别使用不同的 SKILL 生成 → 对比 → 选择最优方案

4.1.3 组件库集成

# 将现有组件库导入 Pencil 设计系统

# 1. 创建 components.pen 组件定义文件
# 2. 在 SKILL 中声明组件可用性

## DESIGN_SKILL.md — 组件库引用

## 可用组件（优先使用）
项目已安装并配置了以下组件库，设计时请优先使用这些组件：

### shadcn/ui
- Button, Input, Card, Dialog, DropdownMenu, Table
- 文档: https://ui.shadcn.com/docs

### Radix UI Primitives
- 无障碍原语：Dialog, Popover, Tooltip, Tabs

### Lucide React
- 图标库，使用 `<IconName />` 格式

## 设计原则
- 设计时必须使用上述组件库中的组件
- 不创建已存在的组件变体
- 新组件需要基于 Radix 原语构建

---

4.2 完整工作流——从需求到上线

4.2.1 一天的工作流

4.2.2 Git 版本控制中的设计管理

# 设计与代码同仓，统一管理
project/
├── .pen/                          # Pencil 设计文件目录
│   ├── v1-initial.pen             # v1 初版设计
│   ├── v2-revised.pen             # v2 迭代版
│   └── design-system.pen          # 设计系统组件库
├── DESIGN_SKILL.md                # AI 设计规范
├── src/                           # 生成的代码
└── tailwind.config.ts             # 注入设计 Token

# Git 工作流
git add my-app.pen DESIGN_SKILL.md
git commit -m "design: 首页布局迭代，优化卡片间距和颜色"

# PR 中查看设计变更
git diff main -- my-app.pen
# .pen 是纯文本 YAML，diff 可读性极好！

# 设计评审
# 在 PR 中评论:
# "这里按钮颜色和设计 Token 中的 primary 不一致，请确认"

4.2.3 CI/CD 集成

# .github/workflows/design-check.yml
name: Design Check

on:
  pull_request:
    paths:
      - "**.pen"
      - "DESIGN_SKILL.md"
      - "tailwind.config.*"

jobs:
  design-lint:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: "20"

      - name: Install Pencil CLI
        run: npm install -g @pencil.dev/cli

      - name: Validate .pen files
        run: pencil validate .pen/*.pen
        # 检查 .pen 文件格式是否正确

      - name: Check Design Token consistency
        run: pencil tokens-check .pen/design-system.pen
        # 检查所有 .pen 文件中的 Token 是否一致

      - name: Generate design preview
        run: pencil export --format=png .pen/*.pen -o design-preview/
        # 导出设计稿 PNG 到 PR

      - name: Upload design preview
        uses: actions/upload-artifact@v4
        with:
          name: design-preview
          path: design-preview/

---

5.1 高级功能——Figma 导入与协作

5.1.1 Figma 导入

# Pencil 支持直接从 Figma 导入设计

# 方式 1: 拖拽导入
# 将 Figma 的设计稿（Frame/Component）复制到剪贴板
# 在 Pencil 画布中 Ctrl+V 粘贴
# → 保留矢量路径、文本、基本样式

# 方式 2: Figma 插件导出（推荐）
# 安装 Figma Pencil Exporter 插件
# 选择 Frame → Export to Pencil
# 生成 .pen 文件，直接导入项目

# 导入后的操作:
"我已经导入了 Figma 设计稿，请将其中的:
 1. 硬编码颜色替换为 Design Token 引用
 2. 固定尺寸改为弹性布局
 3. 检查并修复跨页面的样式一致性"

5.1.2 外部 MCP 集成

5.1.3 组件变体与状态管理

# components.pen — 组件状态定义
components:
  button:
    variants:
      primary:
        default:    { bg: "primary", text: "white" }
        hover:      { bg: "primary/90" }
        active:     { bg: "primary/80" }
        disabled:   { bg: "slate-300", text: "slate-500", cursor: "not-allowed" }
        loading:    { bg: "primary", text: "white", icon: "loader" }
      secondary:
        default:    { border: "primary", text: "primary", bg: "transparent" }
        hover:      { bg: "primary/5" }
        active:     { bg: "primary/10" }
      ghost:
        default:    { text: "primary", bg: "transparent" }
        hover:      { bg: "primary/5" }

  input:
    states:
      default:    { border: "slate-200", text: "text-primary" }
      focus:      { border: "primary", ring: "2px primary/20" }
      error:      { border: "error", text: "error" }
      disabled:   { bg: "slate-100", text: "slate-400" }

# 在提示词中引用状态
"为所有按钮组件生成 hover/active/disabled/loading 四种状态"
"输入框需要 default/focus/error 三种状态的完整样式"

---

5.2 排障与优化

5.2.1 常见问题排查

5.2.2 性能优化

# .pen 文件是纯文本格式，但大项目可能较大

# 1. 拆分设计文件
# 不要把所有页面放在一个 .pen 文件中
project/
├── .pen/
│   ├── design-system.pen    # 组件库 + Token
│   ├── pages-home.pen       # 首页相关
│   ├── pages-admin.pen      # 管理后台
│   └── pages-settings.pen   # 设置页

# 2. 使用外部资源引用
# ❌ 不好: base64 嵌入图片（文件巨大）
# ✅ 好: 引用项目内资源路径
elements:
  - id: "hero-bg"
    type: "image"
    src: "@/public/images/hero.png"  # 外部引用

# 3. 组件复用
# ✅ 定义一次，多处引用
# ❌ 复制粘贴相同组件

5.2.3 生成代码质量保证

# 代码生成后的质量检查

# 1. TypeScript 类型检查
npx tsc --noEmit

# 2. ESLint 检查
npx eslint src/ --ext .ts,.tsx

# 3. 组件测试
npx vitest run

# 4. 视觉回归测试
# 使用 Playwright 截图对比设计稿
npx playwright test --update-snapshots

# 5. 无障碍检查
npx axe-linter src/

// 生成代码后的审查清单
const codeReviewChecklist = [
  "✅ 组件拆分是否合理（单一职责）",
  "✅ 设计 Token 是否正确映射到 Tailwind 类名",
  "✅ 响应式适配是否完整",
  "✅ 深色/浅色模式切换是否正常",
  "✅ 交互状态（hover/active/disabled）是否完整",
  "✅ 无障碍属性（aria-label, role）是否添加",
  "✅ 图片是否有 alt 文本",
  "✅ 是否使用了语义化 HTML",
];

---

5.3 实战案例：从 0 到 1 构建一个 SaaS 仪表盘

5.3.1 完整时间线（15 分钟）

5.3.2 关键提示词序列

## Step 1: Vibe Design 生成框架 (2 min)
"使用 Pencil MCP 为我设计一个 SaaS 数据仪表盘：
- 左侧深色侧边栏导航（仪表盘、用户、订单、分析、设置）
- 主内容区顶部 4 个统计卡片（用户总数、月收入、订单数、增长率）
- 卡片下方左侧：最近订单表格（7 列）
- 卡片下方右侧：收入趋势折线图区域
- 设计风格：Linear/Notion 风格，简洁专业"

## Step 2: 细化布局 (2 min)
"优化仪表盘：
- 统计卡片加入趋势图标和环比变化百分比
- 表格增加状态列（已完成/处理中/已取消）并着色
- 折线图区域添加时间选择器（7d / 30d / 90d）
- 侧边栏当前页高亮，添加用户头像和项目名称在底部"

## Step 3: Design Token (1 min)
"提取设计 Token：
- 主色改为 #6366f1 (Indigo)
- 间距系统：4/8/12/16/24/32
- 字体：Inter
- 导出 Token 到 DESIGN_SKILL.md"

## Step 4: 组件状态 (2 min)
"补充所有组件的交互状态：
- 侧边栏菜单 hover/active 状态
- 表格行 hover/选中状态
- 统计卡片 hover 微动效
- 时间选择器切换动画"

## Step 5: 生成代码 (3 min)
"将此设计转化为完整的 Next.js 14 项目：
- App Router + TypeScript
- Tailwind CSS 直接引用 Design Token
- 组件库: shadcn/ui (已安装 Button, Card, Table, Select)
- 图表: Recharts
- 图标: Lucide React
- 模拟数据：生成 20 条订单数据用于演示
- 支持深色模式切换"

## Step 6: 微调上线 (3 min)
"帮我运行 npm install && npm run dev 并预览
修复：表格列宽在窄屏时溢出
修复：深色模式下卡片背景太暗
添加：仪表盘页面顶部面包屑导航"

---

5.4 Pencil vs 其他方案

5.4.1 全面对比

维度	Pencil	Figma + 插件	v0 / Bolt	纯手写代码
设计自由度	⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐	⭐⭐⭐⭐⭐
从设计到代码速度	⭐⭐⭐⭐⭐	⭐⭐	⭐⭐⭐⭐	⭐
代码质量	⭐⭐⭐⭐	⭐⭐	⭐⭐⭐	⭐⭐⭐⭐⭐
版本控制	⭐⭐⭐⭐⭐	⭐⭐⭐	⭐⭐	⭐⭐⭐⭐⭐
学习成本	⭐⭐⭐⭐	⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐
团队协作	⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐	⭐⭐⭐
成本	⭐⭐⭐⭐	⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐
适合项目规模	小~大型	任意	小型	任意

5.4.2 什么时候用 Pencil

---

5.5 小结

知识点	掌握程度	核心要点
Pencil 定位	掌握	AI 原生 IDE 设计画布，MCP 协议驱动，打破设计-代码割裂
安装配置	熟练	VS Code 扩展 + CLI，.pen 文件纯文本格式
MCP 协议	掌握	Pencil MCP Server 暴露设计工具，AI Agent 自动调用
Vibe Design	掌握	自然语言驱动设计，分步迭代：整体 → 局部 → 细节
Design Token	掌握	.pen 文件中定义 Token，自动映射到 Tailwind / CSS
Design SKILL	掌握	DESIGN_SKILL.md 定义设计规范，多方案并行生成
代码生成	掌握	从画布到可运行的 Next.js/React/Vue 项目，分钟级
版本控制	掌握	.pen + 代码同仓，Git diff/PR 管理设计变更
Figma 导入	理解	拖拽粘贴 / 插件导出，导入后 AI 修正
排障	理解	MCP 连接问题、提示词优化、代码质量检查

---

推荐资源

• Pencil 官网 —— 下载和文档入口
• Pencil Downloads —— VS Code/Cursor 扩展、CLI 安装
• SKILL.md —— 官方 AI Agent 设计指令（始终最新）
• Pencil CLI npm —— 命令行工具
• MCP 协议: Model Context Protocol —— Pencil 的通信基础
• 社区: Pencil Discord —— 问题讨论和案例分享