Pencil.dev 教學指南：一句話就能完成設計的 Vibe Design 時代

Pencil.dev 是一個革命性的 AI 驅動設計工具，打破了設計師和開發者之間長期存在的壁障。不同於傳統的 Figma 等獨立設計軟體，Pencil.dev 直接整合到你的 IDE（集成開發環境）中——無論是 Cursor、VS Code 還是 Claude Code，你可以在寫程式的地方就完成設計工作。

Philo

04 Feb 2026 — 13 min read

Pencil.dev 是什麼？

Pencil.dev 是一個革命性的 AI 驅動設計工具，打破了設計師和開發者之間長期存在的壁障。不同於傳統的 Figma 等獨立設計軟體，Pencil.dev 直接整合到你的 IDE（集成開發環境）中——無論是 Cursor、VS Code 還是 Claude Code，你可以在寫程式的地方就完成設計工作。

Pencil.dev 的核心理念是「設計即程式碼」。設計檔案採用開放的 .pen 格式，存放在你的程式碼庫中，可以用 Git 進行版本控制，與設計系統無縫整合，並透過 MCP（Model Context Protocol）技術讓 AI Agent 直接讀寫設計內容。

為什麼需要 Pencil.dev？

傳統設計交接流程的痛點

在傳統開發流程中，設計和開發是分離的：

設計師在 Figma 中完成設計稿
設計稿被交付給開發者
開發者重新理解、重建甚至猜測設計細節
反覆溝通、修改、交接

這個流程存在著高昂的成本：溝通成本高、反覆調整多、時程壓力大。

Pencil.dev 如何改變遊戲規則

當設計與程式碼存放在同一個程式碼庫中，存在於同一個 IDE 裡，問題就迎刃而解了：

設計和程式碼只差一個 tab
可以即時對照，降低理解成本
AI 可以直接生成並修改設計
設計、程式碼、AI Agent 共用同一個上下文
Pencil.dev 的核心功能

0:00

/1:19

1. 無限設計畫布（Design Canvas）

在你的 IDE 中擁有一個像素級的設計畫布，無需切換到外部設計工具。設計和程式碼彼此相鄰，協作變得自然而直觀。

2. AI 多人協作（AI Multiplayer）

一個令人驚艷的功能是，你可以讓多個 AI Agent 並行工作，一起生成畫面或完整流程。想像你在 Claude Code 和 Cursor 之間進行設計對話——它們各自提出想法，你綜合最好的方案。

3. 速度與精準度的平衡（Speed & Precision）

快速生成：用提示詞一次性生成整個畫面
精準微調：選擇特定區塊進行改動，不用重新生成整個設計
上下文優化：在完整的專案脈絡中下指令，AI 理解得更準確

4. 設計系統與品牌套件

Pencil.dev 提供內建的設計套件，也允許你直接接入既有的設計系統。無論是新專案還是成熟團隊，都不必推翻現有的品牌規範和元件庫。

5. 開放設計格式，無鎖定風險

設計檔案採用完全開放的 JSON-based .pen 格式，可以被閱讀、除錯、擴展，甚至被其他工具操作。設計不再是黑盒子，而是真正的工程資產。

6. 像素完美的程式碼輸出

設計完成後，可以直接產出對應的 HTML、CSS、React 或 Tailwind CSS 程式碼，並維持設計與實作的像素級一致性。設計與程式碼不再是兩份相似但永遠不完全一樣的產物。

安裝與設定步驟

步驟 1：安裝 Pencil 擴展

打開你使用的 IDE（VS Code、Cursor 或 Claude Code），進入擴展商店：

搜尋 "Pencil"
認準開發者「High Agency」的官方插件
點擊安裝

安裝完成後，在左側活動欄會出現鉛筆圖標，代表 Pencil 已準備就緒。

步驟 2：驗證與授權

第一次使用 Pencil 時，會跳出驗證對話窗，填入你的 email 並收信驗證。

步驟 3：安裝 UI/UX Pro Max Skill（可選但推薦）

UI/UX Pro Max 是官方提供的高級技能，能幫助 AI 快速產生符合設計規範的介面元素。你有兩種安裝方式：

方式 A：使用官方 CLI 工具（最直接）

bashnpm install -g uipro-cli

根據你使用的 AI 助手初始化：

bash# Claude Code
uipro init --ai claude

# Cursor
uipro init --ai cursor

# Windsurf
uipro init --ai windsurf

# GitHub Copilot
uipro init --ai copilot

# 一次初始化所有支援的 AI 助手
uipro init --ai all

方式 B：透過 context7 手動安裝

bashnpx ctx7 skills install /ZhanlinCui/Ultimate-Agent-Skills-Collection ui-ux-pro-max

實戰工作流：從設計到程式碼

第 1 步：建立空白畫布

在你的 IDE 中新增一個 .pen 檔案作為設計的容器：

project/
├── src/
├── design.pen ← 新建空白畫布
└── package.json

存檔時要特別注意路徑位置，確保它在你的工作區內。

第 2 步：生成設計元素

焦點停在 .pen 畫布上，在 AI 對話框中輸入：

/ui-ux-pro-max 產生所有設計元素，寫入到 @designer.pen

這個指令可能會觸發 AI 的互動式問卷，幫你明確設計需求。通常會問三個維度：

產品類型

Landing Page（網站首頁、推廣頁面）
Dashboard（資料儀表板、監控面板）
E-commerce（線上商城、購物平台）
SaaS 應用介面（企業軟體、工具類應用）
Portfolio（作品集、個人網站）
其他自訂類型

風格偏好

Minimalist（極簡風格）
Glassmorphism（玻璃擬態）
Brutalism（野獸派）
Dark Mode（深色主題）
Elegant（優雅精緻）
Playful（活潑輕鬆）

產業/用途

科技/SaaS
美容/健康
金融科技
教育
醫療
其他

AI 會根據你的答案生成符合需求的設計元素集合，寫入到 @designer.pen 檔案。

第 3 步：組合設計元素

有了基礎設計元素，指示 AI 將它們組合成具體的介面：

我想用這些設計元素打造一個 Landing Page
1. 建立一個醒目的 Hero 區塊
2. 新增一個功能清單區塊
3. 設計一個 CTA（Call-To-Action）按鈕

AI 會根據設計系統自動調整排版和間距，確保一致性。

第 4 步：微調細節

選擇特定區塊進行精細調整。例如，如果你想把登入頁面換成現代深色風格，只需：

選擇的區塊換成現代化的深色

AI 只會改動你選中的部分，保持其他區塊不變。

第 5 步：轉換成程式碼

最後一步是將設計轉換成可運行的程式碼。使用以下提示詞：

Generate React/Tailwind/NextJS code from the selected frame
Update CSS based on the variables in the design
Create a React component based on the selected frame

或者簡單地說：

選擇的區塊，轉成 html/css

Pencil.dev 會產出乾淨的、符合設計的前端程式碼。

Pencil.dev 與 IDE 的整合

Cursor 中使用 Pencil

Cursor 是目前與 Pencil.dev 整合最順暢的 IDE：

在擴展商店搜尋並安裝 Pencil
在 Cursor 的設定中檢查 Tool & MCP，確保 extension-pencil 顯示為 enable
開始在 Cursor 中使用 /mcp 指令與 Pencil Agent 互動

提示詞範例

在 {{ 檔案名稱：landing.pen }} 上為布拉格的咖啡店創建一個黑暗而強大的網站。

Claude Code 與 Pencil

Claude Code 提供了更強大的設計自動化能力：

從官方網站下載並安裝 Claude Code 應用程式
透過設定將 Claude Code 與 Pencil 連結
在 Claude Code 的 /mcp 中確認 Pencil 已啟用

VS Code 中使用 Pencil

VS Code 提供了基礎的 Pencil 支援，但功能相對簡單。對於複雜的設計工作，建議使用 Cursor 或 Claude Code。

實際應用案例

案例 1：快速原型設計

假設你需要為一個新的 SaaS 應用快速生成原型。傳統方式需要：

設計師花 2-3 天在 Figma 中手工繪製
開發者花 1-2 天轉換成程式碼
來回修改 2-3 輪

使用 Pencil.dev：

在 IDE 中開啟 .pen 文件
用 AI 對話在 15 分鐘內生成整個介面
即時微調並轉成程式碼
總耗時：30-45 分鐘

案例 2：設計系統的一致性

一個成熟的團隊有既有的設計系統（顏色、按鈕樣式、間距規範等）。Pencil.dev 可以：

直接從程式碼庫中讀取設計系統變數
AI 在生成新介面時自動套用這些規範
無需手動調色或重新規範元件

案例 3：設計與開發的無縫協作

設計師和開發者使用同一個 .pen 文件：

設計師用自然語言描述願景
開發者即時查看並提出技術建議
修改立即同步，無需 email 或文件往來

Pencil.dev 的優勢與限制

優勢

✅ 速度提升顯著 — 設計生成時間從天級降至分鐘級

✅ 消除設計交接成本 — 設計與程式碼共存於 IDE，溝通順暢

✅ 版本控制支援 — 透過 Git 管理設計檔案，支援 branch 和 merge

✅ AI 多人協作 — 多個 AI Agent 同時工作，探索更多方向

✅ 像素完美輸出 — 設計與程式碼的一致性有保障

✅ 無廠商鎖定 — 開放 .pen 格式，可被任何工具操作

✅ 與既有工具相容 — 支援從 Figma 複製貼上，平滑遷移

限制

⚠️ 適合代碼端開發，不適合純視覺設計 — 如果你純粹做視覺創意，Figma 仍是更好選擇

⚠️ 需要清晰的提示詞 — AI 生成品質取決於你的描述能力，模糊的需求會產生模糊的設計

⚠️ 複雜交互設計有局限 — 目前主要專注於靜態或簡單交互，複雜的動畫效果需要手工調整

⚠️ 學習曲線 — 開發者需要學習如何用 Pencil 思考設計，初期可能不夠直觀

Pencil.dev 在業界的反響

Pencil.dev 自 2026 年初推出以來，引發了業界的廣泛討論。它直接挑戰了 Figma 的統治地位，但不是要取代 Figma，而是開闢了一個新的設計+開發協作模式。

CEO Tom Krcha 的願景非常清晰：消除「設計交接」這個環節本身。他曾在 Adobe、Alter、Around 等公司工作，長期思考設計與工程的交集，Pencil.dev 就是這份思考的具體實現。

業內共識是：Pencil.dev 將 Vibe Design（「感覺設計」——透過自然語言描述風格，讓 AI 生成）變成了生產力工具，而不是單純的概念。

快速開始 3 分鐘指南

1. 下載 Pencil.dev

訪問 https://www.pencil.dev
下載適合你的 IDE 的版本

2. 安裝擴展

VS Code / Cursor 擴展商店搜尋「Pencil」
點擊安裝

3. 建立第一個設計檔

新建文件 → 取名為 design.pen → 儲存

4. 開始設計

/ui-ux-pro-max 為一個線上美食外送平台建立首頁設計

5. 看著 AI 工作

AI 會在你的眼前生成一個完整的、可用的首頁設計
用 Sticky Notes 提示詞微調細節
一鍵轉成程式碼

結論

Pencil.dev 代表了設計工具的一個根本性轉變。它不是 Figma 的替代品，而是一個新的維度：從「設計交付給開發」轉變為「設計與開發共存」。

對於追求效率的開發團隊、希望快速驗證想法的創業者、或想加速從原型到上線的新創，Pencil.dev 提供了一條前所未有的捷徑。

設計和程式碼的界線正在模糊，而 Pencil.dev 就站在這條前沿上。