實測爆火的 Pencil：效果一般，但理念“封神”！這一次，設計終於住進了代碼裏
整理版優先睇
Pencil 理念超前但效果未成熟，設計即代碼顛覆傳統交付流程
呢篇文章係一位開發者實測 Pencil 之後嘅深度反思。佢一開始覺得 Pencil 生成嘅 UI 只係一般，但越用越發現背後理念嘅顛覆性。作者指出，互聯網行業二十年來嘅「設計交付」環節一直係痛點：設計師喺 Figma 畫圖，程序員喺 IDE 寫 code，中間嘅「死亡交付谷」導致成本高、信息失真。
Pencil 嘅核心係「Design as Code」，將設計文件變成 .pen 格式，直接納入 Git 版本管理，透過 MCP 協議畀 AI 讀寫。作者喺 Cursor 實測安裝、創建畫布、AI 驅動設計、修改迭代，仲可以從 Figma 貼上矢量圖。佢認為呢種「無上下文切換」嘅沉浸式開發體驗好正，但同時承認現階段審美上限一般，功能複雜度遠不及 Figma。
整體結論：Pencil 係一個「早產兒」，但佢代表嘅範式——AI 讀懂需求後直接喺代碼庫生成設計，再一鍵轉成代碼——好可能係未來軟件工程嘅標準答案。作者建議全棧或獨立開發者趁免費試用，尤其係想縮短「想法到代碼」距離嘅人。
- Pencil 基於 MCP 協議將設計工具嵌入 IDE，消滅傳統設計交付環節，實現 Design as Code
- .pen 文件係 Git 資產，可 Branch、Merge、Revert，設計版本管理從此同代碼一樣嚴謹
- 實測流程：安裝插件、創建 .pen 畫布、AI 對話生成 UI、自然語言修改迭代、支援 Figma 貼上
- 優點係沉浸式開發同 MCP 潛力，缺點係視覺審美一般同功能複雜度不足
- 呢個範式揭示 AI 時代設計同代碼邊界消融，全棧開發者宜而家開始體驗
Pencil 係咩？一個寄生喺 IDE 嘅無限畫布
用一句話定義：Pencil 係一個基於 MCP 協議嘅無限畫布，唔瀏覽器運行，直接寄生喺你個代碼庫入面。佢要消滅嘅，係困擾互聯網行業二十年嘅「設計交付」環節。
現有工作流太割裂：設計師喺 Figma 畫圖（設計世界），程序員喺 VS Code 寫 code（工程世界），中間隔住一條「死亡交付谷」。每次改需求，設計師改完圖，程序員要對住像素復刻，好容易走樣。呢種 Handoff 成本高、信息失真嚴重。
核心理念：Design as Code——設計即代碼
呢個係 Pencil 最令人興奮嘅地方。佢引入 .pen 格式文件，呢個設計文件係 代碼資產：可以放喺 Git 倉庫做 Branch、Merge、Revert，唔怕設計師覆蓋 file 或者搞唔清邊個係 Final_Final_V3。
佢係開放嘅——唔似 Figma 封閉黑盒，透過 MCP 協議，AI（例如 Claude 或 GPT）可以直接 讀寫、操作呢個文件。而且係 本地優先，MCP Server 喺本地運行，數據安全、反應快。IDE 從此唔止寫 code，同時變咗設計工具。
Cursor 實戰：安裝、創建畫布、AI 設計
- 1 安裝插件：喺 Cursor 或 VS Code 擴展市場搜尋 Pencil，認準發佈者 High Agency，安裝後側邊欄有鉛筆 icon，重啟後輸入郵箱驗證登錄。
- 2 創建畫布：喺項目文件夾右鍵新建 .pen 檔案，編輯器窗口會變成一個無限大嘅 WebGL 畫布。
- 3 AI 對話設計：唔使自己拖拽，直接輸入提示詞「使用 pencil mcp 喺當前活躍畫布上設計一個網頁，功能係……」，仲可以揀內置嘅 Design System 變量。
- 4 修改迭代：覺得按鈕太細或者顏色唔啱？直接對話：「將所有主按鈕改圓角，顏色換成品牌藍」——AI 會精準操控每個元素。
- 5 Figma 貼上：支援直接從 Figma 複製矢量路徑、文字同樣式貼上 IDE，不過作者話兼容性一般，圖片要上傳雲端。
作者實測話體驗好絲滑，尤其係 AI 對話式設計，唔使切換視窗，可以一邊 code 一邊改 UI。佢展示咗三個效果：冇風格指導直接生成、有風格優化、揀設計風格直接生成，後兩者明顯更好。
實測總結：理念滿分，效果待打磨
作者用咗幾日後評價：「理念滿分，效果待打磨」。驚豔嘅地方：冇上下文切換，沉浸式開發好正；Git 版本控制令設計稿管理同 code 一樣嚴謹；MCP 嘅潛力——AI 可以批量改組件、同步 CSS 變量。
待改進嘅地方：審美上限一般，AI 生成嘅 UI 只係「能用」水平，離 Dribbble 精美好遠；功能複雜度唔夠，相比 Figma 成熟嘅組件變體、原型交互，Pencil 目前似「開發者畫板」多過設計師畫板。
未來：Design as Code 會係標準答案？
以前流程：設計師畫圖 -> 交付 -> 程序員寫 code。Pencil 嘅未來：AI 讀懂需求 -> 喺代碼庫生成設計 -> 設計確認 -> 一鍵轉為 React/Vue 代碼。呢個範式如果成熟，會徹底改變軟件工程。
作者建議：如果你係 全棧開發者或獨立開發者，強烈建議而家就下載體驗，因為佢可以極大縮短「想法」到「code」嘅距離。而且趁而家免費，可以多試試。
最近 Pencil 突然之間好紅。
講真，啱啱上手試咗兩日嘅時候，我並冇太在意。單睇佢生成嘅UI視覺效果，仲唔及我之前嘅一啲教程咁驚豔。
但是！ 但係隨住我用得越嚟越深入，我背脊一陣涼——我可能低估咗佢，甚至可以話，好多開發者都低估咗佢。
Pencil係引入咗一種全新嘅設計方式，令你可以直接喺程式碼入面做設計。佢要消滅嘅，係困擾咗互聯網行業二十年嘅「設計交付」環節。
今日呢篇文章，唔吹唔踩，帶你深度拆解呢個可能會改變我哋工作流程嘅新物種。
一、 Pencil 究竟係乜嘢？
用一句話定義：Pencil 係一個基於 MCP（模型上下文協議）嘅無限畫布，佢唔係喺瀏覽器入面執行，而係直接「寄生」喺你嘅程式碼庫（IDE）入面。
1. 點解要搞呢樣嘢？（痛點分析）
我哋現有嘅工作流程係割裂嘅：
- 設計師喺 Figma 裏面畫圖（設計世界）。
- 程式員喺 VS Code/Cursor 裏面寫程式碼（工程世界）。
- 中間隔住一條巨大嘅 「死亡交付谷」 。
每次改需求，設計師改完圖，程式員就要對住像素復刻，稍為唔留神就走樣。呢種「交接（Handoff）」唔單止成本高，而且資訊失真好嚴重。
二、 核心概念：Design as Code（設計即程式碼）
呢個係 Pencil 最令我興奮嘅地方。佢引入咗 .pen 格式檔案。
- 佢係程式碼資產：呢個設計檔案就擺喺你嘅 Git 倉庫入面，你可以對佢做 Branch（分支）、Merge（合併）、Revert（回滾）。
- 佢係開放嘅：佢唔係 Figma 嗰種封閉嘅黑盒，透過 MCP 協議，AI（例如 Claude 或者 GPT）可以直接讀寫、操作呢個檔案。
- 本地優先：MCP Server 喺本地執行，資料更加安全，反應仲快啲。
呢個意味住，IDE（整合開發環境）唔再只係寫程式碼嘅地方，佢同時變咗做設計工具。
三、 Cursor 實戰教學：佢係點樣運作嘅？
廢話少講，直接上實作。我係喺 Cursor 入面做測試，體驗非常順滑。
第一步：安裝插件
目前 Pencil 係免費的。
- 1.打開 Cursor 或者 VS Code 嘅擴充市場。
- 2.搜索 Pencil（認準發佈者 High Agency，唔好裝錯）。
- 3.安裝完成之後，側邊欄會出現一個細鉛筆圖示。裝完之後重啟 Cursor。
- 4.按指示輸入電郵，獲取驗證碼登入。
第二步：建立畫布
喺你嘅項目資料夾入面，右鍵新增一個檔案，副檔名係 .pen。即刻，你嘅程式碼編輯器視窗變成一個無限大嘅 WebGL 畫布。
第三步：AI 驅動設計
呢個係最爽嘅環節。你唔需要自己拖拽矩形（雖然佢都支援）。
- 1.用 AI 對話框。
輸入提示詞：使用 pencil mcp 喺當前活躍嘅畫布上設計一個網頁，網頁嘅功能如下……
- 3.可以揀一個設計風格（佢內置咗多種 Design System 變數）。
此時，Cursor 會呼叫 AI，直接喺畫布上由上到下、由左到右一步步畫出像素級精度嘅向量 UI。
再睇一個案例，左邊係我冇畀設計風格直接生成嘅效果，中間係我根據左邊設計圖畀風格優化嘅效果，右邊係我揀咗設計風格直接生成嘅效果
第四步：修改同迭代
覺得掣太細？顏色唔啱？
直接繼續對話：「將所有主要掣改成圓角，顏色換成品牌藍。」
因為佢基於 MCP 協議，AI 可以精準操控畫布上嘅每一個元素（增刪改查），而唔係重新生成一張死圖。
第五步：唔只係畫圖，仲可以「食」Figma
如果你有現成嘅 Figma 設計，Pencil 支援直接從 Figma 複製，貼上到 IDE 裏面。佢可以保留向量路徑、文字同樣式。呢個令遷移成本變得好低。左邊係 Figma 入面嘅設計稿，右邊係複製到 Pencil 嘅效果，相容性仲未係好好，需要將圖片上傳到雲端。
四、 實測總結：優點同槽點
測咗幾日，我對 Pencil 嘅評價可以總結為：「理念滿分，效果有待打磨」。
✅ 驚豔嘅地方（The Good）：
- 1.冇上下文切換：我唔需要喺瀏覽器同 IDE 之間切來切去，呢種「沉浸式開發」嘅感覺真係好正。
- 2.Git 版本控制：設計稿終於可以好似程式碼咁管理！唔使再擔心設計師覆蓋咗檔案揾唔返，或者搞唔清楚邊個係 Final_Final_V3。
- 3.MCP 嘅潛力：佢令 AI 真正「理解」咗設計結構，而唔只係視覺識別。AI 可以批量修改組件、同步 CSS 變數，呢啲先係智能化嘅未來。
❌ 有待改善嘅地方（The Bad）：
- 1.審美上限一般：雖然有風格指導，但目前 AI 生成嘅 UI 都只係「用得」嘅水平，離 Dribbble 上面嘅精美設計仲有距離。如果你對視覺要求極高，始終要靠人工介入調整。
- 2.功能複雜度：相比 Figma 極之成熟嘅組件變體、原型互動，Pencil 目前仲係比較早期，似係一個「開發者嘅畫板」，而唔係「設計師嘅畫板」。
五、 佢係未來嗎？
Pencil 帶畀我最大嘅衝擊，唔係在於佢而家幾好用，而在於佢揭示咗一種趨勢。
喺 AI 時代，設計同程式碼嘅邊界正在消融。
- 以前：設計師畫圖 -> 交付 -> 程式員寫程式碼。
- Pencil 嘅未來：AI 讀懂需求 -> 喺程式碼庫生成設計 -> 設計確認 -> 一鍵轉做 React/Vue 程式碼。
Pencil 目前可能仲係一個「早產嬰兒」，但佢所代表嘅 「Design as Code」 範式，好有可能係未來軟件工程嘅標準答案。
建議：
如果你係全棧開發者或獨立開發者，極力建議你而家就下載體驗嚇。佢可以極大縮短你由「想法」到「程式碼」嘅距離。趁而家免費，可以盡量試多啲！
最近 Pencil 突然火了。
說實話，剛上手測了兩天時，我並沒有太當回事。單看它生成的 UI 視覺效果，還不如我之前的一些教程驚豔。
但是！ 隨着我越用越深入，我背脊一陣發涼——我可能低估了它，甚至可以說，很多開發者都低估了它。
Pencil 是引入了一種全新的設計方式，讓您可以直接在代碼中進行設計。它要消滅的，是困擾了互聯網行業二十年的“設計交付”環節。
今天這篇文章，不吹不黑，帶你深度拆解這個可能改變我們工作流的新物種。
一、 Pencil 到底是什麼？
用一句話定義：Pencil 是一個基於 MCP（模型上下文協議）的無限畫布，它不運行在瀏覽器裏，而是直接“寄生”在你的代碼庫（IDE）中。
1. 為什麼要搞這個？（痛點分析）
我們現有的工作流是割裂的：
- 設計師在 Figma 裏畫圖（設計世界）。
- 程序員在 VS Code/Cursor 裏寫代碼（工程世界）。
- 中間隔着一道巨大的 “死亡交付谷” 。
每次改需求，設計師改完圖，程序員得盯着像素復刻，稍不留神就走樣。這種“交接（Handoff）”不僅成本高，而且信息失真嚴重。
二、 核心理念：Design as Code（設計即代碼）
這是 Pencil 最讓我興奮的地方。它引入了 .pen 格式文件。
- 它是代碼資產：這個設計文件就躺在你的 Git 倉庫裏，你可以對它進行 Branch（分支）、Merge（合併）、Revert（回滾）。
- 它是開放的：它不是 Figma 那種封閉的黑盒，通過 MCP 協議，AI（比如 Claude 或 GPT）可以直接讀寫、操作這個文件。
- 本地優先：MCP Server 在本地運行，數據更安全，反應更快。
這意味着，IDE（集成開發環境）不再只是寫代碼的地方，它同時變成了設計工具。
三、 Cursor 實戰教程：它是怎麼工作的？
廢話不多說，直接上實操。我是在 Cursor 中 進行測試的，體驗非常絲滑。
第一步：安裝插件
目前 Pencil 是免費的。
- 1.打開 Cursor 或 VS Code 的擴展市場。
- 2.搜索 Pencil（認準發佈者 High Agency，別下錯了）。
- 3.安裝完成後，側邊欄會出現一個小鉛筆圖標。安裝完後重啓cursor。
- 4.按提示輸入郵箱，獲取驗證碼登錄。
第二步：創建畫布
在你的項目文件夾裏，右鍵新建一個文件，後綴名為 .pen。瞬間，你的代碼編輯器窗口變成了一個無限大的 WebGL 畫布。
第三步：AI 驅動設計
這是最爽的環節。你不需要自己拖拽矩形（雖然它支持）。
- 1.使用 AI 對話框。
輸入提示詞：使用pencil mcp在當前活躍的畫布上設計一個網頁，網頁的功能如下……
- 3.可以選擇一個設計風格（它內置了多種 Design System 變量）。
此時，Cursor 會調用 AI，直接在畫布上從上到下，從左到右一步步畫出像素級精度的矢量 UI。
再看一個案例，左邊是我沒給設計風格直接生成的效果，中間是我基於左邊設計圖給風格優化的效果，右邊是我選了設計風格直接生成的效果
第四步：修改與迭代
覺得按鈕太小？顏色不對？
直接繼續對話：“把所有主按鈕改成圓角，顏色換成品牌藍。”
因為它基於 MCP 協議，AI 能精準操控畫布上的每一個元素（增刪改查），而不是重新生成一張死圖。
第五步：不僅是畫圖，還能“吃”Figma
如果你有現成的 Figma 設計，Pencil 支持直接從 Figma 複製，粘貼到 IDE 裏。它能保留矢量路徑、文字和樣式。這讓遷移成本變得極低。左邊是figma中的設計稿，右邊是複製到pencil中的效果，兼容性還不是很好，需要將圖片上傳到雲端。
四、 實測總結：優點與槽點
測了幾天，我對 Pencil 的評價可以總結為：“理念滿分，效果待打磨”。
✅ 驚豔的地方（The Good）：
- 1.沒有上下文切換：我不需要在瀏覽器和 IDE 之間切來切去，這種“沉浸式開發”的感覺太棒了。
- 2.Git 版本控制：設計稿終於可以像代碼一樣管理了！再也不用擔心設計師覆蓋了文件找不回來，或者弄不清哪個是 Final_Final_V3。
- 3.MCP 的潛力：它讓 AI 真正“理解”了設計結構，而不僅僅是視覺識別。AI 可以批量修改組件、同步 CSS 變量，這才是智能化的未來。
❌ 待改進的地方（The Bad）：
- 1.審美上限一般：雖然有風格指導，但目前 AI 生成的 UI 也就是“能用”的水平，離 Dribbble 上的精美設計還有距離。如果你對視覺要求極高，還是得人工介入調整。
- 2.功能複雜度：相比 Figma 極其成熟的組件變體、原型交互，Pencil 目前還比較早期，更像是一個“開發者的畫板”，而非“設計師的畫板”。
五、 它是未來嗎？
Pencil 給我最大的衝擊，不在於它現在有多好用，而在於它揭示了一種趨勢。
在 AI 時代，設計和代碼的邊界正在消融。
- 以前：設計師畫圖 -> 交付 -> 程序員寫代碼。
- Pencil 的未來：AI 讀懂需求 -> 在代碼庫生成設計 -> 設計確認 -> 一鍵轉為 React/Vue 代碼。
Pencil 目前可能還只是一個“早產兒”，但它所代表的 “Design as Code” 範式，極有可能是未來軟件工程的標準答案。
建議：
如果你是全棧開發者或獨立開發者，強烈建議現在就下載體驗一下。它能極大地縮短你從“想法”到“代碼”的距離。趁現在免費，可以多試試！