IDE 原生设计画布
直接在您的 IDE 中进行设计，而无需在独立设计工具和代码编辑器之间切换。该产品的定位是让设计与代码保持紧密关联。
Pencil
认领Pencil 是一款 AI 辅助设计工具，可在您的 IDE 和代码库中创建界面。帮助设计师和开发者无需切换工具即可构建、迭代并管理设计文件。
概述
Pencil 是一款 AI 辅助设计工具，可在更贴近代码的画布上创建界面，并重点支持在开发者的 IDE 中工作。网站将其描述为一种基于代理的 MCP 画布，围绕位于代码库中的开放设计格式构建。
其核心目标是让团队无需离开编码环境即可进行设计，同时像管理普通源代码一样，对设计文件进行版本控制、分支和合并。Pencil 还强调可直接使用提示词、设计套件以及导入的 Figma 内容，让用户在一个工作流中从想法推进到可用于生产的 UI。
核心功能
代理驱动画布
使用 AI 驱动的画布工作流生成界面或更大范围的流程。首页称您可以与 AI 并肩工作，并行创建多个方向。
仓库内开放设计文件
使用位于代码库中的开放设计格式。Pencil 表示设计文件可读、可调试、可扩展，并可通过 Git 进行版本管理。
通过复制粘贴导入 Figma
通过从 Figma 复制来更轻松地在工具之间迁移设计。首页称矢量、文本和样式都能完整保留。
精选套件和品牌系统
使用精选的基于组件的设计套件，或接入您自己的套件。首页称 Pencil 包含品牌套件，并可接入团队在代码库中已有的设计系统。
多种客户端选项
通过桌面应用、IDE 扩展和 CLI 访问该产品。下载页面列出了原生桌面版本、适用于多个编辑器的附加组件，以及通过 npm 安装的 CLI。
常见使用场景
边编码边设计
当您希望设计工作与实现并行进行，而不是作为单独的交接步骤时，可以直接在编辑器中创建 UI 界面或流程。
基于提示词的概念生成
使用提示词库或您自己的提示词来生成新的界面方向、优化布局，或快速探索多个概念。
导入 Figma 设计
导入现有的 Figma 设计作为起点，然后在 Pencil 中继续迭代，同时保留源设计资产。
仓库管理的设计文件
处理基于仓库的设计文件，这些文件可以作为常规开发流程的一部分，通过 Git 进行版本管理、分支和合并。
IDE 和终端工作流
当您希望通过终端或在 Cursor、VS Code 等工具内获得 AI 辅助设计时，可以使用 CLI 或编辑器扩展。
Pros and Cons
Pros
- 将设计和代码保留在同一环境中，减少上下文切换。
- 支持多种入口，包括桌面端、IDE 扩展和 CLI。
- 使用位于仓库中的开放文件格式，使文件可读，并且更便于通过 Git 管理。
- 提供基于提示词的创建能力，以及可复用提示示例库。
- 根据首页文案，支持 Figma 复制粘贴导入，并保留矢量、文本和样式。
Cons
- 定价页面尚未展示付费方案结构；目前只说明该产品当前免费。
- 收集到的来源中网站提供的文档有限，因此安装设置、支持的工作流以及团队协作行为并未得到充分说明。
FAQ
Pencil 支持哪些工具和 IDE？
Pencil 旨在在您偏好的 IDE 内运行。网站首页提到 Cursor、VS Code、Claude Code 和 OpenAI Codex，下载页面则列出了适用于 Cursor、VS Code、Google Antigravity IDE 和 Windsurf 的扩展，以及用于终端使用的 CLI。
人们实际会如何使用 Pencil？
首页将 Pencil 描述为一种基于代理的 MCP 画布，围绕位于代码库中的开放设计格式构建。下载页面还展示了桌面应用、IDE 扩展和 CLI，说明该产品有多种使用方式。
Pencil 是免费的吗？
定价页面显示 Pencil 目前是免费的。页面还说明，未来可能会推出付费功能或方案，并会在收费前展示相关条款。
Prompt Gallery 可以用来做什么？
提示词页面是一个可复制提示词的集合，用户可以将其粘贴到 Pencil 中以生成或修改设计。示例包括网页应用、移动应用和设计方向相关的提示词。
Quick Facts
- 类别
- 设计工具 / 开发者工具
- 主要用途
- 在 IDE 和代码库中设计界面
- 平台
- 桌面应用、IDE 扩展、CLI
- 网站上提到的支持编辑器
- Cursor、VS Code、Claude Code、OpenAI Codex、Google Antigravity IDE、Windsurf
- 价格
- 目前免费
- 网站
- pencil.dev