Making of · pharmachen.com
這一頁說明 www.pharmachen.com（曉晨藥師健康教室）是怎麼做出來的。 重點先講：整個網站沒有寫過一行程式碼——所有功能都是用中文對 AI 工程師（Claude Code）下指令、驗收、修改而成。花了約三週的零碎時間， 每月成本大約是一杯手搖飲加一份訂閱。
01 · 網站有什麼
不是一頁式名片，是一個持續長大的個人品牌基地（都可以點進去看）：
02 · 核心方法
分工很清楚：我負責「要做什麼」與「做得對不對」，AI 負責「怎麼做」。 我從頭到尾沒有開過程式編輯器，工作的樣子比較像在跟一個很快的工程師傳訊息。
一輪對話的節奏：我用中文講需求 → AI 動手寫、自己跑測試 → 給我看結果或網址 → 我用手機實際點過一遍 → 不對的地方直接講「這裡怪怪的」再修。 大部分功能一到三輪就收工。
決定權永遠在人：品牌照片不准動、遊戲要嵌進主站而不是開新專案、 避開 Pantone 商標改用日本傳統色——這些關鍵判斷都是人做的。AI 快，但方向是我的。
03 · 工具與成本
| 工具 | 用途 | 費用 |
|---|---|---|
| Claude Code | AI 工程師：寫程式、測試、部署都是它 | 月訂閱（整套裡唯一固定支出） |
| GitHub | 放網站的原始碼，每次修改都有紀錄可回溯 | 免費 |
| Vercel | 主機：GitHub 一有變動就自動上線全球 | 免費方案就夠 |
| 網域 pharmachen.com | 自己的網址，也是品牌資產 | 約數百元台幣／年 |
| Upstash | 小型資料庫：AI 爬蟲統計、媒合表單收件 | 免費額度夠用 |
流量長大之前，這些免費額度綽綽有餘。先花大錢租主機、買模板，通常是白花。
04 · 發文的樣子
網站設計成「內容進來，其他全自動」——這是請 AI 打地基時最值得指定的一件事：
→
→
→
連文獻都有機器把關：文章裡每個 PubMed 編號（PMID）發佈時會自動核對， 編號打錯或對不上論文，發佈會被擋下來——對掛著藥師頭銜的網站，這層防呆很重要。
05 · 建造時間軸
每一階段附上當時真實下過的指令——「說出來」就是字面上的意思。
第 1 步
三語首頁、藥師介紹、SEO 結構化資料。地基指定了「零建置」： 不裝一堆框架，純靜態網頁，放上任何主機都能跑、十年後也不會壞。
第 2 步
文章用純文字格式寫，其餘（網頁、目錄、常見問題結構化資料）全部自動產生。 同時做了 AI 分流：ChatGPT、Claude 這類 AI 來讀時，自動給它們精簡版內容，方便被引用。
當時的指令
幫我加入下面文章到藥師專欄裡面
第 3 步
把做好的沖繩通路研究掛進網站，變成獨立的「研究報告」區。
當時的指令
我有做了一個這個研究 幫我掛進去我的曉晨藥師頁面中
第 4 步
從免費網址搬到 www.pharmachen.com。買網域是自己去註冊商下單， 接到主機的設定則是一來一回貼截圖問出來的。
當時的指令
我買好了，幫我規劃跟修改
第 5 步
首頁下方那塊「AI 助理讀取次數」儀表板，加上密碼後台—— 之後發文不用再經過任何人，自己手機就能上稿。
當時的指令
幫我設計一個被AI爬多少次的顯示數據 作在首頁下方；藥學專欄要有一個維護後台 讓我可以固定貼文
第 6 步
給小孩玩的混色遊戲。中途兩個人為決策：遊戲要嵌進主站不另開網站； 想做 Pantone 色卡但有商標風險，改用公有領域的日本傳統色——最後反而更貼品牌。
當時的指令
等等 我沒有要作全新專案，要崁進我的頁面中
第 7 步
丟了一份完整的平台規格書給 AI。它的建議是先不要蓋大系統： 第一階段用表單＋人工媒合驗證需求，等真的有案件再擴大——省下的是好幾萬的開發與月費。
當時的指令
ok 動工吧⋯⋯也進行規畫開發
06 · 心法
07 · 想照做？
最重要的其實不是工具——是你本來就有的專業。網站只是容器， 裡面裝的衛教內容、研究、判斷，才是別人搜尋得到你的原因。