Vibe Coding 规划架构流程

在真正动手“咏唱”程序码之前，还有一个绝对不能跳过的步骤，就是“架构与流程规划”！这篇文章将介绍如何将脑中的“感觉 ( Vibe )”具象化为 AI 看得懂的逻辑，这也是让 Vibe Coding 从“碰运气”变成“精准开发”的关键。

更多参考：Vibe Coding 全方位开发导读

快速导览：

• 为什么要规划网站或应用程序的架构流程？
• 网站或应用程序的基本架构流程
• 规划并绘制流程图 ( Flowchart )
• 绘制 Wireframe ( 线框图 )
• 让 AI 产生第一版 Prototype
• Vibe Coding 的黄金法则：先求有，再求好 ( MVP )

教学影片

搭配教学影片一起阅读，效果会更好！欢迎大家订阅 STEAM 教育学习网的 Youtube 频道。

前往：https://www.youtube.com/@steam.oxxostudio

为什么要规划网站或应用程序的架构流程？

在 Vibe Coding 的世界里，AI 通常扮演工程师或设计师，而开发者则是担任产品经理 ( PM ) 兼架构师，因此就像在进行一个开发会议一般，如果只告诉工程师“做一个好用的东西”，或只告诉设计师“设计一个好看的版面”，工程师或设计师所完成的东西一定不如预期。

进行 Vibe Coding 开发网站或应用程序之前，也必须要像“真人开发”先进行架构流程的规划，最主要有三个理由：

• 减少 AI 的“幻觉”与错误：

  如果没有清楚的指令，AI 就会自己进行“脑补”的动作，因此透过明确的流程图，AI 就能锁定范围，大幅降低写出错误逻辑的几率。

• 节省 Token 与时间：

  每个 AI 都有一个“记性上限”，这被称为上下文视窗，而 Token 就是 AI 处理文字时的基本计算单位，决定了它能读多少数据以及说多少话，与 AI 沟通过程中，除了来来回回非常耗时，常常会消耗大量的 Token，因此如果一开始先规划好流程架构，也可省下宝贵的时间和 AI 的算力。

• 将感觉具象化：

  感觉是很抽象的，但流程图是具体的，透过架构流程的规划，可以检视自己的想法是否逻辑通顺，确保用户体验 ( UX ) 和想像一般顺畅。

网站或应用程序的基本架构流程

虽然 Vibe Coding 不需要去钻研复杂的微服务或分散式系统，也不用亲自架设服务器，但仍建议在提示词 ( Prompt ) 中加入一些专业用语，例如“用户在前端点击后，后端要运算，并把数据存入数据库”，如此一来，AI 也能更清楚知道需求，不过对于 Vibe Coding 新手这些专有名词会有些难以理解，因此只要理解最经典的 “前端 - 后端 - 数据库” 铁三角概念，就能开始用比较专业的方式与 AI 沟通。

下方列出这些概念的简单案例和提示词：

• 前端 ( Frontend )：用户看到的地方。

  • 例如：网页的按钮、表单、手机 App 的画面。
  • AI 提示关键字：
    • UI 界面：排版位置 ( Layout )、元件 ( Component )、配色 ( Color Scheme )、RWD 响应式设计。
    • 用户动作：点击 ( Click )、拖曳 ( Drag )、卷动 ( Scroll )、输入 ( Input )。
    • 常见元件：清单 ( List )、表单 ( Form )、下拉选单 ( Dropdown )、导览列 ( Navbar )、弹出视窗 ( Modal )。

• 后端 ( Backend )：负责处理逻辑的大脑。

  • 例如：判断账号密码对不对、计算购物车总金额。
  • AI 提示关键字：API 串接、Python 逻辑、数据处理。

• 数据库 ( Database )：负责记忆的仓库。

  • 例如：储存用户的贴文、订单纪录、会员数据。
  • AI 提示关键字：数据字段 ( Schema )、储存、读取。

规划并绘制流程图 ( Flowchart )

流程图 ( Flowchart ) 是与 AI 沟通最高效的语言，由于文字描述容易有歧义 ( 特别是中文 )，但“流程图”逻辑和架构分明，可以一目了然知道需求，在 AI 的时代，强烈建议使用 Mermaid 语法或文字流程，甚至用手绘的流程图与 AI 沟通，因为 AI 可以直接读取文字或图片并理解逻辑。

如何开始规划用户流程 ( User Flow ) 呢？第一步要先想像“用户从打开应用程序，一直到到完成任务的每个步奏”，并尝试用口语化的方式写下每个步骤 ( 类似讲故事 )，例如：

• 第一步：用户进入首页，之后判断用户是否已登录？如果登录就显示待办清单，如果没有就显示登录画面。
• 第二步：用户登录后，输入事项并点击“新增”，系统将数据写入数据库，字段包含：内容和时间。
• 第三部：写入完成后，画面更新，显示新的事项。

除了撰写流程，也可以尝试将流程绘制成“流程图”，让整体过程更清晰，绘制开发流程图有一些标准形状，透过形状进行阐述，逻辑就能更清晰，AI 也更能精准理解你的意图，下方列出开发流程的形状含义：

• 椭圆形 ( Start/End )：代表流程的开始与结束。
• 矩形 ( Process )：代表一般的处理步骤或是动作。
• 菱形 ( Decision )：代表判断，通常会有“是”与“否”两条路径。
• 平行四边形 ( Input/Output )：代表数据的输入或输出。
• 圆柱体 ( Database )：代表数据库的读取或写入。
• 带双边线的矩形 ( Predefined Process )：引用另一个已经画好的流程图。

了解流程图的形状含义后，可以透过下列几种方式绘制流程图：

• 手会流程图：

  如果手边有纸和笔，透过简单的线条、箭头和说明文字，就能完成流程图的设计，这也是在开发会议中，最常见的做法 ( 直接把流程画在会议室的白板上 )。

  

• 使用 Canva 或其他工具绘制：

  推荐工具：Canva、diagrams

  如果手边 Canva 或其他绘制流程图的工具，也可以直接在电脑中绘制流程图，而且还可以将流程图分享设定成协作状态，让参与的人都可以一起编辑这份流程图，下图使用 Canva 搜索流程图范本。

  

• 使用 Mermaid 流程图语法 ( 最适合 Vibe Coding )：

  Mermaid 是一种可以描述图表的简单语法，撰写后可以让浏览器即时渲染出图表，也是最适合 AI 读取流程图的方式，简单语法说明如下：

  推荐工具：Mermaid线上编辑器、mermaid.ai

  流程图方向：

  语法	说明
  graph、flowchart	告诉 Mermaid 这是一张流程图。
  TD	方向是由上往下 ( Top-Down )。
  LR	方向是由左往右 (Left-Right)。

  节点形状：

  形状类型	语法格式	说明
  矩形 ( 默认 )	id[文字]	代表一般的处理步骤 ( Process )
  圆角矩形	id(文字)	常用于开始或结束 (Start/End)
  圆形	id((文字))	代表连接点或标记
  菱形	id{文字}	代表判断或决策 (Decision)
  平行四边形	id[/文字/]	代表输入/输出 (Input/Output)

  连线与箭头：

  箭头类型	语法格式
  实线箭头	A --> B
  实线无箭头	A --- B
  带文字的连线	A -- 文字 --> B 或 A -->|文字| B
  虚线箭头	A -.-> B

  Mermaid 语法里的“缩排”不影响功能，但建议缩排，而中括号 [] 里面的“空白”会呈现空白符号的空间，如果使用 Mermaid 语法绘制刚刚的流程，就会是下面的流程语法：

  graph TD
      A[進入首頁] --> B{是否登入?}
      B -- 是 --> C[顯示待辦清單]
      B -- 否 --> D[登入頁面]
      D --> C
      C --> E[輸入事項並點擊新增]
      E --> F[儲存至資料庫]
      F --> C
  

  如果有这段流程语法，就可以让 AI 绘制流程图或根据流程图进行 Vibe Coding。

  

绘制 Wireframe ( 线框图 )

AI 虽然可以透过流程图理解“逻辑架构”，但它不知道开发者心中的排版规划究竟是如何，例如“按钮在右下角”是什么样的右下角呢？为了解决想法不一致的状况，通常在开发流程中，会加入绘制 Wireframe 的步骤，让产品经理 ( 用户 ) 和工程师 ( AI ) 对于“空间规划”的想法接近。

什么是 Wireframe 呢？在设计领域中，Wireframe ( 线框图/线框稿 ) 常被比喻为建筑的“蓝图”或人的“骨架”，是在正式开始视觉设计 ( 如颜色、图片、字体 ) 之前，用来勾勒网页或 App 界面架构与功能布局的草图。

只要把握下列的核心特点，就能绘制出理想的 Wireframe：

• 黑白灰阶：Wireframe 通常不使用颜色，为了不干扰对功能的判断，只用线框、灰色区块和简单符号。
• 不用注重视觉设计：不用专注视觉设计，只需强调功能位置，例如“哪里放按钮”、“哪里放标题”，而非“好不好看”。
• 专注于逻辑：标示清楚页面的信息层级 ( 什么东西最重要 ) 和功能操作 ( 按下去会发生什么 )。

让 AI 产生第一版 Prototype

当已经规划了整体架构流程、绘制了逻辑流程图以及绘制画面草图，就可以开始进行 Vibe Coding 的“第一次迭代”，透过提示词 Prompt 的组合：

我有一個網頁的規劃，請跟我一起協作：
- 目標：待辦事項
- 功能：使用前端技術建構網頁，搭配 firebase realtime 資料庫
- Mermaid 流程邏輯：
graph TD
    A[進入首頁] --> B{是否登入?}
    B -- 是 --> C[顯示待辦清單]
    B -- 否 --> D[登入頁面]
    D --> C
    C --> E[輸入事項並點擊新增]
    E --> F[儲存至資料庫]
    F --> C
- 畫面配置：參考附圖
- 畫面風格：使用一些漂亮的套件讓畫面更好看

输入完成后，AI 就会根据你的架构和流程，产生对应的画面内容，从这个步骤开始，就不再是凭空想像，而是在一个具体的基础上进行雕塑！

小提醒，通常 Vibe Coding 第一版只有 60 分 ( 看起来免强可动 )，接着就可以开始用调整细节，让整体更完善。

Vibe Coding 的黄金法则：先求有，再求好 ( MVP )

软件工程有一个概念叫 MVP ( Minimum Viable Product，最小可行性产品 )，意思就是：“先做出一个能动、能解决核心问题的版本”，不要一开始就想做会员注册、忘记密码、Email 通知、社群分享，例如上述的例子，当务之急要先专注在“新增待办事项”和“删除待办事项”这两个核心功能，其他的花俏功能，等核心功能跑起来了，再慢慢用 Vibe Coding 的方式加上去。这能让你保持开发的热情，避免因为程序码太复杂而卡关。

小结

Vibe Coding 虽然强调“感觉”与“直觉”，但要充分发挥这份直觉，仍然需要有清晰的逻辑，虽然 Vibe Coding 的过程中，仿佛在追求即兴演奏的快感，但有了基本的乐谱 ( 逻辑、架构、版面规划 )，AI 这位伴奏者才能精准地跟上节奏，当这些准备工作完成，就可以真正开始从零开始打造第一个 Vibe Coding 专案！

延伸阅读

Vibe Coding 的重点都不在于“写程序”，而是为了配合程序的各种“准备工作”，下方列出 Vibe Coding 相关的教学，透过一系列的教学，就更能掌握正确且顺畅的开发流程:

• 认识 Vibe Coding：程序不再是拼逻辑，而是拼“感觉”
• Vibe Coding 新手入门：从蓝图规划到 AI 开发的思维转型
• Vibe Coding 重要的准备工作：架构流程图
• Vibe Coding 网页必备知识：开发者的“沟通工具箱”
• Vibe Coding Python 必备知识：AI 与 Colab 打开程序直觉
• Vibe Coding 固定网页样式：解决样式不一致的恼人问题
• Vibe Coding 图片处理心法：从云端空间到 Base64 的完美配置
• Vibe Coding 玩家必备的 SVG 进阶操作指南
• Vibe Coding 字体指南：用文字风格定义网页灵魂
• 下载 Vibe Coding 网页程序码，掌握程序码的主导权
• Vibe Coding 实战：利用 Google Apps Script 打造免费网页部署基地
• Vibe Coding 实战：使用 GitHub 部署你的网页作品
• AI 时代的轻量级后端：当 Vibe Coding 遇上 Google Sheets
• 从灵感到即时同步：Vibe Coding 遇上 Firebase Realtime Database
• 数字灵魂的存放处：Vibe Coding 串接 Firebase Firestore
• 拒绝数据裸奔！Vibe Coding 必备 Firebase App Check 安全防护指南
• Vibe Coding + Firebase Authentication 打造顺畅的注册登录体验
• Vibe Coding 将 Google Drive 变身最强文件后端
• 灵感即程序：用 Gemini API 打开你的 Vibe Coding 新时代
• Vibe Coding 极速打造 LINE Bot 智能机器人
• Vibe Coding 实战：免写程序！把 Google 试算表变成超精美点餐系统
• Vibe Coding 实战：用 Google Drive 轻松打造“文件＆作业上传系统”
• Vibe Coding 实战：用 Google 试算表轻松搞定“线上点名系统”
• Vibe Coding 实战：打造自己的英文单字卡！

意见反馈