用Claude Code构建商业级全栈网站：从落地页到万元级产品实战

从落地页到真正能卖钱的产品

用AI生成一个漂亮的落地页已经不再是什么难事，几百到几千美元的售价虽然可行，但真正能卖到万元级别的网站，靠的绝不是好看的界面。这位B站UP主在实战教程中提出了一个核心观点：要达到高价值，网站必须具备真正的实用功能——后端数据库、用户账户系统，能够解决一个真实的商业问题。

他选择的案例极具代表性：一个面向婚礼摄影行业的内容交付网站。这个网站可以卖给婚礼场地或摄影工作室，让他们为每对新人定制专属页面，用于邀请宾客、收集RSVP回复、以高清画质分发照片和视频。底层架构完全复用，商家只需更换主题色和内容，就能反复售卖给不同客户。

这种SaaS化的复用思路，正是价值的来源。内容交付网站区别于传统展示型网站的关键在于它承载了实际的业务流程——文件分发、用户交互、状态管理等。而SaaS化意味着底层架构只需开发一次，通过多租户设计让不同客户共享同一套代码和基础设施，仅在表现层做差异化。

多租户架构（Multi-tenancy）在实现层面通常有三种模式：共享数据库共享Schema（通过tenant_id字段区分数据）、共享数据库独立Schema（每个租户一套表结构）、以及完全独立数据库。对于本案例这类轻量级应用，第一种方式最为经济——所有新人的数据存储在同一组表中，通过行级安全策略确保数据隔离。这也解释了为什么Supabase的RLS功能在此场景中如此关键。从市场角度看，婚礼摄影行业全球市场规模超过400亿美元，但数字化程度参差不齐，大量中小型摄影工作室仍在用网盘链接或U盘交付作品。一个专业的内容交付平台不仅提升了客户体验，还为摄影师创造了持续的品牌曝光机会。

开发成本是一次性的，但每新增一个客户的边际成本趋近于零，这正是软件产品相对定制化开发的核心优势。

Claude Code前期准备：技能安装决定产出质量

作者强调，直接打开Claude Code就开始下指令，得到的结果往往平庸。真正的诀窍在于先为Claude配置一系列"技能"（Skills）和工具集成，让它在特定领域表现更专业。

Claude Code中的"技能"本质上是一种结构化的上下文注入机制。每个技能是一份Markdown格式的文档，其中定义了特定领域的设计原则、最佳实践、代码规范或工具使用指南。当用户通过斜杠命令激活某个技能时，Claude会将该文档作为系统级上下文加载，从而在后续对话中遵循这些约束条件。

这种机制与AI领域其他常见的定制化方法有本质区别。Fine-tuning（微调）需要重新训练模型权重，成本高且不可逆；RAG（检索增强生成）侧重于从外部知识库中检索事实性信息；而技能注入更接近于"行为约束"——它不改变模型知道什么，而是改变模型如何行动。例如，一个前端设计技能可能包含"永远不要使用纯黑色文字，改用深灰色以降低视觉疲劳"这样的规则。模型本身已经知道这条设计原则，但如果不被明确提醒，它可能不会主动遵循。技能的价值在于将隐性的专业判断显性化，确保AI输出的一致性和专业性。

前端设计技能配置

他首先安装了两个前端相关技能：Frontend Design 和 UI UX Pro Max。技能本质上就是一个Markdown文件，向Claude解释不同的设计原则，避免每次都生成千篇一律的网站。安装方式极其简单——复制技能的URL，直接告诉Claude从该地址安装即可。安装完成后通过斜杠命令（如/frontend design）就能调用。

模型与模式选择建议

作者建议使用OPUS 4.5或4.8级别的模型，推理强度设为"高"。同时切换到"绕过权限模式"（Bypass Permissions），避免每次修改都要手动确认。他还分享了一个提效小工具——语音转写工具WhisperFlow，让他能通过说话而非打字来指挥AI。

"绕过权限模式"值得额外说明：在默认模式下，Claude Code每次执行文件写入、命令行操作或网络请求时都会弹出确认对话框，这是出于安全考虑——防止AI意外删除文件或执行危险命令。但在可控的开发环境中，频繁的确认弹窗会严重打断工作流。绕过权限模式本质上是信任开发者对项目环境的掌控力，将安全责任从工具层面转移到使用者层面。对于生产环境或涉及敏感数据的场景，仍应保持默认的权限确认机制。

全栈技术栈选型：三大工具协同搭建

这套方案的技术核心在于工具的合理搭配，作者作为软件开发者给出了明确推荐：

ImageKit：多媒体处理与CDN分发引擎

对于一个以内容交付为核心价值的网站，加载速度和画质至关重要。ImageKit负责处理所有图片和视频，最大的亮点是可以直接在URL中应用各种转换——按不同尺寸加载、压缩、调整画质、添加水印，全部通过CDN分发。

这种URL-based transformation（基于URL的变换）模式是现代图片CDN的标志性特征。传统做法是在服务端预生成多种尺寸的图片副本存储起来，既浪费存储空间又缺乏灵活性。ImageKit的方案则是在CDN边缘节点上实时处理——当请求/image.jpg?tr=w-400,h-300,q-80时，边缘节点会即时生成400×300像素、80%质量的版本并缓存。第一次请求可能有几十毫秒的处理延迟，但后续所有相同参数的请求都直接命中缓存。对于婚礼照片这种场景，同一张图片可能在缩略图列表中需要200px宽度，在画廊预览中需要800px，在全屏查看时需要原始分辨率——URL参数化让这一切无需任何后端代码即可实现。

更重要的是它对视频的处理能力，采用自适应比特率流传输（Adaptive Bitrate Streaming, ABR）。这是现代视频分发的核心技术，被Netflix、YouTube等主流平台广泛采用。其工作原理是：服务端将原始视频预编码为多个不同分辨率和比特率的版本（如360p、720p、1080p、4K），并切分为若干秒的小片段（通常2-10秒）。客户端播放器在播放过程中持续监测网络带宽，动态切换到最适合当前网络条件的版本。

目前主流的ABR协议有两种：Apple的HLS（HTTP Live Streaming）和MPEG-DASH（Dynamic Adaptive Streaming over HTTP）。HLS使用.m3u8播放列表文件索引.ts视频片段，在iOS/Safari生态中有原生支持；MPEG-DASH则是一个开放标准，使用.mpd（Media Presentation Description）文件描述可用的流，在Android和Web端更为通用。实际部署中，大多数CDN服务商（包括ImageKit）会同时支持两种协议，由播放器根据客户端环境自动选择。这项技术解决了Web视频的核心矛盾：用户既不想等待漫长的缓冲，又希望最终获得尽可能高的画质。

对于婚礼视频这种典型场景——宾客可能在宴会现场用手机4G网络观看，也可能在家用WiFi回看——ABR确保了在任何网络条件下都能获得流畅的播放体验。ImageKit同样提供MCP服务器和Agent技能，可直接接入Claude Code。

Supabase：后端数据库与用户鉴权

Supabase负责后端逻辑，包括用户认证、数据库和各类服务端功能。它是一个开源的Firebase替代方案，基于PostgreSQL构建，提供数据库、认证、实时订阅、对象存储和边缘函数等一站式后端服务。其核心优势在于将传统上需要后端工程师手动搭建的基础设施封装为开箱即用的API。

与Google的Firebase相比，Supabase的关键差异在于底层数据库的选择。Firebase使用的是NoSQL文档数据库（Firestore），数据以JSON文档形式存储，灵活但缺乏关系完整性；Supabase基于PostgreSQL这一关系型数据库，支持复杂的JOIN查询、事务、外键约束和丰富的数据类型。对于本案例中涉及的"新人-宾客-RSVP回复-照片-相册"这种多实体关联的数据模型，关系型数据库天然更适合。

对于AI辅助开发场景，Supabase的优势更加明显：它可以通过MCP直接连接到Claude Code，让AI自动创建数据库表、配置Row Level Security（行级安全策略）、管理存储和边缘函数。

Row Level Security（RLS）是PostgreSQL提供的一种细粒度访问控制机制，允许在数据库层面定义"谁能看到哪些行"。在多租户应用中，RLS确保即使应用代码出现安全漏洞，租户A的数据也绝不会泄露给租户B。具体实现方式是为表定义策略（Policy），例如：CREATE POLICY "Users can only see their own wedding" ON weddings FOR SELECT USING (auth.uid() = owner_id)。这条策略确保每个已认证用户只能查询到自己拥有的婚礼数据。RLS的强大之处在于它是数据库级别的强制约束，不依赖应用层代码的正确性——即使开发者忘记在查询中添加WHERE条件，数据库引擎也会自动过滤不属于当前用户的行。

作者展示时，Supabase后台已经自动生成了相当复杂的表结构，全程无需手动操作门户。PostgreSQL作为底层数据库也意味着项目不会被锁定在私有生态中，未来可以自由迁移。

Higgs Field：AI素材生成

由于是演示项目，作者并没有真实的婚礼照片。他通过接入Higgs Field的MCP，直接让Claude生成整场婚礼的AI图片和视频素材。只需一句提示词，Claude就能调用Higgs Field生成内容并保存到项目目录。这种工作方式展现了AI辅助开发的一个重要趋势：开发过程中的"冷启动"问题（没有真实数据用于测试和演示）可以通过AI生成来解决。在传统开发流程中，前端开发者常常需要花大量时间寻找或制作placeholder素材，而现在这个步骤可以完全自动化。

MCP工具集成的实战配置方法

MCP（Model Context Protocol）是Anthropic提出的一种开放协议，旨在标准化AI模型与外部工具、数据源之间的通信方式。在MCP出现之前，每个AI工具要对接一个外部服务，都需要编写专门的集成代码。MCP通过定义统一的请求-响应格式，让任何兼容MCP的AI客户端（如Claude Code）都能即插即用地连接任何兼容MCP的服务端。它的作用类似于USB接口之于硬件设备——提供了一个通用的"插槽"，降低了集成的复杂度。

从技术架构上看，MCP与OpenAI的Function Calling机制有本质区别。Function Calling是在单次API调用中声明可用函数，模型决定是否调用并返回结构化参数，整个过程由应用开发者控制。而MCP是一种持久化的客户端-服务端连接协议，支持服务发现（客户端可以动态查询服务端提供了哪些工具）、状态管理（多次调用之间可以保持上下文）和双向通信（服务端可以主动推送通知）。这使得MCP更适合复杂的多步骤工作流——比如Claude先调用Supabase创建表，再调用ImageKit上传图片，最后将图片URL写回数据库——这种跨服务的编排在简单的Function Calling模式下需要大量胶水代码，而在MCP生态中则是原生支持的。

从生态战略角度，MCP正在成为AI工具链的"连接层"标准。随着越来越多的SaaS服务提供官方MCP服务器（如Supabase、ImageKit、GitHub、Notion等），AI编程工具的能力边界不再受限于模型本身的知识，而是取决于它能连接多少外部服务。这正在重塑软件开发的工具链格局。

作者坦诚地展示了连接过程，包括一些"非最佳实践"但真实的做法。对于ImageKit，他直接复制官方文档中的"如何用AI构建"页面内容，让Claude读取并自动执行连接步骤。至于公钥、私钥等凭据，规范做法是放入独立的.env文件（这是一种将敏感配置与代码分离的标准实践，.env文件通常被加入.gitignore以防止被提交到版本控制系统），但他也承认许多非开发者用户会直接粘贴给Claude处理。

连接Supabase和Higgs Field则需要用到Claude Code的命令行版本，因为它提供了更灵活的控制能力。在终端中通过/mcp命令可以查看和验证各个MCP服务器的连接状态，需要授权时会自动弹出浏览器完成OAuth验证，确保了连接过程中的安全性，防止未授权的访问。OAuth（Open Authorization）在此处的作用是让Claude Code能够代表用户访问Supabase项目，而无需直接暴露用户的账户密码——用户在浏览器中确认授权后，OAuth流程会返回一个范围受限的访问令牌，Claude Code仅凭此令牌进行操作。

增量式构建：高效的全栈开发节奏

整个构建过程遵循了清晰的分阶段策略，而非一步到位。增量式构建在AI辅助开发中尤为重要，原因在于：大语言模型在处理过于庞大和模糊的任务时容易产生"幻觉"或逻辑不一致，而将项目拆分为多个边界清晰的阶段，每个阶段有明确的输入和验证标准，可以显著降低出错率。

这背后有认知科学和信息论的支撑。LLM的注意力机制在处理超长上下文时，对中间部分信息的关注度会衰减（即"lost in the middle"现象）。当一次性给出过于复杂的需求时，模型可能遗漏某些约束条件，导致生成的代码在局部正确但全局矛盾。分阶段构建将每个阶段的上下文窗口控制在模型能高效处理的范围内，每个阶段结束后人工验证结果并修正方向，形成一种人机协作的"检查点"机制。这与软件工程中的敏捷迭代理念高度一致——小步快跑，持续交付，尽早发现问题。

1. 制定计划：作者先向Claude详细描述项目构想，并特意要求它"提出澄清性问题"，确保关键决策在开工前就已明确。这个步骤的价值在于暴露隐性假设——开发者脑中往往有许多未言明的前提条件（比如"RSVP回复后是否需要邮件通知""照片画廊是否支持批量下载"），让AI主动提问可以将这些隐性需求显性化，避免开发到一半才发现方向偏差。
2. 建立设计系统：调用前端设计技能，先生成统一的配色、主题和字体排版，作为整个网站的视觉基础。设计系统（Design System）的建立为后续所有UI组件提供了约束条件，避免AI在不同页面间产出风格不一致的界面。在AI生成UI的场景中，设计系统的作用尤为关键——没有约束的LLM倾向于在每次生成时"重新发明轮子"，导致按钮在A页面是圆角8px而在B页面变成4px。设计系统通过定义Design Tokens（设计令牌，如--radius-md: 8px、--color-primary: #2563eb）为AI的输出建立了一致性基线。多套配色方案还能作为不同客户的模板复用。
3. 搭建前端界面：在设计系统基础上构建落地页和画廊页面。
4. 实现后端逻辑：接入Next.js和Supabase，构建数据库、认证和业务功能。Next.js在此处的角色值得说明：作为React的全栈框架，它提供了服务端渲染（SSR）、静态生成（SSG）和API路由等能力，使得前后端可以在同一个项目中统一管理，极大简化了AI生成代码的复杂度。
5. 对接多媒体服务：将所有图片上传到ImageKit，通过其URL进行渲染分发。

作者反复强调，前期投入大量时间做决策、配置工具、确立设计系统，才能让后续构建少很多麻烦、少很多错误。这种"先约束再创造"的工作流，本质上是用工程化思维驯服AI的随机性。这也是视频较长的原因——他想展示一个规范的工程化流程，而非炫技式的快速演示。

成果验证：功能完备的商业级产品

经过约30分钟构建，一个完整的应用在localhost:3000上跑了起来。最终产品包含了相当完整的功能闭环：

• 多站点支持：可为不同新人创建独立网站，套用不同主题色
• 图片画廊：所有图片通过ImageKit的URL即时加载和自适应缩放
• 视频流播放：经过自适应比特率优化后，视频几乎秒开
• RSVP系统：可发送邀请函，宾客回复后网站实时更新参加状态
• 管理后台：邮箱登录，可创建邀请、上传订婚照和婚礼照片、发布内容
• 自动水印：在图片右下角自动添加婚礼名称水印

从商业角度分析这个产品的定价逻辑：一个婚礼摄影工作室为每对新人提供这样的数字化交付服务，可以在摄影套餐中加收500-2000元。如果工作室每年服务100对新人，这套系统一年可以额外创造5万到20万元的营收。而系统的开发成本（考虑到AI辅助下的效率）可能只需要几天时间。这种投入产出比正是B2B SaaS工具的典型价值主张。

作者在测试中遇到视频加载偏慢的问题，通过让Claude启用ImageKit的自适应比特率流处理后，视频实现了近乎即时的加载。这个调试过程本身也展示了AI辅助开发的一个优势：开发者无需深入了解ABR的配置细节，只需用自然语言描述问题（"视频加载太慢"），AI就能定位原因并实施修复。

AI编程时代的价值创造逻辑

这个案例的核心启示在于：AI编程工具已经能够独立完成商业级全栈应用的搭建，但价值的高低取决于产品是否解决真实问题。 落地页人人都会做，而一个具备后端鉴权、数据库、多媒体优化和完整业务流程的系统，才是能卖到上万美元的资产。

这一现象正在重新定义"技术门槛"的含义。在AI编程时代之前，全栈开发能力本身就是一道高门槛——掌握前端框架、后端架构、数据库设计、DevOps部署等全链路技能通常需要3-5年的学习积累。而现在，AI将这些实现层面的技能大幅降维，真正的竞争壁垒上移到了更高层次：商业洞察力（识别哪些问题值得解决）、产品设计能力（将业务需求转化为合理的功能规划）、以及系统思维（理解各组件如何协同工作）。代码编写从"稀缺技能"变成了"丰饶资源"，而对价值的判断力反而成为了真正的稀缺品。

对于想利用Claude Code变现的开发者或创业者，这套方法论提供了清晰的路径：先选对可复用的商业场景，配置好专业技能与工具集成（前端设计 + Supabase + ImageKit），再通过增量式构建逐步落地。工具本身都提供免费额度，真正的门槛不在技术，而在于对价值的判断力——识别哪些行业存在重复性的数字化需求，哪些问题可以通过一套可复用的系统批量解决。

类似的高价值垂直场景还有很多：房地产经纪的房源展示与预约系统、健身教练的课程预约与训练记录平台、律师事务所的案件进度追踪与文档交付系统、餐饮品牌的加盟商管理后台等。这些场景的共同特征是：行业内存在大量结构相似的业务流程，但缺乏标准化的SaaS工具来服务长尾市场中的中小企业。

核心要点