Coderblock 如何将一个提示词变成全栈 Web 应用

一个应用可以始于一句话。但要把这句话变成真正可用的产品，还需要更多要素：界面、应用逻辑、持久化数据、身份验证、权限控制、文件、支付和基础设施。

使用 Coderblock，无需分别构建这些层。只要描述你想开发的产品，平台就会生成一个真正的全栈 Web 应用，并可立即在实时开发环境中测试。从此，聊天窗口就是你的工作区：你可以查看已经构建的内容、进行测试，并通过描述想要的结果继续修改应用。

因此，第一个提示词并不是最终规格说明，而是你与产品展开对话的起点。

从产品描述开始

第一个提示词不需要回答所有问题。它只需为智能体提供足够的上下文，使其了解你要构建什么、面向哪些用户，以及最重要的流程有哪些。 例如：

为一家小型健身中心创建一个预约平台。访客应能浏览课程、创建账户、预约名额并查看未来的预约。工作人员需要一个管理仪表板来管理课程和出勤情况。

短短几行文字，已经包含多个相互关联的要素：公开课程目录、用户账户、预约、个人专区和管理员角色。 Coderblock 会利用这些信息端到端地构建应用，从前端一直到后端。 如果想更快开始，你还可以从 32 个产品模板中选择，涵盖电商、预约、仪表板、健康和游戏等场景。此外，还有 20 多个功能模板，可快速添加身份验证、支付、购物车、聊天和管理面板等常见功能。

模板为你提供一个具体的起点，聊天则让你能将它变成自己的产品。

几秒内从描述生成界面

Coderblock 使用 React、Vite、TypeScript 和 Tailwind CSS 生成前端，并立即将其部署到专属开发地址 <app>.coderblock.dev。 在这里，你的想法第一次变成可以真正看到和使用的产品。

而当产品开始成形时，许多决定也会变得更容易。 一个仪表板可能功能齐全，但信息层级不够清晰。一张表格可能可以正常使用，却在移动设备上显得过于拥挤。一个流程可能逻辑正确，但仍可以减少一个步骤。

你无需回头修改最初的需求文档，只要继续对话即可：

• 固定导航栏，并添加移动端菜单。
• 在每个课程卡片上显示剩余名额。
• 添加按教练和难度筛选的功能。
• 为工作人员创建每周出勤视图。
• 使用更舒缓的配色，并提高表单的对比度。

借助热重载，预览会在几秒内更新。

整个循环非常简单： 描述 → 查看 → 测试 → 修改

每完成一步，产品都会更接近你心中的样子。

当界面成为真正的应用

此时，你构建的已不再只是一个界面。

真正的产品需要持久化数据、用户、权限和后端逻辑。因此，对于标准 Web 应用，Coderblock 会将前端连接到专属的 Supabase 项目，其中包括 Postgres、Supabase Auth、Storage、Row Level Security 和 Deno Edge Functions。

智能体可以直接根据对话设计和更新数据库架构。 以健身中心为例，它可以将产品需求转换为课程、日程、用户资料和预约等实体，并定义让这些实体协同工作的必要关系。

而你仍然只需从产品角度提出需求。

当课程满员时添加候补名单；有名额释放后，允许工作人员让候补名单中的下一位用户加入。

这项请求并不只是修改一个页面。 它可能需要新的数据、新的规则和新的行为。Coderblock 会将这些变更作为同一应用的一部分统一处理，无需你手动配置 API 路由或数据库迁移。

你仍然可以在编辑器的 Backend 选项卡中查看底层内容，包括数据表、已验证用户、存储和函数。 对于 Enterprise Web Platform 项目，Coderblock 则采用基于 Python、FastAPI 和 Neon Postgres 的后端架构。

数据访问权限与用户身份保持一致

当应用中出现账户和个人数据后，另一个关键问题随之而来：谁可以查看哪些内容？ 你可以直接在对话中说明：

添加登录和用户账户，并为客户和工作人员设置不同的访问权限。

Coderblock 可以配置 Supabase Auth、注册和登录页面、会话管理以及受保护的路由。如有需要，还可以添加社交账号登录。 每个应用都默认包含用户资料表和基础角色结构，智能体可据此为客户、员工和管理员构建不同的使用体验。

但仅验证用户身份还不够，访问规则还必须延伸到数据层。例如，借助 Row Level Security，你可以让每位客户只能查看自己的预约，而工作人员则可以访问管理视图。

因此，你无需手动构建 JWT 系统、使用自定义逻辑管理密码，也不必创建专门的凭据表。用户身份由 Supabase Auth 管理，策略则负责定义每位用户可以对数据执行哪些操作。

支付功能也可以从聊天开始

当产品准备开始变现时，你无需切换工具。 只需提出一个新要求：

允许会员每月支付 9.99 欧元。

Coderblock 可以端到端地处理 Stripe 流程，包括产品、价格、结账、用户界面和后端逻辑。 在默认的托管模式下，智能体会先收集国家和企业名称等基本信息，然后为项目配置 Stripe 账户。你无需提供 API key，支付 webhook 也由平台管理。之后，你可以通过智能体提供的 Stripe 托管链接，完成收款设置和身份验证。

如果希望使用自己的 Stripe 账户，也可以选择 BYOK 模式。在这种情况下，Coderblock 会通过安全的环境变量提示框请求 STRIPE_SECRET_KEY，并自动配置 webhook。 密钥只会保留在服务器端，不会写入生成的代码或聊天记录。 其他需要凭据的集成同样采用这种方式。应用还可以通过兼容 OpenAI 的 Coderblock AI Gateway 集成 AI 功能，使用项目专属 API key，并按实际用量计费。

项目变复杂后，Agent Teams 开始发挥作用

应用越复杂，相关决策涉及的领域就越多。

一个新的管理面板可能同时需要修改前端、数据库、权限和安全设置。一个新功能也可能影响用户体验，以及用户与产品互动的方式。

为此，Coderblock 提供了 Agent Teams：专注于前端、后端、用户体验、安全和营销等领域的 AI 智能体。 你可以在项目中调用它们来处理特定问题，同时保留完整的应用上下文。 优势并不只是拥有更多智能体，而是在运用专业能力解决不同问题的同时，始终保持统一的产品视角。

因此，最初的提示词永远不会变成一份不可修改的文档。它始终是对话的起点，并与应用一起持续演进。

从开发环境走向生产环境

产品准备就绪后，从预览环境发布到生产环境同样直接。 使用 Publish，应用会被部署到 <app>.coderblock.app，并自动启用 SSL。后续发布可以使用快速热更新，让你无需从头重建部署流程，也能持续改进产品。 如果想使用自定义域名，可以前往 Settings → Domains，按照引导完成 DNS 配置。 你也可以直接在 Coderblock 中购买域名；结账、DNS 和 SSL 都由平台统一处理。 对于希望将 Coderblock 接入现有开发工作流的团队，平台还提供 GitHub 集成。

一场最终成为产品的对话

整个过程始于一段描述，但不会止于第一次生成。

描述想法。 查看成品雏形。 测试应用。 补充上下文。 持续完善。 正式发布。

这就是 Coderblock 的对话式开发模式。 提示词的价值不在于让你在开始前预见应用的每一个细节，而在于为 AI 提供足够的上下文，使其构建出第一个可运行版本，同时保留足够的灵活性，让你们可以共同持续改进。

换句话说，你不必先设计好一切再开始构建。你可以一边构建、一边查看，并在过程中不断做出决定。