pen.dev 是什麼？網頁變圖層、改完送回程式碼的 AI 設計畫布

用 AI 摘要這篇文章：

ChatGPT Claude Perplexity Google Grok

設計工具 Pencil.dev 的開發商 High Agency 在 2026 年 9 月 17 日把產品掛上新名字 pen.dev 上線，重新定位成「由 AI 代理驅動的設計畫布」（agentic canvas），主打一句口號：絕不從零開始（Never start from scratch）。任何公開網頁、甚至本機開發伺服器上的 localhost 專案，都能匯入畫布成為可編輯的向量圖層，讓 AI 直接在上面改樣式，改完再匯出成 HTML 與 Tailwind CSS，或生成 React 元件送回程式碼庫。定價頁目前的答案是：免費。

Pin

給正在評估要不要裝的人先畫重點：這次上線的性質是改名加重新定位，工具本體已經迭代超過半年；它對「手上有現成程式碼庫、想快速做視覺迭代」的前端開發者最有感。官網行銷頁的宣稱與官方文件寫明的機制之間有些落差，文內以官方文件刊載內容為準。

不是全新工具：Pencil.dev 換了名字與定位

新聞標題容易把 pen.dev 當成憑空出現的新產品，實際上不是。網頁存檔服務 Wayback Machine 在 2025 年 12 月 25 日收錄的 pencil.dev 舊站，當時的產品名稱是「Design Mode for Cursor」，狀態是等候名單（Available soon），文案主打在 IDE 裡直接設計、不再有設計交接，標示支援 Cursor、VS Code、Claude Code 與 OpenAI Codex。GitHub 上的 highagency/pencil-desktop-releases 版本庫從 2025 年 12 月 31 日就存在，桌面版安裝包一路發布至今。

轉換的時間軸有三個錨點。npm 上的 @pen.dev/cli 命令列工具在 2026 年 7 月 9 日首次發布，GitHub 的 pen-desktop-releases 版本庫隔天建立，名字已經換成 pen；到 9 月 17 日晚間，Wayback Machine 對 pen.dev 的存檔從 7 月以來一貫的約 4KB 佔位頁，變成 29KB 的完整新站（台北時間晚間 10 時 32 分收錄），同日晚間 10 時 08 分科技論壇 Hacker News 出現第一則以 Pen.dev 為題的提交。改名後出貨沒有放緩：桌面版 8 月 21 日的 v1.2.7 之後，9 月 18 日單日就連發 v1.2.11、v1.2.12、v1.2.13 三個版本。

定位的變化比名字更實質。舊站的賣點是「住在 Cursor 裡的設計模式」，新站把產品拉成獨立桌面應用，宣稱自己是專為打造軟體而生的代理畫布，並把「從現有東西開始」寫成第一句話：匯入任何應用的任何部分到畫布上。誰受影響：已經在用 Cursor、Claude Code 或 Codex 寫前端的人，多了一個讓 AI 代理直接操作設計稿的選項，而不必在對話框裡用文字描述 padding 和色票。

有一條設計哲學倒是從舊站一路延續：多數設計工具把 AI 當附加功能，Pencil.dev 在 2025 年 12 月的舊站文案就自稱是「雙向的 MCP 向量畫布」，強調不只提供讀取工具、還給代理完整的寫入權限，能把資料庫或 API 的資料直接拉進畫布。九個月後的 pen.dev 把同一個主張升級成整個產品定位，差別在於載具從 IDE 分頁變成獨立應用，文件結構也跟著重寫。

網頁匯入畫布：四種抓法與兩個邊界

「把網頁變成圖層」有四條路：前三條載明於官方文件的匯入匯出頁，第四條在官網下載頁與 Chrome 商店。第一條是桌面版內建瀏覽器：點工具列的地球圖示，輸入任何網址，包括本機開發伺服器的 localhost 位址（例如開發者常用的 3000 或 5173 埠），可以先調整縮放與裝置尺寸再按 Import，把整頁轉成可編輯圖層。第二條是單元素選取：在內建瀏覽器裡點 Select an element，游標移到目標區塊上，只把某個按鈕、導覽列或定價卡片抓進畫布。第三條是截圖模式，放棄向量結構、以純像素圖片做參考，可選整頁、可見範圍或選取元素。第四條是 Chrome 擴充功能 pen.dev web import：在一般瀏覽器裡複製網頁或選取區塊，回到 pen.dev 按 Ctrl 或 Cmd 加 V 貼上成向量圖層，擴充功能在 Chrome 線上應用程式商店的版本 0.2.0 已於 9 月 12 日更新。

Pin

兩個邊界值得先知道。其一，官方文件明載：匯入後的圖層不保留原網頁的 JavaScript 互動，意思是匯入的是靜態視覺結構（版面、字級、間距、顏色），動態行為本來就不在這一層。其二，文件提醒匯入登入中的頁面前先檢查私有內容，拿來拆解別人網站時也要自己留意授權。此外 Figma 檔也能匯入：完整 .fig 檔走匯入選單，單一圖層直接複製貼上（圖片元素不支援貼上，需手動補）。

在畫布上跑 JavaScript 的 Script 節點

Code on Canvas 的實際形態是 Script 節點：從工具列的形狀下拉選單選 Script（圖示是斜線加大於符號），在畫布放一個節點，把屬性面板裡的腳本欄位指向一個 .js 檔（路徑相對於 .pen 檔），腳本的回傳值會渲染成巢狀圖層，圓餅圖、格線、參數化花紋都行。最實用的是參數化：在 .js 檔開頭用 @input 宣告欄位，屬性面板會自動長出對應控制項，列舉是下拉選單、布林是勾選框，調整控制項腳本立刻重跑、版面跟著重排；在外部編輯器存檔，畫布也會同步更新。滿意輸出時按 Convert to layers，動態結果就固化成一般向量圖層供後續手改。

不必自己寫腳本：官方在 GitHub 維護 highagency/pencil-scripts 範例庫（MIT 授權），或直接在代理面板用自然語言描述需求，AI 會建好 .js 檔並掛到選取的節點上。官方文件的示範提示是「做一個五條橫條的長條圖，暴露長條顏色、間距與數值陣列三個輸入」這一類。

Slots 給 AI 立護欄，Vibe Shaders 顧視覺

讓 AI 自由排版常見的災難是破壞元件結構。pen.dev 的答案是 Component Slots：製作元件時，把元件原型（component origin）裡的一個空 frame 設成插槽（畫布上以斜線網底標示），還能指定建議元件，例如表格元件的插槽建議放入表格列。官方文件對用途寫得很直白：建議清單對人類設計師與 AI 設計師都提供該放什麼的指引；文件同時載明建議不強制，插槽仍可放入其他元件。對依賴設計系統的團隊，這是把約束寫進檔案格式、讓每次 AI 生成都繞著規範走的機制。

視覺效果層是 Vibe Shaders：以即時著色器產生漸層、紋理等動態質感，配色系統另有線性、放射、角度與網格（mesh）漸層可調。這部分屬於展示型功能，文件著墨不多，實際手感以安裝後的版本為準。

改完怎麼送回程式碼：四條通道

把設計送回程式碼，有四種出口。第一，屬性面板的 Code 區塊：選取畫布元素後選 HTML 加 Tailwind 或 HTML 加 CSS，一鍵複製或匯出，可在設定裡選擇素材處理方式與是否包含完整 HTML 骨架。第二，按 Cmd 或 Ctrl 加 K 喚起 AI 對話，直接下達工程指令，官方範例涵蓋生成 React 元件、Next.js 頁面、TypeScript 型別定義，也能指定 Shadcn UI、React Hook Form 或指定圖示庫。第三，變數與 design token 同步：把專案裡的 globals.css 餵給代理，CSS 變數會變成畫布變數（官方文件以「類似 CSS 自訂屬性」定義變數系統，並支援多主題數值，切換亮暗色就是換一組值），改完再請代理寫回 globals.css。第四，.pen 檔案本身就是開放格式：一個 JSON 檔，內容是類比 HTML 與 SVG 的物件樹，布局走 flexbox 式屬性，官方公開 TypeScript schema 供直接讀寫，把檔案放進 repo 就能用 git 做版本控制；文件也寫明這是活文件，官方保留未來引入破壞性變更的權利。

官方文件把雙向工作流寫成一個可照做的迴圈：先從既有程式碼出發，請代理把 src 目錄裡的元件重建成畫布上的視覺元件，在畫布上做視覺修改，再請代理把改動套回程式碼，然後重複。檔案管理有幾條實際的規矩：.pen 檔建議與程式碼放在同一個工作區，讓代理兩邊都讀得到；用 git 版控時，切換分支或拉取前先存檔關閉，衝突時不要直接編輯 JSON 解決，而是保留兩個版本、挑一版當基底重放另一邊的改動，改完打開檔案檢查受影響的頁框再提交。

接上 Claude Code、Codex 與 ChatGPT 訂閱

pen.dev 本身是一個 MCP 伺服器（Model Context Protocol），外部 AI 客戶端可以讀寫畫布。官方文件列出的公開工具是 get_style、read_skill、get_app_state、execute 與 browser 五項，其中 spawn_agents 需要以 -enable_spawn_agents 參數啟動才會出現；文件也提醒 browser 與 spawn_agents 屬條件式工具，接入前以安裝版本的即時工具清單為準。桌面版會自動設定的 MCP 整合包含 Claude Code CLI、Codex CLI、Gemini CLI、Antigravity 2.0、OpenCode CLI、Kiro CLI 與 Claude Desktop，ChatGPT 桌面應用與 Codex IDE 擴充功能共用 Codex CLI 的設定。這表示在 Cursor 專案協調代理或 Claude Code 的工作流裡，設計稿是可以被代理直接操作的物件，不必截圖貼進對話框。

Pin

代理面板本身有幾個工程師會在意的細節。Agent 分頁會顯示對話與工具活動紀錄，可回溯任意先前的工作階段；送出鍵旁選模型，還能調整推理努力程度；中途按停止時，已完成的畫布修改會保留在原地，先檢查結果再決定重送或復原。情境的給法是直接在畫布上選圖層，或在輸入框附加 PNG、JPEG、Markdown 與原始碼檔案當參考。治理面有權限閘門：代理提出動作請求時，會附上要存取的路徑或指令，檢視後才允許執行；內建設計技能（skills）與生成替代方案的功能也掛在同一個面板。

模型取得方式相當開放。桌面版內建代理的供應商清單包含：OpenAI（沿用既有 Codex 設定、API 金鑰、或直接以 ChatGPT Plus 與 Pro 訂閱登入）、Anthropic（Claude Code 設定、API 金鑰、Claude Pro 與 Max 訂閱登入，另支援 AWS Bedrock、Google Vertex 等）、Google Gemini、Cursor、GitHub Copilot、xAI、OpenRouter、Moonshot、Kimi、DeepSeek、Together AI、Fireworks AI 與 Z.AI 等，也留了自訂端點的選項。不想開桌面的開發者另有 CLI：npm 安裝 @pen.dev/cli（需要 Node.js 22.19 以上），以 pen login 登入後可在終端機以代理操作 .pen 檔。官網首頁的行銷文案則列了 Claude、OpenAI、Grok、Qwen、Gemini、Kimi、DeepSeek、MiniMax 八家模型任選，與Claude Design 的設計畫布綁自家生態的路線不同，pen.dev 走的是模型自帶。

行銷句與文件寫明的機制要分開看

官網寫「萬張照片、10GB 內容、每秒 60 幀」搭配自製 WebGL 管線的效能句，這是官方宣稱，未經實測，也沒有第三方基準可查。「開放格式」容易讀成「開源」，兩者不同：.pen 是規格公開的 JSON 格式，但 pen.dev 應用程式本體不是開源軟體，GitHub 上的 highagency 組織只發布安裝包版本庫、腳本範例庫與一個嵌入示範專案，沒有應用程式原始碼。

免費現狀與商業化訊號並存。定價頁的原文是：pen.dev 目前免費，未來可能推出付費功能或方案，屆時會先清楚說明條款與價格再收費。同時，認證文件已出現以 pen.dev Pro 標示的模型選項，並寫明出現升級按鈕時可檢視方案，顯示分級收費已在鋪路。背書方面，官網頁尾載明獲 a16z speedrun 支持，這是新創加速器性質的投資計畫，pen.dev 獲投的金額與條款未揭露。採用訊號可以看 Chrome 商店頁：擴充功能顯示約 1,000 名使用者、4 則評價（9 月 19 日數值，動態會變）。隱私線索：商店頁載明擴充功能會處理使用者活動資料，開發商為 High Agency Inc.（登記於美國加州），並以歐盟 trader 身分完成聯絡資訊揭露，詳細資料處理以官方隱私政策為準。

現在裝得到的清單與還沒定案的事

9 月的現況：桌面版提供 macOS（Apple Silicon 與 Intel）、Windows x64（ARM64 標示即將推出）與 Linux（AppImage 與 tarball，x64 與 ARM64 皆有）；IDE 擴充功能支援 VS Code、Cursor、Antigravity、Windsurf 與 Open VSX；Chrome 擴充功能與 npm CLI 各自獨立安裝。下載頁沒有地區限制欄位，台灣直接可下載，介面為英文。

還沒定案的：付費方案內容與時程（定價頁僅說未來可能）、Windows ARM64 版本、以及 speedrun 投資細節。文件與官網也未見多人即時協作、企業採購或資料落地相關的揭露，需要這些的團隊可以先觀望。判斷上，手上有現成程式碼庫、想讓 AI 代理直接在設計稿上做視覺迭代的人，目前零成本值得一試，尤其是已付費 ChatGPT 或 Claude 訂閱的用戶不必再買 API 金鑰；若工作流以Excalidraw 這類開源白板或 直接生成 SVG 程式碼的模型為主，pen.dev 的價值要等實際用過匯入與匯出迴圈才知道。這幾項最可能先變：定價頁與 pen.dev Pro 的進度、官方文件的 MCP 工具清單。