IDE 原生設計畫布
直接在您的 IDE 中進行設計，而不必在獨立設計工具與程式碼編輯器之間切換。產品定位在讓設計與程式碼保持緊密相連。
總覽
Pencil 是一款 AI 輔助設計工具，可在貼近程式碼的畫布上建立介面，並且特別強調在開發者的 IDE 內工作。網站將其描述為一個以代理驅動的 MCP 畫布，圍繞著存在於您程式碼庫中的開放設計格式而構建。
其核心目的是讓團隊在不離開程式開發環境的情況下進行設計，接著像一般原始碼一樣，讓設計檔能夠版本控管、分支與合併。Pencil 也強調可直接與提示詞、設計套件以及匯入的 Figma 內容互動，讓使用者能在單一工作流程中，從構想到可投入生產的 UI。
核心功能
代理驅動畫布
透過 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
Pencil 替代品
Paper
Paper 是一款設計工具，串連畫布、程式碼與 AI agent，讓團隊可在同一工作流程中建立、分享並交付作品。支援桌面應用程式、MCP agent 存取，以及真實內容與設計 token 工作流。
Superside
Superside 是專為企業與內部團隊打造的 AI 驅動創意服務，結合全球人才、AI 優先流程與專案管理工具，提供訂閱制支援，滿足持續性創意製作、品牌脈絡與行銷活動執行需求。
Orca
Orca 是一款 Agent 開發環境，專為搭配 coding agents 發佈軟體而設計。可在隔離的 worktrees 中平行執行多個 CLI agents，並提供桌面與行動裝置輔助工作流程。
Firebase Studio
Firebase Studio 是一個以瀏覽器為基礎的全端應用開發工作區，提供 Gemini 輔助編碼、應用預覽、雲端模擬器，可匯入既有專案、原型設計、協作與瀏覽器部署。
EZsite AI
EZsite AI 是一款 AI 網站建置工具，可將網址轉換成完整的 React 或 Vue.js 應用程式，並提供主機、網域、程式碼匯出與後端功能，適合需要可部署成果的團隊。
AI Magicx
AI Magicx 是整合式 AI 工作區，將聊天、圖片、影片、語音、音樂、電子郵件與開發任務集中於一處，方便創作者、團隊與開發者整合多模型，免切換工具與訂閱。