阿里通义百炼工作流应用入门指南

本教程将手把手教你如何在阿里云百炼平台上搭建一套完整的AI工作流应用，实现从创意构思到静态网页自动生成的全流程自动化。你将学会如何组合多个大模型、调用MCP工具，让AI帮你完成从“想点子”到“写代码”再到“部署上线”的完整链条。整个过程无需手动编写复杂代码，只需拖拽配置即可轻松完成。

1. 工作流应用的创建与基础配置

登录阿里云百炼控制台，按照以下路径找到工作流应用的创建入口：

• 应用 - 应用管理 - 工作流应用 - 新增应用 - 工作流应用

点击后进入工作流编辑画布，初始页面如下图所示：

• 左上角可以修改工作流名称（例如：“创意网页生成器”）
• 右上角提供测试和发布按钮
• 左下角可以切换操作模式（默认触摸板，建议切换为鼠标模式，更符合日常操作习惯）

小提示：初次使用建议先点击左下角切换为鼠标模式，避免误触操作。

2. 构建“点子构思大师”节点

我们希望AI能先想出一个好玩且易于实现的创意。这里选择Qwen3（支持联网搜索），让它扮演“点子构思大师”的角色。

1. 从左侧组件库中拖拽一个大模型节点到画布。
2. 将【开始】节点的右侧小点连线至该大模型节点的左侧。
3. 点击大模型节点左侧的箭头展开配置面板，设置参数如下：
• 节点名称：点子构思大师
• 模型选择：Qwen3（或其他支持联网搜索的模型）
• 角色提示词：例如“你是一个创意大师，请构思一个有趣的、可以实现在单个静态HTML页面中的小游戏或互动页面。要求简单易懂，无需外部资源。”
• 用户提示词（User Prompt）：插入变量 sys/query（在输入框输入 / 即可弹出变量选择），这样用户可以在对话中指定创意倾向（如“做一个点击消除表情的游戏”）。

注意：变量 sys/query 代表用户输入，可以让创意更贴合个性化需求。如需更精细控制，也可以选择前一个节点的输出作为输入。

3. 构建“牛马前端工程师”节点

有了创意后，需要一个能够写出完整HTML代码的模型。这里选用DeepSeek作为“牛马前端工程师”。

1. 再次拖拽一个大模型节点到画布，命名为“牛马前端工程师”。
2. 从“点子构思大师”节点的右侧小点连线至“牛马前端工程师”的左侧。
3. 配置该节点：
• 模型选择：DeepSeek（或其他编码能力强的模型）
• 角色提示词：“你是一个专业的前端工程师，请根据提供的创意，生成一个完整的、可运行的HTML静态网页。仅输出HTML代码，不要任何解释或额外文字。”
• 用户提示词：插入变量，选择前一个节点（点子构思大师）的 result 输出。
• 最大回复长度：设置为4000（确保生成完整HTML，避免被截断）

小提示：限定模型只输出HTML，可以避免冗余说明，让结果更纯净高效。

4. 使用MCP部署HTML

生成的代码需要部署到可访问的网址。阿里云百炼支持通过MCP（模型上下文协议）调用外部服务，这里使用 EdgeOne Pages 进行静态页面托管。

1. 从左侧组件库拖拽一个MCP节点到画布。
2. 在弹出的MCP广场中找到 EdgeOne Pages，点击选择。
3. 如果是首次使用，点击立即开通（需授权）
4. 在MCP列表中选择 deploy-html 工具，点击确定。
5. 关闭弹出的配置窗口，先在画布中将“牛马前端工程师”节点的输出连接到MCP节点的输入。
6. 再次点击MCP节点的配置图标，将输入参数 value 设置为“牛马前端工程师”节点的 result 输出。

常见问题：如果MCP广场中没有EdgeOne Pages，请检查你的百炼账户是否已开通相关服务，或刷新页面重试。

5. 配置结束节点

最后，将工作流的结果输出给用户。结束节点可以自定义返回内容。

1. 从左侧拖拽【结束】节点到画布。
2. 将MCP节点的输出连接到结束节点的输入。
3. 配置结束节点的输出格式，例如：
• 创意标题：从“点子构思大师”节点获取
• 网页地址：从MCP节点获取（返回的URL）
• 源代码预览：从“牛马前端工程师”节点获取（可选）

你可以自由组合这些信息，让用户一目了然。

6. 测试与优化

点击右上角的测试按钮，在弹出的入参配置中可以不修改（或删除默认变量），直接发送消息，例如：“构思一个点击表情消失的小游戏”。

• 观察画布中各个节点的运行状态，等待几分钟（需消耗token）。
• 查看最终输出的网页链接，点击访问。
• 如果效果不理想，可以：
  1. 修改“点子构思大师”的提示词，强调“简单”，降低复杂度。
  2. 在“牛马前端工程师”之后添加一个审核节点（例如另一个大模型作为质量检查员），让审核者给出修改建议并返回给前端工程师重新生成。
  3. 调整模型参数（如温度、最大长度）以控制输出质量。

小提示：如果创意太复杂，生成的HTML可能无法运行。建议在提示词中明确要求“仅使用原生HTML+CSS+JS，不依赖外部库”。

7. 常见问题与解答

• 问：为什么选择Qwen3做创意构思，而用DeepSeek写代码？
  答：Qwen3支持联网搜索，可以获取最新流行元素，适合发散创意；DeepSeek在编码任务上表现优秀，输出稳定。你也可以根据实际需求替换其他模型。
• 问：MCP是什么？为什么要用它？
  答：MCP（模型上下文协议）是一种让AI模型与外部工具交互的协议。通过EdgeOne Pages MCP，工作流可以直接将生成的HTML部署到云端，无需手动上传。
• 问：测试时提示token不足怎么办？
  答：请检查你的百炼账户免费额度是否用完。可以优化提示词减少输出长度，或升级套餐。
• 问：生成的网页无法正常显示/交互？
  答：可能是创意过于复杂或代码有语法错误。建议在“牛马前端工程师”后增加一个审核节点（如使用DeepSeek V3）来校验HTML完整性，并给出修正建议。
• 问：能不能让多个AI各自负责不同部分（CSS、JS等）？
  答：可以。你可以添加多个大模型节点，分别负责HTML结构、样式、逻辑，但需要注意token消耗和节点间的数据传递。

8. 总结与扩展

通过以上步骤，你已经成功创建了一个从创意到部署的全自动AI工作流。你可以继续优化：

• 加入循环逻辑，让审核不通过时自动重试。
• 设置条件分支，根据用户输入选择不同方向的创意。
• 接入更多MCP工具（如发送邮件、存储数据库等）扩展应用场景。

注意：每次测试都会消耗token，建议在提示词中严格控制长度，避免不必要的浪费。现在就去百炼平台上亲手试试吧！

你是一名 AI 行业编辑，请围绕下面这条热点输出一份资讯解读：
热点：阿里通义百炼工作流应用入门指南要求：
1. 先用一句话解释这条热点在讲什么
2. 再总结它为什么重要
3. 说明会影响哪些 AI 产品或内容方向
4. 最后给出 3 个适合资讯站使用的标题