AI 網頁設計實戰班：Vibe Coding 從視覺設計、程式修改到網站上線（企業專班）

你可能已用 ChatGPT 或 Claude 做過第一版網頁。真正花時間的，往往是接下來的每一次修改：想換視覺但版面失衡、想增加功能卻破壞原本區塊、桌機正常但手機橫向捲動，以及檔案明明完成卻不知道如何讓別人打開。

本課程將網頁設計視為一套可持續改良的工作流程：先把對象、目的、內容與驗收條件寫成可執行需求，再運用 AI 協助建立 HTML、CSS 與 Bootstrap 5 網站，透過 VS Code／AI 協作進行局部修改與問題追蹤，最後運用 GitHub 管理版本並以 GitHub Pages 部署靜態網站。每個單元接續同一個網站專題，避免工具展示互不相干。

實作不依賴程式背景，但會要求學員真正打開原始碼、使用瀏覽器開發者工具辨識版面問題，並在修改後檢查不同尺寸。為使 6 小時可完成，範圍限於一頁式品牌、產品服務、活動或作品集網站；不包含帳號登入、資料庫、訂單金流或可收件的後端表單。

完成後應具備一個可以公開分享的靜態單頁網站、一份需求規格、一份修改紀錄，以及手機與桌機的驗收清單。若個人帳號權限、設備或網路導致無法當場完成部署，仍須保留可部署版本與待排除事項，不會以未經驗證的網址宣稱已上線。

AI 網頁設計實戰班：Vibe Coding 從視覺設計、程式修改到網站上線（企業專班）

第一章｜AI 網站需求拆解與版型規劃

• 釐清網站目標、受眾與主要行動
• 用 AI 建立網站內容架構與區塊規格
• 轉換視覺參考為原創 UI／UX 指令
• 生成可預覽的單頁網站初版

第二章｜AI 視覺設計與網頁內容實作

• 生成品牌文案、色彩與版式規則
• 調整 HTML、CSS 與 Bootstrap 5 版型
• 製作導覽、互動元件與行動按鈕
• 整理圖片、檔案結構與元件樣式

第三章｜AI 協作修改、除錯與響應式設計

• 在 VS Code 辨識檔案與變更範圍
• 以 AI 重現、定位並修正跑版問題
• 完成手機、平板與桌機 RWD 調整
• 執行跨裝置回歸測試與版本回復

第四章｜GitHub Pages 部署、SEO 與成果驗收

• 建立 GitHub Repository 與 Commit 版本
• 設定 GitHub Pages 並驗證公開網址
• 完成 Title、Meta、語意標籤與替代文字
• 以真實網址完成連結、裝置及成果驗收

授課師資

由天地人培訓專員依企業需求與課程內容協調安排，實際講師名單於方案確認時提供。

本課程採企業專班詢價，標準課綱為 6 小時。培訓日期、上課時段、授課形式、地點、參訓人數與費用由專人依需求確認，並以雙方確認的方案為準。

適合對象

個人品牌經營者、行銷企劃、活動專案負責人、接案者與創作者、希望管理 AI 建站流程的企業人員。

課前準備

• 可用 ChatGPT Plus 或 Claude Pro 其中一種帳號
• GitHub 帳號
• VS Code
• 自帶筆電和網路
• 自備主題或採用示範範本

第三方訂閱費不包含於課程中；實際工具權限、額度與企業資料使用範圍須課前確認。

作品與驗收

網站需求規格、HTML／CSS 原始碼、修改紀錄、跨裝置檢查及部署紀錄。以實際測試結果確認完成度；受帳號權限、設備或網路限制時，保留可部署版本與待排除事項。

範圍與限制

僅涵蓋靜態單頁網站，不包含會員登入、後端資料庫、金流購物車或可收件的後端表單。不保證搜尋排名、收錄或所有人當場完成部署。

練習與公開部署請使用已獲授權素材，不上傳企業機密、個資或金鑰。

天地人文創