BUILD A REAL WEBPAGE

八段 Prompt，
完成一張會動的地圖

每次只交付一個小目標：先資料、再地圖、最後才是互動。點開步驟，複製後交給你的 AI。

建議節奏 每段 8–12 分鐘，完成就打勾。

01資料契約先把旅程說清楚

先建立可被程式讀懂的三日資料，暫時不要畫畫面。

建立單頁網站的 DAYS 資料。每一天包含 title、color、distanceKm、durationMin、stops；每個 stop 包含 time、name、zh、lat、lng、stay。先用 console.log 驗證共 3 天、14 站、311 km。

02HTML 骨架留下清楚的容器

建立地圖、日期列、資訊面板與詳情區的語意結構。

使用 HTML5 建立 #map、日期 tablist、aside 行程面板、景點詳情與狀態提示。按鈕必須有 type、aria-label；此階段只做骨架，不加入完整 CSS 或 JavaScript。

03視覺系統做出田野手冊感

先定義色彩與字體，再處理元件。

用 CSS variables 建立深墨色、紙張白、三日路線色和強調色。標題用襯線字、數字用等寬字、內文用繁體中文字體。桌面左側面板寬 388px，避免漸層與過度圓角。

04地圖放上標記與路線

讓資料第一次變成畫面。

使用 Leaflet 與 OpenStreetMap。依 DAYS 建立 14 個圓形編號標記，顯示 1.1 到 3.4；每天用自己的顏色畫折線，底下再疊一條較粗的白線。初始視野需包含所有景點。

05狀態同步一次切換四個地方

日期按鈕要同時改變地圖、列表、統計與樣式。

實作 setDay(dayNumber)。同步更新 activeDay、可見路線、標記、距離、時間、站數、按鈕 aria-selected 與行程列表。全覽顯示三天；任何數字都必須從 DAYS 計算。

06景點詳情把點擊變成故事

地圖標記與列表都能開啟相同詳情。

點景點後記錄 selected stop、flyTo 該座標並顯示英文名、中文名、時間、停留長度和提醒。提供返回、上一站、下一站；第一站與最後一站要正確停用按鈕。

07響應式手機不是縮小桌面

把左側面板改成手機底部抽屜。

在 860px 以下將面板改成底部 sheet，收合約 45dvh、展開約 76dvh；日期列移到地圖上方。測試 390×844，不得水平捲動，所有可點區至少 44px。

08驗收讓 AI 證明它完成了

最後一個 Prompt 只找錯，不再增加功能。

逐項測試：14 標記、四種日期切換、統計、景點詳情、鍵盤操作、390px 手機版、Console error、HTTPS 資源、禁止 eval 與 new Function。輸出 PASS/FAIL 表格，只修實際找到的問題。

黃石野遊，等你來完成

跟著左側 Prompt，讓路線、標記與互動一步步出現在畫面上。

LIVE OUTPUT

縮小版互動成果

311 km14 站6h 11m

地熱湖泊野生動物