入门:我的第一个Vibe Coding实践程序

01 | 先把开发环境准备好

第一次做 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 认证。

在易用性方面,笔者要求提供一整套启动、关闭、检查服务状态的脚本。这样既方便后续维护,也方便 Codex 调试时直接调用。

05 | 第一个版本先完成基础闭环

最终,第一个 Vibe Coding 程序完成了基础功能:可以录入可信知识,可以检索、更新、删除已录入内容,也加入前端登录页面。

对初学者来说,这个过程的启发是:Vibe Coding 不是简单让 AI "写个程序",而是先把环境、数据库、技术栈、接口、安全和运维要求说清楚,再让 AI 小步快跑地执行。

至此,笔者的第一个 Vibe Coding 程序基础功能已经完成。后面会根据实际需要继续迭代。

关注我,和AI一起成长~

相关推荐
幸福指北10 小时前
🚀 开源了,一个人 + AI 肝出一个 AI 终端 | AShell 技术分享
运维·人工智能·ai·终端
浮生望11 小时前
Vibe Coding 实战指南:先规划再编码,用胶水思维告别 AI 幻觉代码
vibecoding
人间凡尔赛12 小时前
2026多智能体系统深度解析:从GPT-5.6 Ultra到开源框架,构建你的Agent军团
ai·agent·多智能体·langgraph·crewai·gpt-5.6
AI办公探索者12 小时前
仓储物流AI任务执行的技术拆解:从WMS自动化到多设备协同的落地路径
运维·人工智能·ai·自动化
武雄(小星Ai)13 小时前
2026 AI编程工具横评:Trae、Cursor、Copilot、Claude Code实测对比
ai·copilot·cursor·编程工具·trae·claude code·对比评测
VIP_CQCRE14 小时前
最近发现一个小工具:把 Ace Data Cloud 接入 AI 助手
ai·开发工具·mcp
fthux16 小时前
GitZip Pro:给GitHub仓库“瘦身”的魔法剪刀手
人工智能·chrome·ai·语言模型·开源·github·open source
Darling噜啦啦17 小时前
Vibe Coding 工程化指南:9 步前置流程告别 AI 屎山代码
vibecoding
雨田哥20 小时前
我使用AFSIM助手写了一个想定场景脚本
ai·afsim·ai afsim·afsim助手·afsim智能助手·afsim智能编码·afsim智能问答
臼犀21 小时前
大语言模型响应延迟对软件工程师尿液浓缩程度的影响 —— 一项基于水杯见底速度的观察性研究
程序员·ai编程·vibecoding