我比较喜欢组局，为了方便大家，觉得有必要做一个工具，一个轻量的报名系统。以后每次办活动就生成一张海报，大家扫码报名参加！
过去会觉得不值得专门做，但现在有了 AI 编程，这种小工具真的就是顺手的事情。
下面我们团队小伙伴把整个从 0 到 1 的网站开发过程完整复盘了一下，也顺便分享一些小技巧。
需求讨论
和 ChatGPT 沟通想法和网站功能。不要有什么约束，不需要提示词，就很自然的沟通对话就行。把你的想法、你想参考的目标都给到他，这个过程也是进一步让你自己理清楚思路的过程。
最后把要实现的核心功能、所用到的技术、最小 MVP 都落到prd文档上。
因为我想用 Stitch 这个工具去生成 UI 图，想把页面做高级一些，所以在和 GPT 聊完需求之后，我让他给到了所需要的页面以及一句话描述。
你告诉我有需要哪几个页面，这一句话描述这个页面是用来做什么的，我去给stitch设计
所需要的页面（用于给到stitch生成UI图）
✅ 活动报名系统需要的页面（最小闭环版）
活动详情页
用于展示活动信息，并提供「立即报名」入口。
报名表单页
用于填写个人信息（姓名/手机号/邮箱等）和确认票种。
支付结果页
用于提示「支付成功/失败」，并指向入场券页面。
入场券页面（我的票）
报名成功后展示个人专属验证信息（验证码/二维码/票种）。
✅ 管理后台（可选，但建议）
报名名单页（后台）
供主办方查看报名信息、付款状态、导出名单。
核销页（后台）
现场输入验证码进行签到核销。
UI 设计
接着就是去到 Stitch 这个平台，把上面 GPT 给我们的详情页以及一句话描述全都发给他。告诉他一共有几个页面，然后就等待他生成。一般生成出来的效果都是比较高级、比较专业的。
非常完美，一次过，不纠结细节。
这里我发现可以直接去 AI Studio 构建项目代码。将设计出来的页面全选之后，右键有个导出按钮，选择 AI Studio，点击就跳转到 AI Studio，并且它可以把设计出来的页面以及 HTML 代码全都带过去。
你只需要再简单的描述一下你这个网站要实现的功能，点击 Build 按钮就开始工作给你构建项目代码了，这一套流程还是挺丝滑的，很方便。
执行完成，简单浏览了一下，效果还挺不错的。我只是把这里当成原型网站设计来看待，所以并没有仔细看功能实现。
保存到仓库
右上角有 GitHub 的图标，点击新建一个仓库，把代码都同步到 GitHub 仓库里面。
Clone 到本地
git clone git@github.com:XXXX/eventcards.git
功能开发
在 VSCode 里面打开项目，也可以用cursor，看个人习惯。我安装了 Claude Code 和 Codex 的插件，一般这两个我都结合着用。
顺便说一下，我用的是 aigocode.com ，目前编程最强的是Claude code ，其次是 codex，Gemini 前端能力也挺强，这3个顶尖大模型一个平台都接入了。
这里就是把和 GPT 沟通完之后的 PRD 文档或者是功能清单给到大模型，它就能自己去实现了。
现在 Claude Code 的 Opus 4.5 模型真的很强，趁它还没有降智，赶紧去用，整个开发过程比之前丝滑了不少。
错误率也降低了很多，而且它更加智能了，它现在会在碰到重要的地方，比如说你的技术选型、核心方案，它会给你提供选项让你选择，并且给你推荐方案，告诉你为什么推荐。
提醒一下：目前只专注核心功能的开发，也就是跑通 MVP，很多人都会出现做着做着，突然一个灵感出现，又忙着拓展，忙着完善。这样就会导致时间拉长。
接入数据库
如果项目涉及到数据存储的话，就接入数据库，我还是选择的 Supabase，到 Supabase 这个平台新建一个项目。
关键是在这个项目里面有几个比较重要的参数，你需要拿到配置到代码里面的配置文件里面。需要哪些参数以及在哪个菜单获取，Claude Code（CC）都可以告诉你的。
还有，在 SQL Editor 里面可以直接复制完整的 SQL 语句，一次性执行 SQL 语句也是 CC 给到的。
Vercel 部署
下一步就到了我们的部署，我还是用的 Vercel。在 Vercel 平台关联 GitHub，通过 Import 把你的项目导入进来，点击 Deploy 按钮就可以部署。
在开发阶段有一些环境变量是保存在本地的配置文件里的，那个文件不会提交到仓库，所以需要你把那些环境变量配置到 Vercel 这个平台。
现在比较方便的是你可以直接告诉 CC，让它启动 Vercel 的命令行，让它去配置，它可以读取你本地的配置文件，然后一一对应的导入到 Vercel 平台。
如果是新项目没有绑定的话，第一次连接会让你执行一下命令链接项目选择，你按它的指令选择要链接的项目就行。
拿到 Vercel 提供的生产域名进一步测试，要注意一下的是这里自动给到的域名是需要魔法才可以访问的。
优化体验
接下来就是测试功能。哪里觉得不太好就完善哪里，总之把 MVP 功能实现，并且测试无误。
现在的cc会自己打开浏览器，按步骤执行操作（需要先安装 playwright 的MCP），你就可以坐在那看它操作。这也是我觉得非常智能，很省心的地方。
实际感受而言，从 0 到 1 搭出一个基本的框架，实现最小功能，现在的速度已经是很快了。在开发这块比较花时间的，还是细节方向的优化打磨。
MVP验收
围绕你要实现的核心功能，完整流程测试一遍，有问题再改，没有问题就算是基本完成了。
配置域名
域名这一块我是先让 ChatGPT 给我提供了几个做参考，最后我选的是第一个，同样 CC 给我推荐的也是第一个域名。
这里我为什么选择子域名？因为这本身就是一个便于我们团队工作的小工具，其实是依托在我们的业务下面的。挂在 fyyd.net 这个网站下面完全没问题，而且因为我们要接入微信支付，微信支付需要域名有国内的备案，正好我们的域名 fyyd.net 有备案，所以特别合适。
在 Vercel 里添加自定义域名
1、打开 Vercel，进入这个报名系统的项目。
2、左侧点 Settings → Domains。
3、新增域名 event.fyyd.net。
4、Vercel 会给你一条 DNS 配置提示，如下：
在域名服务商里配置 DNS 记录
我的 fyyd.net 是在阿里云托管的DNS，所以登录到阿里云的 DNS 控制台。
新增一条记录：
-
记录类型：
CNAME -
主机记录：
event -
记录值：填刚才 Vercel 提示的那个值
-
TTL：默认即可
回到 Vercel 验证 & HTTPS
回到 Vercel 项目 → Settings → Domains。Vercel 会自动帮你签发 HTTPS 证书，正常几分钟内生效。看 event.fyyd.net 那一行状态是否变成 Verified。
💡 AI 工具的爆发，让普通人也能快速做出产品。
但如何做？如何变现？如何真正走向海外市场？
👉 想了解更多 AI 编程 & 出海实战信息
扫码或微信搜索 257735，发送暗号 【美金】
了解详情，加入实战社群。
微信扫一扫，了解更多详情
🚀 我们的出海作品展示平台上线啦！
欢迎访问 Showcase 平台，
这里汇聚了学员的出海实战作品，方便大家获得反馈、积累曝光机会。
我们还会定期举办创作活动与奖励计划，欢迎来逛逛！
🔗 更多教程请访问 ipengtao.com
文章评论