✨ 2026 最新版本

使用 Pencil + Claude Code
实现 AI 驱动的设计工作流

面向 UI/UX 设计师的完整实战教程——用自然语言指令生成、修改、迭代设计稿，彻底释放创作效率。

🎨 界面设计 🤖 AI 辅助 💻 Claude Code 📱 响应式 🧩 组件驱动
1

什么是 Pencil + Claude Code？

Pencil 是一款原生支持 AI 的矢量设计工具，通过 MCP（Model Context Protocol）与 Claude 深度集成，让你用自然语言驱动整个设计流程。

✏️

Pencil 设计工具

专业的 UI/UX 设计软件，支持组件库、设计变量、响应式布局，是 AI 协作的画布。

🤖

Claude 的「眼睛和手」

通过插件连接后，Claude 能直接「看到」你的画布，并在上面添加、修改、调整设计内容。

🔗

实时双向连接

两个工具之间建立实时通道，你说一句话，Claude 的操作几秒内就会出现在 Pencil 画布上。

⚡

批量执行能力

一句话可以同时完成多个设计动作：新建框架、填入内容、调整样式、生成配图……

传统设计流程

  • 手动拖拽每个元素
  • 逐一调整样式属性
  • 组件复用需手动操作
  • 设计→开发交付耗时
  • 修改需重复大量操作

Pencil + Claude 工作流

  • 自然语言描述即可生成
  • 批量修改样式一句话搞定
  • AI 自动识别并复用组件
  • 一键导出可用代码
  • 迭代修改极速完成
2

环境配置

本章节详细介绍 Pencil 的安装以及与 Claude Code 的连接方式。Claude Code 本身的安装步骤请参阅配套的《Claude Code 入门指南》。

📎
前置条件
请先确保你已完成 Claude Code 的安装与登录（参见《Claude Code 入门指南》），并已激活 Anthropic API 访问权限，再继续以下步骤。

整体配置流程一览

📥
下载 Pencil
Step 1
⚙️
启用 MCP 插件
Step 2
✅
验证连接
Step 3

Step 1 — 下载并安装 Pencil

Pencil 是跨平台的桌面应用，支持 macOS、Windows 和 Linux，选择对应系统的安装方式：

🍎 macOS
🪟 Windows
🐧 Linux
  • 前往官网下载：打开浏览器，访问 www.pencil.dev/downloads，点击「Download for macOS」下载安装文件。如果你用的是 M1/M2/M3 芯片的 Mac，选带「Apple Silicon」字样的版本；老款 Intel Mac 选「Intel」版本。
  • 安装应用
    双击下载好的安装文件，把 Pencil 的图标拖进「应用程序」文件夹，就像安装其他 Mac 应用一样。
  • 首次打开时的安全提示
    macOS 可能会弹出「无法验证开发者」的提示。遇到这种情况，打开「系统设置 → 隐私与安全性」，找到底部的 Pencil 提示，点击「仍要打开」即可。
  • 确认版本是否够新
    打开 Pencil 后，点击菜单栏左上角「Pencil → 关于 Pencil」，建议使用最新版本以获得最佳的 Claude Code 连接体验和完整功能支持。
  • 前往官网下载：打开浏览器，访问 www.pencil.dev/downloads，点击「Download for Windows」，下载安装程序（系统需要 Windows 10 或更新版本）。
  • 运行安装程序
    双击下载好的安装文件，按照向导提示一步步点「下一步」即可。建议勾选「创建桌面快捷方式」，方便以后快速打开。
  • 处理安全警告
    第一次运行时，Windows 可能会弹出蓝色安全警告框。点击「更多信息」，然后点「仍要运行」就好。
  • 允许防火墙访问
    安装过程中，Windows 防火墙可能会弹出询问。点击「允许访问」，这样 Pencil 才能和 Claude Code 正常通信。
  • 前往官网下载：访问 www.pencil.dev/downloads，根据你的系统选择下载格式：Ubuntu/Debian 用户选「.deb」；Fedora 用户选「.rpm」；不确定选哪个就选「AppImage」（通用格式，适合所有 Linux 发行版）。
  • AppImage 格式（最简单）
    下载后，右键点击文件 → 「属性」→「权限」，勾选「允许作为程序执行」，然后双击即可运行，无需安装。
  • .deb 或 .rpm 格式
    双击下载的安装包，系统会自动调用软件商店完成安装，与安装普通软件体验一致。
  • 如果 AppImage 无法启动
    部分 Linux 版本需要额外安装一个叫「libfuse2」的依赖库。如果双击后没有反应，请在「软件中心」搜索并安装 libfuse2，然后再试。
⚠️
建议使用最新版本
为确保与 Claude Code 的最佳连接体验和完整功能支持，建议使用 Pencil 的最新版本。安装完成后，可以在「关于 Pencil」页面查看当前版本号。

Step 2 & 3 — 开启连接开关，让两个工具握手

安装完 Pencil 之后，需要分别在 Pencil 和 Claude Code 各开一个开关，两边才能互相识别。整个过程大概 3 分钟，就像给两台设备配对蓝牙。

A

第一步：在 Pencil 里打开「Claude Code 连接」开关

打开 Pencil，进入软件的偏好设置，找到「集成」页面，把 Claude Code 的开关拨到开启。

  • 打开 Pencil 的偏好设置：Mac 用户点击屏幕左上角「Pencil」菜单 → 选「偏好设置」。Windows/Linux 用户点击顶部「编辑」菜单 → 选「偏好设置」。或直接用快捷键：Mac 按 ⌘,，Windows 按 Ctrl+,。
  • 切换到「集成」标签页：偏好设置窗口打开后，找到并点击「集成（Integrations）」选项卡。
  • 开启 Claude Code 连接：找到「Claude Code」选项，把旁边的开关拨到开启状态（蓝色或绿色）。开关右侧会出现一个绿色圆点，表示连接正在运行。
  • 不要关闭 Pencil：开关打开后，保持 Pencil 在运行中（可以最小化，但不能退出）。只要 Pencil 在后台开着，Claude Code 随时都能读取你的设计文件。
🟢
绿点 = 一切正常
开关旁边的小圆点是绿色，说明 Pencil 已经准备好接受 Claude Code 的连接了。如果是红色，参考下方的「连接失败」排查表。
B

Claude Code 自动连接 Pencil

好消息！Pencil 现在会自动与 Claude Code 建立连接，无需手动配置 MCP 服务器。只要 Pencil 在运行且 MCP 开关已开启，Claude Code 就能自动检测并连接。

✨
自动连接，开箱即用
Pencil 会自动检测 Claude Code 环境并建立连接，你不需要在 Claude Code 的设置中手动添加 MCP 服务器或编辑配置文件。只需确保 Pencil 正在运行，并且在「偏好设置 → 集成」中开启了 Claude Code MCP 开关即可。

确认连接已就绪

虽然 Pencil 会自动连接，但为了确保最佳体验，建议：先启动 Pencil，再使用 Claude Code。这样可以确保 Claude Code 在启动时就能检测到 Pencil 的存在。

💡
启动顺序建议
虽然不是强制要求，但先打开 Pencil 并确认绿色状态灯亮起，再开始使用 Claude Code，可以获得更流畅的体验。如果 Claude Code 已经在运行，只需在 Pencil 中开启 MCP 开关，连接会自动建立。

Step 3 — 测试一下，确认连接成功

完成配置后，花 1 分钟对照这份清单确认一遍，再开始正式设计：

  • ✅
    Pencil 正在运行，「集成」面板里的 Claude Code 开关是绿色状态
  • ✅
    Pencil 里已经打开了一个设计文件（新建一个空白文件也行）
  • ✅
    Claude Code 已启动，启动界面中能看到「Pencil 已连接」或类似提示
  • ✅
    在对话中输入测试指令，Claude 能正确返回当前编辑器信息

在 Claude Code 对话框中输入以下测试指令来验证连通性：

你现在能看到我的 Pencil 画布吗？告诉我当前打开的是什么文件，以及画布上有哪些内容。

🟢

连接成功的响应示例

Claude 会回复类似：「当前打开的文件是 dashboard，画布上有 2 个页面：Overview Screen（1440×900）和 Mobile Screen（375×812）。」能看到这样的回复，说明连接完全正常，可以开始设计了！

⚠️ 连接失败？对照这份排查清单

你看到了什么原因怎么解决
Claude 说「找不到 Pencil」或「无法连接设计工具」 Pencil 未运行，或 MCP 开关未开启 先打开 Pencil，在「偏好设置 → 集成」中确认绿色状态灯亮起。Pencil 会自动连接到 Claude Code
Pencil 集成面板显示红色「● Error」 MCP 服务启动失败 尝试关闭 MCP 开关，等待 5 秒后重新开启。如果问题持续，重启 Pencil 应用
Claude 连上了，但说「画布是空的」 Pencil 里没有打开任何文件 在 Pencil 中新建或打开一个 .pen 设计文件，然后重新提问
一切正常但 Claude 无法修改画布 MCP 连接可能需要重新建立 在 Pencil 的「偏好设置 → 集成」中关闭再重新开启 MCP 开关，连接会自动重新建立
🔧
万能重置方法
遇到任何奇怪的连接问题，最简单的方法是：在 Pencil 的「偏好设置 → 集成」中关闭 MCP 开关，等待几秒后再重新开启。Pencil 会自动重新连接到 Claude Code，这能解决大部分连接问题。
3

基础工作流

了解 Pencil + Claude 的核心协作模式，建立正确的工作习惯。

💬
自然语言描述
→
🔍
AI 分析上下文
→
⚡
执行设计操作
→
👁️
截图审查
→
🔄
迭代优化

Claude 在设计中能做什么？

你不需要记住任何指令名称——只需用自然语言描述想要的结果，Claude 会自动选择合适的操作。下面列出的是 Claude 在背后会用到的能力，了解它们可以帮你更好地描述需求：

📄
关于 .pen 文件格式
.pen 文件是 Pencil 的设计文件格式，基于 JSON 结构，支持 Git 版本控制。重要：.pen 文件内容是加密的，只能通过 Pencil MCP 工具访问，不能使用普通的文件读取工具。另外，目前不支持自动保存，请记得频繁按 ⌘S / Ctrl+S 保存工作。
Claude 能做的事 你可以这样说 常用程度
📂 读取当前画布状态 「告诉我画布上现在有什么」「现在打开的是哪个文件？」 每次开始都用
🧩 列出所有可用组件 「这个设计系统里有哪些组件可以用？」 每次开始都用
✏️ 在画布上创建和修改内容 「帮我创建一个登录页」「把这个卡片的标题改成…」 核心操作
📸 截图查看当前设计效果 「截一下现在的样子让我看看」 完成每块后用
🎨 获取视觉风格灵感 「我要做一个暗黑风的 SaaS 产品，帮我找个合适的风格参考」 新项目时用
📏 检查布局规范 「帮我按照移动端设计规范来」「Web 端的常见布局是什么？」 按需使用
🔍 排查布局问题 「检查一下有没有内容超出边界或被遮住的地方」 出问题时用
🌗 设置品牌色和主题 「把主色调改成 #6C63FF，同时支持深色模式」 品牌定义时用
4

Claude 能对设计稿做什么？

一次对话，Claude 可以同时完成多个设计动作——从新增元素、调整内容，到生成配图，全部在 Pencil 画布上实时呈现。

7 种基本设计动作

你不需要记这些名字，只需用自然语言描述，Claude 会自动选择合适的方式来执行：

➕

新建元素

在画布或某个容器内创建新的框架、文字、图片、矩形等任何元素。

📋

复制已有元素

把现有的元素或组件复制一份，同时可以修改复制体的内容和属性。

✏️

修改属性

改变元素的颜色、大小、文字内容、圆角、间距等任意视觉属性。

🔄

替换元素

把某个位置的元素整体换成另一种，常用于把占位符换成真实组件。

↔️

移动位置

将元素移动到画布的另一个区域或另一个容器内，调整层级顺序。

🗑️

删除元素

删除指定的元素及其内部所有内容（此操作不可撤销，请谨慎使用）。

🖼️

生成配图

用 AI 生成插图，或从 Unsplash 搜索真实照片，直接填充到指定区域。

实战示例：用一段话搭建登录页

下面是一个真实的对话示例，你只需这样描述，Claude 就能把整个登录页搭建出来：

帮我新建一个 1440×900 的登录页。左侧 600px 宽，紫色背景，放品牌 Logo 文字和一张 AI 生成的配图。右侧自动填满，白色背景，从上到下依次是：大标题「欢迎回来」、副标题说明文字、邮箱输入框、密码输入框、全宽蓝色登录按钮。输入框和按钮请用设计系统里已有的组件。

✨

Claude 会做什么

收到上面这段描述后，Claude 会自动完成：创建页面框架、划分左右两栏、添加品牌文字、生成 AI 插图、填写标题文案、调用设计系统中的 Input 和 Button 组件，并在完成后截图给你确认效果。

⚠️
复杂页面建议分步描述
对于内容较多的页面，建议分 2～3 轮完成：第一轮搭整体框架，第二轮填充各区域内容，第三轮调整细节样式。每轮结束后让 Claude 截图确认，再进入下一轮。

技术限制：Claude 每次最多执行约 25 个设计操作，复杂设计会自动分批完成。
5

善用你的组件库

如果你的设计文件里已经有组件库（按钮、输入框、卡片等），Claude 可以直接调用这些组件，就像你在 Pencil 里拖拽组件一样——但速度更快。

第一步：告诉 Claude 你有哪些组件

每次开始新的设计任务，先问一句，让 Claude 了解你的"设计词汇库"。Claude 会使用专门的工具搜索所有可复用的组件（reusable 节点）：

帮我列出这个设计文件里所有可以复用的组件，告诉我每个组件叫什么名字、大概长什么样。

Claude 会回复类似这样的列表：

🔘

Button（主按钮）

紫色填充，白色文字，圆角 8px，高度 44px。可调整文字内容和宽度。

📝

InputField（输入框）

带边框的文字输入框，可自定义占位符文字和图标。全宽填充。

📊

StatCard（数据卡片）

白色卡片，带标题、数值、趋势箭头。宽 280px，可调文案和颜色。

第二步：用描述调用和定制组件

知道有哪些组件后，就可以直接在描述中引用，并告诉 Claude 要修改哪些内容：

在 stats 区域横向排列 3 个数据卡片，使用 StatCard 组件。内容分别是：

第一个：标题「月活跃用户」，数值「12,840」，趋势向上（绿色）

第二个：标题「本月收入」，数值「¥68,200」，趋势向上（绿色）

第三个：标题「平均停留时长」，数值「4.2 分钟」，趋势向下（红色）

✅
养成一个好习惯
每次开启新的设计会话，先让 Claude 列出可用组件，再开始正式设计。这样 Claude 就不会从零搭建那些你已经有的组件，既省时间又保持风格统一。
6

描述布局的方式

和 Figma 的 Auto Layout 一样，Pencil 支持横向/纵向自动排列。你只需用自然语言描述想要的布局结构，Claude 就能正确地搭建。

几个关键概念，会让你描述更精准

↔️

横向排列 vs 纵向排列

「左右并排」= 横向；「上下堆叠」= 纵向。这是布局最基础的方向，一定要说清楚。

↕️

元素间距

「元素之间留 16px 间距」——Claude 会把这个值设为 gap。

📦

内边距（Padding）

「容器四周留 32px 内边距」或「上下 24px、左右 32px 的内边距」。

↔️

固定宽度 vs 自适应

「左侧导航固定 240px 宽」vs「右侧内容区自动填满剩余空间」。

🎯

对齐方式

「顶部对齐」「垂直居中」「两端对齐」——和 Figma 的对齐选项一样。

📐

常见页面尺寸

桌面端：1440×900 或 1280×800；iPhone：375×812；iPad：768×1024。

典型布局的描述示例

🖥️ 三栏 Dashboard（最常见）
创建一个 1440×900 的 Dashboard 页面，三栏横向排列：左侧深色导航栏固定 240px 宽，中间主内容区自动填满，右侧浅灰详情面板固定 320px 宽。三栏高度都撑满整个页面。

📱 移动端列表页
创建一个 375×812 的手机屏幕，纵向布局：顶部固定 56px 高的导航栏（白色背景，标题居中），中间内容区自适应高度（上下各 16px 内边距，卡片间距 12px），底部固定 60px 高的 Tab 栏。

🌐 网站首页 Hero 区域
创建一个全宽 1440×640 的 Hero 区域，内容水平居中，左右各留 80px 边距。内容区纵向排列：顶部小标签，下面是大标题（字号 56px，加粗），再下面是副标题说明文字（字号 18px，灰色），最底部是两个横向排列的按钮，间距 12px。整体垂直居中。

7

风格与主题

使用风格指南和设计变量，让你的设计有一致的视觉语言，并支持深色/浅色模式切换。

获取设计灵感

在开始新项目前，先让 Claude 推荐一套视觉风格，为整个设计定下基调：

我想设计一款面向创意人群的 SaaS 产品，风格现代、有设计感，带一点暗黑氛围。请帮我获取合适的风格指南。

设置品牌色和全局主题

告诉 Claude 你的品牌颜色和视觉规范，它会把这些定义为全局变量，整个设计文件都会统一应用：

帮我为这个设计文件设置全局变量：

主色调：#6C63FF（深色模式下改为 #9F96FF）

背景色：白色（深色模式下改为 #1A1B2E）

正文颜色：#1A1B2E（深色模式下改为 #F0F0FF）

圆角默认值：12px

字体：Inter

🎨
换品牌色的神器
如果整个设计稿需要换一套颜色（比如把所有灰色 #CCCCCC 换成 #6B7280），直接告诉 Claude：「把设计稿里所有用到 #CCCCCC 的地方全部替换成 #6B7280」——它会扫描整个文件批量替换，一秒搞定。
8

提示词技巧

与 AI 协作设计的质量，很大程度上取决于你如何描述需求。以下是经过验证的提示词模式。

✅ 高质量提示词结构

帮我在 [目标帧 ID] 中创建一个 [组件类型]，用于 [使用场景]。

风格要求：[视觉风格描述]

内容：[具体文字/数据]

布局：[排列方式]，宽度 [xxx]px，高度 [xxx]px

请使用设计系统中的 [已知组件名] 作为基础。

实际示例对比

❌ 模糊提示词

  • 做一个好看的按钮
  • 加一些卡片
  • 设计一个登录页
  • 改改颜色

✅ 精准提示词

  • 创建一个圆角 8px、背景色 #6C63FF、高度 44px、全宽的主要操作按钮
  • 在 stats 框架中插入 3 个宽 280px 的数据统计卡片，引用 StatCard 组件
  • 创建 1440x900 的登录页，左侧品牌区（紫色背景 + AI 插图），右侧邮箱+密码表单
  • 将画布中所有 #CCCCCC 的颜色替换为 #6B7280

常用提示词模板

  • 📱
    移动端屏幕
    "帮我在画布右侧空白处创建一个 375x812 的 iPhone 屏幕，包含顶部导航、内容区和底部 Tab 栏，使用竖向布局。"
  • 📊
    数据看板
    "在主内容区创建一个数据仪表板，顶部 4 个 KPI 指标卡横排，中间一个大折线图，底部左右各一个表格和饼图。"
  • 🔄
    批量修改
    "将所有文字颜色从 #000000 替换为 #1A1B2E，将所有填充色 #F0F0F0 替换为 #F8F9FF，保持整体视觉一致性。"
  • 🖼️
    配图生成
    "在 hero-image 框架中生成一张 AI 插图，主题是'现代科技感办公室，紫色调，极简风格'。"
9

从设计到代码

Pencil + Claude 不只是设计工具，还能将设计稿直接转换为可用的前端代码。

⚛️

React + Tailwind

生成基于 React 函数组件 + Tailwind CSS 类名的现代化代码。

🎨

CSS Variables

自动提取设计变量，生成 CSS 自定义属性（--color-primary 等）。

📦

组件代码

基于设计系统中的可复用组件，生成对应的 React/Vue 组件代码。

请读取 login-page 框架的完整结构，并生成对应的 React + Tailwind v4 代码。要求：

- 使用函数式组件和 TypeScript

- 表单有完整的状态管理

- 响应式适配移动端

- 严格还原设计稿中的间距、颜色、圆角

ℹ️
代码生成前置步骤
在让 Claude 生成代码之前，先告诉它「请先读取我的设计规范和变量设置」，然后再说「生成代码」——Claude 会自动提取你的颜色变量、字体设置等，让生成的代码与设计稿高度一致。
10

最佳实践

来自实战经验的黄金法则，帮你避坑、提效。

  • 🔍
    开始前先问「现在有什么」
    每次开始新的设计任务，先让 Claude 读取一下当前画布状态和可用组件，这样 Claude 才能准确地在正确位置添加内容，而不是在空白处另起炉灶。
  • 💾
    记得频繁保存！Pencil 目前没有自动保存
    .pen 文件目前不支持自动保存，请养成按 ⌘S (Mac) 或 Ctrl+S (Windows/Linux) 的习惯。建议每完成一个设计区块就保存一次，避免意外丢失工作。
  • 📸
    完成每个区域后都截图看一眼
    设计完一个区块（比如顶部导航），立刻让 Claude 截图给你看。及时发现文字溢出、对齐错误，比等整个页面做完再返工要省很多时间。
  • 🧩
    已有组件就直接用，别让 Claude 重复造轮子
    如果你的设计文件里已经有按钮、卡片等组件，明确告诉 Claude「用现有的 Button 组件」，而不是说「做一个按钮」——前者会复用你的设计，后者可能会重新创建。
  • 🎨
    描述颜色用色值，不要说「漂亮的蓝色」
    描述颜色时直接给出十六进制色值（如 #6C63FF），比用「蓝紫色」「深一点的紫」更精准，Claude 能 100% 还原你想要的效果。
  • 📐
    加新页面前，告诉 Claude 放在哪里
    画布上已经有很多内容时，告诉 Claude「在现有内容的右侧/下方空白处新建」，避免新内容压在已有设计上。
  • ⚡
    复杂页面分 3 步走
    第一轮：整体框架（几栏、大致区域划分）→ 第二轮：各区域内容填充 → 第三轮：细节样式微调。每轮结束后截图确认再继续，不要一次性描述太多。
  • 🎯
    视觉效果不对就说「哪里不对」
    如果 Claude 做出来的效果不是你想要的，直接描述问题所在：「左边那列太宽了，改成 200px」「标题和副标题之间间距太大了，缩小一点」——比重新描述整个需求更高效。
11

设计场景提示词速查

遇到不知道怎么开口的时候，从这里复制一句改改就能用。

🏗️ 新建页面 / 框架

  • 📄
    帮我新建一个 1440×900 的桌面端页面，命名为「首页」
  • 📱
    在画布右侧空白处新建一个 375×812 的手机屏幕，命名为「移动端-首页」
  • 📋
    把「首页」这个页面复制一份，命名为「首页-暗黑版」，放在它右边

✏️ 添加内容

  • 🔤
    在顶部导航栏里加一个标题文字「Dashboard」，字号 20px，加粗，颜色 #1A1B2E
  • 🔘
    用现有的 Button 组件，在表单下方添加一个全宽的「登录」按钮
  • 🖼️
    在 hero-bg 这个区域生成一张 AI 插图，风格是「现代科技感、紫色调、极简」
  • 📸
    在 avatar 区域放一张来自 Unsplash 的专业人像照片

✏️ 修改样式

  • 🎨
    把整个设计稿里所有 #CCCCCC 的颜色替换成 #6B7280
  • 📏
    把左侧导航栏的宽度从 240px 改为 200px
  • ↔️
    把卡片区域的元素间距改为 16px，内边距改为 24px
  • 🌗
    把主色调改为 #6C63FF，深色模式下改为 #9F96FF，并应用到整个文件

🔍 检查与确认

  • 📸
    截一下现在整个页面的样子，我想看看效果
  • 📂
    告诉我画布上现在有哪些页面和框架
  • 🧩
    列出这个文件里所有可以复用的组件
  • 🔍
    检查一下有没有内容超出边框或被遮住的问题

💻 交付给开发

  • ⚛️
    读取「登录页」框架的结构，生成对应的 React + Tailwind 代码，响应式适配移动端
  • 🎨
    把这个文件里的所有设计变量（颜色、字体、圆角）整理成 CSS 变量格式
12

常见问题

Q：Claude 说看不到我的设计文件，怎么办？

先确认 Pencil 已经打开，且「偏好设置 → 集成」里的 Claude Code MCP 开关是绿灯状态。由于 Pencil 会自动连接 Claude Code，通常只需在 Pencil 中关闭再重新开启 MCP 开关即可。如果问题依旧，可以尝试重启 Claude Code。

❗
最常见的原因
超过 80% 的连接问题都是「先开了 Claude Code，后开了 Pencil」造成的。正确顺序：先打开 Pencil 并等绿灯亮，再打开 Claude Code。

Q：Claude 做出来的效果和我想的不一样，怎么调？

直接告诉 Claude 哪里不对就好，比如：「左边那列太宽了，改到 200px」「按钮颜色太深，改成 #8B7CF8」「卡片之间间距太大，缩小到 12px」。Claude 会在现有基础上修改，而不是重新做。

Q：一次对话说了很多，Claude 做到一半停了？

这是正常的——Claude 每轮最多处理一定量的设计动作，复杂页面需要分几轮完成。当 Claude 停下来时，直接说「继续」或「做下一部分」即可。建议你主动把需求拆成几个步骤，每步确认后再继续。

Q：如何让 Claude 记住我的设计系统组件？

在每次对话开头问一句「列出这个文件里所有可用的组件」，Claude 就会记住当次会话中的组件信息。如果你的组件经常用到，也可以在 Pencil 的项目里建一个名叫「设计规范」的页面，把组件名称和用途写清楚，让 Claude 随时参考。

Q：设计稿可以多人协作吗？

可以。.pen 文件是基于 JSON 的开放格式，完全兼容 Git 版本控制。你可以：

  • 将 .pen 文件提交到 Git 仓库，与代码一起管理
  • 使用 Git 的分支、合并功能进行协作
  • 放在共享网盘（iCloud、Google Drive、Dropbox）上与团队共享
  • 每次重要迭代前提交一个版本，随时可以回滚

重要提醒：.pen 文件目前不支持自动保存，请记得频繁按 ⌘S / Ctrl+S 保存，避免丢失工作。

Q：中文字体显示不正常怎么解决？

在对话中告诉 Claude：「把这个文件的默认字体改为苹方（PingFang SC）」或「改为思源黑体（Noto Sans SC）」，Claude 会把字体写入全局设计变量，整个文件统一生效。

Q：为什么不能直接用文本编辑器打开 .pen 文件？

.pen 文件的内容是加密的，只能通过 Pencil 应用或 Pencil MCP 工具访问。Claude 使用专门的 MCP 工具（如 batch_get、batch_design）来读取和修改设计文件，这确保了设计数据的安全性和完整性。如果你需要查看设计内容，请在 Pencil 中打开文件，或让 Claude 帮你读取和截图。