easy-vibe Stage 2 全栈开发学习路径详解：从前端设计、Supabase 后端到两个 SaaS 大作业（德语文档）

easy-vibe Stage 2 全栈开发学习路径详解从前端设计、Supabase 后端到两个 SaaS 大作业德语文档【免费下载链接】easy-vibe vibe coding 101The first course for AI-native product builders.项目地址: https://gitcode.com/GitHub_Trending/ea/easy-vibe本文基于 easy-vibe 课程德语版 Stage 2 总览文档 docs/de-de/stage-2/index.md 撰写系统梳理Junior- und Mittelstufen-Entwicklung初级至中级开发阶段的学习地图8 门前端课、6 门后端课的完整脉络两条大作业Grossaufgaben主线——Copywriting 生成 SaaS 与在线考试管理系统——的完整交付要求与评分标准以及 Dify 知识库扩展方向。读完后你将清楚知道这一阶段要掌握哪些全栈技能、按什么顺序学、最终要交付什么样的可演示产品并能直接沿着文中链接进入每一章的实操细节。1. 本阶段定位从会写页面到交付产品Stage 2 是 easy-vibe 课程AI 原生产品构建者路线中的中间阶段。总览文档对该阶段的定义是深入Full-Stack 开发掌握前端组件化、数据库设计、后端 API 开发与部署。与 Stage 1Anfaenger und Produktprototyp初学者与产品原型不同这一阶段的目标不再是跑通一个页面而是把各个零件组装成一个可运行、可演示、可上线的产品。1.1 适合人群文档明确列出四类目标读者有一定编程基础、想系统学习 Full-Stack 开发的开发者希望从产品经理转型为全栈工程师的学习者想掌握现代开发工具与工作流的初级至中级开发者希望独立开发完整产品的创业者。1.2 前置要求已完成 Stage 1初学者与产品原型阶段或具备同等基础即理解基本的HTML / CSS / JavaScript概念对AI 编程工具如 Trae、Cursor 等 AI IDE有基本了解。满足以上前提后即可按 2、3 节的顺序进入课程正文。2. 前端 8 课从设计素材到组件库总览文档将前端部分组织为 8 个章节NavCard 导航整体链路是先会生成与组织设计素材 → 再懂设计规范 → 然后把设计变成代码 → 最后用组件库和 Skills 插件提升品质。各章节及其核心内容如下链接为仓库内相对路径章节文档路径核心内容基于 Lovart 搭建自己的素材生产 Agentlovart-assets用 NanoBananaGoogle 的 Gemini 3.1 Flash Image Preview 图像模型与 Lovart 批量生成高质量设计素材构建带意图识别的绘图 AgentFigma 与 MasterGo 入门figma-mastergo掌握专业 UI 设计工具的基本操作理解设计稿 → 代码的协作工作流创建你的第一个现代 App —— UI 设计ui-design现代应用 UI 设计基础如何用颜色、字号、间距、圆角等可量化指标拆解并复刻好看的页面按 UI 设计规范设计页面与按钮multi-product-ui学习 Apple/Google/Microsoft/Atlassian 等主流设计规范的页面与按钮层级判定标准用 LLM 与 Skills 美化界面llm-skills-beautiful用 Prompt 与插件让 AI 生成美观且有辨识度的界面避免Inter 字体 紫色渐变的默认 AI 味一起制作 Hogwarts 画像实践项目hogwarts-portraits实战使用 AI 生成图片构建会说话的交互式魔法画像应用从设计原型到项目代码design-to-code将设计工具中的原型转换为真实可运行的前端代码用现代组件库升级你的界面modern-component-library使用组件库快速构建专业界面理解组件库相对手写组件的优势几点可以从各章正文中得到印证的细节design-to-code 给出的原型 → 代码三条路径是多后续章节共同依赖的方法论路径 1 用多模态大模型基于截图直接重建代码适合快速原型验证路径 2 通过 Figma/MasterGo 平台自带能力或插件导出代码精度高、可编辑性好路径 3 平台结合 MCP 能力导出代码自动化程度高、可定制。大作业 2 的前端骨架提示词正是走路径 1 的给需求让 AI 生成思路。lovart-assets 的素材生产以 NanoBanana 为例说明它可通过 Google AI Studio 直接使用也可通过 API 集成进开发流程教程采用 API 调用方式目标是把批量出图 风格控制沉淀为可复用的素材生产 Agent。modern-component-library 的核心论点是组件库是前端的IKEA——按钮、表单、下拉、对话框这些被反复使用的界面元素已由大量用户验证优化开发者应把时间花在业务逻辑是什么而不是交互细节怎么做上并强调专业组件库自带响应式与无障碍支持。llm-skills-beautiful 提出的5 个维度字体、色彩、布局、动画、细节用于向 AI 描述设计风格配合 Skills 插件自动加载专业设计规范是 Stage 2 贯穿AI 生成界面环节的核心技巧。3. 后端 6 课Git、数据库、API、支付与部署总览文档将后端部分组织为 6 个章节链路是版本管理 → 数据库 → 后端接口 → 部署 → CLI 工具 → 支付商业化章节文档路径核心内容学会使用 Git 与 GitHubgit-workflowGit 版本控制的核心操作与团队协作工作流安装、配置、与 GitHub 协作从数据库到 Supabasedatabase-supabase关系型数据库基础 Supabase 作为现代 BaaS 平台的使用数据库、用户系统、Realtime、Storage、Edge Functions后端接口设计与开发ai-interface-code用 AI 辅助生成后端接口代码与标准化 API 文档提高开发效率发布你的产品原型zeabur-deployment用 Zeabur 等 PaaS 平台快速将 Full-Stack 应用部署上云从 IDE 到 CLI AI 编程工具modern-cli探索现代命令行 AI 编程工具改进命令行环境下的开发体验集成 Stripe 等支付系统stripe-payment实战在应用中集成 Stripe 支付实现商业化变现从各章正文可以补充几个关键事实database-supabase 的学习目标包括数据的定义与数据库基础、用 Supabase 完成基本数据库操作、为 App 添加用户管理注册/登录/权限、扩展能力Realtime / Storage / Edge Functions以及接入 Google / GitHub 登录。其预期产出是一份可复用的 Supabase 后端代码模板直接服务于后续大作业。ai-interface-code 的定位是用高质量 Prompt 驱动大模型生成 Node.js Express 后端接口并自动生成 OpenAPI/Swagger 文档与测试用例Postman 集合、Jest 单元测试解决前端按钮点了之后数据如何安全地进入数据库这一前后端桥接问题。stripe-payment 强调三条必须记住的原则这也是大作业 1 支付环节的架构依据价格必须由后端确定不能信任前端传来的金额权限应由 Webhook 激活而不是靠支付success回跳页面自己的数据库必须保存支付状态不能只依赖支付平台后台。zeabur-deployment 回答为什么用 PaaS 而不是自己买服务器平台代管了购机、配置运行时、上传文件、启动测试等全部麻烦环节只需连接 GitHub 仓库即可上线。4. 大作业把零件组装成产品总览文档对大作业Grossaufgaben的定位是前面的章节处理零件大作业处理把零件组装成可运行、可演示、可发布的产品。4.1 推荐顺序与学习链路文档建议按大作业 1 → 大作业 2的顺序学习大作业 1带你走完现代 SaaS 最常见的主链路登录、生成、数据库、支付、管理后台大作业 2带你进入更接近业务系统的场景角色权限、题库、考试、提交记录、管理控制台。原文的学习路径流程图mermaid完整保留如下4.2 两个主项目的选择对照表文档给出的一张不知道从何下手时参考的对照表已按原表内容翻译整理项目主要练习内容最适合最终交付大作业 1文案生成网站SaaS 页面结构、用户登录、AI 生成、Stripe 支付、管理后台第一次构建完整商业网站的人带注册、生成、支付、管理功能的 SaaS 原型大作业 2在线考试管理系统角色权限、题库建模、考试流程、提交记录、批改与统计想真正完成一个业务系统的人带学生端与管理员端的考试平台4.3 无论选哪个都至少要交付的 3 样东西一个可运行的项目仓库一个可访问的演示链接一份README 与演示视频。5. 大作业 1 深入AI 文案营销 SaaSSupabase Stripe章节文档copywriting-platform-supabase。这是 Stage 2 的综合实战要求从一份真实 PRD 出发用Supabase 作为后端服务、Stripe 作为支付系统完整走完需求分析 → 部署上线全流程。5.1 产品结构与四步流程要构建的产品包含三个子系统子系统职责公开网站产品介绍、定价、FAQ、注册转化用户工作台输入产品信息、生成文案、查看历史、升级套餐管理后台用户管理、生成记录、支付数据、运营概览章节给出的四步流程StepBar是需求分析读 PRD明确页面、功能、鉴权、支付范围搭建骨架用 AI 生成三个前端骨架www / app / admin后端集成Supabase Auth、生成 API、Stripe 支付测试与部署端到端走通上线并准备演示。5.2 章节提供的关键 Prompt 骨架该章节把如何用 AI 分步做写成了可直接复制的 Prompt 模板这是它区别于一般导航页的实战价值所在前端骨架 Prompt要求生成三个入口www/app/admin网站含首页、定价、FAQApp 含登录、注册、Dashboard、历史、套餐页Admin 含首页、用户管理、生成记录、支付先只做 Mock 数据的页面结构不接真实 API风格要求现代 SaaS而不是课堂演示。Dashboard 精化 Prompt左侧表单字段为产品名、一句话描述、目标用户、3 个卖点、渠道右侧结果区为主标题、副标题、CTA、3 条短文案、长文案。Supabase 登录 Prompt连接 Supabase → 实现注册/登录/登出 → 登录后跳/dashboard→ 受保护页未登录自动跳/login→ 建profiles表 → 注册时自动写入 profile 记录。Stripe 支付 Prompt/billing页展示 free/pro 两档 → 点击升级跳转 Stripe Checkout → 支付后返回网站 → 支付结果写入subscriptions表 → 更新profile.plan字段 →Free 用户每天最多 3 次生成Pro 不限次。管理后台 Prompt仅role admin可访问/admin三个 Tab用户列表、生成记录、订阅状态并给出每个 Tab 的字段清单。5.3 交付物与评分标准交付物清单可访问的在线演示链接、源码仓库含 README、PRD 文档、核心页面截图首页、Dashboard、Billing、Admin、60 秒演示视频。评分标准表原表完整继承维度基本要求扩展要求产品完整度主要页面全部可访问风格像真正的 SaaS业务闭环注册 → 生成 → 历史 可用Free/Pro 差异清晰可见数据正确性生成结果与支付状态入库有报错、空态与 Loading 处理权限受保护页面未登录不可访问服务端角色校验工程性本地可跑、可公开部署README 清晰、演示视频完整章节还附了提交前最后一查清单首页/登录/Dashboard/Billing/Admin 完成、注册登录登出可用、生成结果入库、支付主流程可用、Admin 可查看用户/记录/支付状态、项目已公开部署并留下一句方法论先跑通再美化Zuerst zum Laufen bringen, dann verschönern。6. 大作业 2 深入在线考试与管理系统Express章节文档exam-management-express。与大作业 1 的差异在于它用Express 作为后端核心难点是多角色学生/管理员不同页面与权限的业务系统建模。6.1 产品结构与角色三个子系统公开网站平台介绍、登录入口、学生门户考试列表、作答、提交、成绩查看、管理后台题库、考试管理、提交数据集、成绩统计。6.2 技术栈与页面清单章节的骨架 Prompt 明确指定了技术栈Next.js App Router、TypeScript、Tailwind CSS、shadcn/ui并要求生成 9 个页面首页/2. 登录/login3. 学生考试列表/student/exams4. 学生答题页/student/exams/[id]5. 学生成绩/student/history6. 管理首页/admin7. 考试管理/admin/exams8. 题库/admin/questions9. 提交列表/admin/submissions。6.3 后端 API 与评分逻辑章节给出的推荐 API 表原表完整继承模块推荐 API考试管理GET /api/exams、POST /api/admin/exams、PATCH /api/admin/exams/:id题库GET /api/admin/questions、POST /api/admin/questions开始考试POST /api/submissions/start提交考试POST /api/submissions/:id/submit成绩GET /api/student/history、GET /api/admin/submissions评分逻辑按题型区分多选题用户答案与标准答案一致即得分判断题自动批改简答题只存答案、分数留空、reviewed false待人工或 AI 批改。权限目标学生只能调/student/*API管理员只能调/admin/*API未登录用户统一重定向到/login。部署建议前端 Vercel / ZeaburExpress API 用 Zeabur / Railway / Render数据库用 Supabase Postgres 或托管 PostgreSQL。评分标准表原表完整继承维度基本要求扩展要求页面完整度学生与 Admin 主要页面可访问设计统一、移动端基本可用业务闭环学生能考试并查成绩Admin 能完整创建考试数据正确性答案入库、自动批改简答题支持人工或 AI 辅助批改权限学生/管理员边界清晰服务端角色校验工程性可运行、可部署、README 清晰演示视频与测试说明7. 六个扩展选题按技术方向深化完成两个主项目后或想按自己的技术栈定制作品集时总览文档提供 6 个扩展选题各章节文档均位于docs/de-de/stage-2/assignments/下扩展选题文档路径锻炼重点现代 Web 落地页工程modern-landing-page价值表达、转化路径、CTA 设计与基础埋点类 Dify 智能体编排平台custom-dify-agent-platformAgent 管理、会话、日志、访问控制智能旅行规划 Agent 编排平台travel-planning-agent-platform结构化输入、Agent 编排、历史行程管理Spring Boot 电影推荐系统movie-recommendation-springboot评分/收藏、可解释推荐的完整推荐原型生鲜电商微服务系统simple-grocery-microservices服务拆分、网关路由、库存与订单协同单体 → 微服务Go 交通数据分析可视化平台traffic-data-visualization-go数据采集、窗口聚合、趋势 Dashboard 与告警可以看出扩展选题的意图覆盖增长落地页、AI Agent 平台、Java/Spring Boot、Go、微服务五条不同技术纵深让学习者按职业方向选择第二个深度项目。8. AI 能力扩展Dify 知识库集成Stage 2 的 AI 扩展模块只有一门课Dify 介绍与知识库集成。从该章正文看它的主线是从简单 AI 文本/图像工具过渡到更接近企业应用的 Workflow 平台理解为什么需要从 Chatbot 走向 Agent 与 Workflow 编排用 Dify 这一开源 LLM 应用平台快速构建应用重点是知识库问答 Bot理解 RAG 的实现方法与价值最终基于 Dify API 开发前端聊天机器人 Web 应用。这一课与前文 lovart-assets 的素材生成 Agent、大作业的AI 生成功能形成互补一个是生成能力一个是基于自有知识的内容能力。9. 阅读与学习建议顺序建议先按第 2、3 节把前端与后端章节读通它们是两个大作业的共同前置再依次完成大作业 1、大作业 2扩展选题与 Dify 可作为收尾深化。路径说明本文所有链接均为仓库根目录下的相对路径指向德语de-de版文档同一 Stage 2 结构在仓库的docs/下其他语言目录如 zh-cn、en、ja-jp 等中也有对应内容可按需对照阅读。交付导向总览文档反复强调的验收锚点是可运行的仓库 可访问的演示链接 README 与演示视频。无论选择哪个项目建议从第一天起就按这两个大作业章节中的提交前检查清单逐项核对最后阶段再做界面与体验打磨。【免费下载链接】easy-vibe vibe coding 101The first course for AI-native product builders.项目地址: https://gitcode.com/GitHub_Trending/ea/easy-vibe创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考