YT 学习笔记

一条 brief 拉出整站+CRM:Claude Code 技能+Semrush MCP 实战

21分钟阅读下载 MD

封面

Income stream surfers · 12:57 · 发布 2026-07-08 · 199次观看(截至抓取) · 观看原视频

主旨

博主把”为任一商家建站 + 内置 CRM + Stripe 收款”的全流程打包成一个 Claude Code Skill,只需一段 business brief,搭配 Next.js + Convex + Clerk + Stripe + Vercel 五件套和 4 类 API 钥匙,再装上 Semrush MCP 注入真实 SEO 关键词,就能在 Sonnet 5 Low 档下 5 分钟内端到端跑出”能收 lead、能改 pipeline、能开 Stripe 收款链接”的可上线路面。

核心论点

  1. 整站搭建被 skill 化——一个 Claude Code Claude Code Skill 把营销站、表单、CRM、Stripe 整合,从一段 business brief 跑出全栈产品。(→ 详解1)
  2. 5 组件栈通过 env 变量自动拼装——Next.js + Convex + Clerk + Stripe + Vercel 五个服务由 env 串接,集成代码无需手写。(→ 详解2)
  3. 只需 4 类钥匙即可启动——Stripe(可发布 + 私钥)、Clerk(可发布 + 私钥 + JWT issuer)、Convex(deploy key + Cloud URL),Vercel 走 CLI 登录不占 env。(→ 详解3)
  4. Clerk→Convex 的 JWT 模板名必须小写 convex——大写 C 直接挂,是反复出现的事故点。(→ 详解4)
  5. 最低门槛组合是空会话 + Semrush MCP + Sonnet 5 Low——故意挑最差档模型,5 分钟跑出可上线路面以证明下限。(→ 详解5)
  6. lead 端到端在 Low 模式就打通——表单 → CRM inbox → 改 stage → 创建 Stripe 支付链接 → CSV 导出 → pipeline 按 lead value 重排。(→ 详解6)
  7. 唯一可见短板是外观——Sonnet 5 Low 输出”the worst website ever”是实情,可由 Opus 4.8 或 Vibe Coding 风格的 Stitch 设计稿升级,功能与 SEO 本身已合格。(→ 详解7)

知识点详解

1. 一条 brief 拉出整站+CRM:skill 定位与产物清单 00:09 / 00:12

博主把这个 skill 的定位说得很直白:“I’ve stripped this down. I’ve put it into a skill that will generate an entire website and a CRM for any business in one short brief.”——一段 business brief 进去,整站 + CRM 出来。产物清单由四块组成:

  • 营销站:home、about、service、contact 四类页面,每页独立 SEO、Open Graph、XML sitemap、favicon、响应式——00:28 “About, service, contact page SEO, open graph, site map, XML, favicon, everything, responsive”。
  • Lead 表单 + 提交后的 CRM 收件箱:lead capture 表单落数据后,登录保护的 CRM dashboard 立即可见——00:37 “login-protected CRM dashboard”。
  • Lead 流水线:inbox 视图、stage(new / contacted / 等)、lead value 数值、pipeline 重排、CSV 导出。
  • Stripe 收款:在 lead 上”Create a payment link”直接生成可收单的支付 URL——00:43 “Stripe payments”。

这个 skill 不是单点工具,而是把五件套默认串好的”成站模板”;Convex、Stripe 与 CRM dashboard 的集成是 skill 自带,使用者不必手写桥接代码——00:52 “Convex, Stripe and the CRM dashboard is kind of integrated automatically”。

2. 技术栈与启动钥匙清单:Next.js + Convex + Clerk + Stripe + Vercel 00:47 / 00:56

栈分两类:前端框架与后端 + 鉴权 + 收款 + 部署。

  • 前端框架:视频里用的是 Next.js(可换 Astro,Next.js 选它只是因为做 CRM dashboard 更顺)— 00:56 “we’re going to be using Next.js, not Astro. You can use Astro if you want. I’m just going to be using Next.js because uh it’s a little bit easier to have like a CRM dashboard”。
  • 后端 + 鉴权 + 收款 + 部署:Convex(实时数据库 + 后端函数)、Clerk(鉴权)、Stripe(支付)、Vercel(部署)— 00:48 “using Convex, Clerk, Stripe, and then Vercel to launch”。

Vercel 这一项不占 env——博主自己已经登录过 Vercel CLI,所以只需 vercel 一句命令即可发布,提示词里直接写”Vercel token: just use the CLI I’m logged in”——01:09 “I have the Vercel CLI, the terminal, already set up”。

3. 启动提示词 + 4 类 API 钥匙的填法 00:90 / 01:15 / 01:41

启动流程是”复制 prompt → 填 business 信息 → 填 env → 粘贴给 Claude Code”。Prompt 的三步骨架:(1) git clone repo + cp 到 ~/.claude/skills/site-crm-builder;(2) 读 SKILL.md 严格按它走;(3) 注入 business brief(business 名、niche、Services、Contact、Brand 颜色、可选”我卖什么 + 价格”、admin 登录邮箱)。注意 Services 字段博主写的是”infer from niche / Semrush”——把这一行让 skill 自己去 Semrush MCP 取,而不是手填服务清单——02:06 “infer from niche / Semrush”。

4 类钥匙各对应 1-2 行 env 变量,完整填法在 description 里(博主直接粘了自家测试账号值):NEXT_PUBLIC_CONVEX_URL、CONVEX_DEPLOY_KEY、NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY、CLERK_SECRET_KEY、CLERK_JWT_ISSUER_DOMAIN、STRIPE_SECRET_KEY、NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY、VERCEL_TOKEN(可空,走 CLI)。所有变体都给出”do all the CLI/build/deploy work yourself, don’t make me run commands”——让 skill 跑完所有命令,用户只贴钥匙——01:45 “all of these commands for you”。

4. Clerk JWT 模板小写 convex 坑 + Convex 两件套 03:19 / 03:37 / 03:44 / 04:01 / 04:17

这一节是技术上的两个反复出现的易错点。Clerk 端:在 Clerk 控制台点 configure → JWT templates → add new template,弹出的名字输入框必须写全小写 convex,不能写大写 C——03:44 “Convex here has to be a lower c, lower case c. So if it’s not working, then that’s the reason”。之后拿到两样:一个 template 自身的配置(由 skill 用),以及从 Clerk → API keys → Endpoints 拷出的 issuer domain——03:50 “issuer domain”。

Convex 端:settings 里有 deploy key 与 cloud URL 两件套,都要拷——04:01 “deploy key that we actually need”。生成 deploy key 时”select all + no expiration”是博主做法(无过期)— 04:17 “create deploy key. Select all. No expiration”。

5. 进 Claude Code:空会话 + Semrush MCP + Sonnet 5 Low 04:43 / 04:47 / 04:53 / 05:14 / 05:20

启动 Claude Code 后三件事定下限:空会话、只装 Semrush MCP、选 Sonnet 5 Low。

  • 空会话是为了让 skill 真正自解释触发,不被历史 context 干扰——04:43 “fresh chat”。
  • 只装 Semrush MCP:Claude Code 这次启动时只挂了这一个 MCP,工具面干净——04:47 “All it has right now is access to the Semrush MCP”。
  • Sonnet 5 Low 是博主主动选的最差档,理由是:在最低档跑通就证明上限很强——04:53 “I’m going to use low and see how this actually does on low mode, but just remember that this is on low”。

粘贴 prompt 之后,博主在主 prompt 前又加一句”do a deep dive using the Semrush MCP to find key terms and seed terms for the business”——让 Semrush MCP 先于代码生成跑一遍关键词研究——05:20 “I want you to do a deep dive using the Semrush MCP to find key terms and seed terms”。

6. Semrush 关键词研究 + Ballinderry Park 实证 05:48 / 05:58 / 07:33 / 08:01 / 08:11 / 08:26

Semrush 这一段是本片的”主张承重段”。工具定位:博主用三个轴描述它——“an all-in-one modern search solution which is both traditional SEO and also AI driven SEO built into one handy subscription”——传统 SEO 与 LLM-driven SEO 同一订阅,LLM tracking 是新增能力——05:58 “all-in-one modern search solution”。价格 / 价值:博主同时强调”not too expensive”— 06:52 “they have made a really really good tool and it’s not too expensive either”。

Ballinderry Park 实证:博主在 7-8 分钟区间连续放出自家用 Semrush 跑出来的成果作为”我用过这工具”的背书——“hot tub holidays in Ireland”拿到可观流量(本片举例)— 08:11,以及 Ballinderry Park 项目的”elopement”页也是 Semrush 给的种子词——08:14。结论他用了一句话直接收口——“These were completely thought of by Semrush plus Claude code”— 08:29,并立刻接”a really really good combination”— 08:31,连说”highly recommend Semrush”— 08:33。

回到本次 build:Claude Code 看到 “Plumbing Service in Galway”,会识别 Galway 在爱尔兰,把研究收窄到爱尔兰本地——07:33 “Galway is obviously Ireland so it’s specifically doing research on Ireland”。

7. 5 分钟实测:lead 表单 → CRM → Stripe 链接 → CSV / pipeline 09:41 / 09:43 / 10:04 / 10:20 / 10:22 / 10:32 / 10:46 / 11:02 / 11:07

实测段是本片证据链,博主按时间顺序把端到端跑过一遍。T+ 0:build 完成 + 立刻进表——09:41 “Imagine that you can offer this service to a business”;09:43 “that was under 5 minutes”。T+ 0:01:填表(Hamish + 随机电话 + Gmail + 简单需求)— 09:51 → 09:56 “send inquiry”。T+ 0:02:CRM 立刻显示这条 lead——10:04 “Fully working lead gen”;10:22 “I have a fully working CRM”。

小修小补:中间有一个 Convex 报错,博主当场改掉后再回来就能看到 lead——10:17 “There’s a little Convicts issue right here” → 10:20 “we can actually see the lead right here”。Stage 流转:new → contacted 等可改——10:28 “we can say new, contacted, right?”。Stripe 支付链接:“Create a payment link” 直接生成 hosted URL——10:32 “Create a payment link. Don’t know what that’s going to do, okay? Apparently, that creates a Stripe payment link”。Lead value 字段:博主手动设 €10000,期望它同步进 pipeline 排序——10:46 “this is worth 10000 and then save that”,但实测当时没同步过来,他承认”there’s a little bit of work to do here”— 10:42。CSV 导出 + pipeline 按 lead value 排序的勾连讲得很清——“You can export as CSV if you want to import it into another CRM. The pipeline gets updated according to the lead value”— 11:02 → 11:07。

8. 生成的 SEO + 外观短板 + 升级到 Opus 4.8 / Stitch 11:26 / 11:28 / 11:33 / 11:40 / 11:57 / 12:05 / 12:14

SEO 这块真的合格:博主自检后说”the SEO is actually pretty good. I did check”— 11:26,并把 Semrush 给出的三组关键词全部报出:emergency plumber Galway(高紧急意图)— 11:28、boiler service(Galway 多用 gas boiler 故障率高)— 11:33、drain and blocking(本地高频)— 11:40。这些词都是 Semrush 从 niche 推断出的本地化种子,没有 LLM 在缺数据时的编造。

外观是唯一可见短板:博主预先说”This is Sonnet 5 on Low. So, the look and feel is pretty bad”— 09:23,并在生成后再次认账”this is the worst website I’ve ever seen”— 11:57。修复路径他给了两条:(1) 换模型——“if you ran this with Opus 4.8, it’d be a lot better”— 10:44;(2) 先用 Stitch 出设计稿(首页 + 各 section 视觉),再回到本流程跑——“Try doing this by doing a design with Stitch. I’ll probably do this in another video, but do a design with Stitch, make it look like you want it to look, make the homepage, then do this entire process, guys. I promise you, you will not be let down”— 12:05 → 12:14。

可执行步骤

  • git clone https://github.com/IncomeStreamSurfer/site-crm-builder.git /tmp/site-crm-builder,cp 到 ~/.claude/skills/site-crm-builder,读 SKILL.md。
  • 在 Stripe / Convex / Clerk 各创一个项目(test mode 也行),从各自的控制台拷 publishable、secret、Convex 的 deploy key + Cloud URL、Clerk 的 JWT issuer domain。
  • Clerk 端点 configure → JWT templates → add new template,名字必须小写 convex,否则后续 Convex 报 token 验签失败。
  • 准备一段 business brief(商家名 + niche + Services + Contact + 可选 admin 邮箱),Services 行可写 “infer from niche / Semrush” 让 skill 自取。
  • 在 Claude Code 开 fresh chat,只挂 Semrush MCP,选 Sonnet 5 Low(也可以升到 Opus 4.8 试外观)。
  • 在主 prompt 之前加一句”先做 Semrush MCP deep dive,取出该 niche 的 key terms + seed terms”,再走 SKILL.md 流程。
  • 测试 lead 表单 → 收件箱显示 → 改 stage → 创 Stripe 支付链接 → 验 CSV 导出。
  • 如外观不满意,先用 Stitch 出一份设计稿(尤其是 homepage),再回到本流程把代码生成跑一次。

关联

  • Claude Code Skill — 互补:本片是 skill = “封装全栈搭建流程”这一抽象概念的具体落地样例——5 分钟拉出整站 + CRM,4 类 env 钥匙 + Semrush MCP 关键词研究是 skill 自带的”input slot”。
  • MCP — 互补:本片展示了”用 Semrush MCP 注入真实 SEO 关键词”的具体落地路径——Claude Code 启动时只挂这一个 MCP,由它在代码生成前先跑关键词研究。
  • Vibe Coding — 进阶:本片是同频道”vibe coding 跑业务”系列的最新一环,先读 Vibe Coding 看清”不看代码、跑通即可”的边界条件,再回看本片理解 Sonnet 5 Low 下 vibe coding 的能力下限。
  • 进阶:Claude Code SEO：连接器 + Semrush MCP + 免费 Keyword Planner 三件套挖词造页 首见 Semrush MCP,把它用于”给已有站挖竞品词造新页”;本片把同一 MCP 挪到”给全新商家从零建站”场景,是同一数据源在不同项目起点的复用。

一手来源与延伸

术语

  • Stripe Payment Link:Stripe 提供的”无代码 hosted 支付 URL”,在 lead 上点一下即生成,无需嵌 Checkout。
  • Sonnet 5 Low:Claude Sonnet 5 的低算力档,本片故意选最差档以测试下限。
  • Opus 4.8:Claude Opus 4.8,本片作为 Sonnet 5 Low 之上”外观明显更好”的对照档。
  • Stitch:Google 的 AI 界面设计工具,本片建议用其出设计稿后再接回 skill 流程。
  • Issuer Domain:Clerk 在 JWT 中标识 token 来源的子域,Convex 验签时按它定位公钥。
  • Convex Deploy Key:Convex 部署授权用的 secret key,区别于运行时用的 Cloud URL,两者都需填 env。

金句

“Imagine that you can offer this service to a business. Now, I want you guys to know that that was under 5 minutes.” — 09:40 → 09:45

一句话把”5 分钟交付”这件事从技术细节升格成 agency 价值主张,适合做标题/钩子。

“I have a fully working CRM, fully working lead gen, which is absolutely crazy.” — 10:22

端到端跑通是本片唯一硬证据,这条直接锁死”最低档也能跑通全链路”。

“Try doing this by doing a design with Stitch … I promise you, you will not be let down.” — 12:05 → 12:14

把”外观差”的短板显式给出修复路径,不是简单甩锅——这是评估”skill 成熟度”时该打高分的诚实信号。

立场与利益

利益证据:description 里有 Semrush 14 天免费试用 affiliate 链接(https://semrush.sjv.io/JkmbYa,sjv.io 是 ShareASale 旗下 tracking 域名),博主与 Semrush 有付费合作关系;此外 GitHub repo 链接是个人频道引流。

按主张分三档:

  • 与利益同向(待印证):“I do highly recommend Semrush” 08:33、“they have made a really really good tool and it’s not too expensive” 06:52、以及 Ballinderry Park 的”hot tub holidays / elopement 流量”案例 08:11 08:14——这些是直接帮 Semrush 引流的样板,采信前需外部印证。
  • 利益中性:5 分钟从 brief 拉出整站 + CRM 的实测演示 09:43、4 类 API 钥匙 + 5 组件栈的搭建流程 01:15 01:28、lead → CRM → Stripe 端到端跑通 10:04——这些是技术性主张,使用者可独立复现。
  • 与利益反向(可信度最高):“the look and feel is pretty bad” 09:23、“this is the worst website ever” 11:57、“there’s a little bit of work to do here” 10:42——博主主动承认 Sonnet 5 Low 输出的局限、推荐 Opus 4.8 作为对照,这种”先打最差档再承认差”的演示是反向于”卖 skill 给观众”的诚实信号,理应单独标出。

价值定位

  • 适合谁:已经有 Claude Code 基础,想批量给中小商家/agency 客户交付”营销站 + CRM + 收款”成品的开发者;以及不想为每个新商家重写同一套五件栈集成的团队。
  • 解决什么:把”为任一商家从零拼装 Next.js + Convex + Clerk + Stripe + Vercel 五件套”这件事压成 5 分钟,且用 skill 形式一次封装反复复用——商业模式上适合”接 1-2k €/客户”的小型网站 + CRM agency。
  • 认知 vs 实操:本片是纯实操样板——除了 Skill 概念外没有抽象方法论,直接拿走 prompt + repo + 跑通流程;但要注意 Sonnet 5 Low 输出的外观质量不在”产品级”,要进生产要么换 Opus 4.8、要么先跑 Stitch 设计稿。
  • 与 Claude Code Skill 重叠时:本片是该概念在”全栈 + 真实第三方服务”方向的最大样例,与 MCP 配套展示了 skill + 单 MCP 的最小可行工作面。

自检问题

  1. 这个 skill 一条 brief 拉出的产物清单包含哪几块? 答案:营销站(home/about/services/contact + per-page SEO、Open Graph、sitemap、favicon、响应式)+ 登录保护的 CRM dashboard(leads inbox、stage、lead value、pipeline、CSV 导出)+ Stripe 收款。锚点:00:28 00:37 00:43。
  2. 5 组件栈是哪五个,选 Next.js 而不是 Astro 的原因? 答案:Next.js + Convex + Clerk + Stripe + Vercel;选 Next.js 不是因为框架之争,而是因为”it’s a little bit easier to have like a CRM dashboard”——把 CRM 仪表盘和营销站合在同一仓库更顺。锚点:00:48 00:56。
  3. Clerk 端配置 JWT 模板时最容易踩的坑是什么? 答案:模板名必须全小写 convex,大写 C 会直接挂。锚点:03:44。
  4. 5 分钟实测里 lead 从表单提交到 CRM 显示经过了哪几步?中间出了什么小状况? 答案:填表(姓名+电话+邮箱+需求)→ send inquiry → 第一次看 CRM 是空的(有个 Convex 报错)→ 改掉 Convex 小问题 → 再次进入 CRM 就能看到 lead,标记 stage(new / contacted),点 Create a payment link 拿到 Stripe hosted URL。锚点:09:51 09:56 10:17 10:20 10:22 10:32。
  5. 博主承认的 Sonnet 5 Low 唯一明显短板是什么?给出的两条升级路径? 答案:唯一明显短板是外观(“the look and feel is pretty bad”、“the worst website ever”);两条升级路径:(1) 换 Opus 4.8 重新跑;(2) 先用 Stitch 出设计稿(尤其 homepage),再回到本流程跑。锚点:09:23 11:57 10:44 12:05。

关系图谱

反向链接