Claude + Pencil，必備的移動端UI設計工具
整理版優先睇
作者陸徐洲分享用Claude + Pencil打通移動端UI設計到真機預覽嘅完整路徑，入面有具體操作同踩坑經驗。
呢篇文章係由陸徐洲，一家LIMS公司嘅AI算法負責人，分享佢點樣用Claude + Pencil喺移動端UI設計上嘅實踐。事緣有粉絲問佢可唔可以生成移動端代碼，佢發現移動端門檻高，框架選擇多，而且冇辦法好似Web咁直接瀏覽器刷新睇效果。佢試過Google Stitch，但Stitch只係出HTML+CSS，要搬上手機會麻煩。
最後佢成功打通嘅路徑係：Pencil設計→Claude Code生成React Native代碼→Expo Go手機掃碼預覽。佢用一個咖啡點單App做演示，包含4個頁面，由設計到代碼生成總共約一個半鐘，相比傳統設計加開發要6-10日，AI主要慳返人與人之間反覆確認嘅時間。不過佢都話AI出嘅嘢未可以直接交付，細節要人手調，但起碼一個人喺CLI就可以跑完整個流程。
- 移動端UI設計最難嘅唔係生成界面，而係點樣喺手機上真機預覽。
- 作者推薦嘅路徑：Pencil設計→Claude Code生成React Native代碼→Expo Go掃碼預覽，門檻最低。
- Pencil嘅設計規範（get_guidelines）同風格指南（get_style_guide）可以大幅提升設計稿質素，避免佈局錯誤。
- 全流程由一個指令開始，Claude自動拆成四步逐頁設計，但生成時間較長（4頁設計+代碼約半小時）。
- 實戰中遇到Expo版本不相容同端口衝突問題，需要手動下載對應APK同清埋Node進程。
點解揀React Native + Expo？
我先去睇咗Google Stitch，佢基於Gemini 2.5，免費，畀文字或草圖就能生成移動端UI，設計能力唔錯。但佢導出嘅係HTML+CSS代碼，唔係React Native或SwiftUI，要搬上手機會麻煩。
HTML+CSS要再轉一道先落到手機，流程唔夠完善
所以我揀咗React Native + Expo，一套代碼同時跑iOS同安卓，更關鍵係Expo Go呢個免費App，手機裝咗之後掃碼就能預覽，唔使Android Studio，唔使模擬器。
- 跨平台：一套代碼同時支援iOS同安卓
- 門檻低：用手機Expo Go掃碼即睇，唔使裝大型IDE
- 貼近用戶：對唔係專業移動開發嘅人嚟講最易上手
用Pencil設計，關鍵喺規範
一開始我直接畀文字描述，叫Pencil生成界面，出嚟嘅設計稿好粗糙，標題同內容區域重疊，佈局歪歪扭扭。後來發現Pencil內置咗移動端設計規範。
get_guidelines("mobile-app")
注入之後，Pencil會主動檢查整體頁面佈局，之前啲問題就冇咗。更勁嘅係風格指南。
get_style_guide
我用Claude根據咖啡App調性自動揀風格，佢揀咗暖石色背景、焦橙強調色，加雙字體系統，效果統一唔突兀。
一個指令，自動完成設計到代碼
全流程喺Claude Code CLI操作，我只畀咗一條指令，佢自己拆成四步：逐頁通過MCP調Pencil生成設計稿，每個頁面流暢渲染。
四個頁面設計加代碼生成，跑咗半個鐘
佢仲自動讀取.pen文件嘅精確參數（色值、字號、間距、圓角），生成對應React Native + TypeScript代碼，頁面之間嘅跳轉導航都自己加咗。
頁面之間跳轉自己加，唔使額外交代
之後我仲叫佢改成中文，佢直接改React Native代碼嘅文案，冇鬱設計稿，又花咗15分鐘左右。
實戰中嘅坑同時間對比
想用手機掃碼預覽時，首先遇到Expo版本問題——Claude裝嘅Expo SDK 55太新，Google Play嘅Expo Go未跟上。
Expo SDK 55太新，要去官網手動下載對應APK
換咗APK之後總算睇到界面，咖啡點單App配色佈局對得上，跳轉正常。但改完代碼後手機點都唔更新，折騰一輪先發現端口衝突。
殺掉所有Node進程，npx expo start --clear乾淨重啓
整個流程由設計四個頁面（半小時）到生成代碼、轉中文（又半小時），再加踩坑調試，總共大約一個半鐘。相比傳統6-10日，慳咗好多確認時間，但品牌細節、微交互仲要人哋手調。
之前寫咗一篇關於產品設計同研發協作嘅文章，反應幾好。
Claude + Pencil，IDE 裏面最強嘅產設研工具
評論區有粉絲話：期待有移動端嘅案例分享。
仲有位讀者加我微信私聊，問得更具體：「大佬有冇乾貨分享啊，例如 UI 生成移動端代碼。」
講真呢個方向我之前未掂過。之前嗰篇講嘅係 Web 端，React + Ant Design，生成完瀏覽器一刷就睇得。但移動端唔同，淨係框架選型已經可以勸退一半人，SwiftUI？Jetpack Compose？Flutter？React Native？唔知究竟點揀。
揀完仲有個更現實嘅問題：點樣喺手機上面睇到效果？
Web 端 localhost 一開，瀏覽器 refresh 就得。移動端呢？裝 Android Studio？set 模擬器？對於唔係專業做移動開發嘅人嚟講，呢條路去到「喺手機上面見到個界面」就斷咗。
大家好，我係陸徐洲。今日呢篇，分享下 UI 設計喺移動端上嘅簡單實踐。
順住粉絲嘅問題，我先去睇咗一輪現有工具。
Google Stitch 係繞唔過嘅。Google I/O 2025 發佈，基於 Gemini 2.5，完全免費。你俾佢一段文字描述，或者影張白板草圖傳上去，佢可以直接生成移動端風格嘅 UI 設計。今年 3 月仲加咗 Voice Canvas，對住佢講嘢就可以改設計，幾驚喜。
我實際用咗一下，設計呢一步確實做到，移動端界面畫得有板有眼，仲可以跨屏預覽唔同設備嘅效果。
卡喺邊呢？導出。
Stitch 俾你嘅係 HTML + CSS 代碼。唔係 React Native，唔係 SwiftUI，唔係 Compose。你攞住呢份代碼，喺瀏覽器行冇問題，但放上手機會仲要轉多一轉。
設計能力都幾好，但流程唔夠完善。
所以最終我成功行通嘅路徑係咁：Pencil 設計 → Claude Code 生成 React Native 代碼 → Expo Go 手機掃碼預覽。
點解揀 React Native + Expo？一套代碼同時行 iOS 同 Android，呢個係基本盤。更重要係 Expo Go——一個免費 App，手機裝咗之後掃個碼就可以預覽，唔使裝 Android Studio，唔使 set 模擬器。對我嘅讀者羣嚟講，呢條路門檻最低。
示範案例我揀咗個咖啡點單 App，4 個頁面：首頁菜單瀏覽、商品詳情定製、購物車、確認訂單。複雜度啱啱好，亦都比較貼近現實生活場景。
大部分人用 Pencil 就係掉一段文字描述，叫 AI 直接生成界面。出嚟嘅嘢比較粗糙，初版設計稿標題同內容區域有重疊，佈局歪歪斜斜。
我一開始都係咁做。後來發現 Pencil 內置咗一套移動端設計規範get_guidelines("mobile-app")，狀態欄點處理、內容區用乜間距系統、底部導航欄嘅尺寸同激活態點做，全部有曬。注入規範之後再生成，Pencil 會主動做一輪整體頁面佈局檢查，之前嗰啲標題同內容打架嘅問題就冇咗。
但真正令我覺得「呢樣嘢有啲料到」嘅，係風格指南。調用 get_style_guide，揀一組風格標籤，Pencil 會返回完整嘅視覺系統，配色方案、字體配搭、圓角策略、陰影規則全部俾齊。Pencil 內置咗幾十種風格可以揀，今次我冇手動揀，直接叫 Claude 根據咖啡 App 嘅調性自動揀，佢揀咗暖石色背景 #F4F3F1、焦橙強調色 #C45C26，配搭 Source Serif 4 做標題、DM Sans 做正文嘅雙字體系統。
直接用提示詞生成嘅效果同調用設計規範後生成嘅效果差距都幾明顯：
同一個工具，識用同唔識用，出嚟嘅嘢差咗一個檔次。 呢個都係我寫呢篇最想講嘅一件事。
成個流程我都係喺 Claude Code CLI 度操作，不過喺 IDE 做效果一樣，只係用 CLI 嘅話，你都要去 IDE 開一個新嘅 .pen 檔案畫布，確認 MCP 連接狀態正常，然後再返 CLI 發指令。
成個過程我只係俾咗 Claude 一條指令，佢自己拆成咗四步：逐頁經 MCP 調用 Pencil 生成設計稿，每個頁面喺 Pencil 畫布上嘅設計同渲染都好流暢。四個頁面畫完之後佢自動咗一輪頁面效果檢查，然後讀取 .pen 檔案裏面嘅精確參數，包括色值、字體大細、間距、圓角，最後生成對應嘅 React Native + TypeScript 代碼。頁面之間嘅跳轉導航都係佢自己加，唔使額外交代。
不過呢步好慢。四個頁面嘅設計加代碼生成，行咗半個幾鐘。中間我一度以為係卡咗，睇咗下 vscode 嘅輸出先發現佢一頁一頁咁啃，每個頁面都係 MCP 叫設計、讀參數、畫設計稿成個流程。
完整嘅設計界面效果如下。生成嘅界面係全英文，配圖風格都偏外國，咖啡名、描述、按鈕文字全部係英文。呢個唔意外，Pencil 嘅設計語言本身就偏國際化。
確定設計稿冇問題之後，再叫 Claude 生成完整嘅代碼，佢會自動開 web 端頁面檢查。
想喺移動端睇，都好簡單，npx expo start 一敲，QR code 就出咗嚟。
然後拎手機掃碼想睇下實際效果，點知報錯。「Project is incompatible」。
查咗一輪先搞明：Claude 裝嘅係 Expo SDK 55，太新，Google Play 商店入面嘅 Expo Go 仲未支援呢個版本。要去 expo.dev/go 手動下載對應版本嘅 APK 裝上去。Play 商店評論區都有人喺度追更新，唔係得我一個中招。
換咗 APK，重新掃碼，今次入到去。我用嘅係小米 15，Expo Go 由零開始加載渲染頁面大約 20 秒，冇閃退亦冇卡頓。咖啡點單界面出現喺手機上面，配色、佈局同設計稿對得上，頁面之間嘅跳轉都通。
後來我叫 Claude 改成中文，佢直接改 React Native 代碼入面嘅文案，冇鬱設計稿，整體佈局、風格同配圖都保持不變。呢步又用咗大約 15 分鐘，出嚟嘅中文顯示效果都幾好。
之後除錯嘅時候又踩咗個隱藏嘅坑。我改咗代碼，手機點都唔變。以為係 cache，清咗幾次，冇用。搞咗一輪先發現——除錯期間我開咗幾個 Expo instance，port 撞咗，手機掃到嘅 QR code 連咗去舊 process，改咗嘅代碼根本冇送去手機。殺曬所有 Node process，npx expo start --clear 乾淨重啟先搞掂。
成個流程行完，設計四個畫面半個鐘，生成代碼、轉中文又半個鐘，加上中間踩坑、除錯、搞 Expo 版本，總共大約個半鐘。傳統流程裏面設計師畫高保真 3 到 5 日，前端開發再寫 3 到 5 日，中間仲有來回對齊嘅成本。AI 斬走嘅唔係做嘢時間，係人同人之間反覆確認嘅時間。
當然，攞住 AI 出嘅嘢冇得直接交貨，品牌個性、微互動呢啲細節仲係要人自己執。但由設計到代碼再到手機真機預覽，一個人喺 CLI 入面就可以行完。你唔使再對住一張設計稿愁「呢樣嘢點樣先喺手機上面行到」。
我係陸徐洲，一間 LIMS 公司嘅 AI 算法負責人。關注我，等我哋一齊喺 AI 落地實踐嘅路上，行得更遠。
多謝你睇我嘅文章。有任何關於 AI 提效或者工程落地實踐方面嘅問題都可以加我微信，交個朋友，一齊探討，共同進步。
之前寫了一篇產設研協作的文章，反響不錯。
評論區有粉絲粉絲說：期待有移動端的案例分享。
還有一位讀者加我微信私聊，問得更具體："大佬有沒有乾貨分享啊，比如說 UI 生成移動端代碼。"
說實話這個方向我之前沒碰過。之前那篇講的是 Web 端，React + Ant Design，生成完瀏覽器一刷就能看。但移動端不一樣，光框架選型就能勸退一半人，SwiftUI？Jetpack Compose？Flutter？React Native？不知道究竟該怎麼選。
選完了還有個更現實的問題：怎麼在手機上看到效果？
Web 端 localhost 一開，瀏覽器刷新就行。移動端呢？裝 Android Studio？配模擬器？對於不是專業移動開發的人來說，這條路到"在手機上看到界面"就斷了。
大家好，我是陸徐洲。今天這篇，分享下UI設計在移動端上的簡單實踐。
順着粉絲的問題我先去看了一圈現有工具。
Google Stitch 是繞不過去的。Google I/O 2025 發佈的，基於 Gemini 2.5，完全免費。你給它一段文字描述，或者拍張白板草圖傳上去，它能直接生成移動端風格的 UI 設計。今年 3 月還加了 Voice Canvas，對着它說話就能改設計，挺驚豔的。
我實際用了一下，設計這一步確實能做，移動端界面畫得有模有樣，還能跨屏預覽不同設備的效果。
卡在哪呢？導出。
Stitch 給你的是 HTML + CSS 代碼。不是 React Native，不是 SwiftUI，不是 Compose。你拿着這份代碼，在瀏覽器裏跑沒問題，但往手機上搬，還得再轉一道。
設計能力還不錯，但是流程不夠完善。
所以最終我跑通的路徑是這樣的：Pencil 設計 → Claude Code 生成 React Native 代碼 → Expo Go 手機掃碼預覽。
為什麼選 React Native + Expo？一套代碼同時跑 iOS 和安卓，這是基本盤。更關鍵的是 Expo Go——一個免費 App，手機裝上之後掃個碼就能預覽，不需要裝 Android Studio，不需要配模擬器。對我的讀者羣體來說，這條路門檻最低。
演示案例我選了個咖啡點單 App，4 個頁面：首頁菜單瀏覽、商品詳情定製、購物車、確認訂單。複雜度剛好也比較貼近生活實際場景。
大部分人用 Pencil 就是甩一段文字描述，讓 AI 直接生成界面。出來的東西比較粗糙，初版設計稿標題和內容區域都有重疊，佈局歪歪扭扭的。
我一開始也是這麼幹的。後來發現 Pencil 內置了一套移動端設計規範get_guidelines("mobile-app")，狀態欄怎麼處理、內容區用什麼間距系統、底部導航欄的尺寸和激活態怎麼做，全有。注入規範之後再生成，Pencil 會主動做一輪整體頁面佈局檢查，之前那種標題和內容打架的問題就沒了。
但真正讓我覺得"這玩意兒有點東西"的，是風格指南。調用 get_style_guide，選一組風格標籤，Pencil 會返回完整的視覺系統，配色方案、字體搭配、圓角策略、陰影規則全部配齊。Pencil 內置了幾十種風格可選，這次我沒有手動挑，直接讓 Claude 根據咖啡 App 的調性自動選擇，它選了暖石色背景 #F4F3F1、焦橙強調色 #C45C26，搭配 Source Serif 4 做標題、DM Sans 做正文的雙字體系統。
直接使用提示詞生成的效果和調用設計規範後生成的效果差距還是蠻明顯的：
同一個工具，會用和不會用，出來的東西差了一個檔次。 這也是我寫這篇最想說的一件事。
全流程我都是在 Claude Code CLI 裏操作的，不過在 IDE 裏效果一樣，只是用 CLI 的話，你還是得去 IDE 裏新建一個 .pen 文件畫布，確認 MCP 連接狀態正常，然後再回 CLI 發指令。
整個過程我只給了 Claude 一條指令，它自己拆成了四步：逐頁通過 MCP 調用 Pencil 生成設計稿，每個頁面在 Pencil 畫布上的設計和渲染都挺流暢的。四個頁面畫完後它自動做了一輪頁面效果檢查，然後讀取 .pen 文件裏的精確參數，包括色值、字號、間距、圓角，最後生成對應的 React Native + TypeScript 代碼。頁面之間的跳轉導航也是它自己加的，不用額外交代。
不過這步很慢。四個頁面的設計加代碼生成，跑了半個多小時。中間我一度以為是卡住了，看了下vscode中的輸出才發現它在一個個頁面啃，每個頁面都是 MCP 調設計、讀參數、畫設計稿一整套流程。
完整的設計界面效果如下。生成的界面是全英文的，配圖風格也偏國外，咖啡名字、描述、按鈕文字全是英文。這倒不意外，Pencil 的設計語言本身就偏國際化。
確定設計稿沒有問題後，再讓Claude生成完整的代碼，他會自動打開web端頁面進行檢查。
想要在移動端查看，也很簡單，npx expo start 一敲，二維碼出來了。
然後掏出手機掃碼想看看實際效果結果報錯了。"Project is incompatible"。
查了一圈才搞明白：Claude 裝的是 Expo SDK 55，太新了，Google Play 商店裏的 Expo Go 還沒跟上這個版本。得去 expo.dev/go 手動下載對應版本的 APK 裝上。Play 商店評論區也有人在催更，不是我一個人踩這個坑。
換了 APK，重新掃碼，這回進去了。我用的小米 15，Expo Go 從零加載渲染頁面大概 20 秒，沒有閃退也沒卡頓。咖啡點單界面出現在手機上，配色、佈局跟設計稿對得上，頁面之間的跳轉也是通的。
後來我讓 Claude 改成中文，它直接改了 React Native 代碼裏的文案，沒有動設計稿，整體佈局、風格和配圖都保持不變。這一步又花了 15 分鐘左右，出來的中文顯示效果還不錯。
後面調試的時候又踩了一個隱蔽的坑。我改了代碼，手機上死活不變。以為是緩存，清了好幾次，沒用。折騰了一陣才發現——調試過程中我啓動了好幾個 Expo 實例，端口衝突了，手機掃到的二維碼連的是舊進程，改的代碼根本沒送到手機上。殺掉所有 Node 進程，npx expo start --clear 乾淨重啓才搞定。
整個流程跑下來，設計四個屏半小時，生成代碼、轉中文又半小時，加上中間踩坑、調試、折騰 Expo 版本，總共大約一個半小時。傳統流程裏設計師畫高保真 3 到 5 天，前端開發再寫 3 到 5 天，中間還有來回對齊的成本。AI 砍掉的不是幹活時間，是人和人之間反覆確認的時間。
當然拿着 AI 出的東西沒法直接交付，品牌個性、微交互那些細節還是得人來調。但從設計到代碼到手機真機預覽，一個人在 CLI 裏就能跑完。你不用再對着一張設計稿發愁"這東西怎麼才能在手機上跑起來"。
我是陸徐洲，一家 LIMS 公司的 AI 算法負責人。關注我，讓我們一起在 AI 落地實踐的路上，走得更遠。
感謝您閲讀我的文章。有任何關於AI提效或者工程落地實踐方面的問題都可以加我微信，交個朋友，一起探討，共同進步。