實作課程 · A Site for Your Cat Boss

替貓老闆做官網

用同一個案例——一間老闆是貓的選物品牌「貓掌櫃」——從空白頁做到上線:結構、風格、文案、排版、表單、手機版,最後拿自己的網站做一次總驗收。每一章都有貓老闆的需求、可複製的 AI 提示詞,和一份自己就能跑的驗收清單。

10 章·一個案例帶到底·每章都有驗收清單·進度存在你的瀏覽器

案例品牌

貓掌櫃

一間老闆是貓的貓生活選物品牌
  • 創辦人路邊撿回來的虎斑貓「掌櫃」,如今是老闆兼首席品質官,人類同事只負責執行牠的決定。
  • 商品四條線:吃(主食罐、凍乾零食)、玩(貓玩具、每月玩具盒)、住(貓抓板、貓爬架、睡窩)、人用貓周邊(陶器、文具、襪子)。
  • 招牌商品是「掌櫃監製」手工陶燒貓碗——限量、常缺貨,所以官網需要一個補貨候補表單。
  • 門市在台北與台中各一間。這門課裡的每一份需求,都用貓老闆的名義開出。
動工前先拆區塊動工之前先把官網拆成區塊:頁頭、導覽、首屏、商品、定價、常見問題、頁尾。分清楚誰負責什麼,之後跟 AI 溝通就能一區一區改,不用整頁重寫。未開始先把視覺規格抽成變數把主色、間距、圓角這些數值先抽成變數,全站引用同一組。視覺秩序靠的不是品味,是「改一個地方、全站跟著變」的設計變數(design token)。未開始首屏一句話、一顆按鈕首屏只需要完成一件事:讓訪客知道這是什麼店、下一步去哪。主標一句話,副標補一個事實,按鈕講清楚按了會怎樣——這一章也是全課空話最密集的地方。未開始商品主次與版面輕重商品有主次,版面就要有主次。招牌陶碗值得一大塊版面,其餘收成一行一條的清單——這一章練卡片、清單與格線的正確混用。未開始見證、價錢、常見問題看完商品,訪客會問三件事:別人怎麼說、多少錢、有什麼限制。見證要真、定價要透明、FAQ 只收真的被問過的題目。未開始貼邊、截斷、誰蓋住誰文字貼邊、圖被截斷、彈窗被蓋住——這些問題 AI 常常「看起來做好了」。這一章學會用盒模型、溢出與層疊的語言,把問題描述到 AI 一次修對。未開始按鈕狀態與表單回饋每顆按鈕都要回答「按了會怎樣」。hover、focus、active 三種狀態補齊,候補表單加上驗證與送出回饋——缺任何一個,網站就開始假。未開始手機版要重排,不是縮小手機版不是縮小的電腦版:多欄折成單欄、導覽收進抽屜、字級和點擊目標按拇指重新計算。這一章把手機悲劇清單一項一項劃掉。未開始上線走查與改版紀律上線前把手機、電腦、慢網路各走一遍;上線後讓 AI 改東西,一次只開一張工單。走查清單與約束條件,是防止網站越改越壞的兩道鎖。未開始畢業考:讓貓老闆點頭把前面九章的驗收清單合成一份總考卷:對著自己的網站一項一項批,修滿十處、留下前後對照,貓老闆在結業證書上蓋掌印。未開始