Vibe Coding 实战指南

比较两种工作流程

通过时间滑块，观察同一个需求的不同推进方式。

01 / 06

← 手册目录切换章节

S1 · WHY NOW

同一个需求·两种命运

拖动下方时间滑块，看一个普通的 B 端「订单管理后台改版」需求，在两种工作流下分别走到了哪里。

▶ Day Marker 1天 / 21 天

传统流程 20 天 · 6 个角色

D1需求会议PM 主导

D3PRD 评审设计参会

D5低保真原型画线框

D10高保真 + 交互说明改 N 版

D12设计评审领导拍板

D14前端实现还原度 70%

D18QA 测试细节走查

D20上线灰度完成

Vibe Coding 流程 5 天 · 设计师主导

D1需求会议设计师同步参与

D2AI 生成可点击 demo真实交互

D2业务方试用 demo现场反馈

D3迭代 + 视觉细化同一份代码

D4交付前端 = 真实代码还原度 95%

D5上线灰度完成

4×

交付速度

95%

还原度

−5

沟通节点

S2 · PAIN CHECK

你中了几条？

勾选所有你曾经遇到过的情况——勾得越多，你越需要这本手册。

评审完的高保真原型，开发只看截图就开始写代码

设计规范出了三版，团队还是各画各的

表格列宽对齐、字段微调占了我 40% 的时间

我没法用数据解释设计带来了多少业务价值

PM 直接用 Axure 画线框,绕开了我

AI Agent 来了,我不知道该怎么设计"非按钮"的交互

业务太复杂,我要看 3 天文档才能开始画原型

内部工具用一次烦一次,但永远排不上需求

同样的 CRUD 后台我已经做了无数遍

老板问"AI 时代设计师怎么转型",我答不上来

替代风险等级

0/ 10

SAFE · 暂时安全

你似乎还没遇到这些问题——但这本手册依然适合提前阅读。B 端设计师的工作环境正在快速变化,提前准备永远不亏。

S3 · FIVE SUPERPOWERS

五项超能力

Vibe Coding 不是让设计师变成开发,而是把"卡住"的环节解锁。每张卡片都是一个真实可玩的 mini demo。

— No. 01

静态原型 → 真交互 demo

BEFORE

Figma 高保真,需要写"点击此处跳转 XX"说明

AFTER

直接给一个能搜索、能筛选、能排序的真表格

订单号	客户	金额	状态
A001	字节跳动	¥12,400	已支付
A002	美团	¥8,200	待审核
A003	滴滴出行	¥21,600	已支付
A004	网易	¥3,800	已退款

— No. 02

规范文档 → 可运行组件库

BEFORE

写一份"Button 使用指南.pdf",没人翻

AFTER

真组件 + props 切换 + 复制即用

type

primary ghost link

size

sm md lg

— No. 03

需求评审 ppt → 可点 prototype

BEFORE

PPT 上贴 20 张截图讲流程,业务方走神

AFTER

让业务方亲手点一遍审批流

提交申请申请人

部门初审主管

财务复核财务

支付打款出纳

— No. 04

等开发排期 → 24h POC

BEFORE

"这个想法很好,排在 Q3 吧"

AFTER

明天就把 Dashboard 雏形甩群里

GMV

¥1.42M+12%

订单数

8,421−3%

转化率

3.8%+0.4%

活跃用户

12,890+8%

— No. 05

业务靠人讲 → AI 当业务老师

BEFORE

PM 讲 2 小时业务,你听完只记得 30%

AFTER

输入领域名词,AI 给你结构化笔记

SaaS 多租户工单系统 RBAC 权限对账系统

→ 选一个术语,或自己输入

S4 · SCENARIO LIBRARY

B 端专属场景库

不是所有场景都适合 Vibe Coding,但 B 端 70% 的高频任务都是它的甜区。每张卡片附一段可复制的起手 prompt。

CRUD 后台

★★★★★

列表 + 表单高频

一个用户管理后台:支持列表分页、按角色筛选、新增/编辑弹窗、批量删除确认。用表格 + Drawer 模式。

Dashboard 可视化

★★★★★

图表数据

一个销售 Dashboard:顶部 4 个 KPI 卡片、中部折线图(7天趋势)、右侧排行榜(Top 10 客户)、底部明细表格。深色主题。

复杂筛选与表单

★★★★★

条件组合动态字段

高级搜索面板:支持多条件 AND/OR 组合、保存搜索方案、字段联动(选择类型A时展示字段B)。展开/折叠模式。

数据表格 + 批量操作

★★★★★

虚拟滚动行操作

一个 10000 行的虚拟滚动表格:支持列拖拽排序、固定首尾列、行内编辑、批量选中后顶部出现操作工具栏。

权限角色矩阵

★★★★★

RBAC 树形权限

一个角色权限管理页:左侧角色列表,右侧权限树(支持半选状态、批量勾选父节点)。变更后显示"未保存"提示。

审批流编排

★★★★★

流程图节点配置

审批流配置器:横向流程图、节点可拖拽、点击节点弹出抽屉配置(审批人、条件分支)。带"开始/结束"两个固定节点。

AI Agent 控制面板

★★★★★