動工前先拆區塊

貓老闆的簡報

我要一個官網。貓奴進來三十秒內要知道我們賣什麼、去哪買。先不要跟我聊顏色——先告訴我這一頁要有哪些區塊，各管什麼事。

——貓掌櫃的老闆「掌櫃」下需求時的原話

這章做什麼

動手做

1. 列出訪客進站要回答的三個問題：這是什麼店、賣什麼、怎麼買。
2. 照問題排區塊順序：頁頭導覽 → 首屏 → 商品四條線 → 每月玩具盒 → 品牌故事 → 常見問題 → 頁尾。
3. 幫每個區塊寫一句「職責」。要寫超過一句，就代表該拆成兩個區塊。
4. 把清單交給 AI 生成骨架：先只排順序，不配色、不寫文案。

這樣對 AI 說

我要做貓用選物品牌「貓掌櫃」的官網，單頁式。請先用 HTML 生成頁面骨架：只要區塊與中文註解，不要配色、不要文案。區塊依序：頁頭導覽、首屏、商品四條線（吃、玩、住、人用周邊）、每月貓玩具盒訂閱、品牌故事、常見問題、頁尾（含台北與台中門市資訊）。每個區塊加一行註解說明它的職責。先不要寫 CSS。

驗收清單

骨架排完，先不看顏色，只看每個區塊有沒有做事。

• 首屏能不能在一句話內講完「這是什麼店、賣什麼、怎麼買」？
• 導覽連結在五個以內，手機收進抽屜後還找得到？
• 每個區塊都能指出它回答了訪客哪個問題；指不出來的就刪掉。
• 頁尾找得到台北、台中兩間門市與聯絡方式？

這章的相關詞條

詞條頁都有可以動的示範——卡住的時候，去把名詞弄清楚，回來繼續做。