还记得小时候拼乐高积木的感觉吗？
在 Transweb 上，你可以用一句自然语言，让 AI 帮你拼出一个个“能动”的网页功能。
这些不是玩具积木，而是 真正能运行的功能组件，我们称它们为 AppItem。
一句话，就能让它诞生。
🧱 什么是 Vibe Coding？
Vibe Coding 是一种全新的“自然语言编程”方式。
不需要写一行代码，只要告诉 AI 你想要什么，它就能帮你开发。
🗣️ 例如：
“帮我做一个待办清单组件，可以添加任务、标记完成、自动保存。”
AI 会立即生成一个可运行的组件，并让它在浏览器中直接呈现。
这些组件还能像拼积木一样自由组合，构建完整的网页应用。
👉 上面这句话的生成结果，你现在就能亲手体验：
🧩 三种组装功能积木的方法
Vibe Coding 生成一个新组件后，你可以通过三种方式把前边提到的示例 AppItem 嵌入其中👇
✅ 方法一：用标签属性快速嵌入
最简单、最直观的方式——直接在新组件的界面代码中放入一个标签即可：
<div component="AppItem" appId="69f05e5d81ac3f96d0195e717140d46d" style="width: 400px; height: 300px;" ></div>
只要设置 component="AppItem" 和对应的 appId，Transweb 的引擎（WebCpu）就会自动识别并加载对应的积木组件。
这就像在网页上“贴”上一块乐高积木，它会自动运行起来。
🪄 Prompt 示例
请在主展示区域插入
<div> 标签，
设置component="AppItem"，appId="69f05e5d81ac3f96d0195e717140d46d"，
宽度 400px，高度 300px。
✨ AI 会自动生成一段 HTML标签(理想情况)，让功能积木“出现在”当前的页面上。
💡 小贴士：
appId是每个功能组件（轻应用）积木的 访问链接中的唯一 id 参数。
当你在 Transweb 发布一个轻应用时，系统会自动为它分配一个独立的appId。对应前面介绍“什么是 Vibe Coding？”时，所提到的生成示例 AppItem 的访问链接中的 id 参数。
🧠 方法二：界面嵌入加载
当你希望通过代码动态加载或控制组件时，可以使用这一方式👇
webCpu.renderAppItem(elem, id, dsl, type);
参数名
说明
elem
要渲染的容器节点
id
组件的唯一 ID
dsl
定制化描述数据（如内容数据、交互配置、样式等，不包含布局结构）
type
组件类型（可选）
这就像告诉引擎：
“请在这个位置创建这个组件，并应用这些定制内容。”
🪄 Prompt 示例
页面加载后，在主展示区渲染一个记事本组件，id 为
14ae9f96ffeac0978eb1818b047c4cad，dsl 包含：
{ data: { title: "我的笔记" }, style: { color: "#f7f9fc", background: "#333" } }
✨ AI 生成的代码可能是这样(理想情况)：
✨ 适合场景：
-
动态加载内容
-
批量渲染组件
-
根据用户操作实时更新界面
💬 方法三：弹窗加载
如果你希望组件以「弹窗」形式出现，比如 AI 编辑器、聊天窗口、设置面板等，可以使用👇
webCpu.dialogMap.openDocumentApp(id, dsl, params, style, type);
参数名
说明
id
要加载的功能积木 id
dsl
动态数据与容器样式（如内容结构、绑定数据、定制外观）
params
弹窗参数（标题、菜单、关闭按钮样式等）
style
弹窗外观样式（宽高、圆角、阴影等）
type
应用类型（可选）
通俗理解👇
-
dsl决定「里面的内容」 -
params决定「头部和交互」 -
style决定「外壳样式」 -
type 应用的类型：可为空，可为contentApp或inputApp
🪄 Prompt 示例
用户点击“待办清单”按钮时，
使用webCpu.dialogMap.openDocumentApp打开一个弹窗式组件：
id：
14ae9f96ffeac0978eb1818b047c4cadparams：标题为“我的任务”，关闭按钮为“返回箭头”，菜单包含“导出”；
点击导出时，将任务列表数据导出为 JSON 文件。
✨ AI 生成的代码如下👇(理想情况)
✨ 适合场景：
-
弹出详情编辑器
-
打开配置面板
-
交互型 AI 对话界面
🚀 为什么说它“在线”？
Transweb 提供完整的 在线运行环境。AI 生成的组件无需本地环境配置，直接在浏览器中即可 预览、调试、分享。
每个功能积木都能被保存、复用、再组合成新的应用：
-
🧠 「AI 对话」+「笔记」 → AI 笔记助手
-
🎬 「上传」+「转码」 → 视频格式转换器
-
📋 「表单」+「数据库」 → 在线数据收集系统
🌈 一句话总结
Transweb = 自然语言编程 + 积木式装配 + 在线运行环境
在 Transweb，你不再是写代码的人，而是 指挥 AI 创造工具的创作者。
每一句话，都是一块积木的诞生；
每一次组合，都是一个新世界的开始。
✨ 立即体验✨
👇 扫码体验在线 Vibe Coding：
