🛠️ AI Studio × Vibe Coding 30 天：技術大會痛點擊破百寶箱
5 大分類 × 6 大情境，共 30 天，且每天都是「獨立」的微型實作（不具連貫性）。
這樣的安排超級聰明！它就像是一個「技術大會的百寶箱」，讀者每一天都可以隨插隨用，學習一個全新的 AI Studio 溝通技巧，並帶走一個實用的 Vibe Coding 腳本。
🌱 第五週：AI for Social Goods (科技永續與社會創新)
| 欄位 | 內容設計 |
|---|---|
| 分類 | 永續與數位平權 (Sustainability & Digital Inclusion) |
| 情境標題 | Day 25: 數位平權檢核員：活動網站無障礙 (a11y) 規範自動掃描器 |
| 問題描述 | 大會官方網站通常由志工快速建置，常忽略無障礙網頁 (Accessibility, a11y) 規範。這導致使用螢幕閱讀器的視障開發者、或對色彩對比度敏感的會眾難以瀏覽議程與完成報名。 |
| 應用程式任務 | 讓 AI 化身 W3C 認證的無障礙專家。透過輸入網站 HTML/CSS 原始碼，自動揪出違反 WCAG 2.1 規範的痛點，並直接提供可替換、符合規範的程式碼片段 (Code Snippet)。 |
| 提示／關鍵功能點 | 角色設定為無障礙網頁專家 / WCAG 規範稽核 (WCAG Compliance Check) / 同理心情境說明 (Empathy Explanation) / 直接可用的程式碼修復 (Actionable Fixes)。 |
| 完整提示詞範例 | 「你現在是 W3C 認證的無障礙網頁 (a11y) 專家。我會提供一段 DevFest 大會官網的 HTML 原始碼。請幫我執行以下任務：1. 【規範揪蟲】：挑出 3 個違反 WCAG 2.1 規範的地方（例如：缺少圖片 alt 屬性、按鈕沒有 aria-label、色彩對比度不足）。2. 【同理心還原】：用一句白話文解釋，這個錯誤會對『使用螢幕閱讀器的開發者』造成什麼具體的困擾（例如：『這會讓他們聽到一串無意義的檔名，不知道這個按鈕是用來買票的』）。3. 【一鍵修復】：直接提供修改後的 HTML 程式碼片段，讓我可以直接貼上替換，確保網站符合數位平權標準。」 |
iThome鐵人賽
看影片追技術