陈胤辰中原商设
首页
上学期・AI
课程总览预测世界AI 历史AI 实验室AI 作品集工作室网页工作台自主学习
下学期・编程
课程总览JS 基础教学JavaSciptP5.js (上课用)运算思维与程序设计互动游戏
延伸探索
人体系统玄学系统建筑系统原民织布
简介
讲师介绍开课资讯

语言

繁体中文简体中文English日文Bahasa Indonesia

陈胤辰

中原大学商业设计系
资宸科技

快速链接

  • 讲师介绍
  • 开课资讯
  • 互动游戏
  • JavaScipt

联系 & 社群

© 2026 陈胤辰。版权所有。

Built with Next.js & Tailwind CSS

上學期・AI / 創作實作

AI 作品集工作室

把你的想法,做成一個可以分享的網站。
跟著這裡的步驟,在 Google AI Studio 用中文創作,再發布到自己的 GitHub。

先取得起始提示詞開啟 Google AI Studio

瀏覽器就能開始 · 不必安裝 Git · 作品保留在自己的帳號

從想法到公開網址,六個步驟

yinchen 看任務 → AI Studio 製作 → GitHub 保存與發布 → 回到課堂分享

  1. 01

    準備帳號與素材

    準備自己的 Google 與 GitHub 帳號、簡短自介,以及三件作品的圖片與說明。AI Studio 需符合 18 歲以上及帳號使用資格;學校帳號無法使用時,先詢問老師。

    只放你願意公開的資料與有權使用的圖片。

  2. 02

    貼上提示詞,生成第一版

    複製下方提示詞,開啟 Google AI Studio 的 Build 模式。以自己的 Google 帳號登入,貼上並替換個人資料,等待網站預覽。

    yinchen 提供學習指引,實際編輯與專案儲存在 AI Studio。

  3. 03

    一次修改一件事

    看完預覽,再用中文描述要調整的位置與效果。先完成內容,再調整配色、字體與手機版;修改前後都檢查一次。

    例如:「請把作品區改成電腦三欄、手機一欄,保留其他內容。」

  4. 04

    同步到自己的 GitHub

    在 AI Studio 的 Settings → GitHub 連結自己的帳號,建立或選擇作品 repository,再用同步介面推送修改。首次連結需要授權,不必在教室電腦安裝 Git 或輸入 git push。

    確認 GitHub 上出現最新檔案;預覽更新不代表已同步。介面名稱可能隨版本調整。

  5. 05

    發布到 GitHub Pages

    在 GitHub repository 的 Settings → Pages 設定發布。純 HTML 網站可選 Deploy from a branch;React / Vite 專案需先設定 GitHub Actions 建置與部署流程。

    第一次設定可請老師協助。部署成功後開啟 Pages 網址;後續推送至設定的分支即可觸發更新。

  6. 06

    檢查作品,依課堂方式繳交

    用手機與未登入的視窗打開公開網站,確認圖片、連結與文字正常。依老師指定方式提交網站網址、GitHub 網址,以及一段設計說明。

    說明你改了什麼、為什麼這樣設計,以及如何確認 AI 的結果。

從這段提示詞開始

先做一個簡單、完整的作品集,再慢慢長成自己的樣子。

我的第一個作品集
請幫我製作一個繁體中文的個人作品集網站。
我是[姓名或暱稱],學習[設計領域],希望網站呈現[風格與色彩]。

內容包含:自我介紹、三個作品的圖片與介紹、關於我、聯絡連結。
先用清楚標示的示範內容與圖片佔位區,讓我之後替換,不要編造我的經歷。
版面需適合手機與電腦,文字易讀,圖片有替代文字。

這個網站要發布到 GitHub Pages,請只製作靜態前端。
不要加入後端、資料庫、登入、需要 API key 的功能或 AI 聊天功能。
聯絡方式使用連結,不要製作需要伺服器寄信的表單。
若使用 React / Vite,請支援 GitHub Pages 的 repository 子路徑,避免需要伺服器的路由。
完成後請簡單說明:如何更換內容、預覽,以及透過 GitHub 網頁介面發布到 Pages。

先複製,再把方括號內的內容換成自己的資料。

接著可以這樣問

  • 「只調整首頁配色,改成米白底與深綠色,保留原本內容。」
  • 「手機版的標題超出畫面,請修好並解釋原因。」
  • 「請檢查是否可部署到 GitHub Pages,列出還缺的設定,先不要增加功能。」

完成前,自己看過一次

  • 示範文字已換成自己的介紹與作品
  • 手機版、圖片與聯絡連結都正常
  • GitHub 已同步,公開網址可以開啟
  • 能說明自己的設計選擇與 AI 修改過程

上課時常見的問題

下次換電腦,還找得到作品嗎?

用同一個 Google 帳號開啟 AI Studio,找到原本的專案繼續做。把專案加入書籤,並定期同步 GitHub;電腦還原後需要重新登入,但不必重裝工具。

免費額度用完怎麼辦?

免費使用仍有配額與帳號限制,以 AI Studio 當下顯示為準。先保存已有成果、同步或匯出程式碼,依可用功能手動調整,或等待額度恢復;上課不需要為了繼續操作立即付費。

登入 yinchen 就能直接使用 AI Studio 嗎?

兩邊是不同服務。AI Studio 仍需確認 Google 登入,首次同步 GitHub 也要另外授權。本頁提供流程與提示詞,尚未連結外部帳號、代存專案或接收作業。

AI Studio 官方操作說明 ↗GitHub Pages 發布說明 ↗