年報版型
零卡片、零陰影——用細線與襯線標題分隔內容。設計判斷
示範站「示範堂」——年報版型，桌機 1440px。零卡片、零陰影，用細線與襯線標題分隔內容。
我做 WordPress 案子時，實際用的那套生產流程
這是我自己蓋的一套建站流程，用來把「網站會不會做壞、交付會不會出包」這件事， 從靠記憶與手動檢查，變成每次改動都自動重驗一遍。
你在這一頁能看到：
- ・三套完成度到底的版型，桌機與手機版都有
- ・電商從商品頁到結帳的完整交易流程畫面
- ・每次改動後自動重驗的結果——包含付款流程 12/12 通過
先講清楚：這一頁沒有客戶。
三套版型出自我自己寫的建站流程「tw-woo-factory」。示範站「示範堂」是虛構的： 課程、價格、學員數、企業客戶名單全部是我編的，用途是讓流程有東西可以跑、有畫面可以看。 這不是客戶案例，也不代表任何真實成效。
下方所有數字皆為本地開發環境實測，非正式主機表現。 公開它的理由：蓋工具的過程本身能說明我怎麼做事——哪些地方選擇不做、遇到問題怎麼收斂、 什麼情況下會停下來承認量不準。
為什麼自己做一套
同樣叫 WordPress 網站，市場上交出來的東西是不同物種——差在看不見的工程：金流會不會錯帳、 改版會不會壞、驗收有沒有標準。要對這些差異有判斷力，最誠實的辦法是把整條線自己走一遍。
靠人眼與記憶的驗收一定會漏。我們把交付標準寫成程式：反模板 lint、交易回歸、端到端建站腳本—— 每次改動都重驗一輪，漏掉的東西會自己冒出來，而不是等客戶發現。
客戶專案受保密與授權限制，多半不能公開。與其拿不能驗的案例請你相信， 不如公開工具本身與它的示範品——讓可複驗性代替口說。
三套示範版型
同一條生產線、三個藝術方向。點擊或左右鍵切換；「一眼可分」的差異描述是設計判斷，不是量測事實。
課程電商版型
商店頁一行一課的清單，價格右對齊。設計判斷
示範站「示範堂」——課程電商版型，桌機 1440px。商店頁為一行一課的清單，價格右對齊。
單頁報名版型
2px 硬邊框、實心偏移陰影，零圓角。設計判斷
示範站「示範堂」——單頁報名版型，桌機 1440px。2px 硬邊框、實心偏移陰影，零圓角。
版型示範內容（皆為虛構）：236 家企業客戶、11,790 位受訓學員、94％ 回購率、1,794 位學員的課程頁—— 這些數字由內容產生器編出，用來測版面，不是任何真實成效。
交易路徑擇要
可複驗清單
證據不是都一樣硬。以下依「你能不能自己驗」分三層排列—— 能自己驗的排前面，只有我們能重跑的誠實放最後，不混在一起講。
TIER2 我們公開的證據（可讀，但不能重跑） （3 項）
實際執行輸出的 sanitized 轉錄。你能讀它、核對它的內部一致性，但無法自行重跑——腳本與示範環境未公開。
-
版型防呆檢查（design-lint）共 10 條規則，三套首頁＋商店＋單品共 9 頁全綠
怎麼驗： 讀已公開的輸出轉錄 →
-
付款流程自動測試 12/12 全數通過，付款段真的導向綠界（線上收款服務）的測試環境
怎麼驗： 讀已公開的輸出轉錄 →
-
三套版型「一眼可分」：年報＝細線＋襯線；課程電商＝一行一課清單；單頁報名＝2px 硬邊＋偏移陰影——這是設計判斷，不是可量測事實
怎麼驗： 看下方截圖自行判斷；我們的內部檢查流程包含盲測，但不對外宣稱其結論
TIER3 只有我們能重跑的（內部可複現） （10 項）
需要我們的 repo 與開發環境才能執行。誠實說：這一層你只能選擇信或不信，所以我們把它跟前兩層分開放。
-
示範站「示範堂」為虛構客戶：課程、價格、學員數、企業名單全部是我們編的
怎麼驗： 檢視內容產生器原始碼——所有示範內容由程式生成
-
從零到可交付部署包：5 個指令、5/5 階段全綠
怎麼驗： 跑一次端到端腳本，看五階段結果
-
端到端耗時 168 秒——在我們的開發機上量測，隨功能增加而變動（103→108→125→143→168）
怎麼驗： 同上腳本重跑計時；換機器數字會不同，這是條件宣稱
-
每頁新增 CSS＋JS 共 50.7 KB（含裁切後字型 CSS，未壓縮）
怎麼驗： 檢視檔案大小：app.css 50,677 bytes＋motion.js 2,858 bytes
-
字型設定檔從 707 KB 裁到 30.7 KB（只保留網站實際用到的字與字重）
怎麼驗： 讀裁切腳本與其產出
-
動效程式 motion.js 只有 2,858 bytes，不用任何外部框架、執行時零對外請求
怎麼驗： 檔案本身可讀；design-lint 含外部請求檢查
-
不硬改 WooCommerce（WordPress 開店系統）的原始模板：覆寫 0 個，只用 2 個官方掛載點
怎麼驗： 讀覆寫清單文件的總結行
-
綠界閘道需三層設定，缺一層結帳頁看不到綠界且無錯誤訊息
怎麼驗： 依根因報告重現三層設定的任一缺漏
-
過程產出 78 張截圖、13 份 Google 官方網站評測（Lighthouse）報告、18 份輪次報告
怎麼驗： 點數目錄內容
-
四份台灣法遵頁草稿（隱私權／購物須知／退換貨／猶豫期）——草稿，非法律意見
怎麼驗： 讀範本目錄
生產線做到什麼
01 從零到可交付的網站 5 個指令、5/5 階段全綠
重建一次要花的時間可預期，不是每次都從頭摸索
02 版型防呆檢查 10 條規則、9 頁全綠
版面不會因為趕工而退化成模板感
03 每頁程式重量 CSS＋JS 共 50.7 KB
頁面輕，手機開得快，跳出率不會被載入速度拖累
04 不硬改原始模板 覆寫 0 個
盡量不改 WooCommerce 原始模板，降低它更新後整站壞掉的風險
05 付款流程自動測試 12/12 通過
收錢這條路每次改動都自動重驗，不靠人記得測
這條生產線的能力如何用在你的專案，見 WordPress 網站建置服務； 本站自身的可複驗事實在 作品與能力證明。
想要同一條生產線的品質？
說明你的需求與現況，我會誠實告訴你適不適合做、大概要多少時間與預算。