不只让 AI 写代码:用Claude Code、Codex直接完成 Pencil 设计

过去一年，Claude Code、Codex、Gemini CLI 等 AI Agent，正在快速改变软件开发的工作方式。

我们已经习惯让 AI 阅读代码仓库、修改多个文件、执行终端命令、修复 Bug，甚至独立完成一个功能模块。但在多数团队里，产品设计和软件开发之间，依然存在一道明显的边界：

产品经理先写需求，设计师再用设计工具画原型，开发人员根据原型编写代码。设计发生变化后，还要重新同步标注、组件、颜色和交互细节。

Pencil 想解决的，正是这道边界。

这意味着，AI Agent 不再只会“写代码”，也开始真正进入产品设计流程。

一、Pencil 是什么？

Pencil 可以理解为一个面向 AI Agent 的设计画布。

它既可以作为桌面应用运行，也可以集成到 VS Code、Cursor 等开发环境中。它所使用的设计文件以 .pen 格式保存在项目目录里，可以像代码文件一样被读取、修改、版本管理和提交。

Pencil 增加了一种新的操作方式：让 AI Agent 通过工具调用直接操作设计文件。

例如，你可以对 Agent 说：创建一个医疗影像工作列表页面，左侧是筛选条件，中间是检查列表，右侧显示患者摘要。

Agent 会分析需求，在 Pencil 画布中创建页面结构。

你还可以继续要求：

将列表区域改成深色主题，患者姓名和检查状态提高视觉层级，并增加 CT、MR、DR 三种设备类型标签。

Agent 会继续修改现有设计，而不是重新生成一张不可编辑的图片。

这与普通的 AI 绘图有本质区别。

AI 绘图生成的是一张视觉结果，而 Pencil 操作的是具有层级、组件、变量和布局信息的设计文件。页面中的按钮、卡片、文字、间距和组件关系，仍然可以继续编辑，也可以进一步转换为前端代码。

二、AI Agent 为什么能够操作设计画布？

Pencil 与 Claude Code、Codex、Gemini Agent 之间，通常通过 MCP，也就是 Model Context Protocol 连接。

可以把 MCP 理解为 AI Agent 的“通用工具接口”。

大模型本身只能理解文本，但通过 MCP，Agent 可以获得一组操作 Pencil 的工具，例如：

读取当前设计文件；
获取页面和组件层级；
创建或删除设计元素；
修改文字、尺寸、颜色和位置；
获取当前画布截图；
检查组件是否重叠；
读取和更新设计变量；

将设计规范与 CSS、组件代码同步。

整个过程可以简化为：

因此，真正完成设计工作的，并不是某一个固定模型，而是“模型、Agent 和设计工具”共同组成的工作流。

Claude Code、Codex 和 Gemini Agent 负责理解任务、制定步骤和调用工具；Pencil 负责维护设计结构、执行画布操作并呈现结果。

三、直接使用现有订阅，降低使用门槛

Pencil 设计工作流的一个重要特点，是可以复用你已经在使用的 AI Agent。

例如，你原本已经订阅 Claude，并通过 Claude Code 完成日常开发，那么可以继续沿用 Claude Code 的登录与认证体系，让它连接 Pencil。

使用 Codex 时，也可以在启动 Pencil 后，通过 Codex 的 MCP 管理功能检查 Pencil 是否已经连接。连接成功后，就可以直接在终端中要求 Codex 创建或者修改设计。

Gemini CLI 或其他支持 MCP 的 Agent，也可以采用相似的思路进行配置。

这带来一个非常现实的好处：团队不一定需要为了使用 AI 设计功能，再购买一套完全独立的模型套餐。

原来用于编码的 Agent，现在也可以成为设计 Agent。

对于个人开发者、小型团队或者独立产品经理来说，这种模式尤其有价值。你只需要维护自己熟悉的工具链，不必在多个 AI 平台之间频繁切换。

四、通过 API Key 获得更灵活的模型选择

除了直接使用已有订阅，一些团队也更倾向于通过 API Key 调用模型。

API Key 模式适合以下场景：

第一，需要精确统计模型调用量和成本。

第二，需要根据任务类型选择不同模型。

例如，复杂页面的信息架构可以使用能力更强的模型；批量修改文字、颜色和间距时，则可以使用速度更快、成本更低的模型。

第三，需要在自动化流程或者 CI/CD 环境中执行设计任务。

例如，在每次发布新版本时，自动检查设计文件、批量导出页面截图，或者验证设计变量是否与代码中的主题配置一致。

第四，企业需要统一管理模型调用权限。

在这种情况下，团队可以将 API Key 作为环境变量或密钥进行管理，避免每位成员分别配置个人账号。

不过，API Key 不应该直接写进提示词、设计文件或代码仓库。更合理的方式，是放在系统环境变量、密钥管理服务或受控配置文件中，并限制它的访问范围。

五、Pencil 会怎样改变产品设计流程？

Pencil 最大的价值，不是“让 AI 自动画一个页面”，而是让设计进入工程上下文。

传统工作流中，需求、设计和代码通常存放在三个不同系统里：

需求在文档平台，设计在设计工具，代码在 Git 仓库。

当信息发生变化时，三个系统需要依靠人工保持一致。

在 Agent 驱动的 Pencil 工作流中，需求、设计和代码可以被同一个 Agent 同时理解。

产品经理可以说：

根据当前项目里的用户管理接口，设计一个用户列表页面。

Agent 可以先读取代码中的字段和接口，再生成对应页面。

开发人员也可以说：

根据 Pencil 中的新版登录页面，修改 React 组件和 Tailwind 样式。

Agent 可以读取设计结构，再同步更新代码。

设计发生变化时，还可以进一步要求：

将主色从蓝色调整为紫色，并同步修改 Pencil 变量和前端主题配置。

此时，设计与代码不再是两个割裂的交付物，而是同一个项目上下文里的不同表达。

六、产品经理可以如何使用？

对于产品经理来说，Pencil 加 Agent 的组合尤其适合三个阶段。

1. 快速生成产品原型

将业务目标、用户角色和功能模块交给 Agent，让它先生成信息架构和页面骨架。

重点不是一步生成最终视觉稿，而是快速获得一个可以讨论的版本。

2. 批量扩展页面

当一个核心页面的视觉规范确定后，可以要求 Agent 继续生成列表页、详情页、设置页、空状态、错误状态和移动端版本。

3. 验证设计与需求的一致性

让 Agent 检查页面是否覆盖需求中的全部字段、状态和操作，或者检查相同组件在不同页面中的表现是否一致。

这比单纯让 AI 输出一张“漂亮界面图片”更接近真实产品工作。

结语：设计正在成为 Agent 的新工具

Claude Code、Codex 和 Gemini Agent 的意义，已经不再局限于代码生成。

当它们能够通过 MCP 操作 Pencil 这样的设计工具后，AI Agent 开始获得一种新的能力：在需求、设计和代码之间连续工作。

未来的软件生产流程，可能不再严格区分“写需求的 AI”“做设计的 AI”和“写代码的 AI”。

同一个 Agent 可以阅读需求、分析代码、创建设计、生成组件、检查结果，并根据人的反馈持续迭代。

Pencil 所代表的，并不只是又一个 AI 设计工具。

它更像是一个信号：继代码之后，设计文件也正在成为 AI Agent 可以直接理解和操作的工程资产。