以下 5 段指令範本是可以直接複製改寫套到自己情境的版本。把「關東八日旅遊」換成你的主題（例如「實驗室招生介紹」「社團迎新指南」），就能產出對應網頁。
指令 1 · 階段 2 Claude Design
指定整體風格與 5 大區塊版型
第一步先把「網頁長什麼樣、有哪幾大區塊」講清楚。風格與版型先定案，後面填內容才不會亂改。
我要做一個個人化的單頁式旅遊指南網頁，主題是「日本關東八日自助旅行」。
設計風格：
- 日式視覺：紅 + 黑 + 米白為主色，字型用 Noto Serif TC（襯線標題）+ Noto Sans TC（內文）
- 留白多、字級分明，有那種「Less is more」的旅誌感
- 印章視覺、漢字裝飾元素（例如「旅・記」二字大字）
版型結構（5 大區塊）：
1. Hero：標題 + 日期 + 一句話介紹 + 印章視覺
2. 行前準備：必備物品清單、Suica 交通卡說明、台灣旅客特別注意
3. 電車車種筆記：急行/特急/各停 等對照
4. 八日旅程概覽：每日體力消耗圖、交通花費圖
5. 每日詳細交通指引：tab 切換每天的內容
技術要求：
- 純 HTML + Tailwind CSS，不要用框架
- 響應式：桌機、平板、手機都要好看
- 頂部固定 navigation，點按鈕滾到對應區塊
請先給我框架雛形（layout + 風格），內容用「Lorem ipsum」或假資料即可，確認風格後再填真內容。
關鍵心法：不要一次塞所有細節給 AI，先用「假資料」（也就是上面 prompt 提到的 Lorem ipsum，設計師圈用了一輩子的「無意義拉丁文範例文字」，讓視覺先到位）確認版型，版型對了再填真資料。這樣中間發現「不喜歡這個風格」修改成本最低。
指令 2 · 階段 3 Claude Code
用真資料替換雛形假資料
版型確定後，把整理好的真實資料丟給 Claude Code，讓它把假資料換掉。資料越具體越好。
附上的 HTML 是我們上一步做好的雛形（目前是假資料）。請依下面的「真實資料」把假內容替換掉：
【行前準備】
- 必備物品（7 項）：護照、日圓現金、行動電源、舒適好走的鞋、摺疊傘、小毛巾、eSIM
- Suica 交通卡：在羽田機場第 3 航廈取得，建議儲值 5000 日圓
- 台灣旅客特別注意：免簽 90 天、Visit Japan Web、電壓 100V、時差 +1 小時、室內冷氣強、不收小費、電車禁打電話、走路靠左
【電車車種】
- 各停（灰）、急行（藍）、特急（橘，部分需加購）、F-Liner（紅，五社直通）
- 強調「最常踩雷：搭錯車種」「看行先比看路線名更重要」
【八日行程概覽】
- Day 1 抵達 / Day 2 東京大縱走 / Day 3 川越 / Day 4 鎌倉 / Day 5 橫濱 / Day 6 自由日 / Day 7 採購 / Day 8 返程
- Day 2 與 Day 4 步行量最大
請保留你已經建好的版型與互動，只替換內容。內容換完後，把整段 HTML 給我。
關鍵心法：真資料要整理成結構化的條列，不要一段長文丟過去。AI 拿到結構化資料，替換時不會亂組合；拿到長段落，常常會自己「補充」內容（把沒講的也腦補出來）。
指令 3 · 階段 3 Claude Code
加上互動元件：勾選清單、tab、展開細節
靜態網頁讀起來容易膩。加上「可勾選」「可切換」「可展開」的互動，讀者能參與，體驗會差很多。下方 prompt 提到的 checkbox 是 HTML 的核取方塊、details / summary 是 HTML 內建的「點擊展開」標籤，都不需要額外的 JavaScript 函式庫。
請為這份旅遊指南加上下面 4 種互動，讓讀者能「動」起來：
1. 可勾選的清單（行前準備那區）
- 每個項目前加 checkbox，點了就劃線變灰
- 重整網頁後狀態不必保留（讀者出發前一次性使用）
2. 每日 tab 切換（每日導航那區）
- Day 1 ~ Day 8 八個 tab 橫排
- 點 tab 切換下方內容，只顯示當天
- 手機上 tab 改成可橫向滑動
3. 可展開的細節（每日導航內，進階細節）
- 用 details / summary 標籤
- 預設收合，點「+」展開，點「-」收合
- 適合「實用日語」「天氣對策」這類非必看的補充
4. 名詞解釋小提示
- 對於「F-Liner」「直通運轉」「Suica」這類專有名詞，滑鼠懸停顯示說明
- 用紅色虛線下底線標記可懸停的字
請用純 JavaScript 實作，不要引入 jQuery 或其他框架。
關鍵心法：把互動分成4 種「明確的功能」，而不是說「請加點互動效果」。具體越好，AI 才知道要做什麼；模糊的要求只會得到模糊的成果。
指令 4 · 階段 4 Chart.js 整合
加兩張圖表：每日體力消耗 + 每日交通花費
文字描述「Day 2 會很累」沒感覺，用圖表讀者一眼看到「Day 2 是峰值」就懂了。Chart.js 是免費好用的圖表函式庫，下方 prompt 提到的 tooltip 是「滑鼠停在圖上會出現的小提示框」、CDN（Content Delivery Network，內容傳遞網路，可以想成「線上隨叫隨用的程式倉庫」）讓你不必安裝 npm 套件直接用 Chart.js。
請在「八日旅程概覽」區塊加兩張 Chart.js 圖表：
圖 1：每日體力消耗預測（折線圖）
- X 軸：Day 1 ~ Day 8
- Y 軸：疲累指數（1-10，主觀感受）
- 數據：Day 1 = 3（抵達日，有時差）；Day 2 = 9（東京大縱走）；Day 3 = 6（川越）；Day 4 = 9（鎌倉海邊大走）；Day 5 = 7（橫濱）；Day 6 = 4（自由日）；Day 7 = 5（採購）；Day 8 = 3（返程）
- 用紅色線條，Day 2 與 Day 4 的點要視覺強調
圖 2：每日交通花費（長條圖）
- X 軸：Day 1 ~ Day 8
- Y 軸：日圓
- 數據：Day 1 = 1200（機場到飯店）；Day 2 = 800（東京市內）；Day 3 = 2400（川越往返）；Day 4 = 2200（鎌倉往返）；Day 5 = 1800（橫濱往返）；Day 6 = 600（市內）；Day 7 = 600（市內）；Day 8 = 1200（回機場）
- 滑鼠停在長條上，顯示當日車票明細 tooltip
兩張圖都要響應式（手機上也好看），用 Chart.js 透過 CDN 引入，不要安裝 npm 套件。
關鍵心法：圖表的「數據要先想好」再丟給 AI。如果只說「請畫個體力圖」，AI 會亂填數據；把每天的數字明確列出來，圖表才會準確反映你的真實情況。
指令 5 · 階段 4 部署 + 列印
部署到 GitHub Pages + 加列印樣式
做完要分享。部署到 GitHub Pages 免費、有公開網址。順便加上列印樣式（CSS 的 @media print 是「當使用者按列印時才套用」的特殊樣式塊，可以單獨設計紙本版的外觀），讓家人能列印帶在身上。下方 prompt 提到的 GitHub repo（程式碼倉庫，可以想成「這個專案的線上資料夾」）、main 分支（程式碼的主線版本）、README.md（專案首頁說明文件）都是 GitHub 的標準結構。
請幫我把這份旅遊指南做完最後兩件事：
1. 加上列印樣式（@media print）
- 列印時隱藏 navigation、所有按鈕、互動提示
- 字體稍微縮小，讓 A4 紙能容納更多內容
- 圖表保留，因為列印出來給長輩看路線很有用
- 背景色去掉（省墨水）
2. 部署到 GitHub Pages
- 建一個 GitHub repo 叫 kanto-travel-guide
- 把這個 HTML 命名為 index.html，push 到 main 分支
- 開啟 GitHub Pages，給我公開網址
- 寫一份 README.md 簡介這個專案
完成後告訴我：
- 公開網址是什麼
- 怎麼把網址做成 QR Code（我想印在小卡上給家人）
- 如果未來要改內容，要怎麼更新
關鍵心法：個人展示型網頁一定要設計列印樣式（前面 pc-intro 提到的 @media print 區塊）。長輩、不擅長手機的家人會想「印一份帶在身上」，沒有列印樣式列印出來會很醜（背景塞滿、按鈕跑出來、字級不對）。