Stuart: 0基础教学系列之Coze“用户界面”创建初体验

Stuart: 0基础教学系列之Coze“用户界面”创建初体验 Stuart: 0基础教学系列之Coze“用户界面”创建初体验 Modified November 26, 2025 首先, 我们就选中这个2的按钮. 找到右边的“事件”, 添加对应要触发的事件. 由于我这里用的是表单的填写, 三言两语说不清楚“表单”这个概念(后续的文章可能会单独说明), 所以大家如果没有基础前端开发知识的, 可以先使用“调用workflow”来试试效果. 调用workflow中需要传入工作流需要的参数, 这时可以选择这个双向箭头, 找到你要传递过来的数据. 点开后, 你可能会发现眼花缭乱一堆, 别怕, 你要找的元素名称可以这么来找: 选中你要传递参数的元素, 在右边上面就是它的名称: 然后选里面的子项就好理解很多, 和智能体的工作流的思路一致. 只不过这里如我图示中, 传文件是一个坑, coze里也没有文档说明怎么传, 卡了许久才有了方案来做. (这里也不赘述了, 后续的共学或者文章中可能会讲). 传文本就相对简单很多了. 最后要是你在调试中遇到失败, 目前我所知的唯一办法就是在事件中加一些打印信息: 🤔 特别提醒一个点: 目前好多浏览器, 尤其是safari的事件触发工作流失败, 我们自己是没办法解决的, 得等coze官方修复. 我们可以做的就是换个浏览器, 比如chrome, edge都是没问题的. 总结 总结上面几点, 得到以下结论: 1. 页面引导能力强: 对比智能体能提供的“对话式”交互界面, 应用提供的“按键式”交互界面有很强的用户引导能力. 2. 降低了网页制作门槛: 拖拉拽式的网页制作, 让很多没有前端代码经验的同学来说就看到了希望. 3. 上手有门槛: 需要有基本的前端开发概念; 对于传递参数比工作流难, 尤其是文件的传递; 4. 调查问题难: 出了问题调查基本靠猜. 对真的想自己手搓应用界面的同学几个建议: 1. 首先, 建议“让子弹飞一会儿”, coze的同学们肯定在努力优化易用性, 现在用起来确实还是挺蛋疼的. 实事求是的说, 现在这种建网页的方式, 没比熟悉前端代码的同学开发速度快. 2. 然后就是建议还是从智能体的卡片开始上手, 这个低代码网页前端是之前的卡片的升级版. 如果之前的卡片你都没玩过, 这个的参数传递, 内容跳转会很拧巴. 卡片的相对简单, 容易上手, 可以作为基础学习. 3. 真的想用这个功能, 建议直接套coze官方给的应用模板, “能少改就少改”: coze官方提供的模板还是很漂亮的, 已经能套用到很多场景了. 如果不是为了学习, 没必要这么低效的在一个很难调试的页面里从0开始捏一个. 不过, 还是得赞coze这次这么“卷”的更新, 虽然还不是很成熟好用, 但是这种做法从本质上距离落地成为生产力工具, 以及变现的可能性进了一大步. 相信后续coze肯定会加入收费系统, 就可以正式走上变现之路. 欢迎关注公众号，收获更多智能体分享： WayToAGI Agent探索 🎡 近期活动推荐 音频模型的Seedance2.0时刻来了！ 在火山引擎Force大会上，字节发布了最新的「豆包音频生成模型 Seed Audio 1.0」，它首次实现声音参考复刻，同时能根据你的描述，全要素直出你想要的任何声音。 只需一句话描述，可以直接生成有情绪、有停顿、有笑声，有背景音乐/音效的一整段多角色对白。 我们已经在内测玩了几天，非常上头。知识库整理了「豆包音频生成模型1.0使用教程」 🎺【实践手册】豆包音频生成模型1.0，重新定义AI音频创作 🎁 现在体验还有福利： 👉 第一步：进方舟体验中心，直接开整 https://ark.volcengine.com/region:cn beijing/experience/voice?model=doubao seed audio 1 0 👉 第二步：参与问卷调研，有机会获得2000分钟额度（限量10个名额)，玩到爽 https://bytedance.larkoffice.com/share/base/form/shrcn2DdkTW8zJKn6vV30lnyHvb ⏰ 7月30日开奖，名额和额度有限，先到先得 🎺【实践手册】豆包音频生成模型1.0，重新定义AI音频创作 首先, 我们就选中这个2的按钮. 找到右边的“事件”, 添加对应要触发的事件. 由于我这里用的是表单的填写, 三言两语说不清楚“表单”这个概念(后续的文章可能会单独说明), 所以大家如果没有基础前端开发知识的, 可以先使用“调用workflow”来试试效果. 调用workflow中需要传入工作流需要的参数, 这时可以选择这个双向箭头, 找到你要传递过来的数据. 点开后, 你可能会发现眼花缭乱一堆, 别怕, 你要找的元素名称可以这么来找: 选中你要传递参数的元素, 在右边上面就是它的名称: 然后选里面的子项就好理解很多, 和智能体的工作流的思路一致. 只不过这里如我图示中, 传文件是一个坑, coze里也没有文档说明怎么传, 卡了许久才有了方案来做. (这里也不赘述了, 后续的共学或者文章中可能会讲). 传文本就相对简单很多了. 最后要是你在调试中遇到失败, 目前我所知的唯一办法就是在事件中加一些打印信息: 🤔 特别提醒一个点: 目前好多浏览器, 尤其是safari的事件触发工作流失败, 我们自己是没办法解决的, 得等coze官方修复. 我们可以做的就是换个浏览器, 比如chrome, edge都是没问题的. 总结 总结上面几点, 得到以下结论: 1. 页面引导能力强: 对比智能体能提供的“对话式”交互界面, 应用提供的“按键式”交互界面有很强的用户引导能力. 2. 降低了网页制作门槛: 拖拉拽式的网页制作, 让很多没有前端代码经验的同学来说就看到了希望. 3. 上手有门槛: 需要有基本的前端开发概念; 对于传递参数比工作流难, 尤其是文件的传递; 4. 调查问题难: 出了问题调查基本靠猜. 对真的想自己手搓应用界面的同学几个建议: 1. 首先, 建议“让子弹飞一会儿”, coze的同学们肯定在努力优化易用性, 现在用起来确实还是挺蛋疼的. 实事求是的说, 现在这种建网页的方式, 没比熟悉前端代码的同学开发速度快. 2. 然后就是建议还是从智能体的卡片开始上手, 这个低代码网页前端是之前的卡片的升级版. 如果之前的卡片你都没玩过, 这个的参数传递, 内容跳转会很拧巴. 卡片的相对简单, 容易上手, 可以作为基础学习. 3. 真的想用这个功能, 建议直接套coze官方给的应用模板, “能少改就少改”: coze官方提供的模板还是很漂亮的, 已经能套用到很多场景了. 如果不是为了学习, 没必要这么低效的在一个很难调试的页面里从0开始捏一个. 不过, 还是得赞coze这次这么“卷”的更新, 虽然还不是很成熟好用, 但是这种做法从本质上距离落地成为生产力工具, 以及变现的可能性进了一大步. 相信后续coze肯定会加入收费系统, 就可以正式走上变现之路. 欢迎关注公众号，收获更多智能体分享： WayToAGI Agent探索 🎡 近期活动推荐 音频模型的Seedance2.0时刻来了！ 在火山引擎Force大会上，字节发布了最新的「豆包音频生成模型 Seed Audio 1.0」，它首次实现声音参考复刻，同时能根据你的描述，全要素直出你想要的任何声音。 只需一句话描述，可以直接生成有情绪、有停顿、有笑声，有背景音乐/音效的一整段多角色对白。 我们已经在内测玩了几天，非常上头。知识库整理了「豆包音频生成模型1.0使用教程」 🎺【实践手册】豆包音频生成模型1.0，重新定义AI音频创作 🎁 现在体验还有福利： 👉 第一步：进方舟体验中心，直接开整 https://ark.volcengine.com/region:cn beijing/experience/voice?model=doubao seed audio 1 0 👉 第二步：参与问卷调研，有机会获得2000分钟额度（限量10个名额)，玩到爽 https://bytedance.larkoffice.com/share/base/form/shrcn2DdkTW8zJKn6vV30lnyHvb ⏰ 7月30日开奖，名额和额度有限，先到先得 🎺【实践手册】豆包音频生成模型1.0，重新定义AI音频创作 🎡 近期活动推荐 音频模型的Seedance2.0时刻来了！ 在火山引擎Force大会上，字节发布了最新的「豆包音频生成模型 Seed Audio 1.0」，它首次实现声音参考复刻，同时能根据你的描述，全要素直出你想要的任何声音。 只需一句话描述，可以直接生成有情绪、有停顿、有笑声，有背景音乐/音效的一整段多角色对白。 我们已经在内测玩了几天，非常上头。知识库整理了「豆包音频生成模型1.0使用教程」 🎺【实践手册】豆包音频生成模型1.0，重新定义AI音频创作 🎁 现在体验还有福利： 👉 第一步：进方舟体验中心，直接开整 https://ark.volcengine.com/region:cn beijing/experience/voice?model=doubao seed audio 1 0 👉 第二步：参与问卷调研，有机会获得2000分钟额度（限量10个名额)，玩到爽 https://bytedance.larkoffice.com/share/base/form/shrcn2DdkTW8zJKn6vV30lnyHvb ⏰ 7月30日开奖，名额和额度有限，先到先得 🎺【实践手册】豆包音频生成模型1.0，重新定义AI音频创作 🎡 近期活动推荐 近期活动推荐 音频模型的Seedance2.0时刻来了！ 在火山引擎Force大会上，字节发布了最新的「豆包音频生成模型 Seed Audio 1.0」，它首次实现声音参考复刻，同时能根据你的描述，全要素直出你想要的任何声音。 只需一句话描述，可以直接生成有情绪、有停顿、有笑声，有背景音乐/音效的一整段多角色对白。 我们已经在内测玩了几天，非常上头。知识库整理了「豆包音频生成模型1.0使用教程」 🎺【实践手册】豆包音频生成模型1.0，重新定义AI音频创作 🎺【实践手册】豆包音频生成模型1.0，重新定义AI音频创作 🎁 现在体验还有福利： 👉 第一步：进方舟体验中心，直接开整 https://ark.volcengine.com/region:cn beijing/experience/voice?model=doubao seed audio 1 0 👉 第二步：参与问卷调研，有机会获得2000分钟额度（限量10个名额)，玩到爽 https://bytedance.larkoffice.com/share/base/form/shrcn2DdkTW8zJKn6vV30lnyHvb ⏰ 7月30日开奖，名额和额度有限，先到先得 💡 省流: 玩起来有门槛, 建议观望一阵等优化. 下面是详细内容. 省流: 玩起来有门槛, 建议观望一阵等优化. 下面是详细内容. 花了一整天时间, 从0开始搭建了一个小功能的应用: 抠图应用. 为的是更好的理解coze应用的“用户界面”功能. 期望通过分享一些切身经历, 能帮助想同样想制作应用的同学们少走点弯路. 从 To Me 到 To C 对比智能体能提供的“对话式”交互界面, 应用提供的“按键式”交互界面舒服了很多: 它可以有效引导用户的使用. 这是一个我以前捏的一个小bot: 抠图神器 https://www.coze.cn/s/iDxcaWaF/ 功能不复杂, 但是我很常用它: 我经常画PPT, 做海报的时候需要抠些图, 网上有些抠图工具, 要么不方便, 要么技术很过时, 要么很贵. 于是我就捏了这么一个bot. 智能体“对话式”交互界面 这个bot我自己用起来很方便, 我就是把图往里面一扔, 就给我抠出来了. 后来我想到迭代了一版: 因为我通常需要自己从网上下载图片到电脑, 然后上传, 很麻烦, 于是我就直接扩展了一下 把图片链接扔进去直接给我抠. 虽然有一句开场白貌似能提示大家怎么用, 而且适应了使用方法后用起来很舒服 (至少我个人这么觉得). 但是这个bot的使用量不高, 因为大多数人看到这个简陋的界面, 天然的会觉得它肯定不好用, 不专业. 于是对比下下面这个节目, 是不是很有专业的感觉? 虽然其实功能效果是一样的. 😆 应用“按键式”交互界面 在coze上的这个界面其实很容易引导用户, 告诉大家这个功能是二选一的, 而且功能上也做了规避: 一个按钮只生效对应区域的内容. 上传后原图显现, 然后点“开始抠图”. 欢迎体验: https://www.coze.cn/s/iDxT9cy9/ 代价: 高开发成本 需知上面那个智能体, 我只要半小时不到就能造出来. 但是下面这个应用, 我花了整整一天. 我回顾了整个搭建过程, 除去很多学习上手浪费的时间, 我觉得在熟练的情况下要做到这样的程度也要半天. 接下来说下, 我觉得小白们上手必然会遇到的几个问题. 控件排版 首先会遇到的一定是这个: 当我们需要在页面上放一堆控件, 比如文字, 按钮, 输入框, 图片啥的, 就得考虑排版. 对于做过网页/前端开发的同学这不是什么难事, 可以直接跳过. 对于没做过的同学, 我现场硬编一个口诀给大家: “容器套娃, 横竖都容器”. 容器在左边这个图标. 这张图比较形象: 1. 需要一横就放一个容器, 需要一列也是一个容器. a. 尤其针对那种不是平均分配空间的, 直接用容器里面放其他元素. a. 尤其针对那种不是平均分配空间的, 直接用容器里面放其他元素. 2. 容器套容器, 就能做到各种比例的组合了. 内容传递 第一步做出来的只是一个“死页面”, 完全没有交互. 这里需要做到内容的传递, 有个概念叫“事件”. 这里就不解释概念了, 问GPT吧. 还是教大家一个口诀 (我瞎编的)“触发xxx事件”. 来个具体的例子. 在我的这个例子里, 我们需要 1. 上传一个图片 2. 点击“上传图”按钮, 触发把图片传递给右边的图片框(事件)