Pencil

什么是Pencil？

Pencil是一个基于Agent驱动的设计画布，构建在开放设计格式之上，直接存在于您的代码库和IDE（Cursor、VS Code、Claude Code）中。它通过将像素完美的矢量画布引入开发环境，消除了传统的设计到代码交接。设计文件以版本控制的基于JSON的文件（.pen格式）存储在您的Git仓库中，允许团队使用与代码相同的分支、合并和协作工作流来管理设计。Pencil与Claude Code集成，支持基于组件的设计系统，并通过复制粘贴功能实现与Figma的双向工作流。该平台使用Model Context Protocol（MCP）架构，允许其他工具和Agent以编程方式读写设计。

主要功能

• 集成设计画布

  像素完美的无限WebGL画布直接嵌入到您的IDE中，消除了设计工具和代码编辑器之间的上下文切换。

• 基于Git的版本控制

  设计文件以JSON格式存储在您的代码仓库中，使用标准Git工作流实现设计与代码的版本控制、分支和合并。

• 并行AI生成

  同时运行多个设计Agent来探索不同的设计方向，实现快速迭代和实验，无需线性工作流。

• 组件和设计系统

  利用预构建的组件库，直接从代码库连接团队现有的设计系统，确保一致性和可重用性。

• Figma集成

  通过无缝复制粘贴从Figma导入设计，矢量图、文本和样式完整传输，平滑过渡到代码集成工作流。

• MCP驱动的可扩展性

  通过Model Context Protocol提供完整的读写访问权限，允许与数据库、API、图表库、Playwright/Puppeteer和自定义Agent集成。

使用场景

• 设计到代码加速 : 产品团队可以在IDE内设计界面并立即生成生产就绪的代码，消除设计交接阶段，减少设计意图与实现之间的偏差。
• 灵感编程工作流 : 开发者可以通过高级提示和画布上的视觉操作来迭代UI/UX，结合Agent代码生成的速度和视觉设计的精确控制。
• 设计系统治理 : 组织可以通过将批准的组件库和设计Token直接嵌入代码库来强制执行设计一致性，使开发者无法在没有明确版本控制更改的情况下偏离标准。
• 协作设计与开发 : 跨职能团队可以通过多人功能在同一画布上同步工作，设计师提供视觉指导，开发者并行实现功能组件。
• 快速原型制作 : 在共享画布上快速探索多个设计方向，能够像代码一样分支设计，然后将获胜的迭代开发为生产应用程序。

常见问题