AI 創意網頁設計

一、課程說明(Course Description)

本課程是門 AI 創意實作課程，旨在讓沒有程式經驗的藝術與設計學生，透過 AI 輔助編碼（vibe coding），也能做出可上線、可在手機開啟的網頁作品；並進一步借用 AI 工具與模型，發想「怎麼玩!」的創意互動。

課程分為兩條並行的軸線，每堂課各占一半：

• Vibe Coding 軸（50%）：學習如何用自然語言向 AI 描述需求、迭代修改、除錯、讀懂 AI 寫出的程式，並完成網頁部署。學生不需要先學會寫程式，但需要學會「與 AI 協作」與「判斷結果」。
• 創意玩法軸（50%）：以 AI 工具與模型（生成式模型、瀏覽器端感知模型、對話模型）為素材，發展互動隱喻、遊戲化規則、角色與敘事，探索 AI 與人、AI 與介面、AI 與環境的互動關係。

每堂課先做「玩法發想」，再以 vibe coding 實現，讓學生永遠從創意出發，再回到工具。課程鼓勵高度實驗性的嘗試，包含失敗的實驗，也視為有價值的創作紀錄。

學習目標

1. 能以 AI 輔助完成網頁的設計、製作、除錯與部署，並能說明作品的運作方式
2. 能運用 AI 生成素材、瀏覽器端模型與對話模型，設計有玩法的互動體驗
3. 能將創意概念轉化為互動隱喻、規則、角色與敘事
4. 了解 AI 網頁作品的安全、成本、授權與倫理問題（含 API 金鑰安全與素材授權）
5. 能完成可在手機上展示的網頁作品，並公開發佈

Keywords：AI、創意網頁、Vibe Coding、互動設計、玩法設計、生成式 AI、藝術、動手做、實驗

 

二、課程內容規畫(Course Planning)

本課程為16週，學習目的為提升學習自主性的高密度學習模式。內容由淺入深分為四個階段：

階段	週次	目標
① 起步	1–3	建立 AI 協作工作流，做出第一個上線頁面，掌握風格與版面
② 互動與感知	4–8	互動、動畫、素材、瀏覽器端模型與對話角色
③ 生成與整合	9–13	生成式互動、資料與共創、敘事與部署、專題提案
④ 專題與發表	14–16	專題開發、班內使用者測試與成果發表

三、參考用書(Text Books)
指定用書：無。講義與範例程式由授課教師自編，每週於清大課程平台提供 (eeclass)。

 

四、教學方式(Teaching Method)

另有 3 週為成果週（期中發表、使用者測試、期末發表），不計入上述比例：第 9、15、16 週。

五、課程進度安排(Syllabus)

作業說明

• 作品賞析報告（個人作業）：選一件 AI 互動作品，分析其感知方式、模型類型、回應設計與創意概念，並附 Survey。
• 小作業一：用 Teachable Machine 製作影像或手勢模型，放上網頁，手機可開啟。
• 小作業二：在 Colab 微調模型並發布到 Hugging Face，附 Model Card 與簡短 Demo。
• 期中成果作品：網頁版小模型與互動作品。
• 期末成果作品：自選情境（展演、教育、公共空間等），完成「感知 → 模型 → 回應」的網頁作品，並附資料集說明、失敗紀錄與 Model Card。

六、成績考核(Evaluation)

1、平時成績 15% (出席率，上課互動)
2、個人作業 10% (作品賞析報告與Survey)
3、指定小作業 15% (小作業一、小作業二)
4、期中成果作品 25%
5、期末成果作品 35%

評量重點

• 重視過程紀錄與自己的判斷：資料集來源與說明、失敗案例與改進、Model Card
• 創意概念、互動設計品質，與技術完成度並重
• 期末作品需能在手機上實際操作展示

八、AI 的使用規則

完全開放使用且無須註明，學生必需運用AI進行共創。