把一个网站想法，做成可以打开的第一版
先完成一个真实的小页面，再检查手机、链接和发布结果。把“做出来”和“能用”分开验收。
- 能得到
- 一个包含真实内容、可以打开查看的单页网站。
- 准备
- 网站给谁看、要帮助他们完成什么，以及标题、正文、图片和链接。第一版先不加账号、支付或数据库。
- 费用
- 先用你已有的工具和免费版试；额度、功能和地区可用性以官网为准。
工具怎么选？展开查看适用情况与限制
选什么工具
以下是按任务给出的建议，不是统一实测的排名。已有账号能完成任务，就继续用它。
| 工具 | 什么时候用 | 注意 |
|---|---|---|
| Lovable | 没有代码项目，想在浏览器里描述需求、看预览，再用平台发布。 | 生成与发布是两个步骤；套餐、额度及域名条件看官网。 |
| Claude Code | 已有项目，希望 AI 直接读代码、修改文件并运行检查。 | 需要提供项目和运行环境；完成代码修改后仍要验收与发布。 |
| Codex | 已有代码仓库，想让编程助手围绕具体需求完成修改。 | 先做预览或分支，再核对改动；访问权限和实际运行环境影响工作方式。 |
第一次怎么做
- 明确访问者和页面目标：“给我的读书小组做报名介绍页”比“做一个高级的网站”更有方向。列出必须出现的内容，以及一个主要行动，例如查看活动详情。
- 提供真实内容，再描述风格：先给标题、说明、时间和链接，再说颜色、间距和参考。没有材料时明确使用占位符，别让生成的虚构内容混进正式页面。
- 每次修改一个具体问题：例如：“手机上两列挤在一起，改成一列；电脑布局保持”。把位置、现象和期待的变化说清楚，保留可返回的上一版。
- 预览通过后，再发布并打开正式链接：先检查链接、按钮、内容和窄屏布局。Lovable 提供发布入口；已有代码项目则使用原来的部署方式。发布后再用新的浏览窗口打开链接，确认访问者看到的版本。
可复制的提问
把方括号里的内容换成你的情况，再附上自己的材料。
任务要求
请做一个单页网站的第一版。 访问者：[给谁看] 目标：[访问者看完后要知道或完成什么] 必须包含：[按顺序列出真实内容和链接] 风格：[简短描述，可附参考] 要求：电脑和手机都容易阅读；按钮有真实去向；缺少的内容标为待补充。 第一版先不添加登录、支付和数据库。 完成后给出可查看的预览，并说明怎样发布和检查。已有项目时请沿用现有技术与部署配置。
示例
以下为编辑编写的教学示例，展示结果应有的样子，不是某款工具的实测记录。
你提供的
为读书小组做介绍页：标题“周末一起读书”，每周日下午线上讨论，书目待定，主要按钮链接到小组已有的报名表。
好的结果应该像这样
第一版应有四部分：标题与一句说明、活动时间、书目 [待确认]、报名按钮。 验收：手机上一列阅读；按钮打开真实报名表；没有虚构成员数和评价；上线地址可以从新窗口打开。
检查与调整
- 文字、图片和链接来自你提供的材料。
- 按钮确实完成对应动作，表单不是只画了一个外观。
- 手机上无内容挤压，文字能读，导航能用。
- 发布链接能打开，后续修改知道在哪里进行。
结果不对时，可以这样继续问：
检查与修正
请对照原始需求列出已完成与未完成项。检查所有站内链接、按钮和窄屏布局，先给出问题，再修复。不要增加新功能。
下一步
第一版稳定后再增加一项功能。涉及账号、订单或数据存储时，单独确认流程和测试方法，别在同一次修改里全部加入。
自己试一次
下面已填好示例。改成你自己的目标、材料、想要的结果和要求，提问会自动更新，复制到你常用的 AI 即可。内容只在本页处理，不会发送出去。
你的提问草稿
我的目标：给读书小组做活动介绍页 我的材料：标题、活动时间、真实报名链接和已有图片 希望得到：单页网页，电脑与手机都能阅读，提供预览 要求：缺失信息标待补充；第一版不加登录、支付或数据库 材料不足时先问我，不能编造。完成后指出我需要核对的内容。
复制后，粘贴到你常用的 AI，再附上自己的材料。