从初稿到上线：用 AI 构建网站的最佳提示词

怎样才算优质的网站构建提示词？

最好的 AI 提示词会清楚描述你想要的结果，而不是试图规定每一项技术实现细节。在 Coderblock 中，你可以一边与 AI 对话，一边让它使用 React、TypeScript、Tailwind CSS、后端和 Postgres 数据库构建真正的全栈应用。

一条有效的初始提示词通常应涵盖以下五点：

1. 用途： 网站应该帮助人们完成什么？
2. 受众： 谁会使用它？
3. 页面： 需要哪些主要界面？
4. 功能： 访客或管理员必须能够执行哪些操作？
5. 风格： 整体体验应该呈现怎样的视觉与使用感受？

你不需要指定 API 路由、数据库迁移、密码哈希或部署脚本。只需用自然语言描述你想要的产品，然后让智能体负责具体实现。

第 1 步：从结构清晰的基础提示词开始

新建一个 Coderblock 项目，或选择现有的产品模板。如果从零开始，可以使用以下公式：

为[目标受众]构建一个[网站类型]。

它的主要用途是帮助用户[核心目标]。创建以下页面：[页面列表]。加入[必要功能]。采用[视觉风格]设计，并使用[颜色、字体或布局偏好]。确保网站采用响应式设计，在手机和桌面设备上都易于使用。

例如：

为一名独立健身教练构建网站。网站的主要用途是介绍教练服务方案，并让访客预约初次咨询。

创建首页、服务页面、教练简介、客户评价、常见问题和联系页面。在整个网站中加入醒目的“预约咨询”行动按钮。采用自信而亲切的风格，以深蓝色、米白色和暖橙色作为点缀。使用响应式设计，并优先保证移动设备上的可读性。

Coderblock 会生成应用，并通过 <app>.coderblock.dev 之类的地址打开实时开发预览。随后，你可以继续通过对话优化应用，更新内容通常会在数秒内显示。

第 2 步：用提示词建立清晰的页面结构

如果第一个版本显得不够完整，不要只让 AI“做得更好”。应明确说明每个页面需要传达什么，以及希望用户采取什么行动。

优化首页结构。加入：
- 一个包含明确标题和主要行动按钮的首屏区域
- 一个列出三项优势的版块
- 一个简短的使用流程版块
- 客户评价
- 一个包含五个常见问题的 FAQ
- 页面末尾的预约行动按钮

保持每个版块简洁，避免重复表达相同的卖点。

如果要构建多页面企业网站，可以尝试：

分别添加“服务”“关于我们”“案例研究”和“联系我们”页面。所有页面保持一致的导航和视觉体系。为每项服务创建独立版块，并提供简短说明、目标客户和下一步操作。

这种方式比一次性要求所有可能的页面和功能更可靠。

第 3 步：用具体要求描述视觉效果

“现代”或“美观”等词带有很强的主观性。可以加入可直接观察和执行的设计要求：

将网站重新设计为简洁的编辑排版风格。使用充足留白、大号标题、克制的深绿色点缀和细微边框，避免厚重阴影；限制内容最大宽度，确保段落易于阅读。将导航栏设为吸顶，并把移动端导航改为紧凑菜单。

你也可以单独优化某个组件：

让价格方案卡片更容易比较。突出中间的方案，对齐功能列表，醒目显示月费，并在每张卡片底部放置一个清晰的按钮。

如果希望更精准地控制结果，建议每次只提出一项视觉调整。

第 4 步：加入真实数据和用户账户

当网站开始存储数据，或为用户提供个性化访问权限时，它就成为了全栈应用。你只需描述预期行为，而不必要求编写自定义身份验证代码。

为客户添加注册和登录功能。保护账户仪表盘，只有已登录用户才能访问。每位客户只能查看和更新自己的个人资料及预约申请。添加管理员视图，让工作人员能够查看所有预约并修改预约状态。

智能体会配置 Supabase Auth、会话处理、受保护路由、数据库表和行级安全策略。每个应用都已包含 profiles 表和基础角色体系，因此无需要求创建单独的密码表或自定义 JWT 实现。

进行数据建模时，应明确说明用户可以创建和查看哪些内容：

添加 bookings 表，包含服务项目、首选日期、客户备注、状态和创建日期。客户只能查看自己的预约。管理员应能查看所有预约，并将状态设置为待处理、已确认、已完成或已取消。

你可以在 Backend 选项卡中查看数据表、身份验证用户、存储和函数。

第 5 步：用自然语言提出支付需求

如果要销售产品或订阅服务，请明确说明价格、币种、计费周期以及付款成功后的行为：

添加每月 €9.99 的 Pro 订阅方案。创建价格页面和 Stripe 结账流程。付款成功后，将客户标记为 Pro 并解锁高级仪表盘。让订阅用户能够查看当前方案并管理订阅。

默认情况下，智能体可以在询问国家/地区和企业名称等信息后，创建一个托管的 Stripe 账户。无需提供 API 密钥，支付 webhook 也由 Coderblock 处理。之后，你可以通过托管的 Stripe 入驻链接设置收款并完成 KYC。

如果希望使用自己的 Stripe 账户，请指定使用 BYOK 模式。智能体会通过安全的环境变量输入窗口向你索取 STRIPE_SECRET_KEY，并自动注册 webhook。密钥只会保存在项目的服务端存储中，不会出现在代码或聊天记录里。请先使用测试模式，确认无误后再切换到正式支付。

第 6 步：通过角色视角提示词改善易用性

让 AI 从特定用户的角度审视使用体验：

以首次访问网站的移动端访客身份检查预约流程。减少不必要的步骤，明确标出必填字段，加入实用的空状态和错误状态，并在提交后显示确认页面。不要删除任何现有功能。

接着检查管理员体验：

优化管理员预约视图。添加搜索、状态筛选、日期排序和清晰的空状态。在表格中显示最重要的预约信息，并将次要信息放入详情面板。

这类提示词提供了可衡量的目标，也有助于避免范围过大、难以控制的重新设计。

第 7 步：上线前执行最终检查提示词

发布前，让 AI 进行一次有针对性的质量检查：

为网站上线做好准备。检查每个页面是否存在响应式布局问题、导航失效、按钮含义不清、缺少表单验证、间距不一致，以及加载状态、空状态和无障碍访问问题。保留当前的视觉方向，并总结所做的修改。

然后进行内容审查：

检查所有用户可见的文案。让标题更具体，缩短过长的段落，保持语气一致，并将含糊的行动号召替换为明确的下一步操作。不要虚构客户评价、统计数据或用户证言。

根据实际功能，测试注册、受保护页面、表单提交、管理员权限和 Stripe 测试结账流程。

第 8 步：发布并持续迭代

实时预览准备就绪后，选择 Publish，将生产版本部署到启用 SSL 的 <app>.coderblock.app。你可以在 Settings → Domains 中按照引导配置 DNS 记录并连接现有域名，也可以直接在 Coderblock 中购买域名，由系统自动完成 DNS 和 SSL 配置。

发布并不意味着提示词工作已经结束。你可以继续提出小而精准的要求，例如：

将导航栏设为吸顶，但不要改变其高度。

在预约提交后添加确认邮件步骤。

当客户没有任何预约时，在仪表盘中显示实用的空状态。

最有效的工作方式是持续迭代：先建立产品，查看实时预览，提出一项有意义的改进，验证结果后再继续下一步。