Pencil

Pencil 是一款 AI 輔助設計工具，可在您的 IDE 與程式碼庫中建立介面，協助設計師與開發者在不切換工具下進行設計、迭代與管理設計檔案。

總覽

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

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

核心功能

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 或編輯器擴充套件。

Pros and Cons

Pros

讓設計與程式碼處於同一環境中，可減少情境切換。
支援多種進入方式，包括桌面版、IDE 擴充套件與 CLI。
採用存在於 repo 中的開放檔案格式，使檔案可讀且更容易透過 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