本次，我将带大家体验如何使用 Claude 3.7 Sonnet 结合 MCP 这两大AI神器，仅用10个提示词，快速构建出一个功能完善的全栈Web应用程序。是的，你没听错，10个提示词，就能搞定前端、后端、甚至连管理后台都一并生成。

这次的实战项目是一个 理发店网站，麻雀虽小，五脏俱全。它包含了：

接下来，就让我们一起深入 Remix 框架实战演示，看看如何借助 AI 的力量，让全栈开发变得如此高效。

10个提示词，全栈应用速成记

传统开发模式中，构建这样一个全栈应用，前端切图、后端接口、数据库设计、管理后台开发……想想都让人头大。但有了 Claude 和 MCP，一切都变得不一样了。

我将详细演示如何从零开始，利用 Claude 和 MCP，结合 Remix 框架，一步步搭建起这个理发店网站，并连接 Supabase 数据库进行数据管理。

Remix 框架介绍及与 Next.js 的对比

本次项目我选择了 Remix 框架，可能有些朋友对它还不太熟悉。视频中，我详细对比了 Remix 与大家熟知的 Next.js 框架，并解释了为何选择 Remix：

Remix 的优势： Remix 是由 React Router 的创建者开发的全栈 Web 框架，发布时间较晚（2021年），但发展势头迅猛。它强调 Web 标准，内置表单处理机制，性能优秀，更适合构建内容驱动型网站、表单密集型应用以及需要复杂路由布局的项目。OpenAI 官网也从 Next.js 切换到了 Remix，可见其潜力。
Next.js 的适用场景： Next.js 更适合博客、电商平台等需要静态内容生成 (SSG/SSR) 和强大图像优化的项目。

简单来说，Remix 在构建交互性强、数据频繁更新的应用方面，表现更出色。

使用 Claude 和 MCP 创建 Remix 应用

接下来，我将演示如何利用 Claude 和 MCP，一步步创建 Remix 应用：

本地创建 Remix 应用： 通过一行简单的命令，快速初始化 Remix 项目。npx create-remix@latest

与 Claude 对话： 告诉 Claude 需要生成一个理发店网站，并指定使用 MCP 工具。

MCP 分析项目结构： Claude 通过 MCP 客户端，快速分析 Remix 项目的文件结构和依赖关系。

AI 自动生成代码： Claude 依据提示词，开始自动生成网站代码，包括首页、导航栏、页脚、页面布局等等。

虽然 Claude 单次生成的代码量已经非常大，但面对首页这种内容丰富的页面，还是会遇到单条信息输出长度限制。不过，没关系，只需简单指示 Claude “继续”，它就能智能地接续生成，完全无需人工干预。

为了实现用户预约功能，我们需要将前端应用连接到后端数据库。我选择了Supabase。连接过程非常简单：

Supabase 创建项目：在 Supabase 官网快速创建一个新的项目。
获取连接信息：在 Supabase 项目设置中，找到 "Connect" 选项，选择 "Remix" 框架，复制提供的 URL 和 Key。
告知 Claude 连接信息：将 Supabase 的 URL 和 Key 复制给 Claude，并告知它需要连接 Supabase，存储用户预约信息，并在此基础上构建管理后台。

Claude 收到信息后，立即开始行动，安装 Supabase 依赖、配置客户端、更新预约页面，一切都自动化完成。

为了更高效地创建数据库表，我直接使用了 Supabase 自带的 智能助手 功能：

整个过程无需手动编写 SQL 语句，效率 Max。

在项目接近完成时，我也遇到了一些小问题，例如：

但这些问题在 Claude 的帮助下都迎刃而解：

问题定位：我将浏览器控制台的报错信息 (F12) 复制给 Claude， Claude 快速定位到问题根源：文件结构混乱。
AI 自动修复： Claude 自动重新整理文件结构，修复了预约时间选择问题。
权限问题排查：管理员后台看不到数据，是权限 (RLS - Row Level Security) 配置问题。Claude 分析后，指导我设置 Supabase 的 RLS 策略，并提供了相应的 SQL 语句。

整个调试过程，Claude 就像一位经验丰富的技术专家，不仅能快速定位问题，还能提供清晰的解决方案，大大提升了开发效率。

针对管理员权限问题，Claude 指导我设置了 Supabase 的 RLS 策略。通过简单的 SQL 语句，我轻松实现了：

通过 Supabase 的 RLS 策略，我们可以精细地控制数据访问权限，保障数据安全。

在 Claude 和 MCP 的强大助力下，我仅用10个提示词，就快速构建出了一个功能完善的全栈理发店网站。

Model Context Protocol (MCP) 快速上手指南: https://modelcontextprotocol.io/quickstart/user#why-claude-for-desktop-and-not-claude-ai

本文来自公众号：kate人不错