挑战5天和AI一起从零上线一个全栈Web应用

AI编程助手（如GitHub Copilot）已经成为开发者日常不可或缺的工具，但它究竟能做到什么程度？是只能写写简单的函数，还是能真正作为一个“能够独立交付项目的同事”？

抱着这个疑问，我给自己设定了一个挑战：利用业余时间，在5天内，和一个AI编程助手结对，从零开始开发并上线一个完整的Web应用MVP（最小可行性产品）。

与之相关的核心原则是：拒绝“False Hope”的氛围编程（Vibe Coding）。
不仅仅是让AI生成代码然后跑起来，而是要求生成的代码必须经过Review，必须有完善的单元测试（UT）和功能验证测试（FVT），必须符合工业级的代码规范与架构设计。我要保持对每一行代码的掌控力。

项目概览：Awsome Prompt

人员配置：

产品定义：

MVP系统边界定义：

登录只支持邮箱+密码登录，注册只支持邮件发送验证码
只支持docker compose单节点部署，预留实现Helm Chart, Operator的能力
只支持提示词的管理，暂不实现LLM API 的管理、对话系统等
实现i18n框架，只添加中英文支持，暂不实现其他语种的支持
暂不实现可访问性（Accessibility）支持
暂不实现Admin后台管理系统
CI/CD只实现Lint/Commit Lint/UT/FVT/Semantic Release/Docker compose部署，暂不实现E2E测试、静态代码扫描、安全漏洞扫描等

任务：搭建前后端框架、CI/CD流水线。

AI在这一步展现了强大的“百科全书”能力。我不需要手动去查React Router的最佳实践，也不用手写Makefile的基本规则。

Prompt策略：明确目录结构和技术栈要求（Frontend: React/Redux, Carbon, Backend: Go/PostgreSQL/Redis/gRPC/RESTful API）。
成果：
- 瞬间生成了标准的 frontend, backend, deployment 等目录结构。
- 配置好了 .gitignore，Prettier/ESLint/GolangCI-Lint/Commit Lint 规则。
- 搭建了 GitHub Actions Workflow，实现了 Lint 检查和基于 Semantic Release 的版本管理。

感悟：AI极大地消除了项目启动时的“冷启动”阻力，让我直接跳过了繁琐的配置环节，进入核心逻辑开发。

任务：设计数据库schema，实现核心CRUD接口。

这一天是后端开发的“重头戏”。我定义了核心业务逻辑：Template（模板）和 Prompt（实例）的关系，以及版本管理机制。

Prompt策略：详细描述业务模型（User, Template, Version, Prompt），要求生成“可重入”的数据库初始化脚本（Idempotent SQL）。
核心实现：
- 设计了支持 Variable 替换和 Versioning 的复杂数据模型。
- 实现了用户注册/登录基础逻辑（JWT）。
- 编写了 Python 脚本进行本地 FVT（功能验证测试），通过 Docker 自动拉起环境并测试 API。
质量控制：强制要求 AI 为每一个生成的 API 编写 Go UT 和 Python FVT，确保改动不破坏现有功能。

感悟：AI 生成 SQL 和标准 CRUD 代码的效率极高，且能很好地遵循“If not exists”等防御性编程要求。

任务：前端页面开发，打通全栈流程。

这一天主要聚焦在用户体验和前后端对接。

功能亮点：
- 主页：实现了左侧导航（分类/标签云）+ 右侧卡片流式布局。
- 详情页：这是最复杂的页面，实现了模板内容的渲染、变量输入框的动态生成、以及点击“复制/生成”的交互逻辑。
- 权限控制：实现了“私有”与“公开”模板的逻辑隔离，Owner 权限判定（只有作者能修改），以及 Fork 功能的各种边界条件处理。
问题解决：在处理 HTTP 401 自动跳转登录、Token 传递等细节时，AI 能够给出非常成熟的中间件代码（Axios Interceptor）。

感悟：全栈开发最耗时的往往是联调。AI 能够同时理解 Go 的 Struct 和 React 的 TypeScript Interface，自动帮我保持了前后端类型的一致性。

任务：颜值升级（UI/UX Pro Max）与 i18n。

作为一个程序员，UI/UX 设计通常是我的弱项。但这次有 AI 助攻。

UI/UX Pro Max：我使用了UI/UX PRO MAX Skill来帮我设计并实现炫酷的页面风格，提示词要义：要求 AI “设计并修改目前所有的前端页面的视觉风格，要求美观、动态、有科技感，不能更改现有的交互逻辑”。
- 结果令人惊喜：AI 不仅调整了配色，还重新设计了模态框、表单验证的交互样式，甚至加上了悬浮按钮的动画效果。
国际化：一键让 AI 扫描所有硬编码字符串，替换为 i18n Key，并生成中英文 JSON 文件。
数据填充：AI 甚至帮我搜索并整理了一批高质量的初始 Prompt 数据写入数据库。

感悟：这是最让我震撼的一天。AI 弥补了我在 UI 设计上的短板，让MVP看起来像是一个经过精心打磨的产品，而不是简陋的 Demo。