為什麼這案值得寫
2026 年初富迪斯找上我們，要重做品牌官網。我們交的不只是「把官網寫出來」——是從品牌字級系統、設計語言、雙語 Figma 完整設計稿（Visual Language System v2.0「Silent Confidence」，2026-03-27 release），到 11 模組客製化後台 + AI 客服 RAG，全部一條龍。
這對工業 B2B 來說，是萬中之一的完成度。多數工業集團的官網要嘛 outsource 給設計工作室做完視覺、再另外找工程公司切版（兩段話接不上）；要嘛找連鎖網站公司套模板（品牌完全失去個性）。富迪斯選擇的是第三條路：找一支能把設計判斷與工程交付綁在一起的小團隊。
我們怎麼看一個「高端國際工業品牌官網」
富迪斯是真正的國際品牌——代理 BADGER METER、Emerson 這個層級的全球控制儀器原廠，客戶是工程公司與大型製造業的採購決策者。他們的官網不只要「有質感」，更要：
- 國際化：中英雙語雙路徑設計（不只是中文翻成英文，是兩種語言在版面上都對得起品牌）
- 高端：每一個 spacing、字級、配色細節都站得住跨國 B2B 標準
- 精準：產品規格、原廠資訊、技術參數不能有半個錯字（採購一看到 typo 就放棄信任）
- 可信任：1994 年成立、超過 30 年累積、上下游關係、版本歷史與內容更新都要看得到
這四件事決定了我們做這案的標準。從外面看，富迪斯需要的是「漂亮的雙語官網」；從裡面看，他們需要的是：
- 一套能撐 10 年的品牌字級系統（不是「找一個英文字型搭一個中文字型」這種等級）
- 一個能讓非工程人員自己改文案的 CMS（包含品牌故事、里程碑、聯絡資訊這種沒有現成模板的版面）
- 一個能讓業務同事自己上架新代理品牌的產品庫（BADGER METER、Emerson 這類原廠品牌欄位是動態的）
- 一個能讓訪客真的問到東西的 AI 客服（不是 widget 殼）
- 一個能讓未來換人接手也看得懂的後台介面
如果只做漂亮的視覺，半年後客戶要嘛回來付月費請我們改文字，要嘛官網就停在上線那一刻。這對品牌是負債。對一個國際品牌來說更是負債。
我們交的東西
1. 品牌設計系統「Silent Confidence」
設計系統是我們自己一筆一筆畫出來的——不是「拿客戶提供的 Figma 去切版」這種等級。
Visual Language System v2.0 包含：
- 5 個 typography tier（T1-T5）、共 16 個 class（
.t1-a到.t5-meta） - 兩套字級系統並存設計：T-System（實作主系統）+ Named tokens（語意層）
- 中英文雙路徑字級壓縮：
>36px ×0.65/≤36px ×0.80/ body ×0.88，靠:root[lang="zh"]覆寫機制——同一份 CSS 兩種語言都對 - 字型策略：Instrument Sans 變數字型（拉丁，自架 woff2，含 wdth+wght 雙軸 + 4 個 named instance）+ Noto Sans TC（中文），同一條 font stack 靠瀏覽器依字元 fallback
- 空間 / 顏色 / 規則 tokens 完整：spacing、color palette（含 MUTED / GHOST 中性層）、布局規則
為什麼要這麼細？因為中文標題如果用英文版字級會看起來「太大太胖」、英文版用中文字級會「太小太散」。多數雙語官網偷懶用「中英共用一套字級」，結果中文版顏質就被英文版拖下水。我們不能讓富迪斯的品牌資產被這種細節拖累。
2. 雙語 Figma 完整設計稿（11 個 frame）
設計系統定義完之後，我們在 Figma 內把 11 個前台頁面的中英雙語版本全部畫好（2026-03-27 release）：首頁、關於我們、核心業務、產品、產品內頁、服務、服務內頁、最新消息、文章內頁、聯絡我們、合作夥伴。
Mobile 版也對齊。導覽列、footer、AI 客服 widget、聯絡彈窗等全域元件都在 design system 內統一管理。
3. 11 模組的客製化 CMS
後台不是套版。每一個模組都是按富迪斯的實際工作流設計：
- 產品管理：基本資料 + 原廠品牌（Manufacturer 獨立欄位）+ 分類 + 規格 + 特色 + 相簿 + SEO + 版本歷史 + 排程上架 + Datasheet PDF 上傳
- 文章管理：分類標籤（含 AI 自動推薦）+ WYSIWYG 編輯器 + SEO + 排程
- 服務管理：含服務流程步驟（給 B2B 工程業務做提案用）
- 合作夥伴：Logo + 描述 + 連結
- 網站內容 CMS：11 個 section（品牌故事、公司簡介、里程碑、聯絡資訊…）每個欄位都用「人話標籤」（不是
heading / content1這種程式名稱），最上方有「這頁對應到前台哪一塊」的提示框，還有搜尋欄輸入「品牌故事」就能跳到該欄位 - 媒體庫 / 操作日誌 / 網站設定 / SEO meta / AI 搜尋推薦
這套後台的核心信念：每個欄位都看得懂、知道對應到前台哪一塊。功能不必最多，介面必須最不勸退人。
3. 真正的 AI 客服（不是 UI 殼）
看過太多「AI 客服」其實只是 chat widget 加個 GPT 包裝。富迪斯這套不是。
架構：
後台上傳 PDF/FAQ → chatbot-ingest Edge Function
↓
切 chunks（500 tokens）→ 算 embedding（OpenAI text-embedding-3-small）
↓
pgvector 知識庫
↓
前台訪客提問 → chatbot-chat Edge Function → embed → 向量檢索 top-K
↓
LLM 生成回答 + 引用來源 → 顯示
↓
chatbot_conversations 對話紀錄
↓
後台儀表板：今日對話數 / 高頻問題 Top 10 / 解答率 / 轉真人率 / 完整對話可讀
DB 層 4 個新 table（含 pgvector extension）+ 3 個 Edge Functions（chatbot-ingest / chatbot-chat / sitemap）+ 後台文件管理頁 + 對話分析儀表板。
這才叫客製化 AI 客服。
我們做事的方式：客戶要求我們直接一路辦到好
富迪斯一開始就明講：他們不要那種「上線後客戶想改一個字都要請工程師」的網站、不要「設計做完一份合約，工程切版另開合約」的拆段、不要「半年後 token 過期 chatbot 就掛了」的拼裝。他們要一個團隊一路辦到好。
這對我們是個好客戶的訊號——也對我們是個壓力測試：我們的 100% 客製化諾言有沒有兌現。
上線初期客戶 PM 跑後台時丟回三件事：
- 文字內容（公司簡介、品牌故事）找不到編輯欄位
- 新增產品時找不到「品牌」欄位
- 新聞編輯器工具列（粗體、分段）按了沒反應
第一件我們承認是 UI 不夠直觀——當天早上改完，把每個欄位都加上「人話標籤」（不是 heading / content1 這種程式名稱），最上方加「這頁對應到前台哪一塊」的提示框，加搜尋欄輸入「品牌故事」就能跳到該欄位。
第二件背後是 schema 設計問題——「品牌」DB 上是內部分類（Fluids / Centrium），原廠品牌名（BADGER METER 等）原本沒有獨立欄位，我們承認漏掉並補上獨立 Manufacturer 欄位（migration add_product_manufacturer）。
第三件是真 bug——原本編輯器是 Markdown 模式，前台不翻譯成 HTML，當天整個重做為 WYSIWYG（粗體 / 斜體 / H2/H3 / 列表 / 引用 / 連結 / 圖片 / Word 貼上自動清樣式 / Undo Redo）。
24 小時內全部修完並附操作示範。這是 100% 客製化諾言的第一條測試：客戶提的痛點不會被擱在 backlog 等兩週，當天改完當天交。
我們同時做的事：主動稽核「前台看得到、後端是空的」
光修客戶提的三件事不夠。我們同時跑了一份內部稽核——把整個前後台對照走一遍，找出「看得到但接不到」的所有 gap：
- 聯絡表單：前台能填，但 submit handler 是空的，訊息會消失
- 電子報訂閱：input 有，但按下去什麼都沒發生
- 產品詢價：跳轉到 contact 但 contact 沒實裝
- 產品 Datasheet PDF：前台沒下載入口、後台沒上傳欄位
- Sitemap.xml / robots.txt：沒做（影響 SEO）
12 個 gap 全部攤開、標嚴重度、估工時、按優先順序在 1-2 週內全部補完。這是我們對「交付一個高端官網」的標準。
為什麼我接這案
我接這案不是因為「我們很懂工業 B2B」——是因為我們懂商業、有團隊、願意花時間深入了解任何產業。
這點是這幾年做案累積出的判斷：就算是同一個產業，每一間公司都不一樣，套不上去。醫美裡的連鎖品牌跟單診所運作邏輯完全不同；印刷裡的紙品代工跟設計印刷需求差十萬八千里；媒體裡的 B2C 流量網跟 B2B 知識網用的根本是兩套打法。產業是個粗的分類，真正決定能不能交付的是「我們有沒有花時間搞懂這一間公司」。
富迪斯這案我接，因為三件事：
- 客戶是真的願意把「品牌資產」當回事的少數工業集團（1994 年到現在，超過 30 年累積值得認真做）
- 客戶要求「直接一路辦到好」——這正是我們的工作方式（設計→工程→AI→後台→維運不切段）
- AI 客服 RAG 是我們其他客戶都會問的東西，富迪斯願意當第一批把這條 stack 跑通——對我們未來其他案是 know-how 累積
結論：這案證明的不是「我們很會做工業官網」。這案證明的是「我們做高端品牌官網 + 100% 客製化的方法，跨產業都成立」。
技術細節（給工程同行看的）
- 前端：Vite + React + shadcn/ui + Tailwind
- 後端：Supabase（PostgreSQL + Auth + Storage + Edge Functions + pgvector）
- 設計：Visual Language System v2.0「Silent Confidence」（16 typography tokens + 雙語字級壓縮）
- 字型：Instrument Sans variable font（拉丁）+ Noto Sans TC（中文）
- AI 客服：5 個新 DB table + pgvector + 3 個 Edge Functions（ingest / chat / sitemap）
- 編輯器：WYSIWYG（H2/H3、項目、編號、引用、連結、圖片、Undo/Redo、Word/Docs 貼上自動清樣式）
- 多語：中/英雙語對齊（每個 form 都有 zh/en tab）
- i18n 字級：
:root[lang="zh"]覆寫機制（不用兩套 CSS） - CMS：11 個前台頁、11 個後台模組、版本歷史 + 排程上架 + 操作日誌