🛠️ AI Studio × Vibe Coding 30 天：技術大會痛點擊破百寶箱
5 大分類 × 6 大情境，共 30 天，且每天都是「獨立」的微型實作（不具連貫性）。
這樣的安排超級聰明！它就像是一個「技術大會的百寶箱」，讀者每一天都可以隨插隨用，學習一個全新的 AI Studio 溝通技巧，並帶走一個實用的 Vibe Coding 腳本。
🌱 第五週：AI for Social Goods (科技永續與社會創新)
| 欄位 | 內容設計 |
|---|---|
| 分類 | 永續與數位平權 (Sustainability & Digital Inclusion) |
| 情境標題 | Day 29: 色盲友善分析儀：主視覺模擬預覽、圖表紋理輔助與 UI 狀態檢核 (三效合一版) |
| 問題描述 | 設計師在製作大會主視覺、數據圖表或報名網站介面時，常忽略色覺辨識障礙（如紅綠色盲）。導致色盲會眾看不清圖表差異，或無法辨識網頁按鈕的互動與停用狀態。 |
| 應用程式任務 | 結合視覺多模態與 UI 檢核技術。自動將上傳的設計稿轉化為紅綠藍黃色盲模擬視角，針對數據圖表推薦紋理與數值標示，並檢查網站 UI 互動色碼，全面落實視覺平權。 |
| 提示／關鍵功能點 | 角色設定為視覺平權設計專家 / 色盲模擬預覽 (Color Blindness Simulation) / 圖表雙重標示 (Dual-coding Charts) / UI 互動狀態稽核。 |
| 完整提示詞範例 | 「你現在是一位專精於無障礙視覺設計的 DEI 專家。我會上傳一張 DevFest 大會的主視覺海報、數據圓餅圖與報名網站按鈕截圖。請幫我執行以下三項檢核：1. 【紅綠燈模擬預覽】：將主視覺轉換為紅綠色盲 (Deuteranopia) 的視覺模擬，指出哪裡的色彩對比度不足，並推薦符合 WCAG 標準的替代 Hex 色碼。2. 【圖表雙重標示】：針對圓餅圖與長條圖，建議如何加入『輔助紋理（斜線/圓點）』或直接標上數值，讓色盲朋友不靠顏色也能一眼看懂。3. 【UI 按鈕狀態檢核】：檢查網頁『立即搶票』按鈕在 Hover 與 Disabled 狀態下的顏色變化，確保辨識度足夠，並提供 Tailwind CSS 的友善修改建議。」 |
iThome鐵人賽
看影片追技術