用AI给小店做个官网，免费、好看、一下午搞定
你有没有想过给自己的小店做个官网？奶茶店、花店、烘焙工作室、宠物店……都行。
"做网站不是要花好几千吗？""我又不会写代码。"
以前确实是这样。但现在有AI，情况完全不一样了。今天教你用AI工具，一下午时间，免费做一个好看的小店官网。
做官网有什么用？
你可能觉得，有微信、有美团不就够了吗？但官网有几个好处：
准备工作
- 店名、地址、电话
- 主打产品/服务（准备几张好看的图片）
- 营业时间
- 你的特色和故事
- 装好Claude Code（推荐）或者Cursor
- 有个GitHub账号（免费注册）
- 有个Vercel账号（免费注册，用GitHub登录就行）
开始做！
第一步：描述你的店
打开Claude Code，这样说：
帮我做一个花店的官网，信息如下：
店名：花间集
地址：杭州市西湖区xx路88号
电话：138xxxx8888
营业时间：每天 9:00-21:00
特色：鲜花订阅服务，每周送花上门
需要这些页面内容：
1. 首页：大图banner + 简介 + 热门花束展示
2. 产品展示：各种花束和价格
3. 关于我们：花店的故事
4. 联系方式：地址地图 + 微信二维码预留位风格要求：
清新文艺风格
配色用浅粉色和白色
要有微信和电话的联系入口
手机上也要好看（响应式设计）
用一个HTML文件搞定
Claude Code马上就开始干活了。等它生成完，你就有了一个完整的花店官网。
第二步：看看效果，开始调整
open index.html
打开一看，效果大概率不错，但肯定有想改的地方。直接说就好：
banner的背景色太深了，换成更浅的粉色。产品展示那里改成三列布局，每个产品卡片加个圆角阴影效果。
"关于我们"那部分加一个时间线，展示花店从2020年开店到现在的几个重要节点。
底部加一个"扫码关注微信公众号"的区域，留个图片占位。
第三步：加上真实的图片
AI生成的网站会用占位图。你需要把自己的照片替换上去。
把首页banner图片换成 banner.jpg，三个产品图片分别用 product1.jpg、product2.jpg、product3.jpg
图片小技巧：
第四步：加点高级功能
基础版做好了，想不想加点"高级"功能？一样只需要说一句话。
加一个轮播图：
首页banner改成轮播图，放3张图片自动切换，每3秒换一张
加一个在线预约：
加一个简单的预约表单，客户填姓名、电话、预约时间、备注，点击提交后显示"预约成功，我们会尽快联系您"
加微信跳转：
右下角加一个浮动的微信咨询按钮，点击后弹出微信二维码图片
第五步：部署上线
做好了不部署等于白做。用Vercel免费部署，3分钟搞定：
Vercel会给你一个免费域名，类似 huajiaji.vercel.app。如果你有自己的域名（比如花了几十块买的 .com 域名），也可以绑上去。
> 不会用GitHub和Vercel？别急，我们有专门的部署教程，手把手教你。
不同行业的模板参考
虽然上面用花店举例，但方法通用。跟AI描述的时候改一下就行：
奶茶店：
做一个奶茶店官网，活泼可爱风格，配色用橙黄色系。首页要有招牌饮品展示、新品推荐、门店地址。
摄影工作室：
做一个摄影工作室官网，高级感，暗色背景，大图展示。要有作品集画廊、服务套餐、预约拍摄表单。
家教/培训：
做一个家教服务官网，简洁专业风格。展示科目、老师介绍、学员评价、在线咨询。
常见问题
Q：做完的网站在手机上看着乱怎么办？
跟AI说：
手机上显示不正常，帮我修复响应式布局。AI会自动适配。Q：我想改文字内容但不想每次都用AI
用Cursor打开文件，直接找到文字改就行。HTML里的文字都是明文的，一看就知道在哪。
Q：能不能加个后台管理？
简单的静态官网不需要后台。如果你真的需要经常更新产品，可以考虑用OpenClaw搭一个带后台的版本。
总结
给小店做官网这件事，从"花几千块找人做"变成了"自己花一下午免费做"。关键就是：
去试试吧！做完了发到咱们社区，让大家也看看你的小店。