--- title: "Pencil 教學：社群爆紅的 AI 設計無限畫布，設計師需要知道什麼？" slug: pencil-dev-ai-design-canvas url: https://rar.design/posts/pencil-dev-ai-design-canvas published_at: 2026-02-24 modified_at: 2026-05-03 author: "設計師 Riven" category: "AI 設計" tags: ["Pencil"] access: public_access --- # Pencil 教學：社群爆紅的 AI 設計無限畫布，設計師需要知道什麼？ > 從 Adobe XD 共同創辦人打造的 MCP 設計工具，到 Figma 與 Pencil 的差異完整解析 By **設計師 Riven** - 資深數位產品設計師｜知名線上課程講師 | 2026-02-24 📌 目錄01 Pencil 是什麼？02 為什麼它突然爆紅？03 核心功能完整介紹04 官方作品展示：一句話能做出什麼？05 跟 Figma 的差異06 使用方式與安裝07 設計師該怎麼看這個工具？08 注意事項與限制09 重點整理最近你的 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 KrchaAdobe 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 生成的完整設計：🚀 Web App「Design a web app for managing rocket launches. Use a technical style.」☕ 品牌網站「Design a website for a specialty cafe in Haight Ashbury, San Francisco.」🎵 Mobile App「Design a mobile app for tracking music royalties. Use a Scandinavian minimalistic style.」🔀 設計探索「Look at the selected design. Explore a totally different design direction.」🎸 風格迭代「Let's go more bold and rock'n'roll... Swiss layout.」📐 佈局變化「Great! Now use a sidenav. Create a new design for it.」💡 設計師觀點注意看上面這些案例的共同點：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 目前有三種使用方式：1macOS / Linux 桌面應用——到 pencil.dev/downloads 直接下載。安裝後用 Claude Code CLI 認證即可使用 AI 功能。2Cursor 擴充套件——在 Cursor 裡面直接安裝 Pencil 擴充，設計畫布就會出現在 IDE 裡面。這是目前最主流的使用方式。3VSCode 擴充套件——在 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 工具怎麼進化，扎實的設計基礎和使用者思維永遠是你最大的競爭力。了解課程 →訂閱制 ✨ AI × 設計趨勢AI 設計覺醒｜RAR 設計攻略訂閱方案AI 工具每週都在更新，我幫你過濾雜訊，只整理對設計師真正有用的 AI 應用。✦ AI 工具實測與工作流分享✦ 設計師角度的 Prompt 技巧✦ 每週精選 AI × 設計新知了解訂閱方案 →