Pencil 教學：社群爆紅的 AI 設計無限畫布，設計師需要知道什麼？
2026年2月24日 上午 8:39
AI 設計
📌 目錄
最近你的 Threads 或 X 是不是被「Pencil」洗版了？
有人說它是「Figma 殺手」，有人說它讓設計師可以「動嘴做設計」，也有人在教怎麼在 Cursor 和 Antigravity 裡安裝它。一堆人在討論，但到底它是什麼、能做什麼、設計師又該怎麼看待它？
這篇文章我幫你把 Pencil 從頭到尾搞清楚。
Pencil 是什麼？
Pencil（pencil.dev）是一個 AI 驅動的設計畫布，直接嵌入在你的 IDE（程式碼編輯器）裡面。你可以把它理解成「住在 Cursor / VSCode 裡面的 Figma」，但它不只是畫圖——你在上面設計的東西，AI 可以直接幫你轉成可用的 HTML、CSS 和 React 程式碼。
它的本質是一個 MCP（Model Context Protocol），這代表你的 AI 編程工具（Claude Code、Cursor、OpenAI Codex 等）可以直接讀取和操作畫布上的設計檔案。設計不再是一張參考圖，而是 AI Agent 可以直接操作的結構化數據。
創辦人
Tom Krcha
Adobe XD 共同創辦人
投資方
a16z Speedrun
頂級創投加速器
目前售價
免費
Early Access 階段
支援平台
Mac / Linux
+ Cursor / VSCode 擴充
背後的公司叫 High agency, inc.，創辦人 Tom Krcha 來頭不小——他是 Adobe XD 的共同創辦人。
💡 關於創辦人
Tom Krcha 就是當年做出 Adobe XD（那個曾經想挑戰 Figma 的產品）的人之一。離開 Adobe 後，他做了 Around 視訊工具（被 Miro 收購）、共同創辦 Alter avatars（被 Google 收購），甚至參與過 Machinarium 和 Angry Birds 的開發。在全球超過 200 場研討會演講過。可以說他整個職業生涯都在「把設計概念變成可用軟體」這件事上打滾——Pencil 是他最新、也可能是最大膽的一次嘗試。
Pencil 的 AI Multiplayer 功能：多個 AI Agent 同時在無限畫布上平行設計不同頁面（圖片來源：pencil.dev）
為什麼它突然爆紅？
Pencil 早在 2025 年 9 月就以「Design Mode for Cursor」的概念問世了。但真正讓它在台灣社群爆紅的，是 2026 年 1 月的一次重大更新：支援 Claude Code 的 Infinite Design Canvas。
這次更新帶來了什麼？你現在可以在 Claude Code 裡面打開一個無限畫布，用自然語言告訴 AI「幫我設計一個定價頁面」，它就會直接在畫布上生成完整的 UI 設計。而且設計出來的不是一張圖——它是可以直接轉成程式碼的結構化元件。
這對開發者來說等於是：設計和寫程式碼這兩件事，終於合在同一個地方了。不需要再從 Figma 匯出、不需要 handoff、不需要來回對稿。你在畫布上調整的每一個像素，AI 都能直接理解並轉成對應的程式碼。
社群上很多人的反應是：有人在教怎麼用 4 個步驟在 Antigravity 裡安裝，還有人說「Claude Code 的理解力真的不錯」。大家興奮的原因很簡單——這可能是「Vibe Coding」（氛圍式編程）到「Vibe Design」（氛圍式設計）的關鍵轉折點。
📣 Tom Krcha 的發佈推文（1.4M 瀏覽）
「Excited to launch Pencil INFINITE DESIGN CANVAS for Claude Code — Superfast WebGL canvas, fully editable, running parallel design agents.」
→ 查看原始推文與 Demo 影片
Pencil 官方 Demo：在 IDE 裡直接用 AI 設計 UI 的完整流程（影片來源：pencil.dev）
核心功能完整介紹
🎨 Infinite Design Canvas（無限設計畫布）
用 WebGL 渲染的高效能無限畫布，操作體驗非常接近 Figma——有圖層面板、CSS 屬性面板、可以直接選取和拖曳元件。但它不是跑在瀏覽器裡，而是直接嵌入在你的 IDE 中。
🤖 AI Multiplayer（AI 多工設計）
你可以同時跑多個 AI Agent 來生成不同頁面。比如說同時讓 AI 做首頁、定價頁、關於頁，它們會平行運作。這就像你有一群設計師同時在不同畫板上工作一樣。
💬 Vibe Designing（氛圍式設計）
用自然語言 prompt 來設計整個頁面或特定元件。你可以選擇畫布上的某個區域，然後說「把這個按鈕改成圓角、藍色漸層」，AI 就直接改了。也支援 Notes（便利貼）功能，貼上設計指示後可以直接變成可執行的 prompt。
📂 Git-Native Design Files（Git 原生設計檔）
這是 Pencil 最革命性的概念。設計檔案用開放的 JSON 格式（.pen 檔），直接存在你的 Git 專案裡。你可以 branch、merge、做 code review——跟管理程式碼完全一樣的流程。不再有「設計在 Figma 雲端、程式碼在 GitHub」的割裂。
🔄 Figma 匯入
直接從 Figma 複製貼上（Cmd+C → Cmd+V），向量圖形、文字、樣式都會保留。不需要外掛，不需要匯出檔案。你現有的 Figma 設計可以無縫搬過來。
⚡ MCP 雙向控制
不同於 Figma 的 MCP Server 只有唯讀存取，Pencil 的 MCP 是完全的讀寫控制。AI Agent 不只能「看」你的設計，還能直接「改」。你也可以把資料庫、API、圖表數據等外部資料源接進來，讓設計畫布上顯示真實的數據。
官方作品展示：一句話能做出什麼？
光說功能太抽象，直接看成品。以下是 Pencil 官方 Prompt Gallery 裡的真實案例——每一張圖都是用一句 prompt 生成的完整設計：
💡 設計師觀點
注意看上面這些案例的共同點：prompt 都非常短，但生成出來的設計完成度很高。從 Web App 到品牌網站到 Mobile App，再到同一個設計的多次風格迭代——這就是 Pencil 主打的工作流程：快速產出 → 選定方向 → 持續迭代。
以上圖片來源：pencil.dev/prompts｜官方 Prompt Gallery
跟 Figma 的差異
先講清楚：Pencil 不是要取代 Figma。它們解決的是不同層級的問題。
Figma
→ 設計檔在 Figma 雲端
→ 設計師之間協作
→ 版本用 Figma 系統
→ MCP 只能讀取
→ 需要 handoff 給工程師
優化「設計師 ↔ 設計師」
Pencil
→ 設計檔在 Git 專案裡
→ 設計 + 開發一起
→ 版本用 Git 管理
→ MCP 可讀可寫
→ 設計直接變程式碼
優化「設計 ↔ 開發」
Figma 的強項是設計師之間的協作：多人即時編輯、完善的 Design System、強大的 prototyping、龐大的社群和外掛生態系。這些 Pencil 目前都沒有。
Pencil 的強項則是設計到開發的無縫銜接：設計檔就是程式碼的一部分，AI Agent 可以直接操控，不需要任何 handoff。它面對的核心使用者是「會寫程式的設計師」或「需要做設計的開發者」。
根據 McKinsey 的研究，設計到開發的 handoff 過程通常佔整個專案時程的 15–20%。Pencil 想要消滅的就是這段效率損耗。
使用方式與安裝
Pencil 目前有三種使用方式：
1
macOS / Linux 桌面應用——到 pencil.dev/downloads 直接下載。安裝後用 Claude Code CLI 認證即可使用 AI 功能。
2
Cursor 擴充套件——在 Cursor 裡面直接安裝 Pencil 擴充，設計畫布就會出現在 IDE 裡面。這是目前最主流的使用方式。
3
VSCode 擴充套件——在 VSCode Marketplace 搜尋「Pencil」安裝。也支援 OpenVSX。
安裝好之後，在專案裡建立一個 .pen 檔案，就會打開無限畫布。你需要設定 MCP.json 讓 AI Agent 能連接到畫布——官方文件有詳細教學，大概 5 分鐘就能搞定。
📖 快速上手資源
安裝指南 ｜ AI 整合設定 ｜ Design ↔ Code 教學 ｜ 介面操作說明
有一個社群上很多人提到的重要提醒：Pencil 的本質是 MCP，所以你不需要額外安裝 Claude Code 或 Claude 模型。它可以直接在 Antigravity、Cursor 等支援 MCP 的 IDE 裡使用。但如果你已經安裝了 Pencil 的桌面版，要注意不要同時在 IDE 裡裝擴充版，避免版本衝突。
設計師該怎麼看這個工具？
這是很多設計師看到 Pencil 之後的第一個問題：「它是來取代我的嗎？」
我的看法是：不是取代，但它會改變設計師的工作方式。
💡 對「會寫程式」的設計師
Pencil 是超級利器。你可以在同一個環境裡設計 UI 然後直接轉成 React Component，不需要再等工程師實作。對於接案、做個人專案、或是快速 prototype 的場景，效率提升非常明顯。
🎨 對「純設計」的設計師
短期內不需要擔心。Pencil 目前的設計能力跟 Figma 比還有很大差距——沒有完善的 Design System 管理、沒有 prototyping 互動、沒有協作功能。你現在用 Figma 做的大部分工作，Pencil 還做不到。但長期來看，AI 能直接從設計到程式碼的趨勢是不可逆的，設計師需要開始了解這個方向。
📐 對設計教育者和創作者
Pencil 的出現代表「設計」和「開發」的邊界正在模糊。未來教設計，不能只教 Figma 操作，也需要讓學生理解 AI Agent、MCP、以及設計如何直接落地成程式碼的概念。這是一個值得關注和提早佈局的方向。
我自己覺得最有趣的一點是：Pencil 讓「設計」這件事的門檻對開發者大幅降低了。過去工程師要做一個好看的 landing page，要不找設計師、要不硬著頭皮學 Figma。現在他們只需要用自然語言描述想要的畫面，Pencil 就能生成出來——而且品質還不差。
這對設計師意味著什麼？意味著「會做 UI」本身不再稀缺，但「做好 UI」和「懂策略」的設計師會更值錢。工具降低了基本功的門檻，但提高了對設計思維、使用者研究、品牌策略等高階能力的需求。
注意事項與限制
還在 Early Access。Pencil 目前是免費的，但這代表它也還不算穩定的正式產品。功能持續在變化，有些地方可能會遇到 bug。官方有提到未來可能會推出付費方案，但目前沒有明確的價格和時程。
沒有瀏覽器版本。你必須安裝桌面應用或 IDE 擴充才能用。而且需要本地的 Claude CLI 才能啟用 AI 功能。如果你完全不碰任何程式碼編輯器，目前沒辦法用 Pencil。
目前只支援 Mac 和 Linux。Windows 使用者暫時無法使用桌面版。不過 Cursor 和 VSCode 的擴充套件在 Windows 上應該可以運作。
設計功能還很基礎。跟 Figma 比，Pencil 缺少 Auto Layout 的完整支援、沒有 Component Variants、沒有 Prototyping、沒有多人即時協作。它目前更適合「快速產出 UI」而不是「精雕細琢設計系統」。
AI 生成品質取決於 prompt 和模型。跟所有 AI 工具一樣，你的指示越清楚，出來的結果越好。如果你有現成的 UI Kit 或 Design System 可以搭配使用，效果會更好。
後端邏輯不在範圍內。Pencil 專注在前端 UI 的設計和程式碼生成。複雜的狀態管理、API 串接、資料庫操作還是需要傳統的開發方式來處理。
重點整理
📝 重點整理
→
Pencil（pencil.dev）是一個 AI 驅動的 MCP 設計畫布，嵌入在 IDE 裡面，讓你在寫程式碼的地方直接做 UI 設計
→
創辦人是 Adobe XD 共同創辦人 Tom Krcha，獲得 a16z Speedrun 投資
→
支援 Cursor、VSCode、Claude Code、OpenAI Codex，設計檔用 .pen 格式存在 Git 裡
→
可以直接從 Figma 複製貼上、支援 AI 多工平行設計、用自然語言 prompt 生成 UI
→
目前 Early Access 完全免費，支援 Mac / Linux，不是要取代 Figma 而是解決設計 → 開發的 handoff 問題
→
設計師不需要恐慌，但需要關注「設計到程式碼」一體化的趨勢。高階設計思維和策略能力會越來越重要
🔗 延伸資源：Pencil 官網、Pencil 官方文件、下載 Pencil、Prompt Gallery
🎓 想系統性學習 UI/UX 設計？
AI 工具讓產出 UI 變快了，但「好的介面設計」需要扎實的基本功。想在 AI 時代脫穎而出，你需要的不只是工具，而是完整的設計思維與流程：
100 種 Figma 設計的方法｜UI/UX 線上課程
設計師 Riven｜10 大章節・100 個單元
從零開始學會業界主流 Figma 介面設計軟體，實作專題式教學帶你走完完整的 UI/UX 設計流程。不管 AI 工具怎麼進化，扎實的設計基礎和使用者思維永遠是你最大的競爭力。
