1
想法 / 需求
已完成
验证想法，锚定方向
目标
- 把想法或碎片需求理清
- 定义功能
- 用户
- 流程
- 生成技术方案
场景库 › Vibe Coding 网站实战流程
Vibe Coding 网站实战流程
从 0 到 1，用 AI 帮你快速构建并上线一个高质量、可复用、可扩展的网站。先判断你卡在哪一步，再选对应的工具、Prompt 与技术栈。
网站类型
技术路线
7 阶段 · 1-2 周
经验水平
新手中级高级
可视化流程
8 个阶段，清晰路线
精选工具 / Agent
6+ 款最佳组合
Prompt 模板
每一步可直接套用
实战产出
从想法到上线的结果
STEP FLOW
实战流程
先看目标 · 选工具 · 套 Prompt · 拿产出
2
Prompt / Spec
已完成
需求转化为产品文档
Prompt 模板
产出物
PRD.md / 流程图
3
Skill / Rules
已完成
让 AI 记住项目规则
目标
- 建立项目规则与代码规范
- 把重复任务沉淀成可复用 Skill
- 让 AI 每次按规范工作
Prompt 模板
产出物
Project Rules / CLAUDE.md
4
Vibe Coding
进行中
用 AI 快速生成网站
目标
- 通过自然语言生成代码
- 快速搭建网站 MVP
- 实现核心功能
Prompt 模板
产出物
可运行的 MVP
5
UI / 前端
界面设计与组件实现
6
后端 / 数据
数据库、API 与业务逻辑
目标
- 搭建后端服务
- 设计数据库结构
- 实现 API 接口
Prompt 模板
产出物
后端服务 + 数据库
7
Agent / Workflow
自动化流程与 AI 能力
目标
- 构建自动化工作流
- 集成 AI Agent 能力
- 实现内容自动化
Prompt 模板
产出物
自动化工作流
8
SEO / GEO
流量获取与增长
目标
- 优化 SEO 关键词
- 生成内容并发布
- 建立外链和增长体系
Prompt 模板
产出物
SEO 内容库 100+ 篇
CHOOSE PATH
选择适合你的路线
零代码路线
最快上手 · 0 行代码
无需写代码，用 AI + 低代码平台快速搭建。适合新手、非技术运营。
Bolt.newLovableFramer
查看详情 →
推荐
现代化开发路线
可扩展 · 一定技术基础
使用 AI + 可扩展的现代化技术栈，兼顾速度与长期可维护。
CursorNext.jsSupabase
查看详情 →
高阶定制路线
高扩展 · 开发者 / 团队
深度定制，构建复杂业务和 AI 原生应用。适合技术团队。
NestJSLangChain自建服务
查看详情 →
常用 Prompt 快捷入口