上週我本來只想幹一件小事，給 Shadow Card 和 Quick flomo 這兩個小工具的詳情頁加上定價資訊。
當時我沒讓 AI 直接去改程式碼，而是讓它先出高保真 HTML。它藉助設計 skill 先出了三個版本讓我選擇，最後我選擇了兩個版本結合起來，然後就是文案最佳化。
處理完，瀏覽器一重新整理，黑白紙墨底色配 1px 細線，頁面顯得很乾淨、也比較有品味。
等我切回線上看首頁，滿版深藍漸變、青紫發光字和大圓角卡片，上面印著「Welcome to the Future」和「釋放你的無限潛能」。單頁改順之後，首頁這種模板感就變得很難忍受。我索性把整站全改了一遍。
改版前後長圖對比
先看 Quick flomo 詳情頁的變化。
舊版頁面用了深藍漸變、青紫亮色和大圓角卡片，AI 味很濃，但讀完不知道它具體解決什麼閱讀問題。
新版頁面換成了黑白紙墨色、細線和留白，大標題直接寫出「你讀完的內容，應該留下來」。
首頁也是同樣的思路。
舊版首頁充斥著「探索未來」「釋放無限潛能」這類大詞，產品卡片資訊很少而且中間有排版斷層，使用者看不到工具的具體用法。
新版首頁把大標題定在「把想法，留成下一步」，右邊寫清楚工具和讀者的關係。下方把改版當時的 7 款微工具按編號、使用場景、上線狀態和價格排開。截至 2026 年 10 月，站內已有 8 款產品。
老頁面的問題
很多用 AI 生成的獨立產品主頁，容易堆滿類似的元素。
- 視覺元素過滿，喜歡深色漸變、青紫發光字和磨砂玻璃大圓角。
- 口號太大，滿版寫著「賦能創作者」「連線未來」，不講工具具體做什麼。
- 功能羅列過長，把十幾條技術參數塞在卡片裡，像一份沒人想讀的說明書。
| 維度 | 舊版頁面的特徵 | 新版頁面的處理 |
|---|---|---|
| 第一印象 | 宏大口號，像通用 AI 玩具 | 場景主張，說明每個工具只解決一件事 |
| 視覺語言 | 霓虹發光，深藍底色，排版斷層 | 紙墨黑白，1px 細線，編輯部留白 |
| 文案邏輯 | 抽象大詞，如數字樞紐、創意夥伴 | 具體痛點與獲得感，如讀網頁時保留重點並送回 flomo |
| 產品陳列 | 資訊缺失，只有一兩句套話 | 清單化呈現，標明免費或 Pro 定價與狀態 |
訪客開啟網站是為了解決手頭的具體麻煩。把多餘的裝飾拿掉，頁面才能把事情講清楚。
具體改法
整個改動分成三個階段。
1. 原型先行，用獨立 HTML 選型
如果直接跟 AI 說「改得高級一點」，它往往會加上更多的發光字和圓角。
我當時呼叫了 huashu-design 和 ui-ux-pro-max，在本機獨立的 HTML 檔案裡讓它同時生成幾種不同風格的單頁。
- 編輯部雜誌風（Editorial），用大標題、黑白對比、1px 細線和雜誌式留白。
- 權益帳本風（Ledger），強化表格和參數清單。
- 極簡目錄風（Catalog），用卡片網格做分類。
我選了雜誌風做骨架，價格部分參考帳本風把參數列清楚。
在單獨的 HTML 檔案裡看頁面，調行高、字號和換行很方便。方向在瀏覽器裡確定以後，再去改正式程式碼，中間省掉了反覆修改業務元件的麻煩。
2. 重寫文案，回答三個具體問題
老文案容易寫成功能列表。這次改版要求每個產品頁面在首屏回答三個問題。
- 讀者什麼時候會需要它。
- 它替讀者完成了哪一步。
- 用完以後事情有什麼變化。
Quick flomo 的舊文案是「flomo 剪藏 + AI 閱讀助手」，新文案改成「你讀完的內容，應該留下來。讀網頁時保留重點、出處與思考，把真正有價值的碎片送回 flomo」。
Shadow Card 的舊文案是「精美數字名片生成器」，新文案改成「交換聯絡方式時，讓別人記住你。職位、專案或聯絡方式變了，對方手裡的連結永遠是最新的」。
專有名詞也順手做了統一，flomo 保持全小寫，不寫成大寫。把場景立住，讀者才會去看具體的價格和功能。
3. 全站系統化，沉澱通用規則與明確跳轉
單頁改順之後，我把這套規則擴到了整個網站。
第一件事是提取全站通用的樣式規則。
- 提取統一的紙墨色階、1px 分界線和標題字號階梯。
- 版式採用左邊敘事、右邊窄欄交代關係的雙欄結構。
- 頂部導航、頁尾和產品下拉式清單做成通用元件，各頁面只傳入自己的文案和設定。
第二件事是理順每個產品的轉化路徑。
- 免費小工具標明免費使用，按鈕跳到 GitHub 或直接可用的網頁。
- 付費外掛標清 Free 和 Pro 的權益區別，按鈕跳到 Chrome Web Store 或結算頁面。
- 刪掉以前所有「探索產品」「立即開始」這類模糊按鈕，讓每個點選都有確定的去向。
踩雷經驗
這次改動也踩了幾個坑。
第一是預覽和生產要分開。本機單頁 HTML 看著順眼，不代表生產程式碼沒有問題，一定要在獨立分支裡做驗證。
第二是事實必須查真實程式碼。改版時不能只看舊門戶寫的資料，必須核對各個產品倉庫的 README、資料庫遷移和 Chrome Web Store 頁面。價格和版本如果讓 AI 猜測，很容易寫出錯誤的資料。
第三是對比截圖要用真實環境。採集改版前截圖時，我一開始混用了本機草稿，後來把生產環境回滾到主分支，重新按標準視口截了全長圖。真實的對比才有說服力。
可用的 Prompt
如果你也想改自己的產品主頁，可以先把產品資料整理好，把下面這段話發給 AI。
先不要修改业务代码。
请先检查当前网站的页面结构、产品仓库 README、双语文案、真实价格与外部链接。
从用户场景出发，说明：
1. 这个产品在什么具体场景下帮用户解决什么麻烦；
2. 页面应该引导用户完成哪一个关键动作；
3. 指出当前页面存在的 AI 模板感，比如发光字、大圆角和空洞口号；
接着输出 2 到 3 个不同风格的单文件 HTML 高保真预览供我确认。
设计确认前，不要改动现有代码。
當然，也可以在 refero 等網站找到喜歡的設計風格，把對應的設計描述 design.md 發給 AI 處理，避免風格和你預期偏差太大。
這次從加個價格表到改完整個網站，花了大半天。最管用的辦法就是先把單頁 HTML 做出來，把多餘的發光裝飾刪掉，在瀏覽器裡看順了再動手。把產品具體替人省了什麼麻煩寫清楚，頁面的質感自然就出來了。