1. 从想法到页面为什么我们需要一个自动化金句可视化工作流不知道你有没有过这样的经历看了一部好剧读了一本好书里面那些戳中心窝的句子总想找个地方好好收藏起来。以前我的做法是截图、复制到备忘录或者发个朋友圈。但总觉得差点意思截图太零散备忘录太朴素朋友圈又转瞬即逝。我就想能不能给这些闪着光的句子一个配得上它们分量的“家”一个既美观又能随时分享的专属页面。手动做太麻烦了。从构思设计、写HTML、调CSS、加动画到最终部署上线没个大半天搞不定。而且每次有新句子都得重复一遍这个流程效率极低。直到我开始玩Dify这个想法才真正落地。Dify就像一个可视化、低代码的AI应用工厂它把大语言模型LLM的能力、联网搜索Agent的智能还有代码执行这些复杂的技术都封装成了一个个可以拖拽、连接的“积木块”。我们这次要构建的就是一个专门为《长安的荔枝》这类作品金句服务的自动化流水线。你只需要输入一个简单的指令比如“给我找5句《长安的荔枝》里的经典台词”后面所有的事情工作流都会自动完成Agent会去网上帮你把金句搜罗来LLM大模型会把这些文字变成一套酷炫的HTML代码最后代码执行节点会把这个页面生成出来并返回一个可以直接访问的链接。整个过程从“一句话”到“一个页面”可能就几十秒。这不仅仅是省事。它把创作的门槛降到了最低。你不需要懂前端不需要会设计甚至不需要知道HTML标签怎么写。你只需要有想法有想保存下来的好内容这个工作流就能帮你实现视觉化呈现。无论是用于个人知识管理、内容创作素材库还是作为一个小工具分享给同好都非常实用。接下来我就带你一步步拆解这个工作流看看这些“积木块”到底是怎么拼装起来并高效运转的。2. 核心积木解析Dify工作流中的四大关键组件要搭好这个自动化流水线我们得先搞清楚手上有哪些“积木”以及每块积木是干什么用的。整个工作流的核心其实就围绕着四个关键节点展开开始节点、Agent联网搜索、LLM代码生成、代码执行与部署。理解了它们你就掌握了搭建的主动权。2.1 开始节点工作流的触发器与指令入口开始节点是整个工作流的起点也是你和这个自动化流程对话的窗口。这里的关键在于sys.query这个系统变量。你可以把它理解为一个万能输入框用户在这里输入的任何内容都会作为初始指令传递给后续的节点。在我们的场景里我并没有在开始节点设置复杂的“用户提示词”而是直接使用了sys.query。配置非常简单但意图很明确把用户的原始查询原封不动地传递下去。比如当用户输入“长安的荔枝电视剧5个金句”时这个字符串就会成为整个工作流启动的“燃料”。这种设计保持了最大的灵活性用户想搜什么直接说就行工作流会基于这个意图去执行后续所有步骤。2.2 Agent策略插件为LLM装上“眼睛和手脚”Agent在AI领域通常指的是能够感知环境、做出决策并执行动作的智能体。在Dify里Agent节点就是让大模型“动起来”的关键。光有LLM它只是一个知识渊博但“足不出户”的学者它知道的仅限于训练数据截止日期之前的内容。而Agent通过调用各种工具Tools比如联网搜索、数据库查询、调用API等相当于给这位学者配上了望远镜和跑腿的小弟。在这个工作流中我们给Agent安装了一个非常重要的插件MCP Agent策略插件。你可以在Dify的插件市场里找到并安装它。安装后我们需要进行几个关键配置策略选择我们使用MCP FunctionCalling。这是一种让模型能够理解并调用外部函数工具的协议是Agent能力的核心。模型选择这里我选了智谱AI的glm-4-flash。选它理由很实在第一它有免费的额度对于学习和测试非常友好第二它的响应速度很快能保证工作流的整体效率。工具配置这是Agent的“工具箱”。我们启用MCP-SSE工具列表里的联网搜索工具让Agent获得实时检索信息的能力。服务器地址这里需要填入一个关键的MCP-SSE服务器地址它指向一个联网搜索服务。你需要使用自己的智谱AI API Key来替换地址中的授权部分。这相当于给了Agent一张进入互联网图书馆的“通行证”。指令设定我们给Agent的指令非常清晰“请根据用户输入{{#sys.query#}}调用web_search实现联网搜索查询”。这就像给侦探下达任务根据用户给的线索查询词动用你的搜索工具把相关情报带回来。这样配置好后当工作流运行到Agent节点时它就会拿着用户想找“长安的荔枝金句”这个指令调用联网搜索工具去实时网络上抓取最新的、相关的金句内容并将搜索结果整理好输出给下一个节点。这一步解决了“内容从哪里来”的问题。2.3 LLM大语言模型从文本到视觉代码的“魔法师”Agent搜回来了金句文本接下来就需要一位“设计师”把它变成好看的网页。这个设计师就是LLM大语言模型节点。它的任务是将非结构化的文本转化为结构严谨、样式精美的HTML代码。这里我选择了火山引擎的豆包模型doubao-seed-1.6。一方面火山引擎的协作奖励计划提供了免费token性价比高另一方面这个模型在代码生成和理解复杂指令方面表现不错。但更关键的是给它的“设计任务书”——也就是系统提示词System Prompt。这份提示词写得越详细、越专业生成的结果就越可控、越优质。我写的系统提示词几乎就是一个完整的前端开发需求文档。它明确要求模型扮演“专业的HTML动态网页提示词专家”并给出了必须遵循的设计规范布局风格严格采用Bento Grid bento盒风格布局这种布局错落有致视觉上很现代。配色方案主色调是纯黑色背景搭配亮橙色作为强调色形成强烈的视觉对比。排版原则运用大小字体对比中文用大号粗体突出核心英文小字作为点缀提升设计感。视觉元素使用简洁的勾线图形作为装饰或数据可视化元素避免使用emoji等不专业的图标。动效与科技感要求实现类似Apple官网的滚动视差效果使用高亮色的透明度渐变来营造科技感并集成Framer Motion库来实现平滑动画。技术栈集成TailwindCSS 3.0进行快速样式开发通过CDN引入图表组件、图标库如Font Awesome等所有外部资源。输出格式最后必须输出一个完整的、可直接运行的HTML文件代码块不能有任何多余的解释。这份详尽的提示词极大地约束了LLM的自由发挥让它从一个天马行空的画家变成了一个能精准执行需求的专业前端工程师。用户提示词则很简单就是把上一个Agent节点搜索到的金句内容{{#1750772708073.text#}}传递给它告诉它“这是内容请按设计规范生成HTML代码。”2.4 代码执行与服务器部署让代码“活”起来的最后一公里LLM节点输出了完美的HTML代码但它还只是一段文本存在于Dify的工作流运行记录里。怎么把它变成一个真正可以通过链接访问的网页呢这就需要代码执行节点和背后的服务器了。你可能会问Dify不是有“发布为Web应用”或者集成一些静态托管服务如腾讯云EdgeOne Pages的选项吗为什么还要自己写代码这里涉及一个效率权衡的问题。LLM生成代码尤其是较复杂的HTMLCSSJS需要一定的推理时间可能长达10秒以上。而如果我们用一段预先写好的、高效的Python代码来处理可能1秒内就能完成文件生成和返回链接。这对于需要快速响应的交互式应用来说体验差距很大。所以我在这里采用了一个“客户端-服务器”架构服务端我提前用Python的Flask框架写了一个简单的HTTP API服务并部署在了云服务器上。这个服务只有一个核心功能接收一段HTML代码和一个文件名在服务器上创建一个静态HTML文件然后返回这个文件的访问地址。为了保护这个接口我还加上了简单的API Key认证。服务端代码是开源的你可以从我的GitHub仓库获取并部署到你自己的服务器上。客户端代码执行节点在Dify工作流里我添加了一个“代码执行”节点里面写了一段Python函数。这段函数的主要工作是提取代码用正则表达式从LLM输出的文本中精准提取出被 html ... 包裹的纯HTML代码。这一步很重要因为LLM有时会在代码前后加一些说明文字。调用API将提取出的HTML代码、以及预设的API URL和API Key通过HTTP POST请求发送给我部署好的那个服务端。处理返回接收服务端返回的生成好的HTML文件链接和文件名并将这些信息格式化后输出。这个节点配置了三个输入变量json_html来自LLM的输出、apikey和apiurl。apikey和apiurl我建议放在Dify的环境变量里进行管理这样既安全避免密钥在工作流中明文暴露又方便修改更换服务器时只需改环境变量值。代码执行节点最终会输出一个可以直接点击访问的Markdown格式链接[点击查看](http://你的服务器地址/生成的文件.html)以及文件名等信息。至此从触发指令到搜索内容到设计代码再到生成可访问的页面一个完整的自动化闭环就形成了。每个节点各司其职通过Dify的连线串联起来形成了一个高效、稳定的智能生产线。3. 手把手实战在Dify中搭建你的第一个金句可视化流水线理论讲完了我们动动手在Dify里把这个工作流真实地搭建出来。跟着步骤走你也能拥有一个属于自己的“金句生成器”。3.1 前期准备账号、模型与插件首先你需要一个Dify账号。可以去Dify官网注册也可以选择在本地部署。建议新手先从云端版开始省去环境配置的麻烦。登录后进入“工作流”创建页面。接下来是资源准备主要是三样东西模型API Key工作流中我们会用到两个模型。一个是智谱AI的GLM-4-Flash用于Agent联网搜索你需要去智谱AI开放平台申请一个API Key。另一个是火山引擎的豆包模型用于生成HTML去火山引擎方舟平台申请通常有免费额度。MCP Agent策略插件在Dify工作流编辑器的左侧边栏找到“插件市场”。搜索“MCP”找到“MCP Agent策略”插件并安装。安装成功后在“已安装插件”列表里能看到它。自建服务器可选但推荐为了获得最佳的生成速度我建议你部署自己的代码生成服务。你可以将我GitHub仓库里的makehtmlapi.py文件下载下来。这是一个基于Flask的简单服务。你需要一台有公网IP的云服务器比如腾讯云、阿里云的轻量应用服务器安装好Python环境运行这个脚本。记得在服务器的安全组里开放你脚本监听的端口比如8080。运行成功后你会得到一个类似http://你的服务器IP:8080/generate-html/的API地址。同时在脚本里或通过环境变量设置一个你自己的API Key比如sk-your-secret-key-here。准备好这些我们就可以开始搭积木了。3.2 节点配置与连线一步步组装工作流在Dify中创建一个新的空白工作流。我们从左到右依次添加并配置节点。第一步放置并配置“开始”节点。从节点库拖一个“开始”节点到画布。在它的配置面板里确保“用户输入问题”的变量是sys.query。这样用户在前端聊天框里输入的任何内容都会通过这个变量传递进来。第二步添加并配置“Agent”节点。拖入一个“Agent”节点并用箭头从“开始”节点连接到它。点击Agent节点进行详细配置策略在下拉菜单中选择“MCP FunctionCalling”。模型选择“智谱AI”然后模型选择“glm-4-flash”。工具在“MCP-SSE工具”列表中确保勾选上可用的工具比如Web Search。MCP服务器地址这是关键一步。地址格式为https://open.bigmodel.cn/api/mcp/web_search/sse?Authorization你的智谱APIKey。请将“你的智谱APIKey”替换成你实际申请的Key。注意整个地址要完整填写。指令在指令框中输入请根据用户输入{{#sys.query#}}调用web_search实现联网搜索查询。这样Agent就知道该用用户的查询词去做什么了。第三步添加并配置“LLM”节点。拖入一个“大语言模型”节点连接在Agent节点之后。它的配置如下模型选择“火山引擎”模型选择“doubao-seed-1.6”。系统提示词将前面章节提到的那个非常详细的、关于生成Bento Grid风格HTML页面的长提示词完整地粘贴进去。这是生成高质量页面的灵魂。用户提示词输入请根据用户输入的信息{{#1750772708073.text#}}生成HTML代码。这里的1750772708073.text需要替换成你实际工作中Agent节点输出内容的变量名。你可以在Dify中点击Agent节点的输出端口查看它的变量名通常是一个数字ID加.text。第四步添加并配置“代码执行”节点。拖入一个“代码执行”节点连接在LLM节点之后。我们需要在这里编写Python客户端代码。代码语言选择Python。代码内容将前面“核心积木解析”章节里提供的那个Python函数代码复制进去。这个函数负责提取HTML、调用你的自建API服务。输入参数在函数定义main(json_html: str, apikey: str, apiurl: str)下面Dify会让你为这三个参数绑定具体的值。json_html绑定LLM节点的输出变量。apikey和apiurl强烈建议在这里使用“变量”类型并选择你预先在Dify“环境变量”中设置好的变量名。比如你可以在环境变量里创建两个变量MAKEHTML_API_KEY和MAKEHTML_API_URL并填入你的服务器API Key和URL。然后在代码节点里分别选择这两个变量。这样做最安全、最规范。输出变量在代码最后函数返回一个字典。我们需要在配置面板中声明输出变量名比如html_url,filename,markdown_result类型都选String。第五步添加“直接回复”节点。最后拖入一个“直接回复”节点连接所有流程的末端。在这个节点的配置里你可以组织最终返回给用户的消息。例如你可以这样设置回复内容已为您生成金句可视化页面 搜索到的金句内容{{Agent节点的输出变量}} 页面访问链接{{代码执行节点的markdown_result变量}}这样用户就能一次性看到搜索到的原文和生成的页面链接。所有节点连接好后记得点击右上角的“保存”按钮给你的工作流起个名字比如“长安的荔枝金句可视化生成器”。3.3 测试、优化与故障排查工作流搭建完成先别急着分享一定要自己跑几遍测试。点击工作流编辑界面右上角的“预览”按钮会弹出一个聊天测试窗。测试用例输入“长安的荔枝电视剧里关于命运的3个金句”然后点击发送。观察工作流的运行状态。每个节点会依次变成绿色成功或红色失败。如果失败点击节点可以查看详细的错误日志。常见问题与排查Agent节点报错“工具调用失败”首先检查你的智谱API Key是否正确、是否还有余额。其次检查MCP服务器地址的格式是否正确特别是Authorization参数部分。LLM节点生成的代码不完整或不符合要求这通常是系统提示词不够精确导致的。回头仔细检查你的系统提示词是否把设计要求写得足够清晰、无歧义可以尝试在提示词中增加“必须”、“严格”等强调词汇并明确禁止某些行为如“不要添加任何额外解释”。代码执行节点报错无法连接到服务器首先检查你的API服务是否在服务器上正常运行可以用curl命令本地测试一下。其次检查Dify环境变量里的apiurl是否正确以及服务器的防火墙/安全组是否放行了对应端口如8080。最后检查代码执行节点中的Python代码正则表达式提取HTML部分是否可能因为LLM输出格式的微小变化而失效可以考虑增强其容错性。生成的页面链接无法访问检查你的服务器上API服务生成的HTML文件是否被放在了正确的、有Web服务器如Nginx代理的目录下。确保返回的链接是有效的HTTP/HTTPS地址。多测试几次用不同的查询词比如“李善德的经典台词”、“关于官场的讽刺句子”看看工作流是否稳定生成的页面是否美观。根据测试结果回头微调LLM的系统提示词或者调整Agent的搜索指令直到你对效果满意为止。4. 进阶玩法与扩展思路让你的工作流更强大、更通用一个基础的《长安的荔枝》金句生成器已经完成了。但Dify工作流的魅力在于其强大的可扩展性。我们可以基于这个基础模板玩出更多花样让它不再局限于一部剧、一种形式。4.1 内容源的扩展从单一搜索到多元输入目前我们的工作流依赖于Agent的联网搜索。这很好但内容源可以更丰富。接入知识库你可以在工作流最前面添加一个“知识库检索”节点。提前将《长安的荔枝》原著文本、剧评文章、甚至相关的历史资料构建成一个Dify知识库。当用户查询时先让Agent从你的专属知识库里查找如果找不到或不够再fallback到联网搜索。这样获取的内容更精准、质量也更可控。支持文件上传修改开始节点允许用户上传TXT、PDF、Word文档。在工作流中增加一个“文本提取”节点将上传文件中的文字内容提取出来然后交给LLM去分析和生成页面。这样用户就可以为自己喜欢的任意书籍、报告、笔记制作可视化页面了。连接数据库如果你的金句是存储在某个数据库里的可以编写一个自定义工具Tool让Agent去调用这个工具查询数据库。这样就能实现从结构化数据中精准选取内容。4.2 可视化样式的定制化打造多种主题风格现在每次生成的页面都是黑橙配色的Bento Grid风格。我们可以让用户自己选择风格。增加风格选择在开始节点除了sys.query可以增加一个用户下拉菜单或文本输入让用户选择“主题风格”例如“科技感”、“中国风”、“简约清新”、“暗黑炫酷”。动态提示词在LLM节点我们可以改造系统提示词。不再是写死的一套要求而是根据用户选择的“主题风格”变量动态拼接出不同的设计要求。例如如果用户选择“中国风”提示词中就加入“使用水墨画风格元素、传统红色与金色配色、书法字体”等要求。这需要你提前为几种主流风格设计好对应的提示词片段。模板化与变量替换更工程化的做法是将HTML结构设计成几个固定的模板Template每个模板对应一种风格。LLM的任务不再是“从零生成”而是“根据内容填充模板”。你可以让LLM先根据内容选择最合适的模板然后将金句内容、颜色变量等填充到模板的对应占位符中。这种方式生成的速度更快样式也绝对稳定可控。4.3 部署与分享从自用到产品化当你打磨好一个满意的工作流后肯定想把它分享给别人用。发布为Web应用在Dify中你可以直接将这个工作流“发布为Web应用”。Dify会生成一个独立的、带有聊天界面的网页。你可以自定义这个网页的名称、图标和简介然后把这个链接分享给朋友或同事。他们打开网页输入想查询的内容就能直接获得生成好的页面链接完全不需要知道背后的Dify或工作流。集成到第三方平台利用Dify的API能力你可以将这个工作流的能力封装成一个API接口。这样你就可以把它集成到你自己的网站、微信公众号、飞书/钉钉机器人里。比如在读书社群中用户机器人并发送“金句 长安的荔枝”机器人就能自动回复一个精美的页面。构建自动化管道结合Dify的“定时触发”功能如果有的话或通过外部cron job调用API你可以让这个工作流定时运行。例如每天上午10点自动搜索社交媒体上关于某部热播剧的最新热门台词生成可视化页面并自动发布到你的博客或知识库中实现内容的自动采集与更新。4.4 性能与成本的优化思考在实际使用中我们还需要关注效率和花费。模型选择的权衡GLM-4-Flash用于搜索速度快且免费额度足是性价比之选。豆包模型用于生成代码效果和成本平衡得不错。如果你的使用量很大可以关注各云厂商的计费策略或者在生成代码环节尝试使用更轻量、更便宜的模型只要提示词写得足够“紧”效果也能有保障。缓存机制对于相同的查询词其实没必要每次都重新搜索、重新生成。可以在工作流中引入缓存逻辑。例如在代码执行节点之前先计算查询内容的哈希值去查一下之前是否已经生成过相同的页面。如果生成过直接返回旧的链接。这可以大幅降低LLM的调用成本并提升响应速度。实现缓存可以用简单的文件存储也可以用Redis等内存数据库。异步处理与队列如果生成一个页面需要较长时间比如超过10秒在Web应用场景下让用户一直等待是不友好的。可以考虑将耗时的生成任务放入消息队列如RabbitMQ、Celery工作流只负责接收任务并立即返回一个“任务已提交请稍后查看结果”的响应。然后通过轮询或WebSocket通知用户任务完成并提供链接。Dify本身可能不直接支持复杂的队列但这可以通过调用外部API服务来实现。通过以上这些扩展和优化你的金句可视化工作流就能从一个简单的实验性玩具进化成一个真正实用、强大、可定制的内容生产工具。它背后的逻辑——“输入需求 - 智能获取/处理内容 - AI生成代码 - 自动部署呈现”——是一个通用的范式完全可以套用到其他领域比如自动生成产品介绍页、数据分析报告可视化、个人周报美化等等。关键在于理解每个节点的作用并敢于动手去拼接和改造。