這次做的是一個香品牌 Tellu Hima 的獨立站。從 Logo、包裝、產品動畫，到商城、支付和最後上線，整個過程我都是和 AI 一起完成的。下面是影片版，也可以繼續往下看文字版。
Play video真正值得聊的，不是怎麼讓商城跑起來，而是從「一個能用的商城範本」到「一個有自己品牌氣質的網站」，中間到底要補哪些東西。
開始之前要準備什麼
先定品牌名，再註冊網域，我一般在 Hostinger 註冊。然後是這次用到的工具：
- GitHub：存放和管理程式碼
- Higgsfield：生成品牌素材
- Claude：主要的 AI 開發助手
- Railway：部署網站
- PayPal 企業帳號：收款
為什麼不用 Stripe？Stripe 當然可以，但不是所有地區都能開通。這次想分享的，是用不了 Stripe 的時候，怎麼用 PayPal 把專案做完。不管用哪個，動手之前都先確認帳號支援你需要的收款功能。
品牌設計：從一縷煙到一個 S
我的習慣是先想清楚品牌故事和想傳達的感覺，再讓 AI 生成一批參考圖和概念圖，把大方向找出來，然後才做 Logo。
這個 Logo 的靈感來自香燃燒時升起的煙。我把煙的形態一路抽象下去，最後成了現在這個 S 形標誌。圍繞它，再定下主色和配色關係、每個產品系列的圖案、包裝設計和效果圖。最後按照真實包裝的尺寸和接近實物的材質做了 3D 模型和動畫，留給網站展示用。
這一輪的素材全部由 AI 生成。我作為設計師，負責定方向、挑結果，再不停提修改意見。
但 AI 多生成幾張圖，並不會自然而然變成一套品牌。你還是得判斷：
- 這些素材放在一起，像不像同一個品牌？
- 包裝上的圖案、顏色，和後面的網站接不接得上？
- 一張效果圖看著很好，換成真實尺寸和材質，還成不成立？
這些判斷依然靠設計經驗。AI 讓想法更快被看見，而我要做的，是決定哪些值得繼續，哪些還要改。
為什麼先搭商城，再做頁面設計
按我平時的流程，應該先做頁面設計，再進開發。這次我調換了順序，因為要基於 Payload 現成的商城框架來做。
如果先把頁面設計好，甚至已經做成網頁，再往裡套現成的商城框架，很容易來回返工：為了保住設計，改壞了框架原有的結構；或者為了適配框架，設計又變了樣。
所以這次先讓 AI 基於 Payload 搭出一個能跑的商城，把基礎流程跑通，再在真實的商城結構上做設計，後面要重新適配的地方就少多了。
操作很簡單：
- 在電腦上建好專案資料夾，在 GitHub 新建一個儲存庫。
- 用 Claude 開啟這個資料夾，把開發需求發給它，最後附上儲存庫地址。
- 需求裡寫清楚：基於 Payload 的商城框架搭建，要做什麼樣的商城、需要哪些頁面、使用者下單和後台管理的基本流程。
然後讓它完成第一輪搭建，這一步要等一會兒。
用一筆測試訂單，把支付流程走通
第一版出來以後，先看前臺，再登入後台，確認頁面和基礎管理功能都能正常開啟。
不過頁面能開啟只是第一步，關鍵是一筆訂單能不能真正走完。我在專案的環境配置檔案裡填上 PayPal 沙盒金鑰，重啟本地服務，回到商城選商品、下單，用測試買家帳號付款。測試支付成功，後台也能看到這筆訂單。
這說明下單、測試付款、後台查看訂單這條基礎流程已經通了，但僅限測試環境。要正式收款，還得切換正式配置，再核對一遍線上支付和訂單狀態。
把品牌視覺真正放進網站
商城能用了，但它看起來還是個範本。這一步我用 Claude 的設計功能，先整理出一份網站設計規範。
我把專案說明，連同 Logo、配色、產品圖、包裝和其他品牌素材一起交給它。說明寫得越具體，它越知道素材該怎麼用：哪些畫面做主視覺、產品資訊怎麼呈現、不同頁面要保持什麼風格。最後得到一份帶頁面參考和規範的設計檔案。
接著把設計交給 Claude Code，選擇本地專案並帶上相關檔案；新建一個會話，確認工作目錄還是這個專案，貼上交接內容，再補上我自己的修改要求，開始下一輪。
改完再看，Logo、產品素材和視覺風格都進了頁面，和最初的範本已經完全不是一個樣子。
從好看的展示頁，到能經營的商城
剩下兩件事：繼續打磨頁面細節，以及補齊真正經營商城需要的功能。後者很容易被低估：
- 配送國家：框架自帶的是通用國家清單，我改成了我們實際能配送的國家，免得客戶下了單才發現發不了貨。
- 郵件：最初的版本完全沒接郵件服務，下單收不到通知，找回密碼也發不出郵件。我接入了 Resend 把這些補上。
- Google 登入：讓顧客登入更方便。
- SEO 和 Google Analytics，再加上 Cookie 選擇，讓訪問者可以管理自己的偏好。
- 看不見的部分：反機器人驗證，以及管理後台的訪問保護。
這些都不起眼，但網站要從本地演示走到正式上線，每一項都得考慮到。
視覺上我也逐頁檢查。設計規範給的是整體方向，落到真實頁面上，文字、圖片和佈局的關係還要一點點調。就這樣一邊看效果一邊讓 AI 改，直到頁面和功能達到這次上線的要求。
首頁改成了全螢幕展示，開場動畫重新優化過，原來首頁下方的內容也去掉了，讓這一屏的視覺更集中。「關於我們」是另一個重點調整的頁面：用 AI 生成了更多符合品牌調性的圖片，重新整理文案和排版，讓品牌故事、產品和畫面更自然地連在一起。
功能上，我也讓 AI 協助測試了整個交易流程。電子郵件收到了實際發出的訂單確認郵件，後台能看到對應的訂單。到這裡，頁面、訂單和郵件終於串了起來。
部署到 Railway
Railway 有一份專門寫給 Claude 的部署教程。我開啟它，在 Claude 裡新建會話，把教程地址發過去，讓它按說明部署這個專案。
過程中如果要你做選擇，先看清楚選的到底是什麼：部署哪個專案、用什麼配置、有沒有需要自己填的資訊。AI 的推薦可以參考，但最終要和自己的專案對得上。
部署完會拿到一個線上地址。線上上把主要頁面和下單流程再走一遍，本地跑通不代表部署後的配置也沒問題。準備正式收款前，確認 PayPal 已經切到正式環境，再核對支付結果、後台訂單和郵件通知。
最後，把一開始註冊的品牌網域綁定到專案上，按 Railway 的提示配置解析。等網域和 HTTPS 生效，用自己的網域再開啟檢查一遍。
這次的經驗
回頭看，對我最有用的順序是：
- 先定品牌方向。
- 把商城和支付流程跑通。
- 完善視覺和功能。
- 部署上線，再全部檢查一遍。
AI 可以參與每個階段的大部分工作，但每做完一步，都要回頭看實際結果：設計有沒有形成統一風格？訂單走不走得通？郵件收不收得到？線上網站能不能正常用？
你最想深入看哪一部分：品牌設計、商城開發，還是 PayPal 支付和部署？歡迎到 YouTube 評論區告訴我，也可以在下方訂閱，下一期第一時間收到。
