副业接单第一步：用AI工具快速生成5个可演示的网页作品（附报价话术）

大家好，我是RD！很多零基础学员学会AI编程后卡在最后一步：怎么让客户相信你能做？答案不是考证书，而是「3分钟内拿出可演示的作品」。今天我们就用AI组合拳（Cursor主控+Claude辅助），批量生成5个高转化率的接单网页，并配套客户话术——让你第一次沟通就拿下定金。

🎯 核心策略：不做「完美作品」，做「可信原型」
客户不需要你写10万行代码，只需要看到：1）界面像他想要的，2）功能能跑通，3）你能听懂他的行业术语。

✅ 准备工作（5分钟）

安装Cursor（已装跳过）

收集5个典型需求（我们用真实案例）：

① 美容院预约页（含服务列表、时间选择器、微信扫码支付入口）
② 本地奶茶店外卖页（菜单轮播、满减规则、电话一键拨打）
③ 教培机构课程页（3门课卡片、师资介绍、试听课表单）
④ 摄影工作室作品集（网格画廊、滤镜切换、预约咨询浮窗）
⑤ 社区团购团长页（本周爆款、下单入口、佣金说明）

✅ Step 1：用Claude批量生成HTML（10分钟）
在claude.ai中，一次性发送5个Prompt（用---分隔），例如：

生成美容院预约页HTML：含顶部Logo、4个服务项目（面部护理/身体按摩/美甲/脱毛）、每个项目有价格和‘立即预约’按钮、底部微信二维码图片（用placeholder.co生成）、点击按钮弹出‘已收到预约，客服将在10分钟内联系您’
---
生成奶茶店外卖页HTML：顶部横幅‘夏日第二杯半价’、3款主推饮品卡片（含图片占位、价格、‘加入购物车’按钮）、悬浮‘📞 138-XXXX-XXXX’按钮、底部‘满30减5’规则说明

Claude会返回5段HTML。分别保存为beauty.html, milktea.html...（注意命名规范）。

✅ Step 2：用Cursor统一升级（8分钟）
在Cursor中打开文件夹 → 全选5个HTML → 右键 → Ask Cursor → 输入：

给所有文件添加：
1. 顶部统一导航栏：左侧Logo文字‘您的品牌’，右侧‘首页’‘服务’‘联系我们’
2. 底部版权栏：‘©2024 [您的名字] | 专注本地商家数字化’
3. 所有按钮增加hover效果：背景色变深、有0.2s过渡
4. 保存修改，不要解释

Cursor会批量修改所有文件。✅ 检查任一页面，双击打开，确认导航栏和按钮生效。

✅ Step 3：交付与报价（7分钟）

把5个HTML文件压缩为client-demo.zip → 发给客户说：

> “王总您好！根据您提到的美容院需求，我快速做了个可交互原型（见附件）。您点开beauty.html就能体验预约流程，所有按钮都有反馈。如果您确认风格，我可在3天内交付完整上线版（含手机适配+微信支付对接），报价¥1800。首付款50%启动，满意再付尾款。”

附赠交付清单（发客户前自己打印）：

▪️ 5个独立HTML文件（免服务器，客户双击即用）
▪️ 所有图片已内联或托管（无外链失效风险）
▪️ 响应式设计（PC/手机均正常显示）
▪️ 提供1次免费小修改（如改文字/颜色）

💡 关键洞察：客户买的不是代码，是「确定性」。当你能3分钟生成可运行原型，你就已经超越90%只会空谈的接单者。

📌 进阶动作：

把beauty.html部署到Vercel，获得链接如beauty-rd.vercel.app → 发客户：“这是在线演示版，随时访问”

用Cursor生成「客户管理后台」：基于beauty.html，增加管理员登录页和预约订单列表页 → 报价翻倍

你现在的作品集，不是静态PDF，而是5个正在呼吸的网页。人人都是程序员——更是能交付价值的数字工匠。