OG图片生成器是做什么的？

此技能使用的所有文件都存放在此SKILL.md旁边的独立文件夹中，且这里的路径均相对于该文件夹。它不需要其他技能或文件夹中的任何内容，因此无需去别处寻找。除非用户指定了其他位置，否则将其生成的所有内容保存在当前项目的 out/og-image/ 目录下。

分享卡片的作用是在用户滚动掠过链接的瞬间销售产品。其公式为：品牌标识 + 一行短标题 + 真实的底层产品界面，底部边缘裁剪。除此之外别无其他。

参考样式（见 references/ 目录）：

control-panel.png —— 品牌标识居中置于顶部，一行非常大的标题，应用窗口（侧边栏、头部、列表）从约三分之一高度处开始，底部溢出，右侧有一个浮动详情面板。
pulse.png —— 使用Pulse的真实布局构建的相同构图：带有项目图标的侧边栏、搜索头部、带有选项卡的项目页面、信息流行和活动轨道。

规则

真实产品，绝不虚构。 展示当前交付的应用。仅使用代码中存在的屏幕、选项卡、标签、状态和功能。不允许使用虚构的指标、图表或功能，即使着陆页文案提到了它们。如果网站上的营销演示展示了应用没有的功能，也不要复制该演示。
信息来源于当前网站。 除非用户指定了标题，否则从实时主页（其hero区域、其示例数据）获取宣传语和示例内容。如果用户提供了标题，请原样使用（陈述性标题末尾加句号是可以的；如果不确定，请询问）。
看起来像是真实的，而非生成的。 示例数据必须看起来像一个真实团队的一周：
- 真实的人名，如果项目自带头像图片（例如 public/landing/people），则使用这些图片；使用用户要求的名称。
- 实体应带有图标或图片，而不是纯文字（例如，项目头像作为彩色图标块，用产品主题强调色着色）。
- 活动网格、图表和计数遵循真实节奏：周一至周五繁忙且有变化，周末大部分为空偶尔有轻松的一天，当前周截止到今天，月份标签在实际月份开始处。绝不允许出现均匀或明显重复的模式。
- 使用应用自身格式的相对时间、ID、分支和状态。
文案优先。 标题是卡片上最大、最深色的元素，并且缩略图尺寸可读（1200px卡片上约为60-72px，单行，字距紧凑，使用产品的显示字体）。产品位于标题下方，永不重叠。
仅使用产品自身样式。 背景、字体、颜色、圆角、阴影均来自项目的设计令牌。标题后方可以有非常柔和的强调色光晕；不允许使用新的调色板、渐变或素材图。

步骤

1. 发现

读取主页/着陆页组件和README，获取产品名称、宣传语和示例内容。
找到真实的应用外壳（布局、侧边栏、头部）和主屏幕（路由和组件）。记录确切的类名、文本大小、选项卡标签、状态芯片色调以及必须避免的空/加载状态。
找到设计令牌（全局CSS/主题）、字体、图标库、品牌标识组件、头像资源。
检查已有的内容：现有的OG路由/图片、根或页面head中的og:image元标签、WEB_URL/站点URL配置。

2. 构建渲染路由

将卡片构建为项目技术栈中的一个真实页面，以便使用实际的字体、令牌和组件（而非手绘SVG，也非包含私有数据的截图）：

一个路由，例如 /og/<page>（TanStack使用 routes/og.<page>.tsx，Next使用 app/og/<page>/page.tsx 等），设置 noindex，不带应用外壳。
一个组件（例如，放置在其所属着陆页旁边的 og-image.tsx）渲染一个固定的 1200×630 框架，根元素带有 data-og-frame 属性和 overflow-hidden。
布局：
- 品牌标识居中，距顶部约48px。
- 标题在其下方居中。
- 应用窗口从距顶部约200-240px、距左侧约60px开始，宽度大于剩余空间，以便从右侧或底部边缘溢出。顶部圆角，细边框，使用产品的阴影。
在窗口内部，将真实屏幕重建为静态副本：外壳（侧边栏+头部）加主屏幕。从真实组件复制标记和类；在头部注释中引用源文件。仅使用静态属性，不进行查询，不设置定时器。
为了将全尺寸布局放入卡片，以自然宽度（例如1200px）布局窗口，然后使用 zoom（0.85-0.95）缩小。zoom 也会缩放同一元素上的 top/left，因此请将预期偏移量除以缩放因子。
当与真实应用匹配时，重用着陆页中现有的示例原语（头像、源徽章、热力图颜色）。

3. 捕获

启动开发服务器（或复用已有的），然后：

node <此技能文件夹>/scripts/capture.mjs \
  --url http://localhost:<port>/og/<page> \
  --out out/og-image/og-<page>.png

该脚本会打开一个1200×630视口（以2倍分辨率显示为 2400×1260），偏好减少动画，隐藏开发覆盖层（TanStack/Next/Vite/Astro开发工具、toaster），等待字体加载，然后截图 [data-og-frame] 元素。使用 --hide 参数隐藏其他任何覆盖层，使用 --wait 参数处理图像加载缓慢的情况。

注意事项：

端口冲突： 检查端口是否真的服务于当前应用（lsof -iTCP:<port> -sTCP:LISTEN，并查看页面标题）。另一个在 [::1]:<port> 上的本地应用可能会无声地响应 localhost。如有必要，选择一个空闲端口。
从Agent会话启动的后台开发服务器会随会话结束而终止。如果用户需要继续预览，请将其分离（nohup … & disown）。
不要使用宽泛的 :has() / body > div 规则隐藏覆盖层；这可能会隐藏应用根节点并导致捕获超时。

4. 查看效果

打开PNG图片，像设计师一样检查它：全尺寸查看，并想象它在500px宽的缩略图中的效果：

标题在一行内，无任何内容重叠，窗口上方有足够的空间。
没有开发工具徽章、光标、提示框、加载骨架或未播完的动画。
没有尴尬的裁剪（例如，标签在侧边缘被切断中间单词、芯片部分被隐藏）。底部/右侧溢出是预期的；窗口的左侧和顶部边缘完全可见。
数据看起来真实（规则3）。反复调整直到符合要求，然后将最终的PNG复制到 public/ 目录中。

5. 接入元标签

在图片所属页面的head中（或根页面用于全局卡片）：

og:type，og:title，og:description
og:image —— 绝对URL，基于站点URL配置构建（例如 ${WEB_URL}/og-<page>.png）
og:image:width 2400，og:image:height 1260，og:image:alt 描述标题以及产品截图显示的内容
twitter:card = summary_large_image，twitter:title，twitter:description，twitter:image

验证标签出现在提供的HTML中（curl -s <page> | grep og:image），并且PNG URL返回 200 image/png。

输出

告知用户：

PNG图片、渲染路由/组件的位置
如何重新生成：上面的捕获命令
图像显示的内容以及它复制了哪些真实屏幕/组件
任何非真实数据的内容（示例名称、项目），并且必须将站点URL环境变量指向生产域名，以便爬虫解析该图片

OG图片生成器