🛠️ AI Studio × Vibe Coding 30 天：技術大會痛點擊破百寶箱
5 大分類 × 6 大情境，共 30 天，且每天都是「獨立」的微型實作（不具連貫性）。
這樣的安排超級聰明！它就像是一個「技術大會的百寶箱」，讀者每一天都可以隨插隨用，學習一個全新的 AI Studio 溝通技巧，並帶走一個實用的 Vibe Coding 腳本。
⚡ 第二週：AI for Engineering (研發與工程創新)
| 欄位 | 內容設計 |
|---|---|
| 分類 | 研發與工程創新 (AI for Engineering) |
| 情境標題 | Day 12: 響應式網頁糾察隊：Playwright 自動多螢幕截圖與 AI 視覺修復 (自動化 QA 視覺版) |
| 問題描述 | 大會網站上線前最怕 RWD 跑版（例如手機版表格超出版面或選單破圖）。手動切換螢幕尺寸檢查極度耗時，且修正跑版往往需要來回通靈 CSS 設定，嚴重拖慢上線進度。 |
| 應用程式任務 | 撰寫 Playwright 腳本自動截取多螢幕尺寸畫面，再利用 AI 視覺模型 (Vision) 直接分析截圖中的跑版災區，一鍵輸出精確的 Tailwind CSS 或原始 CSS 修復代碼。 |
| 提示／關鍵功能點 | 角色設定為資深 QA 工程師與前端修復師 / Playwright 多螢幕截圖自動化 / 多模態視覺分析 (Vision AI) / 針對截圖痛點直出 CSS 修復語法。 |
| 完整提示詞範例 | 「你現在是頂尖的自動化 QA 兼前端修復大師。我們的大會網站可能藏有 RWD 跑版地雷。請幫我完成以下兩階段任務：1. 【自動化截圖腳本】：用 Node.js 寫一段 Playwright 腳本，模擬開啟指定的 URL，並自動存下 iPhone、iPad 與 1080p 桌機三種尺寸的全網頁截圖。2. 【視覺除蟲與修復】：（附上跑版的截圖）請用你的視覺分析能力，揪出這張手機版截圖中『破圖、字體重疊或超出邊界』的地方，並直接給我可以解決這個問題的 Tailwind CSS 類別或 Flexbox/Grid 修復代碼。」 |
iThome鐵人賽
看影片追技術