站点主视觉缩略图

Thumbnail

将一个网站、本地 Web 项目或单篇文章转化成一个完成的高分辨率缩略图，使其看起来像是该站点的原生内容。图像使用 HTML/CSS 从站点自身的素材中组合而成，并渲染为 PNG 和无损 WebP。

原则

• 灵感源自站点。 每个缩略图都是一次全新的构图，由站点的标志性元素构成：其英雄视觉、组件、图像、图案、排版和颜色。在九种构图中，设备框架内的截图仅为其中一种，且绝非默认选项。
• 仅使用真实素材。 使用站点真实的 Logo、图像、文本、数字、颜色和字体。绝不虚构功能、价格、统计数据或声明。
• 每次运行交付一个成果。 全自动运行。此技能可能提出的唯一问题是 输入→语言 中的语言问题。

沟通

• 静默工作。 不要叙述步骤、发现、设计理由、重试或修复。分析内容保留在工具调用和 brief.md 中。保持工具调用描述简短且中立。
• 仅当需要时发言：语言问题、用户必须操作的阻塞问题（站点不可达、项目无法运行）以及最终交付。
• 会话语言。 每条面向用户的消息（问题、选项、错误、最终回复）均使用用户当前使用的语言编写，无论缩略图本身的语言是什么。
• 最终回复。 展示图像，然后提供 PNG 和 WebP 路径，以及两到四行简短内容：构图、格式、句子、类别，以及 Logo、颜色和字体的来源。最后一行提供修改建议，另一行建议其他格式（参见 references/formats.md）。不要总结过程。

设置

路径相对于此技能的目录（包含此文件的文件夹）。将 SKILL_DIR 定义为此文件夹，并将 S=$SKILL_DIR/scripts。

脚本	用途
`inspect.mjs <url	file>`
`extract.mjs <url	file> --out `
`extract.mjs <url	file> --out --selector "" --name [--transparent]`
`screenshot.mjs <url	file> --out <file.png> [--width --height --scale --wait]`
render.mjs <file.html> [--out <file.png>]	以 2x 分辨率渲染构图，输出 PNG 和无损 WebP。从页面读取画布大小，并报告已加载字体、失败字体、损坏图像和溢出文本。
history.mjs / history.mjs add <site> "<composition>"	显示或记录最近使用的构图。

这些脚本没有 npm 依赖。如果未找到浏览器，请设置 CHROME_PATH。在 macOS 上，head 可能被 Perl 工具遮蔽；使用 cat、sed -n 或 python3 读取文件。

输入

在设计前解决以下四个输入。

目标

• URL 模式： 请求包含 URL 或域名。输出文件夹：当前工作目录下的 ./thumbnail-<domain>/。将请求中其他词语视为备注，例如语言、格式、构图或风格偏好。
• 项目模式： 无 URL。目标为当前项目。输出文件夹：项目根目录下的 ./thumbnail/。

将运行期间的所有文件保留在输出文件夹内。

页面类型（URL 模式）

首先运行 inspect.mjs 并读取 page.type：

• site： 缩略图是关于整个网站的。
• article： URL 是一篇单一文章、博客帖子、指南或新闻项。缩略图是关于文章的主题，并使用站点的身份进行样式设计。使用输出文件夹 ./thumbnail-<domain>-<slug>/，其中 slug 为最后路径段，缩短至约 40 个字符。

检测使用 og:type、JSON-LD（Article、BlogPosting、NewsArticle……）、发布日期、<article> 元素、博客风格 URL 路径以及文本长度。用户的备注可覆盖此设置：“关于站点”表示站点，“关于文章”或“关于主题”表示文章，适用于任何语言。

语言

从 lang 和 dir、标题和 UI 文案确定内容语言。在项目模式下，同时检查 <html lang> 和区域设置文件夹，例如 locales/<code> 或 messages/<code>.json。

1. 如果用户的备注指定了语言，则使用该语言。
2. 如果站点只有一种语言，则使用该语言。阿拉伯语、波斯语、乌尔都语和希伯来语为从右向左布局。
3. 如果站点完全支持两种或更多语言，询问用户使用哪一种。使用代理的提问工具（如果有），否则在聊天中询问并等待。推荐站点的默认区域设置。
4. 如果语言不明确，使用阿拉伯语。

句子、类别和任何额外文本均使用所选语言编写。

格式

• 默认： 站点使用作品集缩略图（1080 × 720）；文章使用 Open Graph（1200 × 630）。
• 按需： 如果用户指定了平台、位置、宽高比或确切尺寸，使用 $SKILL_DIR/references/formats.md 进行解析。该文件还提供输出文件名、垂直格式的安全区域和布局指南。
• 每种格式均以 2x 分辨率渲染，并导出为 PNG 和无损 WebP。

工作流程

在少量回合内工作。 每个回合会重新读取整个对话，因此回合数对成本的驱动远超过单个文件。将独立命令合并到一个 Shell 调用中，在同一回合内并行读取独立文件，并且绝不重新读取已经看过的文件或图像。

1. 确保目标可访问

• URL 模式： 直接使用 URL。
• 静态项目（包含 index.html 且无构建步骤）：使用文件路径。如果资产使用根绝对路径，在后台运行服务器（例如 python3 -m http.server 4173）并使用 http://localhost:4173。
• 框架项目（包含 dev、start 或 preview 脚本的 package.json）：如果缺少 node_modules，使用与锁定文件匹配的包管理器安装依赖。在后台启动开发服务器，从输出中读取端口，并等待 curl -s -o /dev/null -w "%{http_code}" <url> 响应。提取完成后停止服务器。
• 无法运行： 使用 package.json（homepage）或 README 中的已部署 URL。如果也没有，从项目自身的资产（图像、组件、样式）构建，并告知用户。

2. 检查、提取和检查历史（一条命令）

在单个 Shell 调用中运行所有三个：

mkdir -p <out> && node $S/inspect.mjs <url> > <out>/inspect.json && node $S/extract.mjs <url> --out <out>/extract && node $S/history.mjs

如果 inspect.json 显示页面是文章，则在下一个 Shell 调用中将文件夹重命名为 ./thumbnail-<domain>-<slug>/。

3. 理解内容并研究身份（一个回合）

在同一回合中，读取 inspect.json 的关键字段（使用简短脚本打印而非整个文件），并查看 extract/overview.png。概览是每个捕获（英雄、部分、元素、图像）的联系表，每个都标有文件名。

内容

• 站点： 它是什么，为谁服务，提供什么，以及什么让它显得独特？使用 inspect.json、extract.json，以及在项目模式下，使用 README、package.json、着陆页和英雄组件、区域文件、元标签、清单和样式。
• 文章： 文章是关于什么的，读者能从中得到什么？使用 page.article（标题、描述、部分、标签、作者、日期、阅读时间、子标题、封面图像、文章内图像、代码块）和文章文本。
• 如果页面文本很少（客户端渲染页面或机器人墙），以其他方式获取，例如使用网页抓取工具或 curl。

身份：从概览（以及文章的封面图像）中，注意：

• 情绪和风格： 摄影、3D、扁平插图、奢华、趣味、技术、社论、极简……
• 标志性元素： 人们识别该站点的两到四个事物，例如英雄图像或对象、独特的卡片或产品图块、图案、代码示例、图标集、渐变、排版处理。
• 令牌： 颜色、页面背景、按钮颜色、圆角、阴影、渐变、标题样式以及徽章或按钮样式。

4. 选择构图

如果用户明确要求某种构图，则使用它。 这适用于用户命名一种构图（例如“Component Collage”）或清晰描述其想法，使用任何语言（例如“该站点卡片的拼贴”或“其功能的网格”）。即使该构图最近被使用过，也使用该构图，并跳过历史检查。用户的其他备注仍然适用。

否则，自行选择：

1. 使用步骤 2 中打印的历史。
2. 读取 $SKILL_DIR/references/compositions.md 并选择最能表达该站点标志性元素的构图。
3. 除非其他构图都不合适，否则避免使用最近两次运行中使用的构图。
4. 写入 <out>/brief.md。保持简短：身份关键字、标志性元素以及将要使用的文件、所选构图及其原因、一行布局草图。

5. 以全尺寸打开所选资产（一个回合）

概览用于选择，而非细节。一旦知道设计将使用哪两到四个资产（以及 Logo），并行地在同一回合中以全分辨率打开它们，以检查小文本、精细图案和清晰度。如果所需的某个部分未被检测到，在同一回合中使用 extract.mjs --selector 捕获它。

6. 编写内容

句子

• 站点： 站点提供什么以及为何重要。阿拉伯语使用 5-10 个词，英语或其他语言使用 6-12 个词。编写自然的营销文案，末尾不加句号，且不重复站点名称。
• 文章： 文章的核心思想，可以是收紧后的标题或忠实的一行摘要。阿拉伯语使用 5-12 个词，其他语言使用 6-14 个词。不添加文章中没有的内容。
• 必须能容纳在三行内。可以使用站点的强调色或标题处理来突出显示一到三个关键词。

类别

• 使用缩略图语言的两到三个词。
• 站点： 产品类型，例如在线商店、在线学习平台、公司网站、SaaS 仪表板、预订平台或作品集。
• 文章： 文章的部分或主题，例如指南、案例研究、教程或主题本身。

文章额外内容（可选）

• 作者、日期和阅读时间，以小字号设置。仅使用页面中的真实值。

Logo

• 始终使用真实的 Logo，并在使用前查看它。
  • 项目： 在 public/、static/、assets/、src/assets/ 和 app/ 中查找 logo*.{svg,png,webp}、icon*.svg、favicon.svg、apple-touch-icon.png 和 icon-512*.png，以及清单图标和内联 Logo 组件。
  • URL： 使用 inspect.json：logoSvgs（内联 SVG）、logoBackgrounds（作为 CSS 背景绘制的 Logo，通常是现成的 SVG）、logoImgs 和 icons。优先使用矢量或透明 Logo；仅作为最后手段从 extract/elements/*-header.png 中裁剪，因为裁剪会携带页面背景。将文件保存到输出文件夹。
• 使用 currentColor 或 CSS 变量的内联 SVG 需要真实的填充颜色。不要为 Logo 添加框或背景，除非为了对比度需要：浅色 Logo 放在深色区域，深色 Logo 放在浅色区域。
• 对于文章，Logo 是一个小签名，而非英雄。
• 如果没有 Logo，使用一个表达该想法的 Lucide 图标（https://cdn.jsdelivr.net/npm/[email protected]/icons/<name>.svg），并使用品牌颜色进行样式设计。绝不绘制伪造的 Logo。

7. 字体

• 来源： extract/fonts.css（站点自身的 @font-face 规则，附带已下载的字体文件）和 extract.json（fonts.google）。在项目模式下，同时检查 next/font、@font-face 规则、Google Fonts 导入、Tailwind 的 fontFamily 设置以及 public/fonts 中的字体文件。
• 加载： 在画布的 Noto Sans 链接之后立即添加 <link>，然后设置 --font: "<Site Font>", "Noto Sans Arabic", "Noto Sans", sans-serif。
• 检查覆盖： 字体必须覆盖缩略图的脚本。仅包含拉丁字符的字体无法渲染阿拉伯文本，因此回退到 Noto Sans Arabic。如果展示字体只有一个字重，使用该字重；绝不伪造粗体。
• 回退： 如果字体未出现在 render.mjs 报告的 fonts 列表中，或出现在 failedFonts 中，使用 Noto Sans Arabic 或 Noto Sans。

8. 构建和渲染

1. 将 $SKILL_DIR/assets/canvas.html 复制到 <out>/<name>.html。名称默认为 thumbnail，其他格式为 thumbnail-<preset>。
2. 在第一个 :root 规则中设置画布大小为 --w 和 --h（默认 1080px × 720px）。为此形状进行布局设计，对于垂直格式，将文本保持安全区域内。
3. 使用纯 HTML 和 CSS 设计；欢迎使用内联 SVG。
   • 在 <style> 块末尾替换设计变量和 .canvas 背景规则，然后在其后添加自己的规则。
   • 将标记放在 <div class="canvas"> 内部，并保持结束的 <script> 不变。
   • 使用相对路径引用资产，例如 extract/images/…、extract/elements/… 和 logo.png。
4. 为渲染器标记文本：
   • 句子上的 data-fit="3" 会缩小文本直到适合三行。data-min 设置最小尺寸；不会低于格式的可读最小值。
   • 文本元素上的 data-text="<name>" 让渲染器报告溢出。
   • data-decor 用于不打算被阅读的文本（例如以字体设置的 Logo、巨大的背景词）。

渲染器运行时，所有应该渲染的资源（字体和图像）都已就绪。它会将画布放大 2 倍，然后通过 CSS 缩小，以获得精确的亚像素渲染。不要缩放容器或图像。

9. 审查和修复

检查生成的 PNG：

• 检查失败的字体（在渲染输出中报告）。如果关键字体失败，使用系统字体重新渲染。
• 如果文本溢出，缩小字体大小。
• 如果 Logo 损坏，尝试其他来源。

10. 记录到历史并交付

node $S/history.mjs add <site> "<composition>"

始终交付两种格式：PNG 和 WebP。将源 HTML 保留在输出文件夹中。

References

• $SKILL_DIR/references/compositions.md — 九种构图选择。
• $SKILL_DIR/references/formats.md — 所有平台格式、尺寸、文件名、安全区域和布局提示。
• $SKILL_DIR/references/examples.md — 成功缩略图的示例，附有注释。

Templates

$SKILL_DIR/templates/ 中包含 HTML 片段，用于常见组合，例如渐变叠加或卡片网格。