一句話總結 TL;DR
PJ 實測 AI 設計工具 Pencil，它綁定本機 Claude Code 運作。四個實驗證明它能把設計從 0 做到 60 分、適合做 Prototype 與溝通，但功能仍不完整、且設計完無法轉回 Figma。
Pencil 是什麼、怎麼運作
- Pencil 號稱用 AI 幫做設計、加速前端 00:00
- 可免費下載但背後綁定本機 Claude Code 00:31
- 需 Claude Code 會員並綁定 MCP 才能用 00:31
- 很吃 Token：基礎方案用幾次要等五小時 00:31
實驗一：生成其他頁面與前端
- 隨便下提示詞：設計很一般、跟首頁不像 01:37
- 先用 Gemini 生成提示詞再餵入，效果好很多 01:37
- 設計稿轉前端很像但按鈕等細節不同 02:13
- 接案要一模一樣仍需手動調整：能到 60 分 02:13
實驗二：改別人的設計稿風格
- 拿 Figma 社群的 Instagram UI Kit 來測 02:46
- 請 Pencil 改成寵物版社群，效果蠻好 02:46
- 風格變得更溫暖、更可愛 02:46
- 不會設計可參考別人的稿再用 AI 改 02:46
實驗三：只丟圖片或 ASCII 圖
- 丟 Pinterest 圖片：跟原圖差很多、沒真讀懂 03:19
- AI 只讀到幾個像素、顏色、文字推產業 03:19
- 圖片結果仍可當 Prototype 跟客戶討論 03:19
- 改丟 ASCII 圖：文字與區塊完整復刻，效果不錯 03:54
使用前要知道的限制
- 有高階 Claude Code 會員基本免費用不爆額度 04:26
- 從 Figma 貼圖片貼不過來，要一一匯入 04:26
- 常見 Import Failed，重開軟體才能匯入 04:26
- 缺 Wrap 等功能要自己手動改 04:59
- 在 Pencil 設計完無法複製貼回 Figma 04:59
總結與行動建議 Takeaways
- Pencil 適合把設計從 0 做到 60 分
- 拿去 Demo、溝通、做 Prototype 沒問題
- 提示詞先用 Gemini 生成，效果差很多
- 可無痛整合 Claude Code，有會員就免費
- 選定 Pencil 前先知道無法轉回 Figma