智能基础及搭建应用 2

AI智能体搭建与应用授课教师专业（学科）新媒体教学课题创意升级：搭建标志设计智能体学时安排2学时（90分钟）教学年级所选教材《AI智能体搭建与应用（基于Coze）（慕课版）》，乔海晔、杨忠明主编，人民邮电出版社，2026年5月一、学习目标描述1、知识目标

1）掌握标志设计智能体的三大核心功能需求——提供设计灵感、直接完成设计与制作、修改标志设计。

2）理解搭建标志设计智能体的三大选择——智能体形式选择（智能体vs扣子应用）、外观设计选择（桌面网页vs小程序/H5）、交互形式选择（对话交互vs表单交互）。

3）掌握扣子应用搭建标志设计平台的完整流程——创建应用、规划业务逻辑（工作流）、设计用户界面（组件拖拽）。

4）熟悉“智能标志设计平台”案例中三个工作流的功能定位——Logo_inspiration（灵感生成）、gen_logo（标志生成）、modify_logo（标志修改）。

5）掌握扣子应用中数据绑定的核心操作——按钮绑定工作流事件、展示组件绑定工作流输出变量、用户信息绑定系统变量。

2、能力目标

1）能够根据标志设计的实际流程，确定智能体的功能模块划分。

2）能够在扣子平台上完成一个标志设计扣子应用的创建、工作流配置与用户界面搭建。

3）能够完成按钮与工作流的事件绑定、展示组件与工作流输出变量的数据绑定。

4）能够通过案例拆解，理解标志设计智能体“灵感生成→标志生成→标志修改”的完整设计链路。

3、素养目标

1）培养跨领域整合能力——能够将人工智能技术与视觉设计专业知识结合，探索新型设计模式。

2）培养实验探索精神——主动尝试不同AI工具和平台的创新用法，关注前沿设计技术发展。

3）培养版权与合规意识——使用AI生成视觉内容时注意版权问题，理解《人工智能生成合成内容标识办法》的基本要求。二、学习重点及难点学习重点：

标志设计智能体的三大功能需求（灵感/生成/修改）；扣子应用搭建的“三步走”流程（创建应用→规划业务逻辑→设计用户界面）；三个工作流的功能定位与调用关系；数据绑定的核心操作（按钮事件绑定、展示组件变量绑定）。

学习难点：

理解“智能体”与“扣子应用”在视觉设计场景中的不同适用性——扣子应用因其可视化界面更适合设计类任务；理解工作流输出变量与界面展示组件之间的数据绑定逻辑（工作流运行→输出变量→界面组件展示）；理解“页面跳转”事件如何实现多页面之间的导航。教学问题预测1.学生可能不清楚“扣子应用”和“智能体”的区别——认为两者都是“做AI工具的”，不理解为什么视觉设计要选扣子应用而不是智能体。

2.在拆解“智能标志设计平台”时，学生可能不理解三个工作流之间的调用关系——是独立的还是串联的？

3.学生可能对“数据绑定”的概念感到陌生——不理解为什么按钮要绑定事件、展示区要绑定变量。

4.在搭建用户界面时，学生可能对组件拖拽后的属性配置感到困惑——不知道什么时候该用文本组件、什么时候该用图片组件、什么时候该用容器组件。四、教学问题解决方案1.

“对话工具vs设计工具”类比：智能体=对话工具（适合聊天、问答场景），扣子应用=设计工具（适合需要可视化界面、拖拽操作的设计场景）。标志设计需要用户输入需求、浏览方案、选择修改——这些操作在可视化界面中比在对话中更直观。因此选扣子应用而非智能体。

2.

“三件套工具”类比三个工作流：将三个工作流比作设计软件中的三个工具——Logo_inspiration=“灵感生成器”（帮你找创意方向），gen_logo=“主设计工具”（直接出成品），modify_logo=“修改工具”（微调优化）。三个工具独立但互补，用户根据需求选择使用哪个。

3.

“快递寄件”类比数据绑定：工作流是“发货方”（产生数据），界面组件是“收货方”（展示数据）。数据绑定就是填写“快递单”——告诉系统“谁发的货（哪个工作流）、发的什么货（哪个输出变量）、送到哪里（哪个界面组件）”。三个信息缺一不可。

4.

“积木搭建”类比UI搭建：用户界面搭建就像搭积木——容器组件是“底板”（划分区域），文本组件是“文字积木”，图片组件是“图片积木”，按钮组件是“功能积木”。先想清楚“我要分几个区域、每个区域放什么”，再拖对应的组件。五、学习者特征分析（教师填写）学习特点：学习习惯：交往特点：六、教学资源教材和参考书籍：

1.《AI智能体搭建与应用（基于Coze）（慕课版）》，乔海晔、杨忠明主编，人民邮电出版社，2026年5月，项目六“任务一搭建标志设计智能体”。

2.扣子开发平台官方文档。

在线课程和平台：

1.扣子开发平台（用于课堂演示扣子应用的创建与搭建）。

2.扣子“模板商店”中的“智能标志设计平台”模板（用于案例拆解演示）。七、预习成果展示八、教学项目（任务）设计项目名称：

“智能标志设计平台搭建实战”

项目目标

1.学生能够理解标志设计智能体的三大功能需求及其对应的实现方式。

2.学生能够在扣子平台上完成一个标志设计扣子应用的创建、工作流配置与用户界面搭建。

3.学生能够完成按钮与工作流的事件绑定、展示组件与工作流输出变量的数据绑定。

项目任务及要求

任务一：功能需求与形式选择分析

任务内容

请每位学生独立完成以下分析：

（1）标志设计智能体的三大核心功能需求分别是什么？各自对应标志设计流程中的哪个阶段？

（2）假设你要搭建一个“标志设计”工具，你认为应该选择“智能体”还是“扣子应用”？说明理由。

（3）扣子应用的外观设计有两种选择——“桌面网页”和“小程序/H5”，你觉得各有什么优缺点？

要求

（1）三大功能需完整列出并说明对应阶段。

（2）形式选择需给出明确的理由。

任务二：标志设计应用搭建与数据绑定

任务内容

请学生跟随教师操作，同步完成以下步骤：

（1）在扣子平台上创建一个扣子应用，命名为“标志设计平台（学号）”。

（2）在业务逻辑界面中，创建三个工作流的框架（暂不详细配置）：Logo_inspiration、gen_logo、modify_logo。

（3）切换到用户界面，选择“桌面网页”类型，搭建三个子页面的框架（生成灵感、生成标志、修改标志）。

（4）理解数据绑定的核心操作：按钮绑定工作流事件、文本组件绑定工作流输出变量、用户头像/昵称绑定系统信息。

要求

（1）三个工作流框架需完整创建。

（2）三个子页面的导航结构需清晰。九、教学结构流程的设计教学环节学习目标参考导语教学内容项目任务教法学法设计意图教学资源时间导入【参考导语】

同学们，从项目六开始，我们进入一个全新的领域——视觉设计。前面我们学了内容生成（文案/图文/视频）、学了智能服务（客服），现在我们要学“创意”——让智能体帮我们做设计。

大家有没有想过——让AI帮你设计一个Logo？你只需要输入“公司名是‘猫来咖啡’，做咖啡行业的”，AI就能给你几个设计方案？

这节课我们就来学习如何搭建一个标志设计智能体。【设计意图】

从“AI能做设计”的新奇感切入，激发学生对视觉设计智能体的兴趣。本课介绍【参考导语】

本节课我们将学习：

第一步，明确功能需求——标志设计智能体要能做什么？（灵感/生成/修改）

第二步，确定搭建思路——用智能体还是扣子应用？用什么交互形式？

第三步，拆解案例——“智能标志设计平台”是怎么搭建的？工作流怎么配？数据怎么绑？【设计意图】

明确本节课的三段式结构——“需求→选型→案例”。5输入知识目标1

能力目标1【参考导语】

首先，想清楚一个问题——标志设计智能体需要具备哪些功能？请大家阅读“任务一”中“标志设计智能体的功能需求”部分。

【教学内容】

标志设计智能体的三大核心功能需求：

①提供标志设计灵感——分析大量设计案例，提取设计元素、色彩搭配、构图方式，为用户提供设计参考。对应标志设计的“创意构思”阶段。

②直接完成标志设计与制作——根据用户输入的品牌名称、行业类型、风格偏好、色彩偏好等，自动生成多个标志设计方案。对应标志设计的“设计制作”阶段。

③修改标志设计——允许用户对生成的标志进行调整和完善，包括风格转换、内容修改、色彩调整等。对应标志设计的“修改完善”阶段。【教法学法】

1.阶段对应：将三大功能与标志设计的三个阶段（创意构思→设计制作→修改完善）逐一对应。

2.问题驱动：提问“如果你要设计一个Logo，你最希望AI帮你做什么？”，引导学生思考功能需求。【设计意图】

通过阶段对应和问题驱动，建立功能需求与设计流程的映射关系。

【教学资源】

教材“标志设计智能体的功能需求”部分10输出好，来检验一下：

（1）标志设计智能体的三大核心功能需求是什么？

（2）“提供设计灵感”对应标志设计流程中的哪个阶段？

（3）“修改标志设计”和“直接完成设计”有什么区别？

（学生回答后总结）【教法学法】

问答互动+阶段对应梳理。【设计意图】

检验对三大功能需求的理解，强化“功能→阶段”的对应关系。5反馈三大功能对应三个阶段——从“不知道怎么设计”（灵感），到“动手设计”（生成），再到“设计完不满意”（修改）。这是一个完整的设计闭环。好的标志设计智能体应该覆盖这个闭环的全流程，而不是只做其中一段。【设计意图】

强调“全流程覆盖”的设计理念。3反思如果让你去掉一个功能，你觉得哪个可以去掉？为什么？——引导学生思考各功能的必要性。【设计意图】引导学生思考功能优先级。2输入知识目标2

能力目标1【参考导语】

明确了功能需求后，接下来需要确定一个关键问题——用哪种形式来搭建？请大家阅读“标志设计智能体的搭建思路”部分。

【教学内容】

搭建标志设计智能体需要做三大选择：

①智能体形式选择——智能体（对话交互）vs扣子应用（可视化界面+表单交互）。标志设计需要用户输入参数、浏览方案、选择修改，扣子应用的可视化界面更适合。

②外观设计选择——桌面网页（界面大、功能灵活）vs小程序/H5（移动端便捷）。两种均可，取决于目标用户的使用习惯。

③交互形式选择——智能体主要通过打字/语音对话交互；扣子应用支持填表、点击按钮、下拉选择等多种交互方式，更直观方便。【项目任务】

请学生完成以下判断：

（1）标志设计场景应该选择“智能体”还是“扣子应用”？说明理由。

（2）“桌面网页”和“小程序/H5”各有什么优缺点？

（3）扣子应用相比智能体在交互形式上有什么优势？

【教法学法】

1.对比讲解：智能体vs扣子应用、桌面网页vs小程序/H5。

2.场景匹配：引导学生根据“设计类任务需要可视化操作”这一特点做出选择。【设计意图】

建立“场景驱动选型”的思维——设计类任务选扣子应用而非智能体。

【教学资源】

教材“标志设计智能体的搭建思路”部分18输出好，来检验：

（1）为什么标志设计场景适合用扣子应用而不是智能体？

（2）扣子应用相比智能体在交互形式上有什么优势？

（3）如果你要为一家餐饮品牌设计Logo，你会选择“桌面网页”还是“小程序/H5”？为什么？

（学生回答）【教法学法】问答互动+选型思路总结。【设计意图】

检验对三大选择的理解。8反馈记住一个原则——对话能解决的用智能体，需要界面操作的用扣子应用。标志设计需要用户选择风格、输入参数、浏览多个方案、点击修改——这些都是界面操作，不是对话能高效解决的。所以选扣子应用。【设计意图】

提炼“对话vs界面”的选型原则。3反思如果让你搭建一个“智能问答客服”，你会选智能体还是扣子应用？为什么？——引导学生对比不同场景的选型差异。【设计意图】

引导学生理解“场景决定选型”的道理。2输入知识目标3

知识目标4

能力目标2【参考导语】

确定了形式和外观之后，接下来进入实战——拆解一个完整的“智能标志设计平台”案例。请大家打开扣子模板商店，找到这个模板并复制到个人空间。

【教学内容】

“智能标志设计平台”的搭建分三步：

①创建应用——填写应用名称与介绍。

②规划业务逻辑——在业务逻辑界面中创建工作流。该平台设置了三个工作流：

-Logo_inspiration：用户输入简单想法→大模型生成多条设计灵感（含灵感名称、核心元素、设计逻辑、文生图提示词）。

-gen_logo：用户输入提示词→图像生成节点生成标志。

-modify_logo：用户上传标志+修改建议→大模型分析生成改图提示词→图像修改节点完成修改。

③设计用户界面——选择“桌面网页”类型，通过拖拽组件搭建主页和三个子页面（生成灵感/生成标志/修改标志）。

关键设计模式：主页导航→子页面功能→工作流驱动。【项目任务】

请学生跟随教师操作：

（1）在扣子模板商店中找到“智能标志设计平台”并复制到个人空间。

（2）进入业务逻辑界面，观察三个工作流的节点结构。

（3）进入用户界面，观察主页和三个子页面的布局。

（4）梳理“主页→子页面→工作流”的完整调用路径。

【教法学法】

1.案例演示：展示模板的完整结构。

2.路径梳理：帮助学生建立“主页导航→子页面功能→工作流执行”的完整认知。【设计意图】

通过案例拆解，让学生直观理解标志设计应用的完整架构。

【教学资源】

教材“标志设计智能体案例拆解”部分、图6-1至图6-13、扣子模板商店“智能标志设计平台”15输出好，提问：

（1）“智能标志设计平台”设置了哪三个工作流？各自的功能是什么？

（2）主页导航栏有几个按钮？分别跳转到什么子页面？

（3）三个工作流是串联的还是独立的？用户如何使用它们？

（学生回答）

（总结）三个工作流独立但互补——用户先有想法→用灵感生成；有了具体提示词→用标志生成；有了初稿不满意→用修改。【教法学法】问答互动+工作流功能梳理。【设计意图】检验对案例架构的理解。5反馈这个案例的设计亮点在于——三个工作流对应三个独立但连贯的设计阶段。用户不需要一次性完成所有操作，而是可以根据自己的进度选择使用哪个功能。这种“模块化”的设计思路，值得在其他智能体开发中借鉴。【设计意图】

提炼“模块化”设计思路。3反思如果你要在这个平台上增加“生成多个方案供用户选择”的功能，你觉得应该新增一个工作流，还是扩展现有工作流？【设计意图】引导学生思考功能的扩展方式。2输入知识目标5

能力目标3【参考导语】

理解了整体架构后，我们来深入拆解一个核心操作——数据绑定。请大家阅读“UI界面——数据绑定”部分。

【教学内容】

数据绑定是连接前端UI与后端工作流的关键操作，主要包括三种：

①用户信息绑定——将系统变量{{userInfo.avatarUrl}}和{{userInfo.nickName}}绑定到头像和昵称组件，自动显示当前用户信息。

②按钮事件绑定——为按钮设置“点击时”事件，选择“调用工作流”，将按钮与具体工作流关联，并将输入组件的值作为工作流入参。

③展示组件绑定——将工作流的输出变量绑定到文本组件、图片组件等展示组件，让工作流运行结果自动显示在界面上。

绑定公式：“谁产生的数据（工作流）→什么数据（输出变量）→在哪里展示（界面组件）”

。【项目任务】

请学生完成以下数据绑定的观察与记录：

（1）在“生成灵感”子页面中，找到用户头像和昵称组件，查看其绑定的数据来源。

（2）找到“开始生成”按钮，查看其绑定了哪个工作流。

（3）找到灵感展示区的文本组件，查看其绑定了工作流的哪个输出变量。

（4）用文字描述“开始生成→工作流运行→结果展示”的完整数据流。

【教法学法】

1.三步骤拆解：用户信息绑定→按钮事件绑定→展示组件绑定。

2.数据流追踪：从点击按钮到结果展示的完整路径。【设计意图】

通过数据绑定拆解，让学生理解前后端联动的核心机制。

【教学资源】

教材“UI界面——数据绑定”部分、图6-14至图6-1812输出好，提问：

（1）数据绑定的三种类型分别是什么？

（2）按钮绑定工作流事件时，需要配置哪些信息？（事件类型=调用工作流，选择具体工作流，设置入参引用）

（3）展示组件绑定工作流输出变量时，如果工作流有多个输出变量，需要怎么做？（添加多个组件，分别绑定对应的变量）

（学生回答）【教法学法】问答互动+数据流追踪练习。【设计意图】检验对数据绑定的理解。5反馈数据绑定的核心逻辑是“三个信息”：谁产生的数据（工作流）→什么数据（输出变量名）→在哪里展示（界面组件）。这三个信息缺一不可。初学者最容易犯的错误是——工作流配置好了、界面也搭好了，但忘记做绑定，结果点了按钮没反应。

记住：UI是脸面，工作流是大脑，数据绑定是神经系统——没有神经系统，脸和大脑无法沟通。【设计意图】强调数据绑定的必要性，用“神经系统”类比加深记忆。3反思如果“开始生成”按钮点击后没有反应，你会从哪些方面排查问题？（①按钮是否绑定了事件；②事件类型是否正确；③工作流是否已