1.前言
《长安的荔枝》以天宝年间的历史动荡为底色，借“运荔枝”这一微观事件，串联起官场腐败、民生疾苦与小人物抗争的宏大叙事。其金句兼具文学感染力与现实启发性，既刻画了李善德“向死而生”的勇气，也揭示了权力游戏的残酷法则，成为观众热议的焦点。
电视剧《长安的荔枝》2025年6月7日19:30 在 CCTV-8黄金档 首播，并在 腾讯视频 同步上线。目前该电视剧已经全部播出。从该小书书里面找到比较经典的语句。
我们从金句里面也能找到比较有意思的故事和内容。今天我们就带大家做一个工作流实现一个经典语句生成一个精美的html页面来。
下面是工作流的截图：
生成的效果如下：
看起来不错，那么这样的页面是如何制作出来的呢？下面就带大家手把手制作这个工作流。
如果大家懒的看文章，我们这里也提供的一个文章的播客，感兴趣小伙伴也可以先听一下这个播客。
2.工作流制作
这个工作流主要有哪些组成部分构成的呢？我们通过上面的截图就可以看出它主要有开始节点、Agent、LLM大语言模型、代码执行、直接回复组成。
开始
这个开始节点我们这里就没有设置用户定义的提示词，就用sys.query的提示词。配置内容如下：
Agent
这个Agent 这里我们用到Agent 策略插件。这个插件我们需要在插件市场找到。
选择上面截图中的MCP Agent策略安装。安装完成后我们可以在已安装的插件列表中查询到。
策略这里我们选择MCP FunctionCalling
模型这里我们选择智普的glm-4-flash (选择它主要是免费，第二个速度快)
MCP-SSE的工具列表我们选择
工具列表中我们把2个工具都选上
MCP 服务器地址，这个地址我们填写智普联网搜索的mcp-see地址
https://open.bigmodel.cn/api/mcp/web\_search/sse?Authorization=你智普APIkey
指令
请根据用户输入{{#sys.query#}}调用web\_search实现联网搜索查询
查询
sys.query
LLM大语言模型
这个LLM大语言模型这块作用是将前面的Agent联网搜到的金句使用大语言模型生成精美的HTML 页面。
模型这里我们使用火山引擎的豆包模型（doubao-seed-1.6）
目前火山引擎协作奖励计划送免费token,大家可以免费用起来
系统提示词
你是一位专业的HTML动态网页提示词专家，能够根据给定的内容和设计要求生成高质量的HTML代码。
你需要根据用户提供的内容和设计要求，生成符合规范的HTML代码，确保代码具有良好的结构、性能和可维护性，准确实现用户描述的视觉效果和交互体验。
以下是你需要展示在网页中的具体内容：
<content>
{{CONTENT}}
</content>
这里是额外的设计要求：
<design\_requirements>
{{DESIGN\_REQUIREMENTS}}
</design\_requirements>
在生成HTML代码时，请遵循以下步骤和要求：
1. 分析上述内容和设计要求。
2. 规划网页结构和布局，严格按照Bento Grid风格设计布局。
3. 编写HTML结构代码。
4. 集成TailwindCSS 3.0+样式，使用纯黑色背景和亮橙色作为主要配色。
5. 运用大小字体对比突出核心要点，中英文混用，中文使用大字体粗体，英文小字作为点缀。
6. 使用简洁的勾线图形作为数据可视化或配图元素。
7. 应用高亮色自身的透明度渐变制造科技感。
8. 实现类似Apple官网的滚动动效。
9. 集成在线图表组件，确保样式与主题一致。
10. 使用Framer Motion实现动画效果。
11. 集成专业图标库如Font Awesome或Material Icons。
12. 优化代码结构和性能。
最后，请输出完整的HTML代码，不包含其他解释或评论，不使用emoji作为主要图标，确保所有外部资源（如CSS和JavaScript库）通过CDN引入。输出格式如下：
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<!-- 元信息和资源引入 -->
</head>
<body>
<!-- 页面内容 -->
<script>
// JavaScript代码
</script>
</body>
</html>
用户提示词
请根据用户输入的信息{{#1750772708073.text#}}生成HTML代码
代码处理
----
客户端代码，这里我们使用我自己搭建的服务端代码来实现html页面的生成的。 有的小伙伴可能会问了。怎么不用腾讯的EdgeOne Pages 实现静态HTML 部署呢？ 这里我们使用大模型部署MCP 主要是慢。我们上面的节点用了doubao-seed-1.6 是一个推理模型生成的代码比较慢，这里为了节约时间就用代码直接生成处理了。这个处理代码生成大概在1秒就可以完成，如果用大模型至少要10秒以上时间。
输入参数 json\_html 输入值 上个LLM大模型输出
apikey 和apiurl 是我们定义的远程调用服务端代码的apikey 和apiurl
我们在环境变量里面设置
apiurl：http://14.103.204.132:8080/generate-html/
apikey：sk-zhouhuixxx
这个有小伙伴问过 这个apikey从哪来的，这个是我们服务端代码自己定义的。
关于服务端代码部署发布和使用可以看我之前的文章[dify案例分享-探秘：AI 怎样颠覆财报分析，打造酷炫 HTML 可视化](https://mp.weixin.qq.com/s?__biz=Mzg3OTYzMjc1NQ==&mid=2247487164&idx=1&sn=3f6a91f90605e1fed2f18c2d39f0500b&scene=21#wechat_redirect)
重点看代码处理生成html调用 这部分
服务端代码可以从我开源项目中https://github.com/wwwzhouhui/dify-for-dsl/blob/main/dsl/makehtml/makehtmlapi.py 获取
客户端代码如下
import json
import re
import time
import requests
defmain(json_html: str, apikey: str,apiurl: str) -> dict:
try:
# 去除输入字符串中的 html 和 标记
match = re.search(r'html\s*([\s\S]*?)', json_html, re.DOTALL)
ifmatch:
# group(1) 获取第一个捕获组的内容，即纯HTML代码
# .strip() 去除可能存在的前后空白
html\_content = match.group(1).strip()
else:
# 如果在输入中找不到HTML代码块，则返回错误
raise ValueError("未能在输入中找到 ```html ... ``` 代码块。")
# 生成时间戳，确保文件名唯一
timestamp = int(time.time())
filename = f"makehtml\_{timestamp}.html"
# API端点（假设本地运行）
url = f"{apiurl}"
# 请求数据
payload = {
"html\_content": html\_content,
"filename": filename # 使用传入的文件名
}
# 设置请求头（包含认证token）
headers = {
"Authorization": f"Bearer {apikey}", # 替换为实际的认证token
"Content-Type": "application/json"
}
try:
# 发送POST请求
response = requests.post(url, json=payload, headers=headers)
# 检查响应状态
if response.status\_code == 200:
result = response.json()
html\_url = result.get("html\_url", "")
generated\_filename = result.get("filename", "")
# 返回结果
return {
"html\_url": html\_url,
"filename": generated\_filename,
"markdown\_result": f"[点击查看]({html\_url})"
}
else:
raise Exception(f"HTTP Error: {response.status\_code}, Message: {response.text}")
except requests.exceptions.RequestException as e:
raise Exception(f"Request failed: {str(e)}")
except Exception as e:
return {
"error": f"Error: {str(e)}"
}
输入变量 我这里设置三个html\_url、filename、markdown\_result 返回的变量类型是string
img
直接回复
----
这个直接回复我们这里输出2个值，一个是agent搜索返回的金句，一个是代码执行返回的URL ，一个是URL markdown地址
以上我们就完成了工作流的制作。
3.验证及测试
=======
我们打开工作流预览按钮。聊天窗口中输入如下提示词
长安的荔枝电视剧5个金句
工作流执行完成后我们看到生成的HTML 页面链接
我们点击查看，现在链接。
保存本地打开。
这样我们就可以看到比较好看的金句了。当然你也可以搜索其他语句的金句。
体验地址https://difyhs.duckcloud.fun/chat/3UnDior2eU0ehrTl
备用地址（http://14.103.204.132/chat/3UnDior2eU0ehrTl）
4.总结
====
今天主要带大家了解并实现了使用 Dify 搭建从《长安的荔枝》电视剧搜索金句并生成精美 HTML 页面的工作流方案。此工作流借助 Agent 进行联网搜索获取金句，再通过 LLM 大语言模型将金句转化为符合特定设计要求的 HTML 代码，最后经过代码处理生成实际可用的 HTML 页面，大大提高了获取和展示经典语句的效率。
该方案不仅解决了手动制作 HTML 页面繁琐、耗时长的问题，还利用大模型和代码执行的组合，有效平衡了生成速度和效果质量。通过此工作流，我们能够轻松将搜索到的金句以美观、专业的 HTML 页面呈现出来。
感兴趣的小伙伴可以按照本文步骤去尝试搭建自己的金句搜索及 HTML 页面生成工作流。今天的分享就到这里结束了，我们下一篇文章见。
关注「 wwzhouhui」公众号，点赞分享这篇文章，后台私信：“**dsl** ” 领取 dsl 工作流文件。
[谷歌 Gemini CLI 重磅发布！手把手教你用命令行玩转 AI 多模态开发（附保姆级教程）](https://mp.weixin.qq.com/s?__biz=Mzg3OTYzMjc1NQ==&mid=2247488203&idx=1&sn=f30bcf60de9fe3c2ed08c0ce53b68928&scene=21#wechat_redirect)
[实测！豆包 AI 播客没下载按钮？F12 抓包 + 剪映处理全教程](https://mp.weixin.qq.com/s?__biz=Mzg3OTYzMjc1NQ==&mid=2247488178&idx=1&sn=153e4d106481914b24f76f2bdca46ab3&scene=21#wechat_redirect)
[dify案例分享-手把手教你用 Dify 搭建中药科普工作流，小白也能轻松上手！](https://mp.weixin.qq.com/s?__biz=Mzg3OTYzMjc1NQ==&mid=2247488147&idx=1&sn=c2c41b488e7a171048e1e08f028400c0&scene=21#wechat_redirect)
[dify案例分享-手把手教你用 Dify 搭建中药科普工作流，小白也能轻松上手！](https://mp.weixin.qq.com/s?__biz=Mzg3OTYzMjc1NQ==&mid=2247488110&idx=1&sn=cc72cada4c429707d375d6ec68a59a9c&scene=21#wechat_redirect)
[mcp-server案例分享-5 分钟搭建 AI 智能体！用 MCP Server 一键生成上市公司财报 HTML](https://mp.weixin.qq.com/s?__biz=Mzg3OTYzMjc1NQ==&mid=2247488079&idx=1&sn=9bef69f20e862c516a3ddfdbbc0b2ca4&scene=21#wechat_redirect)