第一次做 Vibe Coding,笔者没有直接让 AI 写页面,而是先整理环境边界。

笔者的开发环境里,Codex Cli 已安装,并配置了可用模型;同时配置了 Oracle SQLcl 的 MCP,可以连接到数据库里的开发用户。为了后续方便,也添加了 Oracle 的 Skill,不过这不是必须条件。

另外,conda 环境也已经安装。笔者让 Codex 直接在 conda 中创建一个独立的 alfred 环境,这样不会影响同样使用此环境开发的其他同事。

端口也提前规划好。本次使用两个端口,分别给前端和后端。

02 | 不急着写代码,先让 AI 探索数据库

真正开始 AI 开发时,笔者先和 Codex 对话,让它通过 SQLcl MCP 连接开发用户,并分析已建立的一张表。

这里有一个关键点:Vibe Coding 不要求一开始就懂很多具体技术,但最好有一点前后端概念。需求描述可以按生产要求来写,这样后续结果不会只停留在 Demo。

笔者的做法是:先把初步想法交给 AI,让 AI 润色成一版更完整的提示词。提示词里明确产品目标是构建“可信知识录入平台”,并告诉 Codex:

  • 数据库通过本地 SQLcl MCP 读取和写入,不要在 Python 中做 Mock 数据;
  • 后端使用 FastAPI,并要求异步化、RESTful 接口和 Pydantic 校验;
  • 前端使用 React,建议结合 Tailwind CSS,页面要具备现代响应式设计;
  • 第一步不是直接写 React,而是先探索数据库中的 AI_QA_LIB 表;
  • 如果后续需要其他表,必须以 AI_ 开头,便于区分。

这样,Codex 的第一步任务就很清晰:先理解表结构,再汇报查到了什么、表之间可能有什么业务逻辑、计划设计哪些 FastAPI 路由,以及 React 前端布局和配色想法。

03 | 用聊天方式逐步确认需求

第一步探索完成后,后面的开发就顺畅很多。笔者继续用聊天方式和 Codex 确认需求,等框架搭建并运行后,再根据偏好微调。

第一个版本先做最基础也最关键的功能:访问真实数据表,完成知识录入;也能对已录入知识进行检索、更新和删除。

可以访问真实的数据表,进行知识录入:

可以对已录入知识进行检索、更新、删除:

这一步的重点不是一次性做大做全,而是先跑通前端页面、后端接口到真实数据库表的完整链路。

04 | 安全和运维要提前规划

除了产品业务功能,安全和运维层面的规划也很关键,而且通用。

在安全性方面,笔者要求前端必须有登录界面,验证真实用户名和密码后才可以进入系统;后端 REST API 也必须有 X-API-KEY 认证。

Logo

小龙虾开发者社区是 CSDN 旗下专注 OpenClaw 生态的官方阵地,聚焦技能开发、插件实践与部署教程,为开发者提供可直接落地的方案、工具与交流平台,助力高效构建与落地 AI 应用

更多推荐