这次做的是一个香品牌 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 评论区告诉我，也可以在下方订阅，下一期第一时间收到。
