The Course課程

Lessons for Building Beautiful Websites with AI Agents用 AI agents 製作漂亮網站的課程

Start by learning the design language website makers use. Then you can give AI agents clearer instructions: who the site is for, what the page should do, what style it should feel like, and what users should click next.

先學會網站設計者常用的語言,再學怎麼對 AI agents 下清楚指令:這個網站是給誰看的、頁面要達成什麼目的、風格要像什麼、使用者下一步該點哪裡。

0

Start Here: Design Language先從這裡開始:設計語言

Before asking an AI agent to “make it beautiful,” learn the words that describe what good websites actually do.在請 AI agent「幫我美化」之前,先學會描述好網站真正做對了什麼。

Lesson 0.1第 0.1 課

Layout & Visual Hierarchy版面與視覺層級

Learn to decide what users should notice first: hero section, above the fold, grid system, whitespace, and CTA.

學會決定使用者第一眼該看到什麼:Hero Section、Above the Fold、Grid System、Whitespace、CTA。

Read full lesson進入完整教學
Lesson 0.2第 0.2 課

UX: Make the Site Easy to UseUX:讓網站真正好用

Use terms like user journey, navigation, information architecture, accessibility, responsive design, and conversion.

學會 User Journey、Navigation、Information Architecture、Accessibility、Responsive Design、Conversion。

Read full lesson進入完整教學
Lesson 0.3第 0.3 課

Visual Style Direction視覺風格方向

Describe the feeling precisely: warm, trustworthy, modern, institutional, editorial, friendly, clean, or premium.

精準描述網站感覺:溫暖、可信賴、現代、機構感、雜誌感、親切、乾淨、高級感。

Read full lesson進入完整教學
Lesson 0.4第 0.4 課

Content Design內容設計

Shape headlines, subheadlines, microcopy, section flow, scannability, and calls to action.

安排 Headline、Subheadline、Microcopy、Section Flow、Scannability,以及行動呼籲。

Read full lesson進入完整教學
Lesson 0.5第 0.5 課

How to Instruct AI Agents如何對 AI agents 下指令

Give the agent a user, goal, style direction, section order, and constraints. Clear instructions create better websites.

告訴 agent:目標使用者、網站目的、風格方向、段落順序、限制條件。指令越清楚,網站越好。

Read full lesson進入完整教學
Prompt Formula指令公式

A better way to ask an AI agent更好的 AI agent 指令寫法

Open detailed guide進入詳細指南
Please create or improve [page / section].

Target users: [who will visit this site]
Website goal: [what you want them to do]
Style direction: [warm / professional / modern / educational]
Section flow: [hero, mission, services, examples, contact]
Please check: [mobile layout, readability, speed, consistency]
請幫我製作或修改 [頁面 / 區塊]。

目標使用者:[誰會看這個網站]
網站目標:[希望他做什麼]
風格方向:[溫暖 / 專業 / 現代 / 教育感]
內容順序:[第一屏、使命、服務、案例、聯絡]
請注意:[手機版、可讀性、速度、整體一致]
A

Web Design網頁設計

Make a real website with AI — and put it online yourself.用 AI 做出真正的網站——並自己把它放上線。

LESSON
01
Beginner入門

Publish Your First Website on GitHub把你的第一個網站發佈到 GitHub

Create a GitHub account, make a repository, upload an AI-made HTML file, and share a live link.

註冊 GitHub 帳號、建立 repo、上傳 AI 做的 HTML、發佈可分享的網址。

LESSON
02
Intermediate進階

Where Does the HTML Come From?HTML 到底是怎麼來的?

How AI makes your HTML, and how to manage a 20-page site — agent (Claude Code) vs non-agent (Gemini).

AI 怎麼生出 HTML、20 頁的網站怎麼管理——代理人(Claude Code)與非代理人(Gemini)。

LESSON
03
Choosing怎麼選

Why I Don't Use Google Sites為什麼我不選用 Google Sites?

Google Sites is easy — but for a real, growing site it boxes you in. An honest comparison.

Google Sites 很簡單——但要做會成長的真網站,它會把你框住。誠實的比較。

LESSON
04
Going further進階應用

Get Your Own Domain擁有你自己的網域

Buy a domain (registrars compared) and point its DNS at your GitHub site — with free HTTPS.

買網域(各家比較)、把 DNS 指向你的 GitHub 網站——還有免費 HTTPS。

LESSON
05
Going further進階應用

Quizzes & Surveys that Save to Google Sheets會存進 Google Sheets 的測驗與問卷

Build a beautiful quiz page with AI; students' class, name, answers and score flow into a Google Sheet — via Apps Script. Faster & prettier than Google Forms.

用 AI 做漂亮的測驗頁,學生的班級、姓名、作答與分數透過 Apps Script 流進 Google Sheet。比 Google Forms 更快更好看。

LESSON
06
Going further進階應用

Git & GitHub, Decoded看懂 Git 與 GitHub 的術語

The plain-English meaning of commit, push, clone, branch and pull request — the words Claude Code, Cursor and Codex keep asking about. Includes an 8-question self-check quiz.

用白話說清楚 commit、push、clone、branch、pull request——Claude Code、Cursor、Codex 一直在問的那些詞。附 8 題自我檢測小考。

B

Teaching Resources教學資源

Make classroom materials with AI — games, books, worksheets and more.用 AI 做課堂素材——遊戲、繪本、學習單等等。

More resources on the way.更多資源陸續增加中。