探索下一代低代码-支付宝可视化 Vibe Coding 平台实践
如果无法正常显示，请先停止浏览器的去广告插件。
1. 探索下一代低代码
支付宝可视化 Vibe Coding 平台实践
彭佩乔（乔杨）・蚂蚁集团-前端技术专家
蚂蚁终端体验科技大会
2. 当 AI 真的开始写代码
低代码已死？
去年，我们问：AI 能不能帮我写代码？
Cursor
首个 AI Native IDE
2024
Claude 3.5
首个 Coding 碾压级 LLM
今年，我们问：AI 能不能帮我写可上线的代码？
bolt.new
…
首个在线 AI Coding 原型平台
2025
Claude Code
今天，我们想分享，支付宝的答案。
首个 AI Coding CLI
…
3. 我们是怎么开始的
从低代码产品体系走到 AI Coding 的过程
LowCode
NoCode
PC 端产品官网基于 DSL 协议的
中后台管理系统支付宝低代码产品体系
H5 营销页
信息收集和展示
审批流程系统
支付宝小程序
AI + DSL = ？
4. 先试试把 AI 塞进低代码平台
让大模型直接驱动低代码 DSL
让大模型学会私有协议
❌ SFT / RL
✅ Prompt + Rules + Example + RAG
让大模型写的页面好看
❌ Design Tokens
❌ Template RAG
✅ CSS in DSL
5. 尝试几个月后的体会
逐渐走向深水区后 ROI 骤降
好
流式渲染
复用低代码平台能力
对话就能创造页面
坏
不听话、加戏
产品效果
AI Coding
AI DSL
天花板低
项目上下文管理难
研发成本
2024.7 开源神 bolt.new 上架 GitHub
6. 闭关一个月从 0 手搓新平台
摆脱 DSL 限制，让 AI 直接 Coding 试试
7. 闭关一个月从 0 手搓新平台
用极致的前端工程，构成 AI 与用户的桥梁
Release Pipeline
Runtime
3
模仿苹果官网的风格
给我的产品做一个介绍页
BaaS
DevOps
React
Live Preview / Edit
Inspector
我先去搜索一
下什么是…
……
DevServer
UI Workspace
HMR
1
WASM Based Container
前端工程
我来根据需求
写代码…
2
Compiler
用户
好的，用户想要一个…
下面我们需要…
……
Watch
Git
Repo
下一步我们还
需要…
……
Agent
8. 新平台、新形态
AI 原生的创作方式，不止对话框
图、文 描述
文档
图片还原
模板
数据
代码
9. 新形态、新机遇
AI Coding 时代，前端新挑战
所见即所得的 React 代码编辑
Context
&
Message
User
Message
@babel/preset-react
AI Coding
Patch
Webpack
webpack plugin
Serve
Construct
HMR
DevServer
Inspector
AST Tree
Instant Rending
Streaming
FS API
DOM Attributes
Changes
Message
Parser
Tranverse
Path
FileName
LineNo
ComponentName
Mapping
......
热更新 / 记忆对齐
保留 DSL 时代低代码用户的交互习惯
React
Source Code
Generate
WebIDE
10. 新形态、新机遇
AI Coding 时代，前端新挑战
所见即所得的 React 组件编辑
import { Button } from 'antd';
2
编译期标记
Compiled code
UI 元素关联组件
3
更新源码
4
antd website
1
生成属性配置
Page
JSON Schema
2
选择元素
1
UI Panel
React
DevTool
页面乐观更新
用确定性，弥补大模型的不确定性
3
11. 新机遇、新领域
AI Coding 时代，前端新挑战
Vibe Coding 当然要自带数据库
意图
Create
PageCoding
ReactIntegrate
Model
DesignCreate
TablesDeploy
Service
……
识别到数据库意图
统一协议转换层
BaaS
Service
Supabase
like SDK
BaaS
Service
大模型熟悉的
社区写法
CRUD
可持续进化的 BaaS 服务，场景无上限
BaaS
Service
12. 点亮更多的灵感
从生态到社区，用户帮产品变得更好
让更多的人享受 AI 的便捷
社区 / 推荐 / 灵感
AI 多维度互评
美观度
架构设计
代码质量
功能完整
意图匹配
让 AI 评价 AI，用魔法对抗魔法
……
13. 解放每一个生产力
上线这三个月，用户都创作了哪些东西
本页所有截图均使用虚拟示意数据
上线 3 个月，3000+ 内网用户创作 1 万+ 作品，人均累计对话 26 次
14. 我们又收到了更多用户的需求
让每个角色都用上顺手的 AI 搭子
营销场景
创意 / 素材
模拟器预览
大流量分发保障
原型场景
秒级渲染
多视图画布
多方案选择
从通用化到精细化
企业级场景
15. Spec Driven 重塑企业级交付
AI 写的代码也能安稳上线
1
2
自定义业务知识库
业务组件 / 接口 / 研发规范 / UI 风格 / 知识库 / …
3
需求确认 / 二次编辑
需求拆分 / 功能清单 / 任务安排 / UI 设计 / …
系统设计 / 开发规范 / 细节确认
技术栈 / 组件库 / 目录 / 状态管理 / …
确认 Spec
4
更新 / 存储 项目 Spec
驱动任务
5
生成任务 / Coding / 测试
推进
6
保鲜 Spec
重流程 / 重规范 / 安全生产
执行任务 / 发布 / 迭代 / …
16. Spec Driven 重塑企业级交付
AI 写的代码也能安稳上线
面向企业级资源库的上下文管理
重流程 / 重规范 / 安全生产
每次 AI 变更 di 确认
17. 企业级交付实践
持续解决用户实际痛点
只靠对话也能生产企业级应用了
18. 低代码已死？
不要再用私有协议束缚 AI 的发挥
产品有生命周期
而团队是生生不息的
19. Thanks