Pencil 亮相：把 Claude Code 搬進無限畫布，直接在 IDE 裡畫 UI 調程式碼

過去這幾年，設計師在 Figma 裡畫好介面，匯出設計稿，工程師在 IDE 裡看著靜態圖一行行敲程式碼，改個文案或者調整間距都要來回扯皮。哪怕有了 AI 輔助寫程式碼，面對生成的散裝頁面，修修補補依然讓人頭大。

一款名為 Pencil 的新工具最近引發了不少關注。它把無限畫布直接搬進了開發者的整合開發環境（IDE）裡，並且深度綁定了 Claude Code。只要登入 Claude Code 賬號，你就可以在程式碼環境裡一邊畫介面，一邊即時生成並同步前端程式碼。

把畫布直接搬進開發環境

傳統的向量設計軟體一般獨立於程式碼倉庫執行，改完圖再找人交付，而 Pencil 選擇直接寄生在 IDE 中。

它採用無限畫布設計，沒有固定尺寸畫板的束縛。無論你是做多頁面流程、複雜的後臺儀表盤，還是整套設計系統，都能在一個畫布裡自由縮放和排布。

支援自己動手從零繪製，也能直接匯入 Figma 檔案。更有意思的是它的互動式操作體驗：畫布裡的文案不對，或者某個元件顏色看著彆扭，直接用滑鼠在畫布上手動修改就行，不需要像以前那樣跳回程式碼檔案裡找位置改引數。

在這背後，Claude Code 會即時保持介面與程式碼庫的一致性，不僅同步生成結構化程式碼，還會主動針對響應式佈局、無障礙訪問和效能最佳化提出修改建議。

專治 AI 的「藍紫色審美」

經常用 Claude 寫介面的開發者大概都有體會：如果不給嚴苛的樣式限制，它很容易端出一套千篇一律的「藍紫色科技風」UI。

Pencil 的應對方式比較討巧。它內建了幾套現成的設計元件庫，讓 Claude 嚴格按照選定元件庫的風格來生成前端程式碼，從而規避了模型預設配色的尷尬。

如果拿它和 Google 的 Stitch 對比，兩者的取捨很明顯。Stitch 必須手動去改底層程式碼，而 Pencil 支援直觀的視覺化拖拽和手動微調；但代價在於，Pencil 目前可選的元件風格相對有限，相比之下，Stitch 裡由 Gemini 驅動的前端審美多樣性會更強一些。

這種把所謂「Vibe Design」做成實用工具的做法，很快在 X 和 LinkedIn 上傳開，不少嚐鮮的工程師和設計師都在曬自己提升效率的演示。

為什麼重要

我們認為，Pencil 踩中了一個極其明確的需求：AI 程式設計助手不能只停留在命令列和對話方塊裡，前端開發天然需要視覺反饋。

對全棧工程師和獨立開發者來說，它的價值很直觀。很多人最頭疼的就是寫 CSS 和微調樣式，現在能在 IDE 內部直接匯入設計、在畫布上像修圖一樣改文字和顏色，同時讓 AI 吐出規範程式碼，搭建 MVP 的門檻被大幅拉低。如果你手裡正有需要頻繁迭代介面的全棧專案，它很值得一試。

從行業演進來看，前端工具正在從單純的「對話生成程式碼」轉向「即時雙向繫結的視覺化工作流」。以前是人把設計翻譯成程式碼，後來是 AI 試著翻譯，而 Pencil 試圖把設計和程式碼放在同一個環境裡共同生長。

它的聰明之處在於引入預設元件庫，把不可控的大模型收攏在成熟的規範裡。不過隱患也在這裡：如果官方元件庫擴充不夠快，大家做出來的應用很快又會陷入新的同質化；此外它必須依賴 Claude Code 登入體系，也讓使用者的使用範圍受到了一定製約。但無論如何，把畫布嵌進 IDE 這一步，方向走得很準。