7.探索下一代低代码-支付宝可视化 Vibe Coding 平台实践-乔杨.pdf

《7.探索下一代低代码-支付宝可视化 Vibe Coding 平台实践-乔杨.pdf》由会员分享，可在线阅读，更多相关《7.探索下一代低代码-支付宝可视化 Vibe Coding 平台实践-乔杨.pdf（19页珍藏版）》请在三个皮匠报告上搜索。

1、探索下一代低代码支付宝可视化 Vibe Coding 平台实践蚂蚁终端体验科技大会彭佩乔（乔杨）蚂蚁集团-前端技术专家当 AI 真的开始写代码低代码已死？去年，我们问：AI 能不能帮我写代码？今年，我们问：AI 能不能帮我写可上线的代码？今天，我们想分享，支付宝的答案。CursorClaude 3.5bolt.new首个 AI Native IDE首个 Coding 碾压级 LLM首个在线 AI Coding 原型平台Claude Code首个 AI Coding CLI20242025我们是怎么开始的从低代码产品体系走到 AI Coding 的过程LowCodeNoCodeAI+DSL =？

2、基于 DSL 协议的支付宝低代码产品体系中后台管理系统PC 端产品官网支付宝小程序H5 营销页信息收集和展示审批流程系统先试试把 AI 塞进低代码平台让大模型直接驱动低代码 DSL让大模型学会私有协议 SFT/RL Prompt+Rules+Example+RAG让大模型写的页面好看 Design Tokens Template RAG CSS in DSL尝试几个月后的体会逐渐走向深水区后 ROI 骤降好坏流式渲染复用低代码平台能力不听话、加戏对话就能创造页面天花板低项目上下文管理难2024.7 开源神 bolt.new 上架 GitHub研发成本产品效果AI DSLAI Coding闭关一

3、个月从 0 手搓新平台摆脱 DSL 限制，让 AI 直接 Coding 试试闭关一个月从 0 手搓新平台用极致的前端工程，构成 AI 与用户的桥梁模仿苹果官网的风格给我的产品做一个介绍页好的，用户想要一个下面我们需要我先去搜索一下什么是我来根据需求写代码下一步我们还需要Agent前端工程用户WASM Based ContainerCompilerGitRepoInspectorDevServerReactLive Preview/EditUI WorkspaceDevOpsRelease PipelineRuntimeBaaSHMRWatch123新平台、新形态AI 原生的创作方式，不止对话框

4、图、文 描述图片还原数据文档模板代码新形态、新机遇AI Coding 时代，前端新挑战所见即所得的 React 代码编辑热更新/记忆对齐保留 DSL 时代低代码用户的交互习惯PatchStreamingAI CodingServeWebpackbabel/preset-reactwebpack pluginHMRInstant RendingDevServerChangesInspectorDOM AttributesPathFileNameLineNoComponentName.FS APIMessageParserGenerateConstructAST TreeTranverseReac

5、tSource CodeMappingWebIDEContext&MessageUserMessage新形态、新机遇AI Coding 时代，前端新挑战所见即所得的 React 组件编辑import Button from antd;用确定性，弥补大模型的不确定性Compiled code编译期标记PageUI 元素关联组件选择元素antd websiteJSON Schema生成属性配置UI Panel更新源码ReactDevTool页面乐观更新1231234新机遇、新领域AI Coding 时代，前端新挑战Vibe Coding 当然要自带数据库可持续进化的 BaaS 服务，场景无上限意图

6、CreatePageCodingReactIntegrateModelDesign识别到数据库意图CreateTablesDeployServiceSupabaselike SDKCRUD大模型熟悉的社区写法统一协议转换层BaaSServiceBaaSServiceBaaSService点亮更多的灵感从生态到社区，用户帮产品变得更好让更多的人享受 AI 的便捷社区/推荐/灵感AI 多维度互评让 AI 评价 AI，用魔法对抗魔法美观度架构设计代码质量功能完整意图匹配解放每一个生