快速上手：把 AI 资讯做成每日简报图（OpenClaw + Chrome 扩展 + 飞书）⚙️

导语

想要每天中午收到一张精美的 AI 行业简报图？咱们用 OpenClaw 抓浏览器页面，用 LLM（比如 Gemini）生成 HTML 模板，再用 Playwright 把 HTML 转成图片，最后推送到飞书。操作简单，10 分钟能跑通。下面直接上可执行的步骤和代码片段。

准备工作（你需要的东西）

已安装 OpenClaw（本地运行）。
Chrome 或 Chromium 浏览器。
Python（带 pip）。
飞书机器人的 Incoming Webhook（用于推送图片）。
一个能生成 HTML 的大模型（比如 Gemini）。

如果你还没装 OpenClaw，先按它的安装说明走。下面从插件开始讲起。

1) 安装并启用 OpenClaw 的 Chrome 扩展

这步让 OpenClaw 能远程控制浏览器，模拟打开目标页面抓内容。

用管理员权限打开终端（Windows 用 PowerShell，macOS 用 Terminal）。
安装扩展到本地：

openclaw browser extension install

查看已安装路径（方便定位失败时排查）：

openclaw browser extension path

打开浏览器扩展页，启用开发者模式：

在地址栏输入 chrome://extensions ，启用“开发者模式”，把 OpenClaw 扩展打开为 ON。

本地中继地址（默认）:

http://127.0.0.1:18792

扩展通过这个环回 CDP 与 OpenClaw 通信。你只需把要抓的页面在浏览器里打开，扩展会“模拟你在浏览器里操作”——不会要求或读取你的账号密码。

2) 快速生成一个 HTML 模板（用 Gemini 或其他 LLM）

你可以用模型直接生成完整的 HTML 页面。下面给一个可直接复用的 Prompt，粘给 Gemini 就可以。模板风格是卡片式，适合截图成图片后在飞书展示。

示例 Prompt（给模型用）：

请生成一份完整的 HTML 文档，标题为 "AI 每日简报"，包含三个板块：热门新闻（6条）、热门趋势（6条）、教程与技能（4条）。每条信息控制在 2-3 行。样式使用卡片式布局，白色卡片，圆角，阴影，页面整体居中，字体清爽。输出必须是可直接保存为 .html 的完整文件，不需要解释文字。

模型会给你一个完整的 HTML 文件。把文件保存为 daily_brief.html。

下面是一个极简示例片段（演示样式，实际用模型生成的完整文件）：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>AI 每日简报</title>
  <style>
    body{font-family:Segoe UI,system-ui,Helvetica,Arial;background:#f5f7fb;margin:0;padding:24px}
    .wrap{max-width:800px;margin:0 auto;background:#fff;padding:20px;border-radius:10px;box-shadow:0 6px 18px rgba(0,0,0,.08)}
    .header{border-bottom:3px solid #1e88e5;padding-bottom:10px}
    .card{background:#f8fafc;padding:12px;border-radius:8px;margin:12px 0}
    .title{color:#1e88e5}
  </style>
</head>
<body>
  <div class="wrap">
    <div class="header">
      <h1>AI 每日简报</h1>
      <div>2026-02-03 • 生成时间：14:24</div>
    </div>
    <h2 class="title">热门新闻</h2>
    <div class="card"><strong>新闻标题</strong><div>简短摘要，2行内，突出关键点。</div></div>
    <!-- 更多内容 -->
  </div>
</body>
</html>

把模型输出的 HTML 保存为 daily_brief.html。

3) 把 HTML 转成图片（用 Playwright）🖼️

用 Playwright 截图最稳。下面是一个完整的 Python 脚本，打开本地 HTML，截取整页并保存为 PNG。

先安装：

pip install playwright
playwright install chromium

Python 脚本（save_as_image.py）：

from playwright.sync_api import sync_playwright
from pathlib import Path

html_file = Path('daily_brief.html').absolute().as_uri()
output = 'daily_brief.png'

with sync_playwright() as p:
    browser = p.chromium.launch()
    page = browser.new_page(viewport={'width': 1200, 'height': 1600})
    page.goto(html_file)
    # 等一点，确保所有字体、图片加载完
    page.wait_for_timeout(800)
    page.screenshot(path=output, full_page=True)
    browser.close()

print('Saved', output)

运行：

python save_as_image.py

如果页面高度不够，调整 viewport 或者 full_page=True 即可。截图出来就是可直接发给同事的图片。

4) 把它打包成 OpenClaw 的 Skill（可选，但推荐）

把“生成 HTML → 截图 → 推送”写成一个脚本，注册为 Skill，可以被 OpenClaw 调度。下面给一个简易的 Skill 描述示例（JSON/YAML 思路），方便你直接修改并导入：

示例 Skill JSON（伪代码，仅示意）：

{
  "name": "ai_daily_brief",
  "schedule": "0 9 * * *",
  "steps": [
    {"run": "python fetch_and_build_html.py"},
    {"run": "python save_as_image.py"},
    {"run": "python push_to_feishu.py"}
  ]
}

fetch_and_build_html.py 的工作是：调用 OpenClaw 浏览器中继抓页面，或直接调用 Brave Search，然后把结果填入 HTML 模板并保存为 daily_brief.html。

如果你想用 OpenClaw 的浏览器控制功能抓取页面：在脚本里通过 OpenClaw CLI 或 API 调用相关技能，把抓到的文本送给 LLM 生成 HTML。

5) 把图片推到飞书（最直接的办法：Webhook）

先在飞书创建“自定义机器人”，拿到 Incoming Webhook 地址。下面是一个简单的推图脚本（push_to_feishu.py）：

import requests

WEBHOOK = 'https://open.feishu.cn/open-apis/bot/v2/hook/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx'
file_path = 'daily_brief.png'

with open(file_path, 'rb') as f:
    files = {'image': f}
    # 飞书没有直接的图片上传并发送的单步 webhook，这里示意：
    # 实际可先上传图片到飞书媒体库，再发送消息，或使用群自定义机器人支持的图片外链。
    # 下面示例发送一条文本消息（占位）
    payload = {
        "msg_type": "text",
        "content": {"text": "今日 AI 简报已生成，见图片附件。"}
    }
    requests.post(WEBHOOK, json=payload)

print('推送完成')

说明：不同的飞书企业/群有不同权限。最稳的方式是先用飞书开放平台的媒体上传接口，把图片上传获取 media_id，然后再用消息接口发送。你也可以把图片放到一个内部可访问的 URL，然后 webhook 发送带外链的富文本消息。

6) 定时执行：两个可选方案

选项 A — 用系统 cron（Linux/macOS）或任务计划（Windows）。简单可靠。比如每天 9 点运行 Skill 脚本：

0 9 * * * /usr/bin/python /path/to/run_all_steps.py

选项 B — 用 OpenClaw 的技能调度（如果你已经在用 OpenClaw 的 scheduler），把上面那个 Skill JSON 导入，配置好 schedule 字段即可。

示例：从浏览器抓新闻填入模板（思路）

用 OpenClaw Browser Relay 打开目标页面（比如 X、Brave Search 返回的结果页）。
抓取标题、摘要、链接。3) 把抓到的条目传给 LLM，按模板生成 HTML。

伪代码：

# 步骤示意（真实调用请参阅 OpenClaw 文档）
results = openclaw.browser_search('AI 关键新闻')
selected = select_top_n(results, 6)
html = call_model_generate_html(selected)
with open('daily_brief.html','w',encoding='utf-8') as f:
    f.write(html)

避坑清单 ❗

扩展没开成 ON：记得在 chrome://extensions 里把 OpenClaw 扩展设为启用。
本地中继端口被占用：默认 18792，冲突时改端口或关掉占用程序。
Playwright 截图空白：确认 HTML 的相对资源（字体、图片）能在无网络环境下加载，或把资源内联到 HTML。
飞书推送失败：检查 Webhook 权限，企业安全策略可能限制机器人外链或媒体上传。
LLM 生成的 HTML 样式跑版：给模型明确的 CSS 样式要求，或把样式写死在模板里再用模型填内容。
字体显示不对：截图环境里没有字体会回退，必要时在 Chromium 环境里安装你想要的字体。

小技巧（让体验更顺滑）

把 HTML 模板做成可填充的占位符模板（{{title}}/{{items}}），LLM 只负责生成内容段，减少样式跑偏风险。
截图前让页面滚动到底并等待一小会儿，确保异步加载完成。
本地开发时把脚本都放一个目录，用一个 run_all_steps.py 串联，调试更方便。

结束语

这套流程可以把每天的 AI 热点变成一张图，直接在飞书群里播报。对你来说，好处是省心：不用手工截网页、排版、发消息。碰到具体报错把日志贴出来，我帮你定位。🙂

如果你想，我可以把示例 Skill JSON、抓取脚本和完整的 Playwright 截图脚本打包成一个 Git 仓库给你。

10分钟上手：用 OpenClaw + Chrome 扩展做 AI 每日简报（含 Skills、HTML→图片、飞书推送）