这款 AI 浏览器插件，想让你的网页链接分享更高级

这款 AI 浏览器插件，想让你的网页链接分享更高级 这款 AI 浏览器插件，想让你的网页链接分享更高级 Modified December 12, 2024 附：开发时，如何确定需要插件获取哪些网页元素？ 你可以拿着初版提示词，询问 AI ： 我希望通过浏览器插件，获取提示词中所需的标签页标题、链接、内容元素，请你帮我设计获取相关元素的 js 代码 参考对话如下，也可以直接在 Cursor、Windsurf 里提示 AI 帮你完成开发 2）如何选择适合的 AI 大模型 API 服务？🔌 纯靠词生卡 Prompt 完成卡片样式输出，固然是非常灵活的 AI 智能体方案。 但倘若在最终落地产品中，还是每次都依赖大模型重新生成卡片的样式代码，反而会消耗大量的输出 token，耗时且不经济。 此外，在实际使用中，用户通常只固定使用一到两个常用模板，对自定义样式的需求并不频繁。 所以在开发 AI Share Card 插件的过程中，我选择 将模板生成功能设计为固定的代码组件，而让大模型专注于内容总结的功能 。 如果用户需要选择其他模板，则通过增加更多模板选项 or 自定义模板代码功能实现。 如此一来，对 AI 大模型的要求就不会动辄需要像 Claude 3.5 sonnet 那样高不可攀的顶级模型。 处理纯文本总结任务，仅需 13B 或更小参数的模型，加上精调的提示词，就能产生很好的结果。 一旦明确模型的任务，AI API 服务的选型要求就清晰了： 1. 较长的上下文窗口： 内容总结类任务需要较大的上下文长度； 2. 响应速度要快、并发支持要高： 以便在多人使用插件时，保持良好的性能表现； 3. 免费或尽量低价： 减少模型 token 费用。 经过简单调研后，AI Share Card 选用的是 GLM 4 flash （没恰饭。截至 2024 12，长达 128k 的上下文窗口，完全免费的调用价格，200 RPM 高并发支持，还要什么自行车 🚲 ～） 3）面向大模型 API ，如何构建生产级提示词？💬 与大模型对话产品的提示词不同。 对于大模型 API，我们需要利用插件预先获取的网页内容变量、提示词和 API 请求参数，拼搭出完整的 API 提示请求，精确引导 API 返回我们想要的生成结果。 根据 BigModel 官网给出的请求示例，可以看到需要在请求中传递 Model类型、系统提示词、用户提示词、top p、temperature 等关键参数。 因此，可以构建相应的 API 请求内容如下： 1. 设定系统提示词 ，定义基础任务： 2. Code block Plain Text 网页分享卡片生成 作者：一泽Eze 名称：网页分享卡片生成 版本：1.0 用途：根据内容和链接，生成制作网页分享卡片所需的变量信息 任务 根据模板要求，分析输入内容的语种，并以对应的语种，生成制作网页分享卡片所需的变量信息 Workflow 1. 读取网页内容、链接 2. 按变量要求，生成制作网页分享卡片所需的变量数据 注意：只需要直接输出变量数据, 不再输出任何额外文本解释 1. 设定用户提示词 ， 提供具体任务数据，并要求大模型按 JSON 格式返回生成结果 ： 2. 注：为确保大模型能有效进行内容总结，提示词中使用 ${} 语法动态引用插件获取的网页数据（如标题、描述、正文等）。在实际发送 API 请求时，这些变量会被替换为真实的网页内容。 3. Code block Plain Text 请分析以下网页内容，生成一个结构化的分享卡片数据： 网页标题：${title} 网页链接：${url} 时间信息： 文章发布日期：${content.meta.publishDate || '未知'} 当前日期：${new Date().toISOString().split('T')[0]} 元数据信息： 作者：${content.meta.author || '未知'} 描述：${content.meta.description || ''} 关键词：${content.meta.keywords || ''} Open Graph 信息： ${JSON.stringify(content.openGraph, null, 2)} 网页正文内容： ${content.text.slice(0, 15000)} // 【此注释非提示词内容，仅用于解释 15000 的原因】网页总结类任务，一般获取正文的前 15000 字，这个长度既能保证主要内容的完整性，又不会超出模型处理范围 注意：不要直接号召用户做利益相关的决策 请step by step的思考，使用与原网页内容一致的语种，严格按照以下 JSON 格式返回数据： { "DATE": "YYYY MM DD", // 优先使用文章发布日期，如果无法获取则使用当前日期 "TITLE": "文章标题", // 原网页主标题 "AUTHORS": "名称1, 名称2", // 提取作者 or 公司名称，多个作者用逗号分隔; 若未识别到作者 or 公司名称，则返回网站顶级域名 "SUMMARY": "内容摘要", // 140字以内，网页内容概述，说明"这个网页是关于什么的"，突出核心内容和用途，避免营销宣传语 "POINTS": [ // 理解整体内容意图，输出3 5个关键要点，必须聚焦文章的关键论点、数据、结论、利益相关信息，应独立且互补，简洁清晰准确，按重要性排序 "要点1", "要点2", "要点3" ], "QR TITLE": "扫码阅读全文", // 必须使用与原网页内容一致的语种 "QR SUBTITLE": "引导扫码阅读的文案", // 根据文章内容生成的吸引人的一句话引导文案，不超过 15 字 "PLATFORM": "文章发布平台", // 提取或识别文章发布平台 "QR URL": "${url}" // 原文链接 } 1. 最后，根据文本总结类任务的通常经验与实际调试情况，设定其他 API 所需关键参数： 2. 如果你缺少参数设定的经验，也可以先询问 AI 文本总结类的模型 API 请求，temperature 设定多少合适 ，再逐步调试效果即可。 3. Code block Plain Text MODEL: "glm 4 flash", temperature: 0.6 附： 以下是 Claude AI 对 AI Share Card 插件的大模型 API 请求与提示词的设计架构解释，希望能对你有所帮助。 附：开发时，如何确定需要插件获取哪些网页元素？ 你可以拿着初版提示词，询问 AI ： 我希望通过浏览器插件，获取提示词中所需的标签页标题、链接、内容元素，请你帮我设计获取相关元素的 js 代码 参考对话如下，也可以直接在 Cursor、Windsurf 里提示 AI 帮你完成开发 2）如何选择适合的 AI 大模型 API 服务？🔌 纯靠词生卡 Prompt 完成卡片样式输出，固然是非常灵活的 AI 智能体方案。 但倘若在最终落地产品中，还是每次都依赖大模型重新生成卡片的样式代码，反而会消耗大量的输出 token，耗时且不经济。 此外，在实际使用中，用户通常只固定使用一到两个常用模板，对自定义样式的需求并不频繁。 所以在开发 AI Share Card 插件的过程中，我选择 将模板生成功能设计为固定的代码组件，而让大模型专注于内容总结的功能 。 如果用户需要选择其他模板，则通过增加更多模板选项 or 自定义模板代码功能实现。 如此一来，对 AI 大模型的要求就不会动辄需要像 Claude 3.5 sonnet 那样高不可攀的顶级模型。 处理纯文本总结任务，仅需 13B 或更小参数的模型，加上精调的提示词，就能产生很好的结果。 一旦明确模型的任务，AI API 服务的选型要求就清晰了： 1. 较长的上下文窗口： 内容总结类任务需要较大的上下文长度； 2. 响应速度要快、并发支持要高： 以便在多人使用插件时，保持良好的性能表现； 3. 免费或尽量低价： 减少模型 token 费用。 经过简单调研后，AI Share Card 选用的是 GLM 4 flash （没恰饭。截至 2024 12，长达 128k 的上下文窗口，完全免费的调用价格，200 RPM 高并发支持，还要什么自行车 🚲 ～） 3）面向大模型 API ，如何构建生产级提示词？💬 与大模型对话产品的提示词不同。 对于大模型 API，我们需要利用插件预先获取的网页内容变量、提示词和 API 请求参数，拼搭出完整的 API 提示请求，精确引导 API 返回我们想要的生成结果。 根据 BigModel 官网给出的请求示例，可以看到需要在请求中传递 Model类型、系统提示词、用户提示词、top p、temperature 等关键参数。 因此，可以构建相应的 API 请求内容如下： 1. 设定系统提示词 ，定义基础任务： 2. 1. 设定用户提示词 ， 提供具体任务数据，并要求大模型按 JSON 格式返回生成结果 ： 2. 注：为确保大模型能有效进行内容总结，提示词中使用 ${} 语法动态引用插件获取的网页数据（如标题、描述、正文等）。在实际发送 API 请求时，这些变量会被替换为真实的网页内容。 3. 1. 最后，根据文本总结类任务的通常经验与实际调试情况，设定其他 API 所需关键参数： 2. 如果你缺少参数设定的经验，也可以先询问 AI 文本总结类的模型 API 请求，temperature 设定多少合适 ，再逐步调试效果即可。 3. 附： 以下是 Claude AI 对 AI Share Card 插件的大模型 API 请求与提示词的设计架构解释，希望能对你有所帮助。 🧸 欢迎聊聊 AI Share Card 是我折腾的一个 AI 小工具，未来也将定期更新一些有意思的新功能、提示词能力。 欢迎随时加我好友（ 备注“AI 卡片” ），加入用户群，分享你的使用体验，期待和你一起探讨更多可能性。 希望这款小工具能给你带来帮助，best wishes～ 以上，既然看到这里，如果觉得不错，不妨随手点个赞、在看、转发三连，这将对我有很大的帮助。 谢谢你的阅读🌟 点击 下方账号 👇 关注更多精彩内容分享 👇 🔗 原文链接： https://mp.weixin.qq.com/s/6SiirseA... https://mp.weixin.qq.com/s/6SiirseA... ⏰原创 一泽Eze 一泽Eze 2024年12月02日 15:05 浙江 本文将分为上下两篇，本篇重点介绍工具的使用效果；下篇将解析原版提示词细节。 欢迎关注，及时获取更新内容！ 最近用 Cursor 开发了一个好用的 AI 浏览器插件： AI Share Card 。 很多喜欢分享专业内容的朋友，经常会遇到一个烦恼： 分享网页链接时，为了让读者知道推荐理由，不得不充当“人工总结器”，再附上超链接，但： 1. 纯文本超链接的分享，在朋友圈或社交平台中看起来不够高级； 2. 在一些管控严格的平台中（如公众号），链接跳转功能也被重点限制。这无疑降低了内容分享的效率和吸引力。 而 AI Share Card，就想帮你解决这个问题。 🔥 先看效果：绝赞！万千网页一键分享 AI Share Card 能够 一键解析各类网页内容，生成推荐文案，把分享链接转换为精美的二维码分享卡 ，让你的网页链接分享看起来更高级。 效果图如下： 图文创作类： 💡 微信文章，一键生成朋友圈分享图，专业优雅 🧠 飞书文档，一键分享宝藏知识库 视频类： 🎞️ 一键安利热门视频、年度剧集 个人 IP 运营： 💎 个人付费专栏、说明书、博客 以及电商详情页、产品官网等等～ 网页兼容效果超强， 只要能在浏览器打开的，大多都不在话下 😎 🤖 AI 驱动能力 🎯 核心特点 智能提取网页核心内容自动生成内容摘要智能识别关键要点 简约现代的设计风格一键生成分享卡片内置二维码方便访问 🤖 AI 驱动能力 🤖 AI 驱动能力 🎯 核心特点 🎯 核心特点 智能提取网页核心内容自动生成内容摘要智能识别关键要点 智能提取网页核心内容自动生成内容摘要智能识别关键要点 简约现代的设计风格一键生成分享卡片内置二维码方便访问 简约现代的设计风格一键生成分享卡片内置二维码方便访问 特别适合： • 图文内容、专栏转发与推广 • 哔哩哔哩、腾讯视频等剧集分享 • 产品官网推广 • 淘宝、京东商品分享…… 🔍 如何使用 ？ 1. 在 Chrome、Edge 等浏览器中 安装插件 👉 下载地址： https://aicard.eze.is 2. 固定插件到浏览器工具栏，方便后续使用 1. 在想分享的网页中，点击 插件 → 生成 AI 卡片 1. 复制 或 下载 图片，即可轻松分享 🥰 ！ 💡 小技巧：在微信电脑版【点开图片】后【右键图片 识别图中二维码】就可以访问链接哦～ 💎 立即安装 非常欢迎你来试试这个小工具，根据不同的网络情况，我准备了两种安装方法： 👉 访问官网 https://aicard.eze.is ，即可开箱即用～ 1） Chrome 应用商店安装 • 也可以 Chrome 应用商店直接搜索 AI Share Card • 需要正确网络环境访问，安装后支持自动更新 • 如果好用，感谢在 Chrome 商店 中给出🌟🌟🌟🌟🌟好评！🥰 2） 下载最新安装包 • 访问官网下载最新安装包 • 适用于无法访问应用商店的用户 • 本地安装指南详见《 AI Share Card 插件本地安装指南》 本文将 开源这款 AI 产品的提示词设计与产品化过程 。通过分享实战经验，希望为有意开发 AI 工具的开发者提供参考。 ➡️ 如果觉得有用，还请 关注、点赞、转发 ，多谢啦～ 🏃➡️ 初版提示词：纯 Prompt 快速验证效果 插件的 idea 其实来自早先挖的一个坑，在词生卡刚火那阵子，就想更进一步的发挥大模型对话产品的能力，做一个真正的提示词智能体。 目标是实现输入任意文章链接后，AI 自动生成适合微信分享的文章推荐卡片。 为了达到这一效果，大模型对话产品需要完成以下关键步骤： 1. 网页爬取 ：自行访问链接，解析网页内容 2. 内容总结 ：根据提示词要求，提炼标题、摘要、要点等信息 3. 二维码生成 ：利用 qrcode.js 库，将 URL 转换为二维码图片 4. 卡片样式生成 ：基于特定模板设计要求（暂不考虑自适应样式主题），将卡片内容、二维码组合为精美的分享卡片 理论上来说，这类词生卡任务正是大模型对话产品的天然“舒适区”。 所以直接编写 「网页分享卡片生成」词生卡 Prompt 如下： 值得一提的是，通过实践探索，我发现了新的词生卡 Prompt 组织方法： 把 设计要求拆分为“设计规范”和“内容结构”，再细分为“布局与尺寸”、“字体规范”、“颜色规范”的独立模块 ，并结合“内容结构”进行要求提示。 这种提示词组织方式有 3 个显著优势： 1. 模型通用性 ： 采用纯 Markdown 格式编写，不依赖特定模型的特性，可以适配不同的大语言模型 2. 提示简易性： 提示词结构清晰易读，便于自然语言编写，降低使用门槛。 3. 生成稳定性 ： 通过清晰的模块划分和自然语言描述，避免了指令间的相互干扰，提高了 AI 生成样式代码的准确性和一致性 如果你还不了解如何从 0 1 编写词生卡 Prompt，请务必阅读前作 《我的 Prompt 爆火全网｜ AI 一键生成高颜值社交名片全解析》 ，这应该是全网最细致的词生卡 Prompt 教程了。 《我的 Prompt 爆火全网｜ AI 一键生成高颜值社交名片全解析》 在后续的测试中，无论是 Claude 3.5 sonnet，还是国内的通义千问 2.5 ，这套提示词始终保持了更高的成功率，都能给出稳定的预期效果。 🚀 AI 能力产品化：明确技术方案，封装 API 调用提示词 在成功验证了纯提示词方案后，接下来就是产品化开发阶段。 虽然代码编程不是我的强项，但配合 Cursor、Windsurf 这类 AI 编程工具，插件的实现效果相当不错。 所以，我想试着 分享一些关键过程，尤其是提示词封装环节 ，希望对有意开发 AI 产品的朋友有所启发。 与提示词智能体不同，产品化开发需要考虑更多： 1. 如何 稳定的获取网页内容 ？ 2. 如何 选择适合的 AI 大模型 API 服务 ？ 3. 面向大模型 API ，如何 构建生产级提示词 ？ 1）如何稳定的获取网页内容？💻 在上述初版提示词实验中，获取网页内容极大依赖于大模型对话产品的外链解析能力。 然而，这种方式非常容易遭到平台反爬机制的制裁。 在实验过程中，最影响提示词方案效果的因素，不是大模型的生成质量，而是无法稳定地捕获网页内容。 转换思路来看，网页内容通常以明文形式展示在用户浏览器中，内容平台不可能对用户设备进行反爬制裁。 通过用户浏览器，以浏览器插件形式本地提取网页内容 ，正是一种稳定、经济的解决方案。 以下是 AI Share Card 插件所获取的网页元素清单：