还在为分享文章时只有单调的链接而烦恼吗？想让你的内容分享在社交媒体上脱颖而出？

想象一下，当你分享一篇精彩文章时，不再是简单的 URL，而是一张自动生成、设计精美、重点突出、还带配图的“文章概念卡片”！就像这样：

是不是瞬间感觉高级感拉满，分享欲爆棚？

今天，我就手把手教你，如何利用强大的Coze工作流平台和代码能力飙升的DeepSeek V3大模型，轻松搭建这样一个能将任意网页文章转化为惊艳视觉卡片的自动化工具！无需复杂编程，小白也能上手！

✨ 体验传送门 ✨

https://www.coze.cn/store/agent/7489808212804288551?bot_id=true

🚀**** 缘起：当 Coze 遇见 DeepSeek V3 的代码魔法

最近，DeepSeek V3 (具体是 V3-0324 版本) 的更新引起了不小的轰动，尤其是在前端代码生成方面的能力，简直是“开了挂”！

能不能利用它强大的代码生成能力，结合 Coze 的自动化流程，将网页文章的核心内容，自动渲染成一个设计感十足的前端页面，最终生成一张便于传播分享的图片卡片呢？

答案是：完全可以，而且效果惊艳！

💡**** 整体思路：三步搞定“链接变卡片”

（以https://www.1ai.net/news的新闻资讯为例，可以根据自己的需求调整）

整个过程就像一条自动化流水线，逻辑非常清晰：

1. 1. 信息抓取： 利用 Coze 插件，从你提供的网页链接中，自动提取文章的标题、核心内容、甚至关键图片。
2. 2. 智能设计与渲染： 将提取到的文本和图片信息，喂给 DeepSeek V3 大模型。模型会根据我们精心设计的 Prompt 指令，分析内容、构思布局、搭配图标字体，最终生成一段包含所有信息的精美 HTML 前端代码。
3. 3. 代码变图片： 再次利用 Coze 插件，将前面生成的 HTML 代码，“咔嚓”一下转换成一张高质量的 PNG 图片，也就是我们最终看到的文章卡片。

核心组件（关键节点）概览：

• 获取网页图片链接 插件 (提取视觉元素)
• 读取网页内容 插件 (抓取文字信息)
• 文本处理 节点 (数据格式化)
• 大模型 (DeepSeek V3) 节点 (核心智能设计与代码生成)
• HTML 转图片 插件 (最终成果输出)

🛠️**** 实战搭建：一步步跟我做

第一步：创建 Coze 工作流

1. 1. 登录 Coze (扣子)，进入“工作流”创建页面。
2. 2. 新建工作流，取个响亮的名字，比如 AI_Article_Card_Generator。
3. 3. 描述清晰：例如，“输入网页链接，自动生成设计精美的文章摘要卡片图片”。

第二步：配置起点 - 输入网页链接

1. 1. 点击“开始”节点。
2. 2. 创建一个输入变量，命名为 url。
3. 3. 变量类型选择 String (字符串)。这个变量就是用来接收你要转换的文章链接的。

第三步：捕获眼球 - 提取网页图片

• 目的： 让卡片有图有真相，更吸引人。
• 操作：
  1. 在开始节点后，添加一个插件节点。
  2. 搜索并选择一个能从网页 URL 提取图片链接的插件。（示例中使用 get_imgUrl_from_pageUrl，你可以根据目标网页类型，如公众号文章，寻找更合适的插件）。
  3. 配置插件输入：将插件的 url 参数，引用“开始”节点中的 url 变量。

第四步：抓取灵魂 - 读取文章内容与标题

• 目的： 获取卡片的核心文字信息。
• 操作：
  1. 添加另一个插件节点。
  2. 选择“链接读取”类插件，例如 LinkReaderPlugin。
  3. 配置插件输入：同样将其 url 参数，引用“开始”节点中的 url 变量。

第五步：数据梳理 - 准备图片链接

• 目的： 从可能提取到的多个图片链接中，通常我们只需要第一张作为卡片主图。
• 操作：
  1. 添加一个“文本处理”节点。
  2. 配置输入：
     • 变量名 String1 (或其他自定义名称)。
     • 变量类型 Array (字符串数组)，引用自“获取网页图片”插件 (get_imgUrl_from_pageUrl) 的输出 urls。
  3. 处理逻辑：使用字符串拼接功能，提取数组中的第一个元素 {{String1[0]}}。这样我们就得到了第一张图片的链接。

第六步：注入魔法 - 大模型智能设计与编码 ✨🧠✨

• 这是整个流程的核心！
• 操作：
  1. 添加“大模型”节点。
  2. 模型选择： 务必选择 DeepSeek-V3-0324 (或更新的支持代码生成的版本)。
  3. 关键设置： 点击模型名称旁边的小齿轮图标 ⚙️，将“最大上下文长度”或类似的输入/输出限制尽量调高！否则，生成的 HTML 代码可能会因为长度限制而被截断，导致卡片不完整。
  4. 配置输入变量：
     • text: 类型 String，引用“链接读取”插件 (LinkReaderPlugin) 输出的 content (文章内容)。
     • img: 类型 String，引用上一步“文本处理”节点的 output (第一张图片链接)。
     • title: 类型 String，引用“链接读取”插件 (LinkReaderPlugin) 输出的 title (文章标题)。
  5. 配置输出变量：
     • html_code: 类型 String (用于接收生成的 HTML 代码)。

系统提示词

文章下面有领取方式

用户提示词

文章标题：{{title}}
把图片整合到概念卡片中：{{img}}
直接给出html代码，不要其他任何内容

第七步：代码显形 - HTML 转图片

• 目的： 将大模型生成的代码变成可见的图片。
• 操作：
  1. 添加一个“HTML转图片”的插件节点 (例如 gen_img 或类似功能的插件)。
  2. 配置插件输入：将其 html (或类似名称) 参数，引用“大模型”节点输出的 html_code 变量。

第八步：完美收官 - 配置结束节点

1. 1. 点击“结束”节点。
2. 2. 配置输出：选择上一步“HTML转图片”插件生成的图片作为最终输出。这样，每次运行工作流，你就能直接得到这张精美的文章卡片图片了！

🌟 总结与展望

通过 Coze 的可视化编排能力和 DeepSeek V3 强大的代码生成能力，我们成功地将一个原本需要专业设计师和前端工程师协作完成的任务，变成了一个自动化的流程。

这不仅是一个能帮你“美化”分享链接的小工具，更展示了 AI Agent + 大模型 在自动化内容创作与传播领域的巨大潜力。你可以：

• 改造它： 调整 Prompt，改变卡片风格、尺寸、配色，适应不同场景，特别是图片提取部分（如公众号、微博）。
• 扩展它： 结合更多 Coze 插件，实现自动发布到社交媒体等高级功能。
• 启发思考： 还有哪些重复性的、基于内容理解和生成的工作，可以用类似思路实现自动化？

由于提示词过长影响阅读，并且不好复制，欢迎您一键三连，并在评论区留言“卡片提示词”，并截图发给伊登微信，会自动获取卡片提示词的资料

添加微信备注“公众号”领取独家coze教程+DeepSeep超全文档