前两天 yy 的 Agent Market 拆解来了,最近刚好在学习 AI Coding,索性做一个实战项目,快速做了一版 demo(
agent.playwithai.fun):
1、 几乎 0️⃣ 成本
①耗时:3 小时
②域名:¥180 买了 10 年
③服务器:0 元(Cloudflare 免费计划,每天 10w 次调用)
④数据库:0 元
⑤Monica:$19.9/月(3 天试用的话 0 元)
2、技术栈
①前端:Javascript + CSS(全 AI 生成,我是前端小白,只做了拷贝粘贴动作)
②后端:Cloudflare Worker Serverless
③数据库:Cloudflare Worker D1
④AI Coding:Monica Pro + Claude3.5
3、0️⃣编码过程
①网站功能规划:需求广场,发布需求,提效工具,规划并创建数据库和表
②AI 生成前端,claude 基本不需要专业的提示词,说清楚需求就行,如果有参考网页风格,可以给它链接
③域名 dns 解析改到 Cloudflare
④创建 Cloudflare woker,一个输出前端网页 fe-worker,一个后端 API api-worker
⑤拷贝前端 html 到 fe-worker,指定输出 text/html
⑥前端调试 ok 后,将 html 扔给 monica 生成后端 API,并补充前端异步请求
⑦拷贝后端代码到 api-worker,注意设置允许跨域访问,指定输出 application/json
⑧对前后端 worker 分别绑定 cname
⑨部署,大功告成!
4、 感悟
①整个过程还是远超期望,claude 对“简洁漂亮的网站”理解到位,是我想要的风格。而且 monica 结合 claude 体验很丝滑,迭代过程会给出详细的增量修改说明。最后一版扔给模型,会给出编码规范,性能优化,甚至 seo 优化的建议。趁热打铁也做了一版首页,点击可以体验:
playwithiai.fun②Cloudflare Worker 配置需要有点编程基础,感兴趣的可以找我,也比较简单。
③如果你也想体验一下,可以用我的 monica 邀请码:
monica.im