Easy-Vibe 初中级开发阶段从全栈开发基础到可上线 SaaS 产品的完整学习路线【免费下载链接】easy-vibe vibe coding 101The first course for AI-native product builders.项目地址: https://gitcode.com/GitHub_Trending/ea/easy-vibe本篇技术指南完整解读 Easy-Vibevibe coding 101面向 AI-native 产品构建者的第一门课程中「初中级开发」阶段的学习路线。该阶段聚焦于全栈开发的纵深能力前端组件化与 AI 设计工具、后端 API 与数据库、支付与部署并通过两个大作业把零散的技能点组装成可运行、可演示、可上线的完整产品。读完本文你将掌握这一阶段的全部学习模块、两套实战项目的任务拆解与验收标准以及如何借助 AI 编程工具高效完成全栈产品开发。阶段定位从会做原型到能做完整产品初中级开发阶段对应仓库 docs/fr-fr/stage-2/index.md是 Easy-Vibe 课程体系中的关键一跃。在新手与产品原型阶段学习者已经掌握了基础的页面制作与 AI 编程工具到了本阶段目标升级为深入全栈开发掌握前端组件化、数据库设计、后端 API 开发与部署上线。整个阶段的知识结构可以概括为三条主线 两个大作业主线覆盖能力学习模块数前端开发组件库、设计工具、AI 设计、设计转代码8 个模块后端开发Git 协作、数据库、API 接口、支付、部署、CLI6 个模块AI 能力扩展知识库与 AI 应用编排1 个模块大作业文案生成 SaaS、在线考试系统2 个主线 6 个扩展前面的章节是在学零件大作业才是在学怎么把零件装成一个能跑、能演示、能上线的产品。这正是本阶段与之前阶段的本质区别不再停留在单页 Demo而是交付一个具备登录、数据持久化、商业化能力的完整业务系统。前端开发掌握现代前端组件化与 AI 设计前端主线共有 8 个模块目标是从能写页面进阶到能设计并实现专业级界面。每个模块的详细文档均可在仓库docs/fr-fr/stage-2/frontend/下找到。1. 素材生产 Agent从 Lovart 出发从 Lovart 到搭建自己的素材生产 Agent利用 Nanobanana 和 Lovart 批量生成高质量设计素材并动手构建一个具备意图识别的绘图 Agent。这一模块解决的是设计资源从哪来的问题为后续 UI 设计提供弹药。2. UI 设计入门构建第一个现代应用构建第一个现代应用程序 - UI 设计是前端主线的核心方法论课程它提出了一个贯穿始终的中心问题面对一个设计精美的应用如何拆解它的设计方式并借助 AI 设计工具复刻到以假乱真该模块给出了可执行的五步路径找参考 → 分析 → 模仿 → 逼近 → 入门核心观点是前端设计入门第一课不是创造而是复刻。具体拆解方法包括看结构绝大多数现代网站可拆解为四大区块——导航栏、Hero 首屏、内容区、页脚看视觉颜色、字体、间距、圆角与阴影都是可量化的数值浏览器 DevTools 就是天然的设计分析器看组件将页面拆解为可复用的零件逐个记录其样式参数积累 35 个页面后即可沉淀出自己的组件样式库。模块还对比了两条设计路径Figma/MasterGo 专业原型工具路径与 Claude Design / Open Design 对话式设计画布路径并强调复制规则布局、配色、间距是允许的复制结果Logo、图标、插画是危险的这一版权边界。3. 设计工具协作Figma 与 MasterGoFigma 与 MasterGo 入门掌握专业 UI 设计工具的基础操作理解从设计稿到代码的协作流程为设计转代码的工程化打好基础。4. UI 设计规范参考规范设计页面与按钮参考 UI 设计规范设计页面和按钮学习主流 UI 设计规范design guidelines设计出页面层级与按钮层级更清晰的产品界面。5. LLM 与 Skills让界面变好看用 LLM 和 Skills 让界面变好看通过提示词与插件实战把大厂视觉规范封装成 AI 可执行的指令Skill让 AI 稳定产出美观且独特的界面。6. 实战项目霍格沃茨画像一起做霍格沃茨画像结合 AI 生成的图像构建一个交互式的霍格沃茨画像应用。这是一个完整的前端实战项目用于串联前面学到的设计、素材与交互技能。7. 从设计原型到项目代码从设计原型到项目代码学习如何将设计工具中的原型转化为真正能在浏览器中运行的前端代码。设计好的 UI 必须最终落地为代码这一模块打通设计与工程之间的鸿沟。8. 现代组件库专业级界面的捷径使用现代组件库更新你的界面是本阶段前端能力的核心支撑。该模块指出手写按钮、表单、对话框能用但不够专业而组件库就是前端开发的IKEA——开箱即用、风格统一、内置响应式与无障碍支持。模块重点介绍了四款代表性 React 组件库组件库定位适用场景Ant Design企业级后台的事实标准组件覆盖极广管理后台、企业应用shadcn/ui无 npm 安装、直接拷贝代码进项目基于 Tailwind CSS自定义程度要求高的项目HeroUI原 NextUI默认样式优雅、动画流畅落地页、产品展示页Material UI实现 Google Material Design生态最成熟需要 Material 风格的项目该模块通过一个对照实验揭示了 AI 组件库的免费升级在同样的需求提示词中仅在开头加上使用 shadcn/ui 组件库AI 生成的仪表盘页面在视觉一致性、交互细节与完成度上就完全不同。实战中还演示了用npx create-heroui-applatest创建项目、再用 AI IDECursor/Trae 等生成落地页的完整流程。后端开发API、数据库、支付与部署后端主线共 6 个模块目标是把页面升级为服务数据能持久化、用户能认证、业务能商业化、应用能上线。1. Git 与 GitHub 工作流学会使用 Git 与 GitHub掌握 Git 版本控制系统的核心操作与团队协作流程。这是所有工程化开发的地基——无论是版本回退、分支管理还是协作提交都依赖这一基础能力。2. 从数据库到 Supabase从数据库到 Supabase是本阶段后端知识密度最高的模块之一。它从什么是数据讲起覆盖变量、表格、JSON、向量等数据形态进而解释数据库存在的意义持久化存储、高效查询、高并发支撑、数据一致性与安全。模块重点对比了关系型数据库SQL与非关系型数据库NoSQL关系型像严格结构的 Excel 表格需预定义 Schema靠外键关联适合转账、库存等零容错场景NoSQL像灵活的文件夹无需预定义结构按聚合方式存储如一个文档内嵌作者、标签、评论读多写少场景下性能极佳但存在数据冗余。在此基础上引入 Supabase——以 PostgreSQL 为核心的一体化后端平台BaaS提供数据库、Auth 认证、Storage 存储、Realtime 实时、Edge Functions 无服务器函数、Vector 向量检索等全套能力。模块还给出了完整的实操路径创建项目在控制台 New project设置项目名、数据库密码与区域Table Editor / SQL Editor可视化建表或直接执行 SQLAuth 认证邮箱注册登录、第三方 OAuthGoogle/GitHub、速率限制RLS 行级安全通过auth.uid()将数据行与用户身份绑定实现细粒度权限控制Edge Functions作为前端与第三方服务OpenAI、Stripe之间的安全代理层密钥只存在于服务端。模块提供了可直接在 SQL Editor 中执行的完整 CRUD 练习创建orders表、批量插入、条件查询、更新与删除并讲解了CREATE TABLE与FOREIGN KEY外键约束的定义方式是后续两个大作业中 Supabase 集成环节的直接知识来源。3. 应用后端接口设计与开发应用后端接口设计与开发讲解了 API 的角色定位如果把应用比作餐厅前端是菜单、数据库是厨房仓库API 接口就是服务员——接收请求、校验参数与权限、从数据库取数、返回 JSON 响应。模块的核心方法论是用结构化提示词引导大模型写出工程级后端代码核心观点是大模型不怕需求复杂怕需求模糊。它给出了规范的项目分层结构my-api-project/ ├── .env # 敏感环境变量API Keys、数据库连接串 ├── server.js # 项目入口启动服务、注册全局中间件 ├── package.json ├── src/ │ ├── routes/ # 路由层定义 URL 路径与请求方法 │ ├── controllers/ # 控制器层处理业务请求参数、调用服务、返回响应 │ ├── services/ # 服务层封装数据库交互与核心业务逻辑 │ └── middlewares/ # 中间件认证、全局错误捕获 └── docs/ # API 文档目录同时强调给大模型的提示词必须包含数据库字段定义Schema与约束条件例如菜单有名称、价格、分类、上架状态名称和价格必填价格不能为负输入错误要返回错误信息。模块还覆盖了用大模型自动生成 OpenAPI/Swagger 文档、Postman 测试集合与 Jest 单元测试的完整闭环。4. Zeabur 部署一键上线发布你的产品原型讲解 PaaS 一键部署的价值无需买服务器、无需学 DevOps连接 GitHub 仓库点击几下即可上线。模块对比了四款主流平台平台特点适用场景免费额度腾讯云 CloudBase国内访问快深度集成微信生态面向国内用户、需要小程序支持的项目有免费额度Vercel前端框架支持好GitHub 深度集成React/Vue/Next.js 等现代前端项目有免费额度Netlify功能全面支持表单处理与认证需要高级功能的静态站点有免费额度Zeabur多语言多服务模板配置灵活需要部署多服务的复杂项目Dify、n8n 等每月约 5 USD 免费额度模块还指出了 Zeabur 部署的关键细节Zeabur 只识别监听 8080 端口的应用而 React 默认监听 3000因此部署前需通过 AI Agent 将默认端口改为 8080。同时强调了及时停用闲置服务以节省免费额度的运维习惯。5. 从 IDE 到 CLI AI 编程工具从 IDE 到 CLI AI 编程工具探索现代 CLI 工具提升命令行环境下的 AI 编程开发体验覆盖从图形界面 IDE 到终端 AI 工具的进阶路径。6. Stripe 支付最小可用收费系统如何集成 Stripe 等收费系统是本阶段商业化能力的关键模块。它开篇即给出三条必须记住的原则价格必须由后端决定不能信任前端传来的金额真正激活权益的是 Webhook不是success页面自己的数据库必须保存支付状态不能只依赖 Stripe 后台。模块给出了一条最小可用的支付链路快速接入的五个步骤为① 在 Stripe Dashboard 创建 Product 与 Price关键是记录price_id② 配置环境变量STRIPE_SECRET_KEY、STRIPE_WEBHOOK_SECRET、STRIPE_PRICE_PRO_MONTHLY等密钥仅放后端③ 后端创建 Checkout Session④ 前端跳转支付页⑤ Webhook 验签后更新数据库状态。模块特别用大篇幅剖析了为什么success页面不等于支付成功——用户可以伪造 URL 直达 success 页而 Webhook 是由 Stripe 服务器主动发起的带签名通知只有验签通过后才能确认到账。订阅系统还需监听checkout.session.completed首次激活、invoice.paid续费成功、invoice.payment_failed扣款失败、customer.subscription.deleted订阅取消四类关键事件。针对不同市场模块给出了选型建议国际 SaaS 用 Stripe、中国大陆用户用支付宝/微信支付、香港及跨境团队用 Stripe Airwallex/Adyen。大作业把零件组装成产品大作业是整个阶段的收官实战。文档明确指出建议按项目 1 → 项目 2的顺序完成二者构成一条从通用 SaaS 到业务系统的进阶链路如果不确定先做哪个可以参考下面的对比表项目重点练到的技能最适合谁最终交付物项目 1文案生成网站SaaS 页面结构、用户登录、AI 生成、Stripe 支付、后台管理第一次做完整商业化网站的人一个可注册、可生成、可付费、可管理的 SaaS 雏形项目 2在线考试与管理系统角色权限、题库建模、考试流程、提交记录、批改与统计想把业务系统真正做完整的人一个有学生端和管理端的考试平台无论选哪个项目都建议至少准备这3 个交付物一个可运行的项目仓库一个可访问的演示链接一份 README 和一段演示视频。大作业 1第一个 SaaS 全栈应用——文案生成网站完整任务文档见 docs/fr-fr/stage-2/assignments/copywriting-platform-supabase/index.md。该项目的产品是一个 AI 营销文案生成 SaaS包含三个子系统子系统职责官网Site vitrine产品介绍、定价、FAQ、注册转化用户工作台Espace utilisateur产品信息输入、文案生成、历史记录、套餐升级管理后台Console dadministration用户管理、生成记录、支付数据、运营概览技术栈为 Supabase数据库 认证 Stripe支付 AI 模型文案生成。任务分为四步需求分析阅读 PRD回答系统入口、页面职责、数据表、定价与免费额度、MVP 范围五个问题。文档给出明确警告以上问题没有清晰答案前不要开始编码需求理解错误是返工最常见的根源项目结构用 AI 生成 www / app / admin 三个独立入口的前端骨架先全部用假数据随后优先精修 Dashboard 页——左侧表单产品名、一句话描述、目标用户、3 个卖点、投放渠道右侧结果区主标题、副标题、CTA、3 版短文案、长文案并设计加载态、空状态与响应式布局后端集成依次接入 Supabase 登录含profiles表自动建档、/api/generate生成接口与generations历史表、Stripe 支付free 用户每日限 3 次生成、pro 无限制、管理员后台仅role admin可访问含用户列表、生成记录、订阅状态三个页签端到端测试与部署验证注册→登录→生成→查历史→升级套餐与管理员登录→查用户→查生成→查支付两条主链路核对环境变量、回调 URL、README 后完成部署。文档给出的评价维度包括产品完整性页面可访问、业务闭环注册到历史的链路、数据准确性结果真实入库、权限与安全未登录不可访问受保护页、普通用户不可进后台、项目交付可本地运行且已部署上线。提交物清单为在线演示链接、源码仓库含 README、PRD 文档、主要页面截图、60 秒演示视频。大作业 2在线考试与管理系统完整任务文档见 docs/fr-fr/stage-2/assignments/exam-management-express/index.md。该项目从真实 PRD 出发用Express 构建后端实现一个多角色在线考试系统。与前一个项目的关键区别在于多角色与权限管理学生和管理员看到不同的页面、执行不同的操作这一模型掌握后可迁移到在线教育、SaaS 平台、管理后台等大量业务场景。系统同样分为三个子系统官网平台介绍与登录入口、学生门户考试列表、答题、交卷、查分、管理后台题库管理、考试管理、提交记录、成绩统计。关键任务点包括前端骨架推荐技术栈Next.js App Router TypeScript Tailwind CSS shadcn/ui9 个页面——首页、登录、学生考试列表、答题页、学生成绩历史、管理后台首页、考试管理、题库管理、提交记录学生页清晰专注管理页采用侧边栏 顶栏布局答题页优先精修顶部显示考试标题、倒计时、已答题数中间是题干与选项支持单选/判断/简答三种题型附答题卡进度图与交卷确认弹窗Express 后端登录与权限控制学生只能访问/student/*、管理员只能访问/admin/*、未登录跳转/login权限由中间件负责并实现一组推荐的 REST API——GET /api/exams、POST /api/admin/exams、POST /api/submissions/start、POST /api/submissions/:id/submit、GET /api/student/history等判分逻辑单选与判断题自动判分简答题第一版只记录答案、分数留空并标记reviewed false待人工批改文档还提供了一个加分项——管理员输入主题 难度由 AI 生成候选题目人工确认后入题库部署前端部署到 Vercel/ZeaburExpress API 部署到 Zeabur/Railway/Render数据库用 Supabase Postgres 或托管 PostgreSQL。项目提交物同样为在线演示链接、源码仓库含 README、PRD 文档、主要页面截图、60 秒演示视频覆盖学生答题流程与管理端管理流程。评价维度在项目 1 的基础上强调权限控制学生与管理员的页面访问隔离清晰服务端 API 也有角色校验。扩展选题按自己的技术方向深入完成两个主线项目后可以从 6 个扩展选题中选一个方向深入完整文档见docs/fr-fr/stage-2/assignments/目录扩展项目核心技术点现代 Web 落地页工程价值表达、转化路径、CTA 设计与基础埋点类 Dify 智能体编排平台智能体管理、对话、日志与权限控制智能旅游规划 Agent 编排平台结构化输入、Agent 编排、历史计划管理Spring Boot 电影推荐系统Spring Boot、评分收藏、可解释推荐生鲜电商微服务系统服务拆分、网关转发、库存与订单协作Go 交通数据分析与可视化平台数据接入、窗口聚合、趋势看板与告警这些扩展选题覆盖了落地页营销、Agent 平台、推荐系统、微服务架构与数据产品等不同技术方向供学习者按自身兴趣与职业规划选择。AI 能力扩展Dify 与知识库集成AI 能力扩展模块聚焦于 Dify 入门与知识库集成学习使用 Dify 构建 AI 应用并集成私有知识库。这一模块为大作业中的 AI 生成能力文案生成、自动出题提供了平台层面的支撑也是通往后续阶段Stage 3 AI 进阶的桥梁。此外部署章节也演示了如何通过 Zeabur 模板一键拉起自托管的 Dify 服务。适合人群与前置要求适合人群有一定编程基础、想系统学习全栈开发的开发者希望从产品经理转型为全栈工程师的学习者想要掌握现代开发工具和工作流的初中级开发者希望独立开发完整产品的创业者。前置要求完成「新手与产品原型」阶段或具备同等基础知识了解基本的 HTML/CSS/JavaScript 概念对 AI 编程工具有初步了解。总结一条从基础到上线的完整路径Easy-Vibe 初中级开发阶段提供了一条高度工程化的成长路径先用8 个前端模块建立设计 → 组件 → 代码的能力链再用6 个后端模块打通数据库 → 接口 → 支付 → 部署的服务链路最后通过2 个主线大作业 6 个扩展选题将全部技能组装为可交付的完整产品。贯穿始终的核心方法论是先让它跑起来再让它变好看——无论选哪个项目都要以可运行、可演示、可上线为最低标准并在 AI 编程工具的辅助下把更多精力投入到需求理解与架构设计中这正是 AI-native 产品构建者的关键能力。【免费下载链接】easy-vibe vibe coding 101The first course for AI-native product builders.项目地址: https://gitcode.com/GitHub_Trending/ea/easy-vibe创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考