讓搜尋理解頁面
頁面主題、標題描述、連結、圖片與索引檢查。
從零開始，用 AI 完成自己的
商用網站。
84 小時，完成個人作品集與服務詢問、案件管理網站。
學會提出需求、修改功能，並檢查 AI 做出的結果。
84小時28 堂課 · 每堂 3 小時
70% 實作搭配 30% 基礎觀念
2項作品作品集 · 詢問與案件管理
HTML · CSS · JavaScript · Cursor 免費版 · ChatGPT 免費版
兩項作品，
把專業與服務接起來。
從讓人認識你，到有條理地處理每一個需求。
有風格，也有內容。
用大幅作品與清楚的介紹，讓訪客理解你的專業。分類、搜尋、作品介紹與手機排版，從細節練出完整體驗。
- 品牌首頁與作品介紹
- 即時搜尋與作品分類
- 桌面與手機響應式排版
「青禾設計工作室」為虛構教學情境，範例圖像與案件不代表客戶或學員實績。課堂由講師提供後端起始專案。
需求說得更清楚，
修改就更有方向。
切換指令，看看同一個需求如何變得可以驗收。
交給 AI 的任務
幫我把作品集改得好看一點，加一些互動。
缺少修改範圍、功能規則與完成標準，結果很難核對。
預先製作的結果對照 · 非即時 AI
看起來有變化，但還不知道如何判斷是否符合需求。
每堂 3 小時觀念與實作穿插進行
30%70%
54 分鐘理解必要觀念 ／ 126 分鐘修改、測試與修正
一個品牌，
從被看見到處理需求。
跟著林小禾的一筆網站需求，看懂作品集如何接到案件管理。
同一筆需求林小禾的作品集網站整理設計作品，加入服務介紹。
對應單元 1–7操作這個範例 ↗
從第一個頁面，
走到完整的網站。
84 小時 · 28 堂課 · 每個單元 6 小時
30小時
讓想法，第一次上線。
從檔案與 HTML 開始，逐步加入品牌視覺、手機排版與 JavaScript 互動。
每堂 3 小時
54 分鐘觀念 · 126 分鐘實作
同一份內容，
做出不同的感受。
從資訊排列到視覺層級，理解 HTML 與 CSS，才能把「再好看一點」變成精準的修改需求。
基礎排版品牌作品集
同樣的標題、作品與服務內容。
學會決定層級、留白、色彩與閱讀順序。
青禾設計工作室 / 作品 關於 開始合作
把想法，變成看得見的作品。
青禾設計工作室 · 品牌、網站與日常探索
LÚMINA 品牌視覺 ／ 青禾作品集 ／ 日常光影
基礎排版品牌作品集
網站做出來，
也要讓內容說得明白。
SEO 6 小時＋AI 協作的服務內容設計與查核 6 小時。從完整服務頁、案例頁到逐句核對。
搜尋結果外觀示意青禾設計工作室 / 服務
首頁
歡迎來到我們的網站，提供最好的服務。
頁面主題模糊，訪客還不知道服務內容與適用對象。
清楚回答客戶問題
完成服務頁的適用對象、服務範圍、合作流程與 FAQ。
建立有依據的內容
以案例來源與逐句查核檢查事實；不把摘要正確視為已被 AI 引用。
以頁面改善、內容正確與設定檢查驗收；不保證搜尋排名或 AI 引用。
從免費工具開始，
把能力留在自己身上。
使用免費工具，搭配 HTML、CSS、JavaScript 基礎，學會提出需求、修改網站與檢查結果。
試試除錯挑戰 ↗- Cursor 免費版
- 編輯網站檔案、查看修改結果。
- ChatGPT 免費版
- 整理需求、撰寫 Prompt、理解程式。
起始版、完成版、三種 Prompt 與驗收清單，讓每一步都有依據。
使用階段程式與既有 AI 回覆練習閱讀、修改與測試，不以購買訂閱為必修條件。
練習獨立說明需求、核對差異、回復版本，再驗證沒有破壞既有功能。
開始之前，你可能想知道
完全沒寫過程式，也能開始嗎？
可以。課程從檔案、瀏覽器與 HTML 開始，每單元以完整範例說明觀念，再透過 Prompt 與實作練習逐步完成作品。
需要付費訂閱 AI 工具嗎？
使用 Cursor 免費版與 ChatGPT 免費版，不以購買 AI 訂閱作為必修條件。免費額度有限，講師提供分段任務與階段檔，額度受限時仍可練習修改與驗收。自訂網域與長期主機費用另行說明。
需要自己寫整套後端嗎？
講師提供後端起始專案。學員著重理解資料如何往返、串接 API，以及驗證登入與案件管理流程。
完成課程後會帶走什麼？
兩項網站作品、原始碼、需求與 Prompt 紀錄、部署及使用說明、驗收與已知限制。每單元完整範例逐步累積，最後再完成一項未示範的小需求。