# Pencil

Pencil 是一款 AI 辅助设计工具，可在 IDE 和代码库中创建界面，帮助设计师与开发者在无需切换工具的情况下，伴随代码构建、迭代和管理设计文件。

- Findings24: <https://findings24.com/zh-CN/tools/pencil-pencil-dev>
- 网站: <https://pencil.dev>
- 价格: Freemium
- 分类: AI平面设计, AI设计助手, AI开发者工具

## 什么是 Pencil？

Pencil 是一款 AI 辅助设计工具，可在更贴近代码的画布上创建界面，并重点支持在开发者的 IDE 中工作。网站将其描述为一种基于代理的 MCP 画布，围绕位于代码库中的开放设计格式构建。

其核心目标是让团队无需离开编码环境即可进行设计，同时像管理普通源代码一样，对设计文件进行版本控制、分支和合并。Pencil 还强调可直接使用提示词、设计套件以及导入的 Figma 内容，让用户在一个工作流中从想法推进到可用于生产的 UI。

## Pencil 能做什么？

### IDE 原生设计画布

直接在您的 IDE 中进行设计，而无需在独立设计工具和代码编辑器之间切换。该产品的定位是让设计与代码保持紧密关联。

### 代理驱动画布

使用 AI 驱动的画布工作流生成界面或更大范围的流程。首页称您可以与 AI 并肩工作，并行创建多个方向。

### 仓库内开放设计文件

使用位于代码库中的开放设计格式。Pencil 表示设计文件可读、可调试、可扩展，并可通过 Git 进行版本管理。

### 通过复制粘贴导入 Figma

通过从 Figma 复制来更轻松地在工具之间迁移设计。首页称矢量、文本和样式都能完整保留。

### 精选套件和品牌系统

使用精选的基于组件的设计套件，或接入您自己的套件。首页称 Pencil 包含品牌套件，并可接入团队在代码库中已有的设计系统。

### 多种客户端选项

通过桌面应用、IDE 扩展和 CLI 访问该产品。下载页面列出了原生桌面版本、适用于多个编辑器的附加组件，以及通过 npm 安装的 CLI。

## 使用场景

### 边编码边设计

当您希望设计工作与实现并行进行，而不是作为单独的交接步骤时，可以直接在编辑器中创建 UI 界面或流程。

### 基于提示词的概念生成

使用提示词库或您自己的提示词来生成新的界面方向、优化布局，或快速探索多个概念。

### 导入 Figma 设计

导入现有的 Figma 设计作为起点，然后在 Pencil 中继续迭代，同时保留源设计资产。

### 仓库管理的设计文件

处理基于仓库的设计文件，这些文件可以作为常规开发流程的一部分，通过 Git 进行版本管理、分支和合并。

### IDE 和终端工作流

当您希望通过终端或在 Cursor、VS Code 等工具内获得 AI 辅助设计时，可以使用 CLI 或编辑器扩展。

## 常见问题

### 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 中以生成或修改设计。示例包括网页应用、移动应用和设计方向相关的提示词。

## 快速信息

- **类别**: 设计工具 / 开发者工具
- **主要用途**: 在 IDE 和代码库中设计界面
- **平台**: 桌面应用、IDE 扩展、CLI
- **网站上提到的支持编辑器**: Cursor、VS Code、Claude Code、OpenAI Codex、Google Antigravity IDE、Windsurf
- **价格**: 目前免费
- **网站**: pencil.dev