AI 設計 APP · 2025.04.17
安裝 Terminal 並設定開發環境,開始進入 AI 輔助設計的基礎工具配置。
透過 Gemini 詢問如何建立資料夾結構,並生成初版程式碼,體驗 AI 作為開發夥伴的互動流程。
完成第一個作業,截圖記錄成果如下。
這次安裝 Terminal 的過程讓我了解到,一個好的開發環境是所有程式設計的基礎。透過 Gemini 的協助, 我發現 AI 不只是查資料的工具,更能像一個有耐心的老師一步一步引導我完成任務。 建立資料夾和編寫程式碼的過程中,我開始理解「工作流程」的重要性——先規劃結構, 再逐步填入內容,這個思維方式在設計和程式開發中都非常關鍵。
只利用 HTML 和 JavaScript(不使用框架)實作響應式設計(Responsive Design),挑戰最基本的前端能力。
再次借助 Gemini 理解響應式設計原理,建立資料夾並完成程式碼。
純 HTML/JS 的挑戰讓我重新認識了前端開發的本質。響應式設計不只是「讓網頁在手機上看起來好看」, 而是一種思考方式——如何讓同一份程式碼適應不同螢幕、不同使用情境。 製作「猜數字」遊戲讓我體會到,互動設計的核心是使用者體驗: 反饋要即時、邏輯要清晰、介面要直觀。能把作品部署到 Neocities 讓真實用戶訪問, 這種成就感是在本機測試完全感受不到的。
將程式發布至手機裝置,學習行動端部署流程與跨裝置兼容性測試。
詢問 Gemini 手機部署的最佳實踐,建立資料夾並完成對應程式碼調整。
成功在手機上執行程式,完整截圖記錄如下。
把程式「搬」到手機上,看似只是一個部署步驟,但其實背後涉及很多細節: 觸控事件與滑鼠事件的差異、viewport 設定、字體大小的可讀性等。 這次作業讓我深刻體會到「行動優先」設計哲學的必要性。 在手機上測試和電腦螢幕上看完全不同,很多在電腦上覺得「還好」的設計, 放到手機就變得難以操作。這提醒我未來設計時必須時刻考慮多元使用場景。
使用 Cursor 這款整合 AI 功能的程式編輯器,體驗 AI-native 開發流程。
搭配 Gemini 的外部建議與 Cursor 的內建 AI 補全,建立資料夾並完成程式碼。
完成最終作業,截圖成果如下。
使用 Cursor 讓我看到了 AI 輔助開發的未來樣貌。不同於傳統 IDE,Cursor 能夠理解整個專案的上下文, 給出更精準的程式碼建議,甚至主動發現潛在的錯誤。 這週四個作業的過程讓我意識到:AI 工具不是要取代開發者的思考, 而是放大開發者的能力。你對問題的理解越深,AI 給出的建議就越有價值。 學習如何「問對問題」,本身就是這門課最重要的技能。