前言：Vibe Coder 最大的痛點不是程式碼，是設計
我觀察過很多 Vibe Coder 做出來的作品。
功能通常沒問題——登入、CRUD、API 串接都跑得起來。但打開網頁的那一刻，你馬上能感覺到：這不是工程師做的，而是「不會設計的人」做的。
按鈕大小不一致、間距忽大忽小、顏色搭配怪異、文字層級混亂。功能再強大，使用者第一眼就被勸退。
傳統的解法是：先在 Figma 做設計稿，再把設計稿轉成程式碼。但問題是——Figma 的學習曲線不比寫程式低，而且「設計稿轉程式碼」這個環節，往往是最容易出錯的地方。
Pencil 從根本上解決了這個問題。
它是一款直接住在你的程式碼編輯器（VS Code / Cursor）裡的 AI 設計工具。你在畫布上拖拉元素、調整間距、選配色，然後一鍵讓 AI 生成像素級精確的 React / HTML 程式碼。
不需要在 Figma 和編輯器之間來回切換。不需要費力對照設計稿寫 CSS。設計和程式碼，在同一個地方完成。
這篇文章，我會從零帶你認識 Pencil，教你用專業設計師的思維做出好看又好用的介面。
Pencil 是什麼？三句話說清楚
- 設計工具：像 Figma 一樣有無限畫布，讓你用滑鼠拖拉來設計介面
- 住在 IDE 裡：直接嵌入 VS Code 或 Cursor，不用開另一個應用程式
- AI 生成程式碼：設計完畢後，AI 自動把你的設計轉成 React、HTML/CSS 等程式碼
它的核心理念用一句話概括：「Design on canvas. Land in code.」（在畫布上設計，直接落地為程式碼。）
跟 Figma 有什麼不同？
| 比較項目 | Figma | Pencil |
|---|---|---|
| 在哪裡跑 | 瀏覽器 / 桌面應用 | 直接在 VS Code / Cursor 裡面 |
| 目標用戶 | 專業設計師 | 開發者和 Vibe Coder |
| 設計檔案存哪 | Figma 雲端 | 你的專案資料夾（Git 版本控制） |
| 怎麼轉程式碼 | 需要第三方工具或手動轉換 | AI 自動生成，像素級精確 |
| 協作方式 | 多人即時編輯 | Git branch / merge / PR |
| 價格 | 免費版有限制 | 目前完全免費（Early Access） |
Pencil 最大的突破是：傳統的「截圖轉程式碼」工具是分析圖片來猜測數值（「大概是 20px 的 padding」），但 Pencil 讀取的是底層的 JSON 向量資料，直接把精確座標映射成程式碼。不是猜，是精確還原。
第一步：安裝 Pencil（5 分鐘）
方法一：IDE 擴充套件（推薦）
在 VS Code 或 Cursor 的 Extensions 搜尋 Pencil 並安裝。完成。
支援的 IDE：
- Cursor（推薦，AI 功能整合最好）
- VS Code
- Windsurf
- Antigravity
方法二：桌面應用程式
到 pencil.dev/downloads 下載：
- Mac：Apple Silicon 和 Intel 版本都有
- Windows：x64 版本（ARM64 即將推出）
- Linux：AppImage 或 Tarball
設定 AI 功能（重要）
Pencil 的 AI 功能需要搭配 Claude Code 使用。如果你已經有 Claude 訂閱：
# 安裝 Claude Code CLI
npm install -g @anthropic-ai/claude-code
# 啟動並完成瀏覽器登入驗證
claude
安裝完成後，Pencil 的 MCP（Model Context Protocol）伺服器會自動啟動，AI 就能讀取和操作你的設計檔案了。
什麼是 MCP？ 簡單說，它是讓 AI 助手（如 Claude）能「看懂」並「操作」你的設計檔案的標準協議。就像翻譯官一樣，讓 AI 和 Pencil 能互相溝通。
第二步：建立你的第一個設計
建立 .pen 檔案
在你的專案資料夾中，建立一個 .pen 檔案：
my-project/
├── src/
├── public/
├── dashboard.pen ← 你的設計檔案
└── package.json
用 VS Code 或 Cursor 打開這個 .pen 檔案，Pencil 的畫布就會自動啟動。
注意：Pencil 目前沒有自動儲存功能，一定要記得隨時按Cmd + S（Mac）或Ctrl + S（Windows）存檔。這可能是新手最容易忽略的事。
畫布基本操作
如果你用過 Figma，你會覺得非常熟悉：
| 操作 | 快捷鍵 |
|---|---|
| 新增矩形 | R |
| 新增文字 | T |
| 新增 Frame | F |
| 縮放 | Cmd/Ctrl + 滾輪 |
| 平移畫布 | Space + 拖曳 |
| AI 指令面板 | Cmd/Ctrl + K |
| 建立元件 | Cmd/Ctrl + Option/Alt + K |
用 AI 生成設計
這是 Pencil 最強大的地方。按 Cmd/Ctrl + K 開啟 AI 指令面板，用自然語言描述你想要的設計：
Design a modern SaaS pricing page with three tiers: Free, Pro ($20/mo),
and Enterprise (custom). Use a clean card layout with rounded corners,
subtle shadows, and a green accent color (#1E6F5C). The Pro tier
should be highlighted as "Most Popular".
AI 就會直接在畫布上生成完整的設計。你可以用滑鼠微調任何細節——調整間距、改變顏色、移動元素。
第三步：從設計生成程式碼
這是 Pencil 的核心價值。
方法一：在 Pencil 內直接生成
- 選取你想轉換的 Frame
- 按
Cmd/Ctrl + K開啟 AI 指令面板 - 輸入具體的指令：
Generate React code for this design using Tailwind CSS
and Shadcn UI components. Make it responsive.
AI 會生成完整的 React 元件程式碼，你可以直接複製到你的專案中。
方法二：搭配 Claude Code 使用
在終端機中使用 Claude Code，它能透過 MCP 直接讀取你的 .pen 檔案：
看一下 dashboard.pen 的設計，幫我生成對應的 React 元件。
使用 Tailwind CSS，搭配 Shadcn UI 元件庫。
請確保響應式設計：手機版單欄、桌面版三欄。
Claude Code 會：
- 透過 MCP 讀取你的設計檔案結構
- 理解每個元素的位置、大小、顏色、間距
- 生成精確對應的程式碼
支援的技術棧
| 框架 | 樣式方案 | 元件庫 |
|---|---|---|
| React | Tailwind CSS（推薦） | Shadcn UI |
| Next.js | CSS Modules | Radix UI |
| Vue | Styled Components | Chakra UI |
| Svelte | 純 CSS | Material UI |
| 純 HTML | 自訂元件 |
五個 UI/UX 設計師的思維方式
工具只是手段，思維才是關鍵。以下是專業設計師在做介面設計時的核心觀念：
1. 間距是設計的骨架——用 8px 網格系統
新手最常犯的錯誤：間距隨意設定，有的地方 13px、有的 27px、有的 41px。看起來就是「不對勁」，但說不出哪裡不對。
專業設計師的做法：所有間距都是 8 的倍數。
8px — 最小間距（元素內部）
16px — 緊湊間距（標籤和輸入框之間）
24px — 標準間距（段落之間）
32px — 寬鬆間距（區塊之間）
48px — 大區塊間距（頁面段落之間）
64px — 超大間距（主要區域分隔）
在 Pencil 中，啟用 Grid Snapping（8px 增量），你拖動元素時會自動對齊到 8 的倍數。這一個設定就能讓你的設計看起來專業 80%。
2. 命名要語意化——圖層名稱就是你的 CSS class
這是很多人忽略的關鍵：Pencil 會把你的圖層名稱轉換成 CSS class 或元件名稱。
如果你的圖層叫 Frame 42，生成的程式碼就會有一個毫無意義的 frame-42 class。但如果你命名為 pricing-card-container，生成的程式碼就會自動有結構清晰的命名。
命名規則：
- 用英文小寫，單字之間用
-連接 - 描述「是什麼」而不是「長什麼樣」
- 例：
hero-section、nav-menu、user-avatar、cta-button
3. 先設計元件，再組裝頁面
專業設計師不會直接畫整個頁面。他們會：
- 先設計原子元件：按鈕、輸入框、標籤、頭像
- 再組裝分子元件：搜尋列（輸入框 + 按鈕）、用戶卡片（頭像 + 名稱 + 角色）
- 最後拼出頁面：用分子元件像積木一樣拼出完整畫面
在 Pencil 中，你可以把常用的元素建立為可重用元件（Cmd/Ctrl + Option/Alt + K）。修改主元件時，所有使用它的地方都會同步更新。這跟 React 的元件概念完全一致。
4. 響應式設計：一次畫兩個 Frame
不要只設計桌面版。從一開始就同時設計手機版和桌面版。
在 Pencil 中建立兩個 Frame：
- 手機版：寬度 390px
- 桌面版：寬度 1440px
AI 在生成程式碼時，會自動根據這兩個 Frame 的差異產生正確的 Tailwind breakpoint（md:、lg:）。
我有兩個 Frame：mobile-layout (390px) 和 desktop-layout (1440px)。
請根據這兩個設計生成響應式的 React 元件，
手機版單欄堆疊、桌面版三欄並排。
5. 建立設計 Token——一次定義，全局使用
專業的設計系統都有一套 Design Token：統一定義顏色、字體大小、間距等數值。
在 Pencil 中，你可以透過變數系統定義這些 Token：
| Token 類型 | 範例 |
|---|---|
| 主色 | --primary: #1E6F5C |
| 背景色 | --background: #FAFAF9 |
| 文字色 | --text: #1A1A1A |
| 標題字體 | --font-heading: 'Noto Sans TC' |
| 圓角 | --radius: 8px |
定義好之後，所有元素都引用這些變數。想改配色？改一個變數值，整個設計同步更新。Pencil 還支援一鍵切換 淺色 / 深色主題。
更強大的是：這些變數可以雙向同步到你的 CSS / Tailwind 設定檔。設計和程式碼永遠保持一致。
實戰範例：設計一個 SaaS Landing Page
讓我用一個完整的範例，示範從零設計到程式碼的全流程。
Step 1：建立設計檔案
在專案中建立 landing-page.pen，用 Cursor 打開。
Step 2：用 AI 生成基礎設計
按 Cmd/Ctrl + K，輸入：
Design a modern SaaS landing page for an AI writing tool called "WriteFlow".
Include these sections:
1. Hero section with headline, subtitle, and CTA button
2. Three feature cards with icons
3. Pricing section with Free/Pro/Enterprise tiers
4. Footer with links
Style: Clean, minimal, white background, green accent (#1E6F5C).
Use Inter font. Desktop width 1440px.
AI 會在畫布上生成完整的 Landing Page 設計。
Step 3：視覺微調
這一步是 Pencil 的核心優勢——你不需要重新下 AI 指令來調整每個小細節。
直接用滑鼠：
- 拖動元素調整位置
- 在右側屬性面板改顏色、字體大小
- 調整間距和 padding
- 替換文字內容
每一次視覺微調，都不會消耗 AI 額度。這比用 v0.dev 或 Lovable 反覆下提示詞修改要高效得多。
Step 4：建立手機版
複製桌面版的 Frame，調整為 390px 寬度，重新排列元素為單欄堆疊。
Step 5：生成程式碼
選取桌面版和手機版的 Frame，用 Claude Code：
看一下 landing-page.pen 裡的 desktop-layout 和 mobile-layout，
生成一個響應式的 Next.js 頁面，使用 Tailwind CSS 和 Shadcn UI。
確保跟設計稿像素級一致。
Claude 會透過 MCP 讀取設計的精確數據，生成完整的頁面程式碼。
六個社群專家的實用技巧
這些技巧來自早期使用者的實戰經驗：
技巧 1：在 AI 提示詞中預載設計 Token
不要讓 AI 自己決定顏色和間距。在提示詞中明確指定：
Use these design tokens:
- Primary: #1E6F5C
- Background: #FAFAF9
- Text: #1A1A1A
- Border radius: 8px
- Spacing unit: 8px multiples
- Font: Inter for body, bold for headings
技巧 2：善用內建 UI Kit
Pencil 內建四套設計套件：Shadcn UI、Halo、Lunaris、Nitro。
不要從零開始設計每一個按鈕和輸入框。先選一套 UI Kit，在它的基礎上客製化。這就像工程師用框架而不是從零寫每一行程式碼一樣。
技巧 3：從 Figma 複製貼上
如果你手邊有 Figma 的設計稿，可以直接選取 Frame → 複製 → 在 Pencil 中貼上。圖層結構、Auto Layout 設定和樣式都會保留。
注意：圖片不會隨 Figma 複製過來，需要另外匯入。
技巧 4：用截圖比對來驗證
設計完成後，使用 Pencil 的截圖功能（get_screenshot MCP 工具），把設計截圖和實際渲染的網頁並排比對。找出任何差異，回到設計中修正後重新生成。
技巧 5：不要手動修改生成的程式碼
這是最重要的一條：如果你手動改了 AI 生成的程式碼，下次重新生成時你的修改會被覆蓋。
正確的做法是：回到 Pencil 畫布上調整設計，然後重新生成程式碼。保持「設計 → 程式碼」的單向流動，不要反過來。
技巧 6：群組化語意相關的元素
把相關的元素用 Group 或 Frame 包起來，並給予語意化名稱。例如：
pricing-section/
├── pricing-card-free/
│ ├── card-header
│ ├── price-tag
│ ├── feature-list
│ └── cta-button
├── pricing-card-pro/
│ └── ...
└── pricing-card-enterprise/
└── ...
這樣 AI 生成的程式碼結構會非常清晰，就像你手寫的一樣。
Pencil vs 其他工具：什麼時候該用什麼
| 你的需求 | 推薦工具 | 理由 |
|---|---|---|
| 快速原型 + 生成完整程式碼 | Pencil | 視覺編輯 + 精確程式碼生成 |
| 純文字描述就能生成 UI | v0.dev | 不需要任何設計技能 |
| 一句話做出完整網站 | Lovable / Bolt | 包含後端，全自動 |
| 專業設計團隊多人協作 | Figma | 即時協作是 Pencil 目前做不到的 |
| 設計稿已經在 Figma，想轉成程式碼 | Pencil（匯入 Figma） | 複製貼上後用 AI 轉碼 |
我的建議：如果你正在學習 Vibe Coding，用 Pencil 搭配 Claude Code 是目前最完整的組合。它讓你同時學到設計思維和前端開發，而不是把所有事情都丟給 AI 黑箱處理。
常見問題
Q：Pencil 是免費的嗎？ A：目前是。Pencil 正處於 Early Access 階段，所有功能免費使用。官方表示未來可能推出付費方案，但會在收費前明確告知。不過，AI 功能需要搭配 Claude Code（約 $20/月），這是額外成本。
Q：我完全不會設計，能用 Pencil 嗎？ A：可以。你可以用 AI 指令（Cmd/Ctrl + K）描述你想要的設計，讓 AI 幫你生成。但本文教你的設計思維（8px 網格、語意命名、元件化設計等）會讓你的成品品質高出很多。
Q：Pencil 跟 Figma 可以一起用嗎？ A：可以。你可以從 Figma 複製 Frame 直接貼到 Pencil，保留圖層結構和樣式。Figma 社群也有官方的 .pen file import 插件。兩者可以互補——Figma 適合團隊協作和完整設計系統，Pencil 適合快速轉碼和個人開發。
Q：生成的程式碼品質如何？ A：比截圖轉碼工具好很多。因為 Pencil 讀取的是精確的向量資料而非圖片，生成的程式碼在數值上是像素級精確的。但複雜的互動邏輯（動畫、狀態管理、API 呼叫）還是需要你自己或用 Claude 來寫。
Q：.pen 檔案是什麼？ A：Pencil 的設計檔案格式，基於 JSON，輕量且可讀。它存放在你的專案資料夾中，可以用 Git 做版本控制——這意味著你可以 commit、branch、diff 你的設計變更，就像程式碼一樣。
Q：沒有網路能用 Pencil 嗎？ A：Pencil 的畫布功能可以離線使用（設計、編輯、存檔都可以）。但 AI 功能（生成設計、生成程式碼）需要網路連線，因為它依賴 Claude 的 API。
結語：設計不再是 Vibe Coder 的弱項
Pencil 代表了一個重要的趨勢：設計和程式碼的邊界正在消失。
過去，你需要先學 Figma、做設計稿、匯出切圖、再手刻 CSS——這個流程至少需要兩種不同的技能。現在，你在同一個地方設計和寫程式，AI 負責翻譯中間的落差。
但工具終究只是工具。真正讓你的作品脫穎而出的，是設計思維：
- 用 8px 網格 讓間距和諧
- 用 語意命名 讓程式碼乾淨
- 用 元件化思維 讓設計可維護
- 用 設計 Token 讓風格一致
- 用 響應式設計 讓所有裝置都好看
這些觀念不需要美術天分，只需要紀律和意識。
今天就試試看：在你的專案中建立一個 .pen 檔案，用 AI 生成一個簡單的 Landing Page，然後親手微調每一個細節。你會發現，原來做設計跟寫程式一樣——都是可以學會的技能。