企业官网建设流程全解析

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

【免费下载链接】easy-vibe💻 vibe coding 101｜The 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 1（Anfaenger 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 插件提升品质。各章节及其核心内容如下（链接为仓库内相对路径）：

几点可以从各章正文中得到印证的细节：

• 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 工具 → 支付商业化：

从各章正文可以补充几个关键事实：

• 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 支付环节的架构依据：
  1. 价格必须由后端确定，不能信任前端传来的金额；
  2. 权限应由 Webhook 激活，而不是靠支付success回跳页面；
  3. 自己的数据库必须保存支付状态，不能只依赖支付平台后台。
• zeabur-deployment 回答"为什么用 PaaS 而不是自己买服务器"：平台代管了购机、配置运行时、上传文件、启动测试等全部麻烦环节，只需连接 GitHub 仓库即可上线。

4. 大作业：把"零件"组装成产品

总览文档对"大作业（Grossaufgaben）"的定位是：前面的章节处理"零件"，大作业处理把零件组装成可运行、可演示、可发布的产品。

4.1 推荐顺序与学习链路

文档建议按大作业 1 → 大作业 2的顺序学习：

• 大作业 1带你走完现代 SaaS 最常见的主链路：登录、生成、数据库、支付、管理后台；
• 大作业 2带你进入更接近业务系统的场景：角色权限、题库、考试、提交记录、管理控制台。

原文的学习路径流程图（mermaid）完整保留如下：

4.2 两个主项目的选择对照表

文档给出的一张"不知道从何下手时参考"的对照表（已按原表内容翻译整理）：

4.3 无论选哪个都至少要交付的 3 样东西

• 一个可运行的项目仓库；
• 一个可访问的演示链接；
• 一份README 与演示视频。

5. 大作业 1 深入：AI 文案营销 SaaS（Supabase + Stripe）

章节文档：copywriting-platform-supabase。这是 Stage 2 的"综合实战"，要求从一份真实 PRD 出发，用Supabase 作为后端服务、Stripe 作为支付系统，完整走完"需求分析 → 部署上线"全流程。

5.1 产品结构与四步流程

要构建的产品包含三个子系统：

章节给出的四步流程（StepBar）是：

1. 需求分析：读 PRD，明确页面、功能、鉴权、支付范围；
2. 搭建骨架：用 AI 生成三个前端骨架（www / app / admin）；
3. 后端集成：Supabase Auth、生成 API、Stripe 支付；
4. 测试与部署：端到端走通，上线并准备演示。

5.2 章节提供的关键 Prompt 骨架

该章节把"如何用 AI 分步做"写成了可直接复制的 Prompt 模板，这是它区别于一般导航页的实战价值所在：

• 前端骨架 Prompt：要求生成三个入口（www/app/admin）；网站含首页、定价、FAQ；App 含登录、注册、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 秒演示视频。

评分标准表（原表完整继承）：

章节还附了"提交前最后一查"清单（首页/登录/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 个页面：

1. 首页/；2. 登录/login；3. 学生考试列表/student/exams；4. 学生答题页/student/exams/[id]；5. 学生成绩/student/history；6. 管理首页/admin；7. 考试管理/admin/exams；8. 题库/admin/questions；9. 提交列表/admin/submissions。

6.3 后端 API 与评分逻辑

章节给出的推荐 API 表（原表完整继承）：

评分逻辑按题型区分：

• 多选题：用户答案与标准答案一致即得分；
• 判断题：自动批改；
• 简答题：只存答案、分数留空、reviewed = false（待人工或 AI 批改）。

权限目标：学生只能调/student/*API，管理员只能调/admin/*API，未登录用户统一重定向到/login。部署建议：前端 Vercel / Zeabur，Express API 用 Zeabur / Railway / Render，数据库用 Supabase Postgres 或托管 PostgreSQL。

评分标准表（原表完整继承）：

7. 六个扩展选题：按技术方向深化

完成两个主项目后（或想按自己的技术栈定制作品集时），总览文档提供 6 个扩展选题，各章节文档均位于docs/de-de/stage-2/assignments/下：

可以看出扩展选题的意图：覆盖增长落地页、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 101｜The first course for AI-native product builders.项目地址: https://gitcode.com/GitHub_Trending/ea/easy-vibe