项目介绍：Vibe Coding 制作办公领用助手小程序

1. 项目目标

• 把零散的物资申领动作整合为顺滑、轻量、可演示的小程序体验。
• 使用 AI 持续生成和修补 WXML / WXSS / JS，加快页面迭代与交互落地。
• 沉淀一套可复用的“需求 - Prompt - 预览 - 微调 - 发布”工作方法。

2. 开发流程

• 需求分析：向 Claude 描述功能需求，AI 自动生成 PRD 文档及 UI 预览图，覆盖五大模块：登录、首页概览、目录领用、记录追踪、个人中心。
• UI 设计：将 PRD 与预览图导入 Figma，优化布局排版、统一色彩规范、细化组件交互，采用浮岛胶囊 Tab 作为底部导航，并使用 Nano Banana 生成插画及图标元素。
• 代码开发：Figma 设计稿导入 Codex 自动生成代码，通过截图反馈机制让 AI 识别偏差并修正，微信开发者工具实时预览效果。
• 发布上线：通过微信小程序开发工具完成测试验收与正式发布。

3. 亮点总结

• 两天完成从需求到发布的完整前端交付。
• AI 工具覆盖需求、设计、编码三个环节，效率较传统开发提升约 70%。
• 沉淀可复用的「需求 → Prompt → 预览 → 微调 → 发布」标准工作流。

4. 项目价值

该项目证明了我可以把业务需求转译为可预览原型，并借助 AI 协同显著缩短从想法到成型页面的周期。 在这个过程中，我不仅完成了原型搭建，也验证了自己在需求拆解、界面组织、交互打磨与演示表达方面的综合能力。

项目界面演进

最初我先借助 AI 快速生成了两张小程序初版界面，用来验证整体视觉方向与基础页面结构；在此基础上， 我结合真实办公申领场景，对信息层级、底部导航、记录状态与个人页表达进行了多轮调整，最终迭代出下方四张更完整、 更贴近业务流程的正式展示版本。