不是在 Figma 畫完再交付：Pencil 讓你在寫程式的地方就把設計做好

Pencil：把設計直接搬進程式碼世界的全新嘗試

Pencil 提出了一個對設計與工程團隊都相當激進的主張：「設計不該再是交接物，而應該是程式碼的一部分。」它不是另一個獨立設計工具，而是一個存在於 IDE 裡、與程式碼共存的設計畫布，透過 AI 與開放格式，試圖消除「設計完成 → 交給工程」這條長期存在的斷層。

就在你寫程式的地方設計，不再需要設計交接。Pencil 是以代理驅動的 MCP 畫布，圍繞開放設計格式打造，存在於你的程式碼庫中。它支援游標、Claude Code、VSCode、OpenAI Codex 等。

AI designer for every engineer

Pencil.dev – Tom Krcha

為什麼 Pencil 要「設計就寫在 IDE 裡」

設計交接，是效率流失的黑洞

傳統流程中，設計與開發分屬不同工具與語境，設計稿完成後，工程師往往需要重新理解、重建甚至猜測細節。Pencil 的核心假設是：只要設計存在於程式碼旁邊，交接就不再是問題。

設計與程式碼只差一個 tab，成為同一個工作流程的一部分。

Pencil.dev 像設計界的 Figma，但不等於 Figma。Figma 在設計世界裡協作，Pencil 在程式碼世界裡設計。

Pencil 的核心概念：Design as Code

設計檔案不再是黑盒子

Pencil 採用完全開放的設計檔案格式，設計資料直接存在於程式碼庫中，可以被閱讀、除錯、延伸，甚至被其他工具或代理操作。

這代表：

• 設計檔可被版本控制
• 可以使用 Git 進行 branch、merge
• 不再被單一工具或平台鎖定

設計正式成為工程資產，而非外部附件。

在 IDE 裡設計，而不是切換工具

無限畫布，就在你熟悉的環境中

Pencil 提供一個存在於 IDE 的無限向量畫布，讓設計與開發者能在同一個環境中進行像素級設計，不必在設計工具與編輯器之間來回切換。

設計與程式碼彼此可即時對照，降低理解與轉譯成本。

AI Multiplayer：設計不再是一個人慢慢磨

AI 不只是輔助，而是並行的「設計夥伴」

Pencil 提出「AI singleplayer is the new multiplayer」的概念，讓多個 AI 同時並行生成畫面或流程。

這種方式適合：

• 快速探索多個設計方向
• 同時生成不同方案進行比較
• 加速早期發想與試錯

設計不再是線性流程，而是平行實驗。

用提示設計，但不犧牲精準度

Vibe designing，但仍是像素級控制

Pencil 支援直接用提示詞生成整個畫面或局部元件，同時也提供針對速度與品質優化過的操作指令。

你可以：

• 快速生成，再精修
• 只改某個區塊，而不是整個畫面
• 在脈絡完整的情況下下指令

這不是「丟給 AI 隨便畫」，而是在人類掌控下的加速。

從向量到程式碼，一條不中斷的路徑

設計與輸出程式碼保持一致

Pencil 的一個關鍵承諾是「Pixel perfect」。設計完成後，可以直接產出對應的 HTML、CSS 或 React 程式碼，並維持設計與實作的一致性。

設計與程式碼不再是兩份相似但永遠不完全一樣的產物。

設計系統不是重來，而是直接接上

Brand kits 與既有設計系統共存

Pencil 提供內建的設計套件，也允許直接接入團隊既有的設計系統，從程式碼庫中讀取元件與樣式。

這讓：

• 初期專案可以快速起步
• 成熟團隊不必推翻既有系統

AI 帶來的是加速，而不是破壞一致性。

與既有工具共存，而非取代

支援 Figma 匯入，降低轉換成本

Pencil 並沒有否定現有設計工具，而是允許直接從 Figma 複製貼上設計內容，包含向量、文字與樣式。這讓團隊可以逐步轉移，而不是一次性換血。

MCP 與可擴展性的真正價值

不只是讀取，而是「可寫、可控」

Pencil 的 MCP Canvas 不只提供讀取能力，而是完整的寫入與操作權限。這意味著你可以：

• 接入資料庫、API、圖表資料
• 整合測試工具（如 Playwright、Puppeteer）
• 串接其他 AI Agent

設計畫布成為可被自動化與擴充的工作平台，而不是靜態畫面。

Pencil 想解決的，不只是設計效率

它挑戰的是「設計與工程分離」這件事

Pencil 的定位並不是單純的 AI 設計工具，而是一種流程觀點的轉變：當設計存在於程式碼中，協作方式本身就會改變。設計師更接近實作現實，工程師更早參與體驗決策。

Pencil 適合誰

Pencil 特別適合：

• 重視設計與工程一致性的團隊
• 想減少設計交接成本的產品組織
• 願意嘗試「設計即程式碼」流程的開發者

它不是為了取代所有設計工具，而是為那些厭倦來回翻譯、反覆對齊的人，提供一條新的可能路徑。

設計不再只是畫在畫布上，而是真正落在程式碼裡。

設計不該再是交接物，而應該是程式碼的一部分。

Pencil.dev – Tom Krcha

延伸閱讀：爾文實驗室科技工具蒐藏 

Pencil CEO：Tom Krcha 把「設計交接」這件事，直接從流程中刪掉

Pencil 並非偶然出現的 AI 設計工具，而是 Tom Krcha 長期站在「設計 × 工程 × AI」交會點上的必然產物。從 Adobe、Alter、Around 到 Pencil.dev，他反覆處理的始終是同一個問題——如何讓設計真正落地，而不是停在交接點上。

Tom Krcha 是誰，背景很關鍵

一條始終圍繞「設計到實作」的職涯路徑

Tom Krcha 的經歷高度一致：

• Adobe：主導 Adobe XD，長期站在設計工具第一線
• Alter：共同創辦人，專注於 ML、CV、3D、AR，最終被 Google 收購
• Around：視訊產品，後被 Miro 收購
• Pencil.dev：創辦並擔任 CEO，正式將「設計即程式碼」推到極致

這不是「創業轉彎」，而是一條持續深化的主線。

Pencil 想解決的核心問題

設計交接，是現代產品開發中最昂貴的摩擦

Pencil 的產品敘事非常直接：「只要設計存在於程式碼之外，交接成本就永遠存在。」

因此 Pencil 選擇的不是「做更好的設計工具」，而是：

• 讓設計檔案直接存在 repo
• 讓 IDE 成為設計畫布
• 讓 AI agent 能直接讀寫設計

設計不再是輸出物，而是工作中的活資料。

Pencil 的產品核心定位

Pencil 是一個：

• MCP 驅動的設計畫布
• 完全存在於 IDE（Cursor、VSCode、Claude Code 等）
• 使用開放、JSON-based .pen 檔案格式

設計、程式碼、AI agent 共用同一個上下文。

Design right where you code

Pencil.dev – Tom Krcha

為什麼「開放格式」是關鍵設計決策

設計檔不再是黑盒子

Pencil 明確反對封閉設計檔案格式：

• 設計檔可讀、可 debug、可擴充
• 可用 Git 進行版本控制、分支與合併
• AI agent 不只是「看得到」，而是「能動手改」

這讓設計第一次真正成為工程資產。

Infinite Canvas + WebGL，不只是效能選擇

為 AI Multiplayer 而生的畫布

Pencil 使用高速 WebGL Canvas，不只是為了流暢，而是為了支撐：

• 多個 AI agent 並行生成畫面
• 同時探索多條設計路徑
• 設計變成平行實驗，而非線性流程

「AI singleplayer is the new multiplayer」在這裡不是口號，而是實作前提。

AI 在 Pencil 裡扮演的角色

不是輔助，而是並行的設計夥伴

在 Pencil 中，AI 可以：

• 根據設計系統生成完整 flow
• 針對局部元件快速變化
• 與人類在同一畫布中協作

重點不是「快出一版」，而是「同時出很多版」。

從設計到程式碼，不再需要翻譯

Pixel-perfect，不是行銷詞

Pencil 強調設計與輸出程式碼的一致性，這對工程師的心理負擔，影響非常實際。：

• 設計向量 → HTML / CSS / React
• 設計即是實作參考來源
• 降低「看起來差不多，但永遠不一樣」的落差

與既有工具的關係：不是推翻，而是接上

Figma 不是敵人，而是過渡來源

Pencil 支援直接從 Figma 複製貼上向量、文字與樣式，讓導入成本顯著降低。代表它的策略是：

• 接受現實世界已有流程
• 提供「下一步」而不是「全面重來」

為什麼 Pencil 特別吸引「generalists」

為會設計、會寫 code、也會用 AI 的人而生

Tom Krcha 在多則貼文中反覆提到：

• vibe coding
• vibe designing
• generalists

Pencil 的目標用戶，本來就不是嚴格分工的流水線團隊，而是：

• 小而強的產品團隊
• 工程師主導設計的組織
• 對流程摩擦極度不耐的創作者

會設計、會寫 code、會用 AI，這在說我嗎。😁

降低「看起來差不多，但永遠不一樣」的落差

Pencil.dev – Tom Krcha

背後的訊號：這不是個人專案

a16z Speedrun 支持的方向選擇

Pencil.dev 進入 a16z Speedrun（sr005），代表這不是單一工具嘗試，而是被視為：

• 下一代開發者工作流的一環
• AI × Developer Tools × Design 的交會點

投資邏輯看的是「流程重構」，不是功能創新。

a16z Speedrun 是美國矽谷知名風險投資公司 Andreessen Horowitz（a16z）推出的加速器計畫，專為極早期 AI 原生初創企業設計。由美國總部主辦，主要在加州舊金山與洛杉磯實體進行 12 週密集訓練，提供最高 100 萬美元投資、超過 500 萬美元雲端與 AI 運算信用額度，幫助全球創辦人快速迭代產品並達成市場契合（PMF）。

Pencil 真正挑戰的是一個老問題

Pencil 並不是在問「設計工具要不要加 AI」，而是在問：如果設計本來就應該存在於程式碼裡，那我們為什麼還要交接？

Tom Krcha 過去十多年的產品經驗，最終收斂成這個答案。Pencil 是工具，但更是一種立場 —— 設計，不該離開實作現場。

---

話說根據 SEO 工具 Ahrefs 自然流量分析該網站，剛於 2026 年一月中左右才開始一週而已，SEO 自然流量就有爆發的趨勢，主要來自加拿大第一、菲律賓和英國分別第二和第三。雖然剛起步，但對這款 AI 工具未來發展潛力相當期待！

延伸閱讀：資深網頁設計師常用的 Figma Plugin 推薦

若你有 Shopify 電商網站或 WordPress 品牌形象、部落格設計與建站的需求，可以前往填寫表單預約諮詢。Irvinglab 爾文實驗室是一家深度經驗的網頁設計公司，專注打造 Shopify 和 WordPress 網站以及提供 SEO 優化與內容規劃的服務。若想進一步了解服務內容，可以加入 Irvinglab 爾文實驗室的 Line@ 官方帳號 留下訊息給我們。