W8

AI 設計 APP · 2025.04.17

陳文慶寧
學習週報

1111310013  ·  Week 8  ·  AI × Code × Design

SCROLL
01

安裝 Terminal
& 問 Gemini 建立程式碼

Step 01 · 安裝環境

安裝 Terminal 並設定開發環境,開始進入 AI 輔助設計的基礎工具配置。

Step 02 · 問 Gemini

透過 Gemini 詢問如何建立資料夾結構,並生成初版程式碼,體驗 AI 作為開發夥伴的互動流程。

Step 03 · 作業結果

完成第一個作業,截圖記錄成果如下。

作業一 截圖 1
作業一 · IMG 01
作業一 截圖 2
作業一 · IMG 02
作業一 截圖 3
作業一 · IMG 03
作業一 截圖 4
作業一 · IMG 04
作業一 截圖 5
作業一 · IMG 05
作業一 截圖 6
作業一 · IMG 06
作業一 截圖 7
作業一 · IMG 07
作業一 截圖 8
作業一 · IMG 08
✦ 本週心得 · 作業一

這次安裝 Terminal 的過程讓我了解到,一個好的開發環境是所有程式設計的基礎。透過 Gemini 的協助, 我發現 AI 不只是查資料的工具,更能像一個有耐心的老師一步一步引導我完成任務。 建立資料夾和編寫程式碼的過程中,我開始理解「工作流程」的重要性——先規劃結構, 再逐步填入內容,這個思維方式在設計和程式開發中都非常關鍵。

02

響應式設計
Guess the Number

Step 01 · 純 HTML/JS

只利用 HTML 和 JavaScript(不使用框架)實作響應式設計(Responsive Design),挑戰最基本的前端能力。

Step 02 · 問 Gemini + 編寫

再次借助 Gemini 理解響應式設計原理,建立資料夾並完成程式碼。

Step 03 · 成果上線

已部署至 Neocities,可公開訪問:

🔗 hwu-music.neocities.org/w8_Guess_the_Number/
作業二 截圖 1
作業二 · IMG 01
作業二 截圖 2
作業二 · IMG 02
作業二 截圖 3
作業二 · IMG 03
作業二 截圖 4
作業二 · IMG 04
作業二 截圖 5
作業二 · IMG 05
作業二 截圖 6
作業二 · IMG 06
✦ 本週心得 · 作業二

純 HTML/JS 的挑戰讓我重新認識了前端開發的本質。響應式設計不只是「讓網頁在手機上看起來好看」, 而是一種思考方式——如何讓同一份程式碼適應不同螢幕、不同使用情境。 製作「猜數字」遊戲讓我體會到,互動設計的核心是使用者體驗: 反饋要即時、邏輯要清晰、介面要直觀。能把作品部署到 Neocities 讓真實用戶訪問, 這種成就感是在本機測試完全感受不到的。

03

發布到手機的程式

Step 01 · 行動端開發

將程式發布至手機裝置,學習行動端部署流程與跨裝置兼容性測試。

Step 02 · 問 Gemini + 編寫

詢問 Gemini 手機部署的最佳實踐,建立資料夾並完成對應程式碼調整。

Step 03 · 作業結果

成功在手機上執行程式,完整截圖記錄如下。

作業三 截圖 1
作業三 · IMG 01
作業三 截圖 2
作業三 · IMG 02
作業三 截圖 3
作業三 · IMG 03
作業三 截圖 4
作業三 · IMG 04
作業三 截圖 5
作業三 · IMG 05
✦ 本週心得 · 作業三

把程式「搬」到手機上,看似只是一個部署步驟,但其實背後涉及很多細節: 觸控事件與滑鼠事件的差異、viewport 設定、字體大小的可讀性等。 這次作業讓我深刻體會到「行動優先」設計哲學的必要性。 在手機上測試和電腦螢幕上看完全不同,很多在電腦上覺得「還好」的設計, 放到手機就變得難以操作。這提醒我未來設計時必須時刻考慮多元使用場景。

04

使用 Cursor
AI 輔助開發工具

Step 01 · Cursor IDE

使用 Cursor 這款整合 AI 功能的程式編輯器,體驗 AI-native 開發流程。

Step 02 · 問 Gemini + 編寫

搭配 Gemini 的外部建議與 Cursor 的內建 AI 補全,建立資料夾並完成程式碼。

Step 03 · 作業結果

完成最終作業,截圖成果如下。

作業四 截圖 1
作業四 · IMG 01
作業四 截圖 2
作業四 · IMG 02
作業四 截圖 3
作業四 · IMG 03
✦ 本週心得 · 作業四

使用 Cursor 讓我看到了 AI 輔助開發的未來樣貌。不同於傳統 IDE,Cursor 能夠理解整個專案的上下文, 給出更精準的程式碼建議,甚至主動發現潛在的錯誤。 這週四個作業的過程讓我意識到:AI 工具不是要取代開發者的思考, 而是放大開發者的能力。你對問題的理解越深,AI 給出的建議就越有價值。 學習如何「問對問題」,本身就是這門課最重要的技能。