富迪斯集團 Fluids Group

為什麼這案值得寫

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 跑後台時丟回三件事：

1. 文字內容（公司簡介、品牌故事）找不到編輯欄位
2. 新增產品時找不到「品牌」欄位
3. 新聞編輯器工具列（粗體、分段）按了沒反應

第一件我們承認是 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 知識網用的根本是兩套打法。產業是個粗的分類，真正決定能不能交付的是「我們有沒有花時間搞懂這一間公司」。

富迪斯這案我接，因為三件事：

1. 客戶是真的願意把「品牌資產」當回事的少數工業集團（1994 年到現在，超過 30 年累積值得認真做）
2. 客戶要求「直接一路辦到好」——這正是我們的工作方式（設計→工程→AI→後台→維運不切段）
3. 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 個後台模組、版本歷史 + 排程上架 + 操作日誌

認識熊董 →