什麼是Pencil？
Pencil 是一款代理式設計畫布，讓使用者能透過 Claude、ChatGPT 等 AI 模型直接在畫布上進行網站與應用程式設計。該工具支援網頁版免費試用及桌面下載，並允許匯入現有網頁或 Figma 檔案作為可編輯圖層，將設計成果直接輸出為程式碼。
Pencil的特色是什麼？
- 代理式設計整合可直接在畫布上使用 Claude、ChatGPT 及其他模型進行設計，支援訂閱帳戶、API 金鑰或 MCP/CLI 連接方式。
- 多來源匯入功能內建瀏覽器可將任何網頁匯入為可編輯圖層，亦支援匯入 .fig 檔案或直接從 Figma 複製貼上。
- 程式碼直接輸出支援一鍵將任意框架匯出為 HTML 和 CSS/Tailwind 程式碼，方便開發者後續使用。
- 高效能 WebGL 渲染採用自訂 WebGL 管線，確保在處理數千個圖層時仍能保持流暢的平移、縮放與編輯體驗。
- 開放式設計格式使用 JSON 架構的 .pen 開放格式，其 Schema 完全公開，允許代理程式原生操作設計檔案。
- 視覺特效與向量繪製提供即時著色器（Shaders）製作視覺效果，以及 Pen 工具繪製路徑、編輯曲線和匯入 SVG 代碼。
Pencil的使用案例有哪些？
- 網站原型快速建構輸入「為舊金山咖啡廳設計網站」等提示詞，由 AI 代理在畫布上生成初始設計方案。
- 跨專案元件同步管理建立可重複使用的符號元件並共享 UI 庫，確保不同專案間的組件設定保持一致。
- 簡報模式演示準備利用 Slides 檢視功能整理設計頁面，並以專業簡報模式向團隊或客戶展示作品。
如何使用Pencil？
- 啟動與連接開啟 Pencil 應用或網頁版，選擇要使用的 AI 模型（如 Claude 或 ChatGPT）並完成訂閱帳戶或 API 金鑰驗證。
- 匯入參考素材透過內建瀏覽器輸入網址將現有網頁匯入為可編輯圖層，或匯入 Figma 檔案作為設計基礎。
- 代理協作設計在畫布上發出指令讓 AI 生成佈局，並使用 Pen 工具、變數或漸層等功能手動調整細節。
- 匯出交付成果確認設計無誤後，將特定框架匯出為 HTML/CSS 程式碼，或儲存為 PDF/PNG 等圖片格式。
Pencil定價信息：
- 網頁版免費試用提供網頁版本的免費試用機會，具體限制未詳述。
- 桌面應用程式下載需從官方網站下載安裝檔以使用完整功能，定價資訊未在內容中明確列出。
