在前端開發中，UI/UX 設計是一個不可迴避的環節。傳統的做法是設計師手工繪製 Figma，開發者再根據設計稿實作。但這樣有個問題：溝通成本高、反覆調整多、時程壓力大。我一直在尋找一個更高效的方式，能否讓 AI 幫我快速產生設計元素，然後一鍵整合成完整介面？Pencil 搭配 UI/UX Pro Max Skill 就是這樣的工具。它透過 AI 助手的對話能力，讓你用自然語言描述需求，自動產生設計元素和設計稿。
本文會分享我使用 Pencil 的實務經驗，希望能幫助你建立一個「需求 → 設計 → 開發」的快速迴圈。
開發環境
- Windows 11 + WSL2
- Node.js v20.19.5
- npm 11.6.1
- VSCode 1.108.2
Pencil 簡介
Pencil.dev 是一個革命性的 AI 驅動設計工具，讓開發者直接在 IDE 中設計產品介面,無需設計交接流程。它採用開放的 .pen 格式,支援 Cursor、VS Code 等編輯器,提供無限畫布、AI 協作生成、向量轉程式碼等功能。設計檔案存放在程式碼庫中，可透過 Git 進行版本控制、支援從 Figma 複製貼上。整合 MCP(Model Context Protocol)技術，實現雙向操作與擴展。
安裝 Pencil mcp
在 VSCode 擴充套件找到 pencil
選擇 pencil mcp server
第一次使用 pencil 的時候會跳出驗證的對話窗，只要填上自己的 email 收信、驗證。
安裝 UI/UX Pro Max
法一：通過 uipro-cli 安裝
最直接的方式是使用官方提供的 CLI 工具：
npm install -g uipro-cli
安裝完成後，根據你使用的 AI 助手選擇對應的初始化命令：
# Claude Code
uipro init --ai claude
# Cursor
uipro init --ai cursor
# Windsurf
uipro init --ai windsurf
# GitHub Copilot
uipro init --ai copilot
# Antigravity
uipro init --ai antigravity
# 一次初始化所有支援的 AI 助手
uipro init --ai all
初始化過程會自動配置必要的設定檔和提示詞範本，節省手動設置的時間。
法二：通過 context7 搜尋安裝
如果你偏好手動管理，也可以透過 context7 搜尋 Skill：
npx ctx7 skills search "ui-ux-pro-max-skill"
或是直接安裝特定倉庫中的 Skill：
# Repository：/ZhanlinCui/Ultimate-Agent-Skills-Collection
# Skill Name：ui-ux-pro-max
npx ctx7 skills install /ZhanlinCui/Ultimate-Agent-Skills-Collection ui-ux-pro-max
實務工作流
建立空白畫布
在 AI 編輯器中新增一個 .pen 檔案作為設計稿的容器。這是你設計工作的起點。
如下圖所示，在工作區新增空白畫布：
存檔。要特別注意存檔的路徑
產生設計元素 焦點這時候停在 .pen 的畫布上， 在 AI 對話框中輸入以下指令：
/ui-ux-pro-max 產生所有設計元素，寫入到 @designer.pen
在畫布上用 AI 對話
這個指令可能會觸發 AI 的互動式問卷，幫你明確設計需求，不是每一次都會出現，可以明確說明要甚麼版本
通常會問到以下三個維度：
產品類型
- Landing Page：網站首頁、推廣頁面
- Dashboard：資料儀表板、監控面板
- E-commerce：線上商城、購物平台
- SaaS 應用介面：企業軟體、工具類應用
- Portfolio：作品集、個人網站
- 其他：自訂類型
風格偏好
- Minimalist：極簡風格，專注內容
- Glassmorphism：玻璃擬態效果
- Brutalism：野獸派風格
- Dark Mode：深色主題
- Elegant：優雅精緻
- Playful：活潑輕鬆
產業/用途
- 科技/SaaS
- 美容/健康
- 金融科技
- 教育
- 醫療
- 其他
提供清晰的答案，AI 助手就能產生符合你需求的設計元素集合，並將其寫入到 @designer.pen 檔案中。
組合設計元素
有了基礎設計元素後，你可以進一步指示 AI 組合這些元素成具體的介面：
我想用這些設計元素打造一個 Landing Page
1. 建立一個醒目的 Hero 區塊
2. 新增一個功能清單區塊
3. 設計一個 CTA（Call-To-Action）按鈕
AI 會根據設計系統的一致性，自動調整元素的排版和間距。
增強導航
為你的設計添加導航列（navbar）：
加一個 navbar
描述多一點
導航列通常包含：
品牌/Logo
主要導航項目
使用者功能（登入、註冊等）
響應式設計考慮新增認證頁面
最後，為你的應用添加登入頁面：
增加一個登入頁面
描述多一點
登入頁面應該與整個設計系統保持一致，包括：
表單設計
驗證邏輯的視覺化
錯誤提示的樣式
記住我功能（可選）
選擇區塊進行微調
在畫布上選擇 login page，在 AI 對話窗輸入
選擇的區塊換成現代化的深色
最後呈現的樣貌如下圖
轉成程式碼
最後，要變成真的網頁還是需要 html/css，這裡官方有給一些建議，用以下提示詞建立前端環境
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
或者是直接對話，會建議使用團隊的規範 skill
選擇的區塊，轉成 html/css
結論
Pencil 結合 AI 助手的力量，改變了設計流程的效率方程式。不必從零開始手工製作每個設計元素，而是利用 AI 的生成能力快速產生初版設計，再透過迭代逐步完善。
這種方式特別適合：
- 快速原型設計和概念驗證
- 團隊協作中的設計一致性保證
- 減少重複性工作，聚焦於高價值決策
開始使用 Pencil 吧，讓 AI 助手成為你的設計夥伴，加速從創意到交付的整個過程。
範例位置
若有謬誤，煩請告知，新手發帖請多包涵
Microsoft MVP Award 2010~2017 C# 第四季
Microsoft MVP Award 2018~2022 .NET
