# Pencil

Pencil 是一款 AI 輔助設計工具，可在 IDE 與程式碼庫中建立介面，協助設計師與開發者無需切換工具，直接伴隨程式碼建置、迭代與管理設計檔案。

- Findings24: <https://findings24.com/zh-TW/tools/pencil-pencil-dev>
- 網站: <https://pencil.dev>
- 價格: Freemium
- 分類: AI圖像設計, AI設計助手, AI開發者工具

## 什麼是 Pencil？

Pencil 是一款 AI 輔助設計工具，可在貼近程式碼的畫布上建立介面，並且特別強調在開發者的 IDE 內工作。網站將其描述為一個以代理驅動的 MCP 畫布，圍繞著存在於您程式碼庫中的開放設計格式而構建。

其核心目的是讓團隊在不離開程式開發環境的情況下進行設計，接著像一般原始碼一樣，讓設計檔能夠版本控管、分支與合併。Pencil 也強調可直接與提示詞、設計套件以及匯入的 Figma 內容互動，讓使用者能在單一工作流程中，從構想到可投入生產的 UI。

## Pencil 能做什麼？

### IDE 原生設計畫布

直接在您的 IDE 中進行設計，而不必在獨立設計工具與程式碼編輯器之間切換。產品定位在讓設計與程式碼保持緊密相連。

### 代理驅動畫布

透過 AI 驅動的畫布工作流程生成畫面或更大的流程。首頁說明您可以與 AI 並肩作業，並行建立多個方向。

### 儲存在 repo 中的開放設計檔

使用存在於您的程式碼庫中的開放設計格式。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