一句话结论
这个案例的目标不是做复杂系统，而是用 Claude Code 做一个客户能打开、能看懂、能预览的外贸 AI 工作流 Demo 页面，拆成客户开发、客户研究、询盘回复、报价跟进、人工审核、联系方式 6 个模块。
适用场景
- 你想给外贸客户展示 AI 能做客户开发、询盘回复、报价草稿、跟进提醒
- 你不会代码，但想自己做一个可点击的演示页面发给客户看
- 你手里只有几个想法和文案，不知道怎样变成页面
- 你想练习 Claude Code 从需求到上线的完整项目流程
常见现象
- 只会让 Claude Code 写「做个外贸 AI 页面」，结果页面很空
- 做出来像营销页，但没有具体流程、案例和可复制提示词
- 按钮没有去处，客户看完不知道下一步联系谁
- 本地能打开，上线后图片、路由或样式出问题
- 你不知道怎么判断这个 Demo 算不算完成
原因解释
- Demo 项目最重要的是讲清场景，不是一次做出真正的 CRM、邮箱自动化和数据库
- 小白要先让 Claude Code 做静态演示页，把业务流程、输入输出、人工审核点展示出来
- Claude Code 需要明确素材：目标客户、6 个模块、每个模块的输入、AI 输出、人工确认点、联系入口
- 项目能不能交付，取决于验收清单：页面可打开、流程可理解、按钮可点击、构建通过、线上可访问
解决步骤
- 先定项目范围：只做一个外贸 AI 工作流 Demo 页面，拆成客户开发、客户研究、询盘回复、报价跟进、人工审核、联系方式 6 个模块，不接真实邮箱、不接 CRM、不保存客户数据。
- 准备 6 个模块的素材：每个模块写一句业务痛点、一个输入示例、一个 AI 输出示例、一个人工确认点。
- 让 Claude Code 先输出页面结构：首屏、流程总览、6 个模块卡片、可复制提示词区、联系入口。
- 确认结构后再允许它写页面代码或修改静态站文章数据，不要一开始让它自由发挥。
- 第一版完成后按验收清单逐项检查：标题清楚、客户看得懂、6 个模块完整、按钮有去处、手机能看、联系方式正确。
- 让 Claude Code 运行构建命令，并抽查生成后的 HTML 能搜到核心标题和模块文案。
- 上线后验证主域名、预览域名、sitemap；把链接发给客户前再用手机打开一次。
可复制命令
# 给 Claude Code 的需求稿
我不会代码，请你带我做一个可给客户预览的外贸 AI 工作流 Demo 页面。
项目目标：展示 AI 如何帮助外贸团队做客户开发、客户研究、询盘回复、报价跟进、人工审核和联系方式。
目标用户：外贸老板、业务员、SOHO 外贸从业者。
页面类型：静态 Demo 页面，不需要登录、不需要数据库、不接真实邮箱。
必须包含：
1. 首屏：一句话说明这个 Demo 能解决什么问题。
2. 流程图：客户开发 → 客户研究 → 询盘回复 → 报价跟进 → 人工审核 → 联系方式。
3. 6 个模块卡：客户开发、客户研究、询盘回复、报价跟进、人工审核、联系方式。
4. 每个模块给输入示例、AI 输出示例、人工确认点。
5. 可复制提示词区。
6. 联系入口：zhemuy@gmail.com。
先不要写代码，请先输出页面结构和内容清单。
# 让 Claude Code 开始实现
请按刚才的页面结构做第一版。
要求：
1. 页面要适合小白客户预览，不要写太多技术名词。
2. 每个模块都要有「客户痛点」「AI 做什么」「人工确认什么」。
3. 所有按钮必须有去处：联系按钮用 mailto:zhemuy@gmail.com。
4. 不接真实 API，不保存用户数据，只做静态演示。
5. 移动端优先，手机打开不能拥挤。
6. 做完后运行项目构建命令，并告诉我预览地址或生成文件位置。
# 用验收目标收口（直接当普通提示词发送，或写进 CLAUDE.md）
本轮完成条件——外贸 AI 工作流 Demo 第一版：
1. 页面首屏能让外贸客户 5 秒内看懂价值。
2. 6 个模块卡完整展示痛点、AI 动作、人工确认点。
3. 至少 4 条可复制提示词。
4. 联系入口可点击，并指向 zhemuy@gmail.com。
5. npm run build 或项目对应构建命令通过。
6. 输出上线前检查清单。
# 让 Claude Code 做上线前验收
请只做验收，不要新增功能。
检查：
1. 首页 / Demo 页能打开。
2. 手机宽度下卡片不挤、文字不溢出。
3. 所有按钮都有链接。
4. 页面没有占位英文、假数据、空卡片。
5. 联系邮箱是 zhemuy@gmail.com。
6. 构建命令通过。
7. 如果是静态站，sitemap 包含新页面或新文章。
输出：通过项、已修复项、仍需人工确认项。
仍然不行怎么办
- Claude Code 做成了空泛营销页：让它把每个卡片改成「痛点 / AI 动作 / 人工确认 / 输出示例」四段。
- 页面太复杂：砍掉后台、登录、CRM 对接，只保留静态流程演示。
- 客户看不懂：要求它把所有技术词替换成业务语言，例如把 RAG 改成「从资料里找答案」。
- 按钮没反应：统一改成 mailto 联系入口或站内详情链接，不要留空按钮。
- 上线失败：先确认构建输出目录和 Cloudflare Pages 项目名，不要部署到其他站点。
6 个模块拆解：从客户开发到联系方式
这个 Demo 把外贸 AI 工作流拆成 6 个独立模块，每个模块都是一张卡片。静态 Demo 不接真实 CRM、不接邮箱、不保存客户数据，只展示业务流程和 AI 能力。
- 模块 1 客户开发：输入目标市场、行业、产品优势；AI 输出客户画像、搜索关键词、LinkedIn/展会/B2B 平台搜索策略、开发信角度。人工确认：筛选有效线索，排除不匹配客户。
- 模块 2 客户研究：输入客户官网或公司名；AI 输出主营产品、年采购量估算、决策人猜测、破冰点和风险点。人工确认：核实关键数据，判断是否值得跟进。
- 模块 3 询盘回复：输入客户询盘原文；AI 输出需求清单、缺失信息提示、专业英文回复草稿。人工确认：检查价格承诺、交期承诺、技术参数是否准确。
- 模块 4 报价跟进：输入报价单要点和客户反馈；AI 输出跟进邮件、让步策略、下次联系时间建议。人工确认：价格底线、付款条件、特殊条款必须人工拍板。
- 模块 5 人工审核：展示哪些环节必须人工介入——价格、合同、售后承诺、客户隐私、批量发送。强调 AI 只出草稿，人工做最终决定。
- 模块 6 联系方式：放邮箱、微信、预约链接。说明可以定制成客服 Agent、知识库 Agent、自动回复 Bot。
每个模块的卡片结构
- 标题：一句话说清这个模块解决什么业务痛点。
- 输入示例：客户实际会提供什么信息（用具体例子，不要写抽象描述）。
- AI 输出示例：AI 会生成什么内容（用真实业务语言，不要堆技术名词）。
- 人工确认点：哪些内容必须人工检查后才能发出去。
- 不做什么：明确标注这个模块不接真实 API、不自动发送、不保存数据。
验收清单
- 首屏：外贸客户 5 秒内看懂这个页面是做什么的，不需要你在旁边解释。
- 6 个模块卡片完整：每张卡都有痛点、输入、输出、人工确认点。
- 可复制提示词：至少 4 条，分别对应客户开发、客户研究、询盘回复、报价跟进。
- 联系入口可点击：邮箱 mailto 链接正确，微信或预约链接有去处。
- 移动端可用：手机宽度下卡片不挤、文字不溢出、按钮能点。
- 无占位内容：没有 Lorem ipsum、假数据、空卡片、无效链接。
- 构建通过：npm run build 或项目对应命令通过，dist 里能搜到核心标题。
- 线上可访问：部署后主域名能打开，手机上也能正常浏览。
可复制提示词：客户开发
你是外贸业务助理。我的产品是：___
目标市场：___
产品优势：___
请输出：
1. 10 个客户搜索关键词（英文，适合 LinkedIn / Google / 展会名录）。
2. 3 个目标客户画像（公司类型、规模、采购特征）。
3. 3 个开发信角度（每个角度一句话核心卖点）。
4. 建议先从哪个渠道开始找客户，为什么。
注意：不要生成虚假公司名，只给搜索策略和模板。
可复制提示词：客户研究
请研究这个客户：___（公司名或官网链接）
输出：
1. 主营产品和业务范围。
2. 可能的年采购量级（根据公开信息估算）。
3. 决策人可能是谁（职位猜测）。
4. 破冰点：我们的产品和他们的需求有什么交集。
5. 风险点：可能不匹配的地方。
6. 建议的首次联系方式和话术角度。
如果信息不足，标注「需要进一步确认」，不要编造数据。
可复制提示词：询盘回复
客户询盘原文如下：
___
请输出：
1. 需求清单：客户要什么产品、什么规格、什么数量、什么交期。
2. 缺失信息：还需要问客户哪些问题才能报价。
3. 英文回复草稿：专业、简短、礼貌，不超过 150 词。
4. 回复里不要承诺具体价格和交期，只确认需求并提出澄清问题。
注意：价格、交期、付款条件必须人工确认后才能发送。
可复制提示词：报价跟进
报价情况：
- 产品：___
- 报价：___
- 客户反馈：___（例如嫌贵、没回复、要求降价、问了竞品）
请输出：
1. 跟进邮件草稿（英文，不降价也能推进沟通）。
2. 如果必须让步，建议让步方向（付款条件、交期、包装、样品）。
3. 下次联系时间建议。
4. 如果客户 7 天没回复，建议的 break-up 邮件。
注意：价格底线和最终让步必须人工拍板。
Claude Code 每一轮应该产出什么
- 第 1 轮：页面结构和 6 个模块内容清单，不写代码。
- 第 2 轮：完成静态页面第一版，6 个模块卡片都有内容。
- 第 3 轮：补齐真实业务文案、示例输入输出和可复制提示词。
- 第 4 轮：检查移动端、按钮、链接、邮箱、人工审核提示。
- 第 5 轮：构建并生成上线说明和交接文档。
静态 Demo 的边界：不做什么
- 不接真实 CRM 系统：不读写 HubSpot、Salesforce、Zoho 等平台数据。
- 不接真实邮箱：不自动发送邮件，所有邮件草稿只展示在页面上。
- 不保存客户数据：页面没有后端、没有数据库、不收集访客信息。
- 不自动执行：所有 AI 输出都标注「草稿，需人工确认」，不做自动化动作。
- 不做批量操作：不批量搜索客户、不批量发信、不批量跟进。
- 目的是展示能力和流程，让客户理解 AI 能帮什么忙，然后联系你做定制。
小白验收标准
- 你自己不用解释，客户打开页面也知道这个 Demo 是做外贸 AI 工作流。
- 客户能看到 6 个具体业务模块，而不是只看到一堆 AI 形容词。
- 每个模块都有输入和输出示例，客户能想象自己怎么用。
- 人工审核模块让客户放心：AI 不会自己乱发邮件、乱报价。
- 联系入口明确，邮箱正确，点击能弹出邮件客户端。
- 构建通过，线上地址能打开，手机上不乱。
这个案例可以复用到哪些项目
- 闲鱼客服 Agent Demo：把 6 个模块换成商品咨询、砍价应对、售后处理、自动回复、违规检测、人工升级。
- 知识库问答 Demo：把模块换成资料导入、问题检索、答案生成、来源引用、人工确认、反馈收集。
- 课程销售页 Demo：把模块换成课程大纲、适合人群、学习成果、试听体验、报名咨询、售后答疑。
- 企业内部工具 Demo：把模块换成表格整理、日报生成、客户资料清洗、跟进提醒、审批流程、数据导出。
上线后怎么继续迭代
- 第一天只发给 3 个熟悉客户，看他们能不能看懂、会不会问「这个怎么用」。
- 收集客户问得最多的问题，把它们加到 FAQ 模块。
- 如果客户想试用，再考虑接表单、Bot 或真实 API，但仍然保留人工审核环节。
- 不要一开始就做复杂后台，先用静态页面验证需求和付费意愿。
- 每次迭代都让 Claude Code 写清改动和验证结果，更新 progress.md。
还卡着？
可以把截图、日志、需求单或当前页面链接发到 zhemuy@gmail.com。