上學期・AI / 創作實作
把你的想法,做成一個可以分享的網站。
跟著這裡的步驟,在 Google AI Studio 用中文創作,再發布到自己的 GitHub。
瀏覽器就能開始 · 不必安裝 Git · 作品保留在自己的帳號
yinchen 看任務 → AI Studio 製作 → GitHub 保存與發布 → 回到課堂分享
準備自己的 Google 與 GitHub 帳號、簡短自介,以及三件作品的圖片與說明。AI Studio 需符合 18 歲以上及帳號使用資格;學校帳號無法使用時,先詢問老師。
只放你願意公開的資料與有權使用的圖片。
複製下方提示詞,開啟 Google AI Studio 的 Build 模式。以自己的 Google 帳號登入,貼上並替換個人資料,等待網站預覽。
yinchen 提供學習指引,實際編輯與專案儲存在 AI Studio。
看完預覽,再用中文描述要調整的位置與效果。先完成內容,再調整配色、字體與手機版;修改前後都檢查一次。
例如:「請把作品區改成電腦三欄、手機一欄,保留其他內容。」
在 AI Studio 的 Settings → GitHub 連結自己的帳號,建立或選擇作品 repository,再用同步介面推送修改。首次連結需要授權,不必在教室電腦安裝 Git 或輸入 git push。
確認 GitHub 上出現最新檔案;預覽更新不代表已同步。介面名稱可能隨版本調整。
在 GitHub repository 的 Settings → Pages 設定發布。純 HTML 網站可選 Deploy from a branch;React / Vite 專案需先設定 GitHub Actions 建置與部署流程。
第一次設定可請老師協助。部署成功後開啟 Pages 網址;後續推送至設定的分支即可觸發更新。
用手機與未登入的視窗打開公開網站,確認圖片、連結與文字正常。依老師指定方式提交網站網址、GitHub 網址,以及一段設計說明。
說明你改了什麼、為什麼這樣設計,以及如何確認 AI 的結果。
先做一個簡單、完整的作品集,再慢慢長成自己的樣子。
請幫我製作一個繁體中文的個人作品集網站。 我是[姓名或暱稱],學習[設計領域],希望網站呈現[風格與色彩]。 內容包含:自我介紹、三個作品的圖片與介紹、關於我、聯絡連結。 先用清楚標示的示範內容與圖片佔位區,讓我之後替換,不要編造我的經歷。 版面需適合手機與電腦,文字易讀,圖片有替代文字。 這個網站要發布到 GitHub Pages,請只製作靜態前端。 不要加入後端、資料庫、登入、需要 API key 的功能或 AI 聊天功能。 聯絡方式使用連結,不要製作需要伺服器寄信的表單。 若使用 React / Vite,請支援 GitHub Pages 的 repository 子路徑,避免需要伺服器的路由。 完成後請簡單說明:如何更換內容、預覽,以及透過 GitHub 網頁介面發布到 Pages。
先複製,再把方括號內的內容換成自己的資料。
用同一個 Google 帳號開啟 AI Studio,找到原本的專案繼續做。把專案加入書籤,並定期同步 GitHub;電腦還原後需要重新登入,但不必重裝工具。
免費使用仍有配額與帳號限制,以 AI Studio 當下顯示為準。先保存已有成果、同步或匯出程式碼,依可用功能手動調整,或等待額度恢復;上課不需要為了繼續操作立即付費。
兩邊是不同服務。AI Studio 仍需確認 Google 登入,首次同步 GitHub 也要另外授權。本頁提供流程與提示詞,尚未連結外部帳號、代存專案或接收作業。