Design Language for AI Agents給 AI agents 的網站設計語言

Layout & Visual Hierarchy版面與視覺層級

A beautiful website is not just “nice colors.” It is a page where the most important thing is obvious first. Visual hierarchy means the page quietly tells the eye where to look: first the headline, then the explanation, then the button, then the supporting details.漂亮的網站不是只有「顏色好看」。真正好的頁面，是讓最重要的東西第一眼就很明顯。視覺層級的意思是：頁面會安靜地引導眼睛先看標題、再看說明、再看按鈕，最後才看補充內容。

Please redesign the first screen of this teaching website.
Make the visual hierarchy clear:
1. The visitor should first understand who this website is for.
2. The main headline should be short and easy to understand.
3. The primary CTA should be visually stronger than other links.
4. Use enough whitespace so the page feels calm, not crowded.
5. Check the mobile version and make sure the headline and button fit.

請重新設計這個教學網站的第一屏。
請讓視覺層級清楚：
1. 訪客第一眼要知道這個網站是給誰看的。
2. 主標題要短、容易理解。
3. 主要 CTA 要比其他連結更明顯。
4. 使用足夠留白，讓頁面穩定、不擁擠。
5. 請檢查手機版，確認標題和按鈕都放得下。

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

UX means user experience. For teachers, this simply means: can a real person use the page without asking you what to do? A good page helps visitors understand, decide, and act.UX 是 User Experience，使用者體驗。對老師來說，簡單講就是：一個真實的人打開頁面後，能不能不用問你，就知道下一步要做什麼？好的頁面會幫訪客理解、決定、行動。

1. Name the user先說使用者是誰Do not just say “make a website.” Say “for Grade 4 students and their parents.”不要只說「做網站」。要說「給四年級學生和家長看的」。
2. Name the task再說他們要完成什麼Examples: find this week's homework, register for a club, download a worksheet, or contact the teacher.例如：找到本週作業、報名社團、下載學習單、聯絡老師。
3. Remove friction減少阻礙Ask the agent to reduce unnecessary text, confusing links, tiny buttons, and long scrolling before the main action.請 agent 減少不必要文字、混亂連結、太小的按鈕，以及主要行動前過長的捲動。

Visual Style Direction視覺風格方向

“Beautiful” is too vague. AI agents need a direction. The more precisely you describe the feeling, the less random the design becomes.「漂亮」太模糊了。AI agents 需要方向。你越精準描述感覺，設計就越不會隨機亂做。

Make this page feel warm, professional, and trustworthy.
It is for an education nonprofit, so do not make it look like a commercial cram school.
Use friendly colors, real classroom energy, clear headings, and calm spacing.
Avoid childish decoration, oversized marketing sections, and random gradients.

請讓這個頁面感覺溫暖、專業、可信賴。
這是教育公益網站，不要做得像商業補習班。
請使用親切的顏色、真實課堂感、清楚標題、穩定留白。
避免幼稚裝飾、過大的行銷式區塊，以及隨機漸層。

Content Design內容設計

Content design is deciding what to say, what order to say it in, and how much text each section deserves. A page can look expensive and still fail if the words do not guide the visitor.內容設計就是決定要說什麼、用什麼順序說、每個區塊該放多少文字。網站就算看起來很高級，如果文字沒有引導訪客，仍然會失敗。

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

AI agents are not mind readers. They can produce excellent work when you give them context, goals, constraints, and examples. The quality of the website often depends on the quality of the instruction.AI agents 不會讀心。你給它背景、目標、限制、範例，它就能做得很好。網站品質常常取決於指令品質。

Please create or improve [page / section].

Target users: [who will visit this site]
Website goal: [what you want them to understand or do]
Style direction: [warm / professional / modern / educational]
Content order: [hero, mission, services, examples, contact]
Must include: [photos, CTA, bilingual text, downloadable resource]
Avoid: [what you do not want it to look like]
Check carefully: [mobile layout, readability, speed, consistency]

請幫我製作或修改 [頁面 / 區塊]。

目標使用者：[誰會看這個網站]
網站目標：[希望他理解什麼或做什麼]
風格方向：[溫暖 / 專業 / 現代 / 教育感]
內容順序：[第一屏、使命、服務、案例、聯絡]
必須包含：[照片、CTA、雙語文字、可下載資源]
請避免：[你不想要的樣子]
請仔細檢查：[手機版、可讀性、速度、整體一致]

The words you can use with AI agents可以拿來跟 AI agents 溝通的詞

These are not fancy words for designers only. They are practical handles you can use to steer the agent.這些不是設計師炫技的詞，而是你可以拿來控制 agent 方向的實用把手。