看得到畫面,也能自己動手操作。

9 個網站與 8 套管理系統,全部是 hao-code 自主製作的概念作品,不是客戶委託。 網站可以整站瀏覽,系統可以直接建立資料、修改狀態,操作會保留在你的瀏覽器。

先找到接近你需求的那一件。

依你想解決的問題分組,點名稱直接跳到作品。

活動與招生頁
好客Enroll原白 YUANBAI巷口學堂FORMA

不同產業,需要的網站也不一樣。

美妝品牌要能說故事也要能下單,餐廳一頁就要走到訂位,診所得先讓人安心,建案要讓人看懂格局。 每一件都可以整站點開來看,桌機與手機的版面都在。

MIZU SKIN 肌沐官網首頁的桌面畫面:霧藍色品牌主視覺與導覽列
MIZU SKIN 肌沐官網首頁的手機畫面

美妝品牌形象官網

MIZU SKIN 肌沐

概念作品

多頁的品牌官網,把品牌故事、護理服務、保養商品與生活日誌串成一條動線;訪客可以加入購物袋、走完示範結帳(模擬付款)並用訂單編號查詢狀態,也能預約。另有只保存在同一瀏覽器的內容管理示範。

  • 多頁品牌官網
  • 示範結帳與訂單查詢
  • 線上預約
查看 MIZU SKIN 肌沐
看適合情境與可操作內容

適合這類需求

  • 品牌有故事也有商品,需要同時說明與販售的網站
  • 服務與商品都希望能在線上預約或下單

你可以操作

  • 查看商品詳情、調整購物袋,完成示範結帳(不扣款)並查詢訂單狀態
  • 填寫護膚預約表單,或閱讀品牌日誌
  • 在示範後台編輯草稿、發布、還原版本;不會同步到其他裝置
問題 → 設計決策 → 驗證結果

問題

品牌網站要同時說故事、賣商品與收預約,動線在手機上很容易斷掉;內容又得自己更新,但草稿一旦外洩或不同分頁互相覆蓋,前台就會出現錯誤的價格與文案。

設計決策

  • 購物袋與訂單預覽只存在瀏覽器裡,畫面明確標示不送出訂單、不收款;三步驟一次加入整個日常保養時明細逐項列出,合計就是商品售價相加,不捏造組合折扣。
  • 示範後台把草稿與已發布內容分開:儲存草稿不會讓訪客看到,只有發布才更新前台;還原舊版是把它發布成新的版本,歷史不被覆寫。
  • 發布前先驗證內容:名稱不能重複、價格要是合理整數、不得出現不可查證的療效字眼;不合格就保留輸入,並把焦點移到出錯欄位。
  • 跨分頁衝突時不直接覆蓋:另一個分頁更新後保留我的輸入,改以最新資料為基礎合併,且只帶我真正改過的欄位。

驗證結果

  • 測試涵蓋:草稿不會出現在前台、發布後前台才更新、還原舊版會發布為新版本並保留尚未發布的草稿;15 個品牌頁在 390/768/1440px 都能各自開啟且不溢出。
  • 購物袋數量有上下限、減到零會移除商品、分類篩選與商品詳情連結仍然可用;三步驟加入的合計為 780 + 1,280 + 1,480 = NT$3,540,沒有組合折扣。
  • 發布規則會擋下重複名稱、非整數或過低價格與不可查證的療效字眼,並把焦點移到出錯欄位;另一個分頁發布時,編輯器保留未儲存輸入並以最新資料為基礎合併。
  • 瀏覽器拒絕儲存時仍可預覽但不能儲存或發布;資料損毀時原檔完整保留,只有確認重設才替換,且不動其他示範工作區。
爐灣 LUWAN 官網首頁的桌面畫面:爐火主視覺與訂位入口
爐灣 LUWAN 官網首頁的手機畫面

餐飲品牌一頁式官網

爐灣 LUWAN

概念作品

柴火餐廳的單頁官網。主廚敘事、招牌料理與季節菜單收在同一頁,訪客一路往下看就能走到訂位。

  • 一頁式官網
  • 菜單呈現
  • 線上訂位
查看 爐灣 LUWAN
看適合情境與可操作內容

適合這類需求

  • 餐廳只需要一頁,但要有品牌感,也要能訂位
  • 菜單會隨季節更換,需要好維護的內容區塊

你可以操作

  • 切換四道招牌料理,比較春夏與秋冬菜單
  • 填寫訂位表單並確認訂位資訊
問題 → 設計決策 → 驗證結果

問題

一頁要同時做到品牌感、菜單瀏覽與訂位。氣氛開場最容易變成兩件壞事:手機上讀不到重點,以及對動態敏感的人被迫看完才進得了內容。

設計決策

  • 開場是一段釘住的爐火:捲動時明火淡出、餘燼浮現,標題逐字亮起。重點在動畫結束前就已經可讀,不必等完。
  • 偏好減少動態時整段換成一屏靜態照片,而不是把動畫關掉、留下一段空捲動。
  • 四道招牌料理共用同一塊大圖區,用可鍵盤操作的 tablist 切換,一頁不必塞四張大圖。
  • 訂位送出後進入可修改的確認畫面,改一個欄位不用整張表重填。

驗證結果

  • 測試涵蓋:點擊與方向鍵都能切換招牌料理並同步換圖、季節菜單整份替換、訂位驗證後返回修改時欄位保留。
  • 行動版選單以 Escape 關閉並把焦點交還觸發按鈕;reduced-motion 走靜態分支,由 e2e 測試把關。
  • 上線前的實機檢查抓到「爐」字圓印在多數手機上疊到眉標,已修正。
拾光官網首頁的桌面畫面:暖色調品牌主視覺與系列入口
拾光官網首頁的手機畫面

香氛品牌一頁式官網

拾光

概念作品

以二十四節氣為主軸的香氛品牌單頁官網。暖煙色調與明體標題,把氣味的敘事、系列品項與四篇節氣手記放在同一頁。

  • 一頁式官網
  • 品牌敘事
  • 系列介紹
查看 拾光
看適合情境與可操作內容

適合這類需求

  • 產品要靠敘事與氛圍說明價值,規格表講不清楚
  • 品項不多,但希望網站有明確而一致的品牌調性

你可以操作

  • 點開季節限定與居家擴香,查看香調與系列品項
  • 閱讀立春、大暑、白露、大雪四篇節氣手記
榕安牙醫官網首頁的桌面畫面:暖砂色主視覺與線上預約入口
榕安牙醫官網首頁的手機畫面

家庭牙醫診所一頁式官網

榕安牙醫

概念作品

家庭牙醫診所的單頁官網。用收費說明、醫師介紹與四步驟線上預約,處理病患按下預約之前想先確認的事。

  • 一頁式官網
  • 收費與醫師說明
  • 線上預約
查看 榕安牙醫
看適合情境與可操作內容

適合這類需求

  • 診所網站要先讓人安心,病患才願意按下預約
  • 想把電話預約改成線上填表,並避免時段重複

你可以操作

  • 切換六個診療項目,查看療程與收費說明
  • 走完四步驟預約流程,含時段檢查與欄位提醒
原白 YUANBAI 官網首頁的桌面畫面:建築外觀主視覺與預約賞屋入口
原白 YUANBAI 官網首頁的手機畫面

預售屋建案一頁式官網

原白 YUANBAI

概念作品

建案的單頁官網。生活圈、公共空間與三種戶型圖面收在同一頁,訪客可以自己比較格局,再留下賞屋資料。

  • 一頁式官網
  • 戶型圖面切換
  • 賞屋預約
查看 原白 YUANBAI
看適合情境與可操作內容

適合這類需求

  • 建案資料與圖面都多,需要讓人不迷路的排版
  • 希望訪客先看懂格局,再留下聯絡資料

你可以操作

  • 切換 A/B/C 三種戶型,平面圖與規格表一起更換
  • 展開常見問題,完成賞屋預約表單
巷口學堂招生頁的桌面畫面:開場標語、傍晚巷弄裡亮燈的二樓教室,以及各梯次剩餘名額
巷口學堂招生頁的手機畫面:開場標語與巷弄教室照片

才藝與成人課程招生頁

巷口學堂

概念作品

社區教室的單頁招生頁。課表上每個梯次的剩餘名額與候補人數即時顯示;報名會同步到 Enroll 招生後台,後台遞補或取消後,前台看得到自己的順位跟著變。

  • 一頁式招生頁
  • 即時剩餘名額
  • 與後台同一份資料
查看 巷口學堂
看適合情境與可操作內容

適合這類需求

  • 招生頁與報名名單分開維護,名額常常對不上
  • 希望學員自己看得到剩餘名額與候補順位,不必一再詢問

你可以操作

  • 在課表選梯次報名,額滿時排入候補並看到自己的順位
  • 到 Enroll 後台遞補或取消,回到前台看「我的報名」跟著更新
AXIOM Industrial 官網首頁的桌面畫面:深色廠房主視覺與產品導覽

B2B 製造業企業網站

AXIOM Industrial

概念作品

產品線複雜的製造業企業網站。從產品規格、應用產業到案例與技術文章,讓採購、工程與經營者各自找到需要的資料;可依條件選型比較並整理一份不送出的詢價摘要。

  • 多層級產品資訊
  • 案例與技術內容
  • 詢價動線
查看 AXIOM Industrial
看適合情境與可操作內容

適合這類需求

  • 產品型號多,客戶要能比較規格才會發出詢價
  • 同一個網站要同時服務採購、工程與決策者

你可以操作

  • 瀏覽產品規格與應用情境
  • 依條件篩選,最多並排比較 3 個型號並整理詢價摘要
  • 查看產業應用、實績案例與詢價方式
NOVA AI 官網首頁的桌面畫面:深紫色主視覺與產品介面示意

軟體產品官網

NOVA AI

概念作品

軟體產品的官網概念。用可以實際點的介面示範,讓訪客在網站上就看懂這套工具每天怎麼被使用。

  • 產品介面示範
  • 情境切換
  • 操作前後對照
查看 NOVA AI
看適合情境與可操作內容

適合這類需求

  • 要向客戶或投資人示範軟體實際怎麼操作
  • 產品價值用文字說不清楚,需要讓人動手試

你可以操作

  • 把 12 項任務整理成 3 個優先事項
  • 更新專案摘要、執行流程並撤回結果
FORMA 招生頁的桌面畫面:深色訓練空間主視覺與體驗課入口

健身工作室 Landing Page

FORMA

概念作品

重訓工作室的單頁招生頁。課程說明、會員方案到體驗課預約排成一條動線,訪客不用換頁就能做決定。

  • Landing Page
  • 方案比較
  • 體驗課預約
查看 FORMA
看適合情境與可操作內容

適合這類需求

  • 只需要一頁,目標是讓人報名或留下聯絡方式
  • 課程與方案要能被並排比較,才好做決定

你可以操作

  • 展開三門課程,比較訓練目標與適合對象
  • 比較三種方案,從任一方案進入體驗課預約

八套管理系統,可以直接操作。

訂單庫存、網站成效、預約排程、專案驗收、對話服務、會員入口、AI 文件整理與招生名額管理。這類系統通常給團隊每天使用,所以介面的重點是找得到、改得動、看得懂目前狀態。 你的操作會保留在目前這台瀏覽器,下次打開可以接著處理。

StockRoom 訂單管理畫面:本月營收與訂單統計、訂單列表與處理狀態
StockRoom 訂單管理的手機畫面:統計卡片與訂單搜尋

訂單與庫存管理系統

StockRoom

概念作品

集中處理訂單、出貨與商品庫存的內部工作區。一筆訂單從建立到出貨完成,庫存數量會跟著一起變動,不必再另外對帳。

進入操作 StockRoom
看適合情境與可操作內容

適合這類需求

  • 目前用試算表或通訊軟體追訂單,容易漏單或重複出貨
  • 品項變多之後,缺貨往往要靠人工比對才發現

你可以操作

  • 建立訂單、確認內容並完成出貨
  • 查看低庫存商品,直接安排補貨
問題 → 設計決策 → 驗證結果

問題

用試算表追訂單時,出貨紀錄與庫存是兩份各自維護的數字。同一筆訂單重複出貨、或出貨後忘了扣庫存,通常要等到缺貨才被發現,而那時已經來不及。

設計決策

  • 庫存只跟著訂單狀態變動,介面上不提供手動改數量的入口,兩份數字就沒有各自漂移的空間。
  • 出貨、取消與復原都做成可回溯的狀態轉換,而不是按下去就回不來的動作——真實作業本來就會改單。
  • 營收統計與低庫存提示放在工作區第一屏,「今天要處理什麼」不必切頁面去找。

驗證結果

  • 自動化測試涵蓋:出貨只扣一次庫存、訂單取消與復原後數量回到正確值、已取消與未出貨的訂單不計入庫存帳。
  • 離開再進入工作區,出貨與庫存狀態接續先前的進度;儲存內容損毀時保留原始資料,只有明確確認才重設。
  • CSV 匯出會轉義內容並中和試算表公式,匯出的檔案不會在別人的 Excel 裡執行東西。
SitePulse 成效總覽畫面:造訪次數、轉換率統計、流量長條圖與待處理事項
SitePulse 成效總覽的手機畫面:統計卡片與流量趨勢

網站成效與詢問管理

SitePulse

概念作品

把網站流量與收到的合作詢問放進同一個後台。看得到這段期間的成效,也追得到每一筆詢問處理到哪一步;另有可回查原文、人工覆核的 AI 詢問整理示範。

進入操作 SitePulse
看適合情境與可操作內容

適合這類需求

  • 網站有流量,但說不出哪些內容真的帶來詢問
  • 詢問散在信箱與各種訊息裡,沒有統一的追蹤方式

你可以操作

  • 切換 7 天與 14 天的流量區間,匯出報表
  • 搜尋詢問名單、更新每一筆的處理進度
  • 在 AI 工作台以離線規則體驗原文回查與人工覆核;設定模型服務後才可執行模型整理
DayBook 預約行程畫面:當日預約統計、顧問排程表與預約明細
DayBook 預約行程的手機畫面:當日統計與預約篩選

預約排程與顧客管理

DayBook

概念作品

服務型工作室的預約管理工作區。從排程表安排時段,在預約明細裡處理報到、改期與完成服務,顧客紀錄一起累積。

進入操作 DayBook
看適合情境與可操作內容

適合這類需求

  • 預約靠電話與訊息安排,時段偶爾會撞在一起
  • 希望每位顧客的來訪與服務紀錄能留下來

你可以操作

  • 新增、改期或取消預約
  • 依日期與服務人員篩選,完成顧客報到
Relay 審閱畫面:商品頁版型 v1 的交付內容與手機示意,右側是客戶窗口的驗收條件勾選與決策紀錄
Relay 客戶窗口的手機待辦畫面:一件已逾期、等待審閱的版本

專案交付與客戶驗收

Relay

概念作品

工作交出去之後,客戶針對正確的版本逐項驗收或退回,追加的工作經過核准才加入範圍。每個版本、意見與決定都留在紀錄裡,結案前看得出還差什麼;本機流程是示範,多人協作需另設專用後端。

進入操作 Relay看 Relay 作品介紹
看適合情境與可操作內容

適合這類需求

  • 設計或網站專案靠 Email 來回確認,常搞不清楚客戶看的是哪一版
  • 驗收後又追加工作,範圍與時程的變化沒有留下紀錄

你可以操作

  • 切換專案負責人與客戶窗口:提交版本、退回修改,再以新版本驗收
  • 提出並核准範圍變更,完成追加交付後結案
問題 → 設計決策 → 驗證結果

問題

客戶看的是哪一版、驗收了哪些條件、追加的工作有沒有被核准——這些如果散在信件與訊息裡,就沒有共同的事實來源。同一個工作區開在兩個分頁時,較舊的那個還可能用過期資料覆蓋掉剛完成的決定。

設計決策

  • 提交後的版本就凍結,不能直接修改;需要修正時撤回並說明原因,再建立下一版,舊版本的內容、留言與決定都留在原地。
  • 角色不是只靠隱藏按鈕:提交、驗收、退回、核准變更都由同一層命令處理器檢查身分,切換角色只是示範,繞不過規則。
  • 每次寫入都帶著版本號:兩個分頁同時決定時,只有先落地的那筆成立,另一筆被擋下並保留輸入,不會用過期資料覆蓋。

驗證結果

  • 自動化測試涵蓋完整流程:提交 v1、退回、建立並提交 v2、逐項勾選後驗收、提出並核准範圍變更、追加交付後結案;一筆變更申請只會加入項目一次。
  • 兩個分頁同時決策時只有一筆成立,另一筆被擋下並保留輸入;舊版本網址為唯讀並指向最新的版本。
  • 儲存內容損毀時原檔完整保留,只有明確確認才重設,且只影響 Relay 自己的資料;無法取得 Web Locks 時工作區改為唯讀,不寫入任何東西。
Chime 對話模擬畫面:顧客對話串與事件檢視器並列,顯示簽章結果、命中規則與回覆封包
Chime 對話模擬的手機畫面:對話與事件分頁切換

LINE 官方帳號串接示範

Chime

概念作品

把官方帳號從單向公告,變成顧客查得到訂單與預約、需要時也能轉接真人的入口。以真實的 webhook 驗簽、意圖路由與自動回覆規則示範,並可編輯六格圖文選單、由已出貨訂單產生出貨通知推播(模擬,不實際發送);顧客與資料全部虛構。

進入操作 Chime看 Chime 作品介紹
看適合情境與可操作內容

適合這類需求

  • 官方帳號只能群發,客人問的訂單或預約仍然靠人工一則一則回
  • 想讓常見問題自動回答,但需要能解釋每則回覆是怎麼產生的

你可以操作

  • 以三位虛構顧客送出訊息或圖文選單事件,走完 webhook 驗簽與意圖路由
  • 啟用停用規則、編輯關鍵字,並在事件檢視器查看產生的回覆封包
  • 編輯六格圖文選單並套用/還原,點預覽格把事件送進對話
  • 由「已出貨」訂單產生出貨通知,加入示範佇列並在對話看到推播(模擬)氣泡
  • 切換客服視角接手無法處理的對話,再交還自動回覆
好客 LIFF 會員入口畫面:手機框內的會員卡與點數,旁邊是 LIFF 情境面板顯示 idToken 驗證結果
好客會員入口的手機畫面:會員卡與底部導覽

LIFF 會員入口示範

好客

概念作品

同一個官方帳號的顧客端入口:以 LIFF 形狀的模擬登入取得 idToken,交由後端驗簽、比對 aud 與 exp 後才綁定會員;會員卡與點數由訂單推導,顧客能自助預約與取消。前台寫入的預約,Chime 後台立刻看得到來源。

進入操作 好客看 好客 作品介紹
看適合情境與可操作內容

適合這類需求

  • 官方帳號的圖文選單只能連到表單,顧客查不到自己的會員與預約
  • 想知道 LIFF 的 idToken 在後端到底該驗什麼,而不是直接把前端拿到的 userId 存起來

你可以操作

  • 選一位示範帳號按下模擬 LINE 登入,看 idToken 的三段結構與解碼後的 claims
  • 把 idToken 送到後端驗簽、比對 aud 與 exp,通過才綁定會員;簽章或 aud 不對會被擋下
  • 會員卡顯示由訂單推導的點數與等級,以及綁定禮與加入日
  • 選服務與時段自助預約,或取消自己未來的一筆預約
  • 回到 Chime 後台的預約總表,看同一筆預約標成「自助預約(LIFF 示範)」
Intake 工作台畫面:來源文件、原文對照與抽取結果的欄位覆核並列
Intake 工作台的手機畫面:來源文件與抽取結果分頁

AI 結構化抽取工作台

Intake

概念作品

把 Email、會議紀錄與第三方文件整理成固定 schema。每一欄附原文引用、矛盾並列,經人工逐項覆核鎖定後才匯出 JSON、CSV 或報價草稿;模型服務未設定時,離線規則仍可走完整流程。

進入操作 Intake看 Intake 作品介紹
看適合情境與可操作內容

適合這類需求

  • 需求散在 Email 與會議紀錄裡,每次整理都要重看一次
  • 想用 AI 加速整理,但需要回查來源並保留人工判斷

你可以操作

  • 以三份示範文件或貼上純文字,執行離線規則或模型抽取
  • 回查每欄原文引用、處理矛盾,逐項確認或修正並鎖定
  • 匯出 JSON、CSV 或產生報價草稿文字(不會寄出)
Enroll 招生總覽畫面:開放梯次與剩餘名額統計、梯次名額列表與候補下一位
Enroll 招生總覽的手機畫面:統計卡片與梯次名額列表

招生報名與名額管理

Enroll

概念作品

補習班、才藝班與工作坊的招生工作區。每個梯次有固定名額,額滿自動排候補;行政人員依序遞補,取消保留原狀態、復原前重新檢查名額,學員名單以 Email 累積。

進入操作 Enroll
看適合情境與可操作內容

適合這類需求

  • 用試算表登記報名,剩餘名額與候補順序常常對不上
  • 額滿之後要有人盯著通知遞補,取消後又得重新排隊

你可以操作

  • 以報名者視角選擇梯次送出報名,額滿時自動排入候補並顯示順位
  • 切換行政人員視角,依序遞補候補第 1 位、取消或復原報名
  • 調整梯次名額並匯出報名 CSV,查看以 Email 分組的學員名單
  • 從巷口學堂前台報名,回到後台看名額與候補即時變化
問題 → 設計決策 → 驗證結果

問題

補習班或工作坊用試算表登記報名時,剩餘名額、候補順序與已確認名單是分開維護的數字。額滿後容易重複錄取或漏掉遞補;直接把取消的名字刪掉,也一起失去了原本的排隊位置。

設計決策

  • 已確認人數與剩餘名額只由報名資料推導,不另存一份數字,總覽與名單不會各自漂移。
  • 候補順位不靠人工排序:由報名時間推導,同一時間以 id 穩定排序;遞補只開放第 1 位。
  • 取消是可逆的狀態而不是刪除;復原前重新檢查剩餘名額與同 Email 的重複報名,才不會把超收名單塞回去。
  • 角色切換只是流程示範,遞補、取消、復原與調整名額同時在資料層檢查角色,繞過按鈕也無法執行。

驗證結果

  • 自動化測試涵蓋:名額由報名推導、額滿自動排候補且順位依報名時間穩定排序、同 Email 重複報名被擋下、只有候補第 1 位能在有名額時遞補。
  • 取消保留原狀態;復原時若原為已確認而名額已被占走、或同 Email 已有其他有效報名,會被拒絕並說明原因。
  • 調整名額限制為 1–99 且不得低於已確認人數;下修到「已確認+候補」以下時候補繼續等待;資料損毀時原檔保留,只有確認重設才還原示範資料。

網站做完之後呢?

這些是實際合作時最常被問到的事。概念作品與客戶專案用的是同一套做法。

交付時你會拿到什麼

  • 上線後的網站,以及網域與主機的設定說明
  • 常用操作的圖文說明,讓非工程人員也能上手
  • 後續要接手時,工程人員需要的程式與設定資料

之後想改內容怎麼辦

  • 文字、圖片與商品這類會常改的內容,會集中在你能自己修改的地方
  • 版型或功能的調整,可以單次委託,也可以走維護方案
  • 交付前會一起走一次更新流程,確認你改得動

報價會看哪些事

  • 頁面與功能的數量,以及有沒有需要串接的既有系統
  • 內容與素材準備到什麼程度,是否需要協助整理
  • 設計的細緻度,以及上線後要不要固定維護

其中哪一件,比較接近你想要的?

可以直接告訴我們是哪一件、哪些地方合用、哪些不合用。從一個具體的參考開始談,比從零描述快得多。

開始討論專案

先提供這些,討論會快很多

  • 網站或系統要解決什麼問題,給誰用
  • 預計要有哪些內容或功能,現有素材到哪個程度
  • 一到兩個參考網站,以及你喜歡或不喜歡的地方
  • 希望上線的時間,以及預算大概的區間