WEBVTT
Kind: captions
Language: zh-Hant

00:00:00.000 --> 00:00:01.640
你有沒有遇過這種情況

00:00:02.160 --> 00:00:03.760
設計稿看起來很清楚

00:00:04.120 --> 00:00:06.660
但真的要把它切成可以跑的網頁

00:00:06.920 --> 00:00:08.020
又是另一件事

00:00:09.150 --> 00:00:10.280
screenshot-to-code

00:00:10.280 --> 00:00:13.700
想解的就是把一張截圖變成可以跑的

00:00:13.700 --> 00:00:14.560
網頁原型

00:00:14.960 --> 00:00:16.420
真正痛的是時間

00:00:16.940 --> 00:00:18.740
Demo前一天要補頁面

00:00:19.080 --> 00:00:20.700
舊系統要重做UI

00:00:21.160 --> 00:00:22.980
設計師想看互動版本

00:00:23.300 --> 00:00:25.660
工程師卻還卡在第一版切版

00:00:25.660 --> 00:00:26.720
這種時候

00:00:26.720 --> 00:00:28.660
先有一個可改的原型

00:00:28.980 --> 00:00:31.180
比從空白檔案開始好很多

00:00:32.060 --> 00:00:32.940
screenshot-to-code

00:00:32.940 --> 00:00:34.140
的定位很直白

00:00:34.500 --> 00:00:35.360
你丟截圖

00:00:35.787 --> 00:00:37.260
mockup Figma設計稿

00:00:37.640 --> 00:00:38.720
甚至螢幕錄影

00:00:39.080 --> 00:00:41.060
它嘗試輸出前端程式

00:00:41.480 --> 00:00:42.320
它支援HTML

00:00:42.980 --> 00:00:43.640
Tailwind

00:00:43.640 --> 00:00:44.300
React

00:00:44.300 --> 00:00:46.320
Vue也支援Bootstrap和

00:00:46.320 --> 00:00:47.920
Ionic這類常見stack

00:00:48.480 --> 00:00:50.420
流程大概是先看畫面

00:00:50.660 --> 00:00:51.540
判斷版面

00:00:51.740 --> 00:00:53.300
文字圖片和元件

00:00:53.700 --> 00:00:55.020
再把它寫成程式

00:00:55.020 --> 00:00:57.380
新版本很重視真素材

00:00:57.520 --> 00:00:58.140
像logo

00:00:58.480 --> 00:00:59.300
照片icon

00:00:59.700 --> 00:01:01.620
如果能從截圖裡抓出來

00:01:01.800 --> 00:01:02.700
就盡量保留

00:01:03.060 --> 00:01:04.960
不是全部重畫成假的

00:01:05.320 --> 00:01:07.208
背後可以接Gemini

00:01:07.208 --> 00:01:08.176
GPT Claude

00:01:08.176 --> 00:01:10.480
README也特別建議Gemini

00:01:10.480 --> 00:01:13.600
因為它對截圖理解和素材擷取比較關

00:01:13.600 --> 00:01:16.120
鍵Replicate則負責圖片編

00:01:16.120 --> 00:01:17.660
輯去背和生成

00:01:18.120 --> 00:01:18.860
換句話說

00:01:19.180 --> 00:01:21.060
這不是單一模型秀肌肉

00:01:21.340 --> 00:01:24.060
而是一條把多個能力接起來的工作流

00:01:24.400 --> 00:01:25.940
它也能吃螢幕錄影

00:01:26.320 --> 00:01:27.340
這點很有意思

00:01:27.700 --> 00:01:30.180
因為很多產品畫面不是靜態的

00:01:30.480 --> 00:01:31.400
按鈕點下去

00:01:31.640 --> 00:01:32.380
tab切換

00:01:32.720 --> 00:01:33.600
modal彈出

00:01:33.920 --> 00:01:36.240
才是使用者真正感受到的UI

00:01:36.720 --> 00:01:37.920
如果要本機跑

00:01:38.280 --> 00:01:40.480
架構是React加Vite前端

00:01:40.840 --> 00:01:42.680
搭配FastAPI後端

00:01:43.100 --> 00:01:45.220
至少要準備一組模型金鑰

00:01:45.560 --> 00:01:47.800
OpenAI Anthropic或Gemini

00:01:47.800 --> 00:01:49.180
其中之一都可以

00:01:49.600 --> 00:01:51.820
如果想要更完整的圖片處理

00:01:52.260 --> 00:01:53.520
Replicate也要設定

00:01:53.920 --> 00:01:55.520
可選的screenshot preview

00:01:55.520 --> 00:01:56.700
是另一個重點

00:01:57.080 --> 00:02:00.080
工具可以把自己產出的頁面丟進Chromium

00:02:00.360 --> 00:02:03.480
截圖讓agent回頭看結果像不像

00:02:03.880 --> 00:02:05.620
這一步不會保證完美

00:02:05.880 --> 00:02:08.520
但比只相信文字輸出可靠很多

00:02:08.980 --> 00:02:10.460
它適合三種場景

00:02:10.840 --> 00:02:12.240
做landing page草稿

00:02:12.560 --> 00:02:14.640
把舊畫面快速翻成新版

00:02:14.920 --> 00:02:18.280
或讓設計和工程在會議前先看到互動

00:02:18.280 --> 00:02:21.540
原型你不一定要直接把產物上線

00:02:21.540 --> 00:02:24.460
但你可以少花很多時間在第一版

00:02:24.860 --> 00:02:25.980
但它不是魔法

00:02:26.400 --> 00:02:27.500
截圖裡的小字

00:02:27.780 --> 00:02:28.820
陰影間距

00:02:29.060 --> 00:02:29.960
響應式狀態

00:02:30.280 --> 00:02:31.720
還有真正的資料流

00:02:31.720 --> 00:02:33.380
都可能需要人修

00:02:33.720 --> 00:02:35.240
QA要看三件事

00:02:35.640 --> 00:02:36.720
畫面是不是像

00:02:37.020 --> 00:02:38.000
互動是不是對

00:02:38.360 --> 00:02:40.280
程式是不是能長期維護

00:02:40.780 --> 00:02:42.860
開源的好處是你可以自架

00:02:43.120 --> 00:02:44.420
也可以改提示詞

00:02:44.740 --> 00:02:47.100
換模型加自己的設計系統

00:02:47.440 --> 00:02:48.540
成本也要算

00:02:48.540 --> 00:02:49.800
模型越強

00:02:50.040 --> 00:02:51.300
畫面越可能接近

00:02:51.600 --> 00:02:54.140
但速度和費用通常也會上去

00:02:54.460 --> 00:02:57.100
另外別把敏感畫面直接丟進去

00:02:57.420 --> 00:02:58.260
內部後台

00:02:58.580 --> 00:02:59.320
客戶資料

00:02:59.540 --> 00:03:01.180
金鑰未公開設計

00:03:01.180 --> 00:03:02.260
都要先遮掉

00:03:02.680 --> 00:03:04.140
AI工具越方便

00:03:04.480 --> 00:03:06.420
資料邊界越要自己守住

00:03:06.760 --> 00:03:07.900
對工程師來說

00:03:08.200 --> 00:03:10.740
這是省掉第一版草稿時間的工具

00:03:11.040 --> 00:03:12.260
對設計師來說

00:03:12.520 --> 00:03:15.800
它可以把看起來像更快推到點起來像

00:03:15.800 --> 00:03:18.580
我會把它放在團隊流程的前段

00:03:19.020 --> 00:03:19.820
截圖進來

00:03:20.020 --> 00:03:20.700
原型出來

00:03:21.160 --> 00:03:22.620
接著才是人工整理

00:03:22.840 --> 00:03:23.940
測試和重構

00:03:24.340 --> 00:03:26.720
真正交付前還是要跑起來

00:03:26.900 --> 00:03:28.360
看錯誤改狀態

00:03:28.580 --> 00:03:29.380
補可及性

00:03:29.740 --> 00:03:32.780
可是如果你的任務是先把UI想法變

00:03:32.780 --> 00:03:34.140
成能討論的東西

00:03:35.220 --> 00:03:36.300
screenshot-to-code

00:03:36.300 --> 00:03:37.860
已經很接近那個入口

00:03:38.240 --> 00:03:39.860
所以這個專案值得看

00:03:40.160 --> 00:03:42.140
不是因為它讓工程師消失

00:03:42.460 --> 00:03:45.420
而是它把第一版畫面這件事變得便宜

00:03:45.420 --> 00:03:47.580
很多我的結論很簡單

00:03:47.840 --> 00:03:48.960
快但要有QA

00:03:49.520 --> 00:03:51.520
省時間但不要省檢查

00:03:51.900 --> 00:03:54.620
如果你想看更多像這樣的開源工具

00:03:54.940 --> 00:03:57.220
我會繼續在Github雷達幫你拆

00:03:57.220 --> 00:03:59.140
解喜歡這種題材

00:03:59.260 --> 00:03:59.860
記得訂閱

00:04:00.180 --> 00:04:01.540
我們下一支影片見