--- title: '一条 brief 拉出整站+CRM:Claude Code 技能+Semrush MCP 实战' video_id: gSFZIn4OTOQ url: https://youtu.be/gSFZIn4OTOQ title_en: "I Built a Claude Code Skill That Makes Websites Earning €13k/Month" channel: Income stream surfers published: 2026-07-08 duration: "12:57" topics: ["Claude Code 定制扩展", "MCP 与工具调用", "AI 编程与建站"] noted: 2026-07-09 value: A views: '199' --- [![封面](https://i.ytimg.com/vi/gSFZIn4OTOQ/maxresdefault.jpg)](https://youtu.be/gSFZIn4OTOQ) > Income stream surfers · 12:57 · 发布 2026-07-08 · 199次观看(截至抓取) · [观看原视频](https://youtu.be/gSFZIn4OTOQ) ## 主旨 博主把"为任一商家建站 + 内置 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-一条-brief-拉出整站crmskill-定位与产物清单-0009--0012|→ 详解1]]) 2. **5 组件栈通过 env 变量自动拼装**——Next.js + Convex + Clerk + Stripe + Vercel 五个服务由 env 串接,集成代码无需手写。([[#2-技术栈与启动钥匙清单nextjs--convex--clerk--stripe--vercel-0047--0056|→ 详解2]]) 3. **只需 4 类钥匙即可启动**——Stripe(可发布 + 私钥)、Clerk(可发布 + 私钥 + JWT issuer)、Convex(deploy key + Cloud URL),Vercel 走 CLI 登录不占 env。([[#3-启动提示词--4-类-api-钥匙的填法-0090--0115--0141|→ 详解3]]) 4. **Clerk→Convex 的 JWT 模板名必须小写 `convex`**——大写 C 直接挂,是反复出现的事故点。([[#4-clerk-jwt-模板小写-convex-坑--convex-两件套-0319--0337--0344--0401--0417|→ 详解4]]) 5. **最低门槛组合是空会话 + Semrush MCP + Sonnet 5 Low**——故意挑最差档模型,5 分钟跑出可上线路面以证明下限。([[#5-进-claude-code空会话--semrush-mcp--sonnet-5-low-0443--0447--0453--0514--0520|→ 详解5]]) 6. **lead 端到端在 Low 模式就打通**——表单 → CRM inbox → 改 stage → 创建 Stripe 支付链接 → CSV 导出 → pipeline 按 lead value 重排。([[#6-semrush-关键词研究--ballinderry-park-实证-0548--0558--0733--0801--0811--0826|→ 详解6]]) 7. **唯一可见短板是外观**——Sonnet 5 Low 输出"the worst website ever"是实情,可由 Opus 4.8 或 [[Vibe Coding]] 风格的 Stitch 设计稿升级,功能与 SEO 本身已合格。([[#7-5-分钟实测lead-表单--crm--stripe-链接--csv--pipeline-0941--0943--1004--1020--1022--1032--1046--1102--1107|→ 详解7]]) ## 知识点详解 ### 1. 一条 brief 拉出整站+CRM:skill 定位与产物清单 [00:09](https://youtu.be/gSFZIn4OTOQ?t=9) / [00:12](https://youtu.be/gSFZIn4OTOQ?t=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](https://youtu.be/gSFZIn4OTOQ?t=28) "About, service, contact page SEO, open graph, site map, XML, favicon, everything, responsive"。 - **Lead 表单 + 提交后的 CRM 收件箱**:lead capture 表单落数据后,登录保护的 CRM dashboard 立即可见——[00:37](https://youtu.be/gSFZIn4OTOQ?t=37) "login-protected CRM dashboard"。 - **Lead 流水线**:inbox 视图、stage(new / contacted / 等)、lead value 数值、pipeline 重排、CSV 导出。 - **Stripe 收款**:在 lead 上"Create a payment link"直接生成可收单的支付 URL——[00:43](https://youtu.be/gSFZIn4OTOQ?t=43) "Stripe payments"。 这个 skill 不是单点工具,而是把五件套默认串好的"成站模板";Convex、Stripe 与 CRM dashboard 的集成是 skill 自带,使用者不必手写桥接代码——[00:52](https://youtu.be/gSFZIn4OTOQ?t=52) "Convex, Stripe and the CRM dashboard is kind of integrated automatically"。 ### 2. 技术栈与启动钥匙清单:Next.js + Convex + Clerk + Stripe + Vercel [00:47](https://youtu.be/gSFZIn4OTOQ?t=47) / [00:56](https://youtu.be/gSFZIn4OTOQ?t=56) 栈分两类:**前端框架**与**后端 + 鉴权 + 收款 + 部署**。 - **前端框架**:视频里用的是 Next.js(可换 Astro,Next.js 选它只是因为做 CRM dashboard 更顺)— [00:56](https://youtu.be/gSFZIn4OTOQ?t=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](https://youtu.be/gSFZIn4OTOQ?t=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](https://youtu.be/gSFZIn4OTOQ?t=69) "I have the Vercel CLI, the terminal, already set up"。 ### 3. 启动提示词 + 4 类 API 钥匙的填法 [00:90](https://youtu.be/gSFZIn4OTOQ?t=90) / [01:15](https://youtu.be/gSFZIn4OTOQ?t=75) / [01:41](https://youtu.be/gSFZIn4OTOQ?t=101) 启动流程是"复制 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](https://youtu.be/gSFZIn4OTOQ?t=126) "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](https://youtu.be/gSFZIn4OTOQ?t=105) "all of these commands for you"。 ### 4. Clerk JWT 模板小写 `convex` 坑 + Convex 两件套 [03:19](https://youtu.be/gSFZIn4OTOQ?t=199) / [03:37](https://youtu.be/gSFZIn4OTOQ?t=217) / [03:44](https://youtu.be/gSFZIn4OTOQ?t=224) / [04:01](https://youtu.be/gSFZIn4OTOQ?t=241) / [04:17](https://youtu.be/gSFZIn4OTOQ?t=257) 这一节是技术上的两个反复出现的易错点。**Clerk 端**:在 Clerk 控制台点 configure → JWT templates → add new template,弹出的名字输入框必须写全小写 `convex`,**不能写大写 C**——[03:44](https://youtu.be/gSFZIn4OTOQ?t=224) "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](https://youtu.be/gSFZIn4OTOQ?t=230) "issuer domain"。 **Convex 端**:settings 里有 deploy key 与 cloud URL 两件套,都要拷——[04:01](https://youtu.be/gSFZIn4OTOQ?t=241) "deploy key that we actually need"。生成 deploy key 时"select all + no expiration"是博主做法(无过期)— [04:17](https://youtu.be/gSFZIn4OTOQ?t=257) "create deploy key. Select all. No expiration"。 ### 5. 进 Claude Code:空会话 + Semrush MCP + Sonnet 5 Low [04:43](https://youtu.be/gSFZIn4OTOQ?t=283) / [04:47](https://youtu.be/gSFZIn4OTOQ?t=287) / [04:53](https://youtu.be/gSFZIn4OTOQ?t=293) / [05:14](https://youtu.be/gSFZIn4OTOQ?t=314) / [05:20](https://youtu.be/gSFZIn4OTOQ?t=320) 启动 Claude Code 后三件事定下限:**空会话、只装 Semrush MCP、选 Sonnet 5 Low**。 - **空会话**是为了让 skill 真正自解释触发,不被历史 context 干扰——[04:43](https://youtu.be/gSFZIn4OTOQ?t=283) "fresh chat"。 - **只装 Semrush MCP**:Claude Code 这次启动时只挂了这一个 MCP,工具面干净——[04:47](https://youtu.be/gSFZIn4OTOQ?t=287) "All it has right now is access to the Semrush MCP"。 - **Sonnet 5 Low** 是博主主动选的最差档,理由是:在最低档跑通就证明上限很强——[04:53](https://youtu.be/gSFZIn4OTOQ?t=293) "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](https://youtu.be/gSFZIn4OTOQ?t=320) "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](https://youtu.be/gSFZIn4OTOQ?t=348) / [05:58](https://youtu.be/gSFZIn4OTOQ?t=358) / [07:33](https://youtu.be/gSFZIn4OTOQ?t=453) / [08:01](https://youtu.be/gSFZIn4OTOQ?t=481) / [08:11](https://youtu.be/gSFZIn4OTOQ?t=491) / [08:26](https://youtu.be/gSFZIn4OTOQ?t=506) 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](https://youtu.be/gSFZIn4OTOQ?t=358) "all-in-one modern search solution"。**价格 / 价值**:博主同时强调"not too expensive"— [06:52](https://youtu.be/gSFZIn4OTOQ?t=412) "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](https://youtu.be/gSFZIn4OTOQ?t=491),以及 Ballinderry Park 项目的"elopement"页也是 Semrush 给的种子词——[08:14](https://youtu.be/gSFZIn4OTOQ?t=494)。结论他用了一句话直接收口——"These were completely thought of by Semrush plus Claude code"— [08:29](https://youtu.be/gSFZIn4OTOQ?t=509),并立刻接"a really really good combination"— [08:31](https://youtu.be/gSFZIn4OTOQ?t=511),连说"highly recommend Semrush"— [08:33](https://youtu.be/gSFZIn4OTOQ?t=513)。 回到本次 build:Claude Code 看到 "Plumbing Service in Galway",会识别 Galway 在爱尔兰,把研究收窄到爱尔兰本地——[07:33](https://youtu.be/gSFZIn4OTOQ?t=453) "Galway is obviously Ireland so it's specifically doing research on Ireland"。 ### 7. 5 分钟实测:lead 表单 → CRM → Stripe 链接 → CSV / pipeline [09:41](https://youtu.be/gSFZIn4OTOQ?t=581) / [09:43](https://youtu.be/gSFZIn4OTOQ?t=583) / [10:04](https://youtu.be/gSFZIn4OTOQ?t=604) / [10:20](https://youtu.be/gSFZIn4OTOQ?t=620) / [10:22](https://youtu.be/gSFZIn4OTOQ?t=622) / [10:32](https://youtu.be/gSFZIn4OTOQ?t=632) / [10:46](https://youtu.be/gSFZIn4OTOQ?t=646) / [11:02](https://youtu.be/gSFZIn4OTOQ?t=662) / [11:07](https://youtu.be/gSFZIn4OTOQ?t=667) 实测段是本片证据链,博主按时间顺序把端到端跑过一遍。**T+ 0:build 完成 + 立刻进表**——[09:41](https://youtu.be/gSFZIn4OTOQ?t=581) "Imagine that you can offer this service to a business";[09:43](https://youtu.be/gSFZIn4OTOQ?t=583) "that was under 5 minutes"。**T+ 0:01:填表**(Hamish + 随机电话 + Gmail + 简单需求)— [09:51](https://youtu.be/gSFZIn4OTOQ?t=591) → [09:56](https://youtu.be/gSFZIn4OTOQ?t=596) "send inquiry"。**T+ 0:02:CRM 立刻显示这条 lead**——[10:04](https://youtu.be/gSFZIn4OTOQ?t=604) "Fully working lead gen";[10:22](https://youtu.be/gSFZIn4OTOQ?t=622) "I have a fully working CRM"。 **小修小补**:中间有一个 Convex 报错,博主当场改掉后再回来就能看到 lead——[10:17](https://youtu.be/gSFZIn4OTOQ?t=617) "There's a little Convicts issue right here" → [10:20](https://youtu.be/gSFZIn4OTOQ?t=620) "we can actually see the lead right here"。**Stage 流转**:new → contacted 等可改——[10:28](https://youtu.be/gSFZIn4OTOQ?t=628) "we can say new, contacted, right?"。**Stripe 支付链接**:"Create a payment link" 直接生成 hosted URL——[10:32](https://youtu.be/gSFZIn4OTOQ?t=632) "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](https://youtu.be/gSFZIn4OTOQ?t=646) "this is worth 10000 and then save that",但实测当时没同步过来,他承认"there's a little bit of work to do here"— [10:42](https://youtu.be/gSFZIn4OTOQ?t=642)。**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](https://youtu.be/gSFZIn4OTOQ?t=662) → [11:07](https://youtu.be/gSFZIn4OTOQ?t=667)。 ### 8. 生成的 SEO + 外观短板 + 升级到 Opus 4.8 / Stitch [11:26](https://youtu.be/gSFZIn4OTOQ?t=686) / [11:28](https://youtu.be/gSFZIn4OTOQ?t=688) / [11:33](https://youtu.be/gSFZIn4OTOQ?t=693) / [11:40](https://youtu.be/gSFZIn4OTOQ?t=700) / [11:57](https://youtu.be/gSFZIn4OTOQ?t=717) / [12:05](https://youtu.be/gSFZIn4OTOQ?t=725) / [12:14](https://youtu.be/gSFZIn4OTOQ?t=734) **SEO 这块真的合格**:博主自检后说"the SEO is actually pretty good. I did check"— [11:26](https://youtu.be/gSFZIn4OTOQ?t=686),并把 Semrush 给出的三组关键词全部报出:emergency plumber Galway(高紧急意图)— [11:28](https://youtu.be/gSFZIn4OTOQ?t=688)、boiler service(Galway 多用 gas boiler 故障率高)— [11:33](https://youtu.be/gSFZIn4OTOQ?t=693)、drain and blocking(本地高频)— [11:40](https://youtu.be/gSFZIn4OTOQ?t=700)。这些词都是 Semrush 从 niche 推断出的本地化种子,**没有 LLM 在缺数据时的编造**。 **外观是唯一可见短板**:博主预先说"This is Sonnet 5 on Low. So, the look and feel is pretty bad"— [09:23](https://youtu.be/gSFZIn4OTOQ?t=563),并在生成后再次认账"this is the worst website I've ever seen"— [11:57](https://youtu.be/gSFZIn4OTOQ?t=717)。修复路径他给了两条:**(1)** 换模型——"if you ran this with Opus 4.8, it'd be a lot better"— [10:44](https://youtu.be/gSFZIn4OTOQ?t=644);**(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](https://youtu.be/gSFZIn4OTOQ?t=725) → [12:14](https://youtu.be/gSFZIn4OTOQ?t=734)。 ## 可执行步骤 - [ ] 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 的能力下限。 - 进阶:[[2026-06-11-Claude Code SEO：连接器 + Semrush MCP + 免费 Keyword Planner 三件套挖词造页|Claude Code SEO：连接器 + Semrush MCP + 免费 Keyword Planner 三件套挖词造页]] 首见 Semrush MCP,把它用于"给已有站挖竞品词造新页";本片把同一 MCP 挪到"给全新商家从零建站"场景,是同一数据源在不同项目起点的复用。 ## 一手来源与延伸 - 视频给出的 GitHub repo,内含 skill 完整代码、setup prompt 与 SKILL.md:https://github.com/IncomeStreamSurfer/site-crm-builder.git - 视频 description 提供的 Semrush 14 天免费试用链接(affiliate,博主的合作伙伴渠道):https://semrush.sjv.io/JkmbYa ## 术语 - 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](https://youtu.be/gSFZIn4OTOQ?t=580) → [09:45](https://youtu.be/gSFZIn4OTOQ?t=585) > > 一句话把"5 分钟交付"这件事从技术细节升格成 agency 价值主张,适合做标题/钩子。 > "I have a fully working CRM, fully working lead gen, which is absolutely crazy." — [10:22](https://youtu.be/gSFZIn4OTOQ?t=622) > > 端到端跑通是本片唯一硬证据,这条直接锁死"最低档也能跑通全链路"。 > "Try doing this by doing a design with Stitch ... I promise you, you will not be let down." — [12:05](https://youtu.be/gSFZIn4OTOQ?t=725) → [12:14](https://youtu.be/gSFZIn4OTOQ?t=734) > > 把"外观差"的短板显式给出修复路径,不是简单甩锅——这是评估"skill 成熟度"时该打高分的诚实信号。 ## 立场与利益 **利益证据**:description 里有 Semrush 14 天免费试用 affiliate 链接(https://semrush.sjv.io/JkmbYa,sjv.io 是 ShareASale 旗下 tracking 域名),博主与 Semrush 有付费合作关系;此外 GitHub repo 链接是个人频道引流。 按主张分三档: - **与利益同向(待印证)**:"I do highly recommend Semrush" [08:33](https://youtu.be/gSFZIn4OTOQ?t=513)、"they have made a really really good tool and it's not too expensive" [06:52](https://youtu.be/gSFZIn4OTOQ?t=412)、以及 Ballinderry Park 的"hot tub holidays / elopement 流量"案例 [08:11](https://youtu.be/gSFZIn4OTOQ?t=491) [08:14](https://youtu.be/gSFZIn4OTOQ?t=494)——这些是直接帮 Semrush 引流的样板,采信前需外部印证。 - **利益中性**:5 分钟从 brief 拉出整站 + CRM 的实测演示 [09:43](https://youtu.be/gSFZIn4OTOQ?t=583)、4 类 API 钥匙 + 5 组件栈的搭建流程 [01:15](https://youtu.be/gSFZIn4OTOQ?t=75) [01:28](https://youtu.be/gSFZIn4OTOQ?t=88)、lead → CRM → Stripe 端到端跑通 [10:04](https://youtu.be/gSFZIn4OTOQ?t=604)——这些是技术性主张,使用者可独立复现。 - **与利益反向(可信度最高)**:"the look and feel is pretty bad" [09:23](https://youtu.be/gSFZIn4OTOQ?t=563)、"this is the worst website ever" [11:57](https://youtu.be/gSFZIn4OTOQ?t=717)、"there's a little bit of work to do here" [10:42](https://youtu.be/gSFZIn4OTOQ?t=642)——博主主动承认 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](https://youtu.be/gSFZIn4OTOQ?t=28) [00:37](https://youtu.be/gSFZIn4OTOQ?t=37) [00:43](https://youtu.be/gSFZIn4OTOQ?t=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](https://youtu.be/gSFZIn4OTOQ?t=48) [00:56](https://youtu.be/gSFZIn4OTOQ?t=56)。 3. Clerk 端配置 JWT 模板时最容易踩的坑是什么? **答案**:模板名必须全小写 `convex`,大写 C 会直接挂。锚点:[03:44](https://youtu.be/gSFZIn4OTOQ?t=224)。 4. 5 分钟实测里 lead 从表单提交到 CRM 显示经过了哪几步?中间出了什么小状况? **答案**:填表(姓名+电话+邮箱+需求)→ send inquiry → 第一次看 CRM 是空的(有个 Convex 报错)→ 改掉 Convex 小问题 → 再次进入 CRM 就能看到 lead,标记 stage(new / contacted),点 Create a payment link 拿到 Stripe hosted URL。锚点:[09:51](https://youtu.be/gSFZIn4OTOQ?t=591) [09:56](https://youtu.be/gSFZIn4OTOQ?t=596) [10:17](https://youtu.be/gSFZIn4OTOQ?t=617) [10:20](https://youtu.be/gSFZIn4OTOQ?t=620) [10:22](https://youtu.be/gSFZIn4OTOQ?t=622) [10:32](https://youtu.be/gSFZIn4OTOQ?t=632)。 5. 博主承认的 Sonnet 5 Low 唯一明显短板是什么?给出的两条升级路径? **答案**:唯一明显短板是外观("the look and feel is pretty bad"、"the worst website ever");两条升级路径:(1) 换 Opus 4.8 重新跑;(2) 先用 Stitch 出设计稿(尤其 homepage),再回到本流程跑。锚点:[09:23](https://youtu.be/gSFZIn4OTOQ?t=563) [11:57](https://youtu.be/gSFZIn4OTOQ?t=717) [10:44](https://youtu.be/gSFZIn4OTOQ?t=644) [12:05](https://youtu.be/gSFZIn4OTOQ?t=725)。