YouTube 影片筆記
用 SVG 當 AI 設計稿再轉程式碼，介面開發快三倍的工作流拆解
原片標題：SVG是最好的AI编程语言
原片說明
AI 写主流 Web/App 界面很拿手，但一碰到 Rust 原生、游戏 UI 这种训练数据少的场景就很拉胯。这期分享我开发视频编辑器三个月里发现的一个小技巧：先让 AI 用 SVG 把界面画出来，再拿 SVG 当参考让它写真正的代码，UI 开发速度直接快了 3 倍。
章节：
00:00 背景：用 Rust 做视频编辑器
00:24 痛点：AI 不擅长原生和游戏 UI
01:40 核心方案：让 AI 先写 SVG
02:39 新工作流：SVG 定稿，再写代码
04:24 演示：卡牌游戏 UI 拆成 SVG 图层
07:37 为什么有效：对人友好，也对 AI 友好
10:41 总结和彩蛋：这期视频就是用自研编辑器剪的
#UI设计 #AI工作流 #独立开发 #游戏UI #SVG #Rust #Zed #AI编程
我寫程式這麼久，第一次聽到有人把 SVG 當成跟 AI 溝通的語言，而且還真的有效。Up Evolution 花了快三個月做影片編輯器，發現 AI 寫 Rust 原生介面根本不行，但叫它先畫 SVG 再照著寫程式，UI 速度直接快三倍。這支影片就是他把整套工作流拆給你看。
影片時間軸
- 00:24點出問題：AI 擅長網頁，遇到原生框架和遊戲 UI 就沒轍
- 00:52對比四天前版本，剪輯線按鈕改成賽博龐克風格
- 01:40發現 SVG 是網頁標準的一部分，AI 寫起來跟寫網頁一樣順
- 02:39把 UI 元件全部拆成 SVG，再讓 AI 照著還原，幾乎一比一
- 04:28示範純 AI 做的卡牌遊戲，連像素圖都能拆圖層、去背
- 06:17拆完圖層再改效果，SVG 當設計稿，換技術架構也沒差
- 07:37解釋底層邏輯：SVG 是純文字又視覺化，對人和 AI 都友善
- 10:42收尾，順便爆雷這支影片就是用自研編輯器剪的
SVG 當提示詞，比直接叫 AI 寫程式準
Up Evolution 的關鍵發現是：叫 AI 直接寫程式碼做介面，它會顧此失彼，因為程式邏輯和視覺設計搶同一份 token。但 SVG 是靜態的，生成同樣的視覺只要一半到三分之一的量，AI 能把細節做滿。他把每個 UI 元件拆成 SVG 之後，再讓 AI 照著某個視圖去寫程式，幾乎能一比一還原。這段講得很清楚，不是什麼玄學，就是 token 預算的分配問題。
連像素圖都能拆，換框架也不用重來
卡牌遊戲那段最讓我意外。遊戲 UI 比 App 難做，因為有大量美術資產，但 Up Evolution 照樣叫 AI 把戰鬥畫面拆成操作層、背景層，連不是透明背景的圖都能用程式拆到像素級精確。而且因為 SVG 是通用標準，今天在 Rust 引擎裡實作，明天換網頁重寫都無所謂，設計稿本身不會綁死技術架構。他最後說設計層面確定九成，剩下一成留給 AI 自由發揮，這個比例抓得滿實在的。
值得下載嗎
如果你也在跟 AI 協作寫 UI，這支影片的 SVG 工作流值得存下來照做；如果只是看熱鬧，它至少讓你理解為什麼 AI 寫原生介面會卡。
覺得這篇筆記有幫助嗎？