HTML/CSS to Image

面向 AI Agent 的 HTML/CSS 转图像 API

让 AI Agent 截取实时网站截图、渲染 HTML/CSS，并将可重复使用的模板生成为图像或 PDF——无需管理浏览器。

此仓库是一个可移植的 Agent 插件包，包含适用于托管 HCTI MCP 服务（地址为 https://mcp.hcti.io）的特定客户端清单。身份验证使用 HCTI 基于浏览器的 OAuth 流程；此仓库不存储 API 密钥或访问令牌。

仓库结构

路径	用途
plugin.json	可移植的 Agent Plugins 清单。
mcp.json	可移植的 MCP 配置。
.mcp.json	与 Claude Code、GitHub Copilot 和 Grok 兼容的 MCP 配置。
llms-install.md	面向 Agent 的安装指南，适用于 Cline 和其他 MCP 客户端。
.codex-plugin/plugin.json	原生 ChatGPT 和 Codex 插件清单。
.app.json	将此软件包映射到官方发布的 OpenAI 插件。
.claude-plugin/plugin.json	Claude Code 插件清单。
.cursor-plugin/plugin.json	Cursor Marketplace 清单。
.grok-plugin/plugin.json	Grok Build Marketplace 清单。
gemini-extension.json	Gemini CLI 扩展清单。
kimi.plugin.json	Kimi Code 插件清单。
skills/hcti-image-generation/	图像生成和模板工作流指南。
skills/hcti-open-graph-images/	动态 Open Graph 图像配置指南。
clawhub/html-css-to-image/	适用于 ClawHub 的独立 OAuth/MCP 渲染技能。
clawhub/hcti-open-graph-images/	适用于 ClawHub 的独立 OAuth/MCP Open Graph 技能。

ChatGPT 和 Codex

在 ChatGPT 或 Codex 的插件目录中安装官方 HTML/CSS to Image 插件。这是推荐的 OpenAI 集成方式，使用 HCTI 已注册的 MCP 连接，并通过浏览器进行 OAuth 身份验证。

原生 .codex-plugin/plugin.json 清单打包了共享的 HCTI 技能，而 .app.json 则将此软件包映射到已发布的 OpenAI 插件。

Kimi Code

在 Kimi Code 中直接从 GitHub 安装插件：

/plugins install https://github.com/htmlcsstoimage/agent-plugins
/reload

运行 /mcp-config login hcti，并在浏览器中完成授权。然后使用 /mcp 确认 HCTI 工具已连接。

若要测试本地检出版本，请使用 /plugins install /path/to/agent-plugins。Kimi 会将已安装的插件复制到其管理的插件目录中，因此更改本地源后需要重新安装。

Gemini CLI

直接从 GitHub 安装扩展：

gemini extensions install https://github.com/htmlcsstoimage/agent-plugins

重启 Gemini CLI，运行 /extensions list 确认扩展已启用，然后运行 /mcp auth hcti 并在浏览器中完成授权。使用 /mcp list 确认 HCTI 工具已连接。Gemini CLI 会自动发现随附的 HCTI Agent Skills。

若要在开发期间测试本地检出版本，请运行 gemini extensions link /path/to/agent-plugins，重启 Gemini CLI，然后使用 /extensions list 查看。

GitHub Copilot

安装本地检出版本

直接安装此仓库：

copilot plugin install /path/to/agent-plugins

启动 Copilot CLI，并使用 /plugin list、/skills list 和 /mcp 确认插件、技能和 HCTI 服务均可用。在 /mcp 中连接 hcti，并在浏览器中完成授权。

Cline

将仓库中的 llms-install.md 提供给 Cline，以配置托管的 HCTI 服务；或者将其手动添加为地址为 https://mcp.hcti.io 的远程 Streamable HTTP 服务。在浏览器中完成 OAuth 授权；无需 API 密钥或安装本地服务。

Claude Code

从 Claude 社区 Marketplace 安装

插件发布后，添加 Anthropic 的社区 Marketplace 并安装插件：

/plugin marketplace add anthropics/claude-plugins-community
/plugin install html-css-to-image@claude-community
/reload-plugins

运行 /mcp，选择 hcti，并在浏览器中完成授权。相关任务出现时，Claude 可以自动调用 HCTI 技能；也可以通过 /html-css-to-image:hcti-image-generation 使用该技能。

测试本地检出版本

直接验证并加载此代码库：

claude plugin validate . --strict
claude --plugin-dir .

在测试会话中，运行 /mcp 连接 hcti，然后尝试发起图像请求。更改清单、技能或 MCP 配置后，使用 /reload-plugins。

Cursor

从 Cursor Marketplace 安装

插件发布后，在 Cursor 中打开 自定义，搜索 HTML/CSS to Image API，选择 安装，然后选择所需的范围。

打开 Cursor 的 MCP 设置，找到 hcti，选择 连接，并在浏览器中完成授权。连接后，开始新的 Agent 聊天，以使用 HCTI 工具。

测试本地检出版本

将此代码库复制到 Cursor 的本地插件目录：

mkdir -p ~/.cursor/plugins/local
cp -R /path/to/agent-plugins ~/.cursor/plugins/local/html-css-to-image

重启 Cursor 或运行 Developer: Reload Window，然后确认 HTML/CSS to Image API 显示在 自定义 中。测试图像请求前，请在 Cursor 的 MCP 设置中连接 hcti MCP 服务。

如需进行另一轮测试，请用当前检出版本替换复制的 html-css-to-image 目录，然后重新加载 Cursor。

Grok Build

xAI 插件市场指向此代码库中的固定提交。其 Grok 清单复用根目录中的技能、MCP 端点和资源。

市场条目上线后，在 Grok Build 中安装 HTML/CSS to Image，按提示连接 hcti MCP 服务，并在浏览器中完成授权。

ClawHub / OpenClaw

ClawHub 技能支持 HTML/CSS 渲染、网站截图、PDF 输出，以及通过托管 MCP 服务渲染已保存的模板。用户通过基于浏览器的 OAuth 连接到 https://mcp.hcti.io；无需 API 密钥。渲染需要 HCTI 账户和可用额度。

独立的 Open Graph 技能可创建持久的动态社交预览配置，并将其图像 URL 集成到网站元数据中。该技能包含网页集成参考，并使用相同的 OAuth 连接。

这些独立发行版本位于 skills/ 目录之外，以免其他客户端发现重复技能。其设置说明会在 OpenClaw 中注册服务并完成 OAuth；仅安装技能并不会建立连接。发布时只发布技能文件夹，不要发布整个插件代码库。

在此代码库的根目录下，安装当前版本的 ClawHub CLI 后：

clawhub login
clawhub skill publish ./clawhub/html-css-to-image \
  --slug html-css-to-image \
  --name "HTML/CSS to Image" \
  --categories integrations,creative \
  --topics "screenshots,html,css,pdf,images" \
  --dry-run

单独预览 Open Graph 技能：

clawhub skill publish ./clawhub/hcti-open-graph-images \
  --slug hcti-open-graph-images \
  --name "HTML/CSS to Image — Dynamic Open Graph Images" \
  --categories integrations,development \
  --topics "open-graph,social-previews,seo,images,html" \
  --dry-run

检查每个预览后，运行相应的发布命令，并移除 --dry-run。若要发布到组织名下，请在两个命令中添加 --owner <your-clawhub-owner-handle>；否则，列表归已认证用户所有。发布与提交此代码库是两回事，新版本可能需要等待自动审核。

ClawHub 以 MIT-0 许可分发已发布的技能。首次发布前请先查看这些条款；托管的 HCTI 服务仍受其自身条款约束。请参阅 ClawHub 发布说明和技能格式。

包含的功能

核心渲染和模板工具如下：

工具	用途
create_image	将 HTML 和 CSS 渲染为图像或 PDF。
create_url_image	截取公开 URL 或选定的页面元素。
create_templated_image	使用变量值渲染已保存的 HCTI 模板。
create_batch_images	在一次请求中生成多个图像变体。
get_max_batch_size	查看账户当前的批次上限。
create_template	保存可重复使用的 HTML/CSS 模板。
update_template	更新现有模板。
list_templates	列出已授权账户中的模板。
list_template_versions	查看模板的版本历史记录。

使用 MCP 管理资源

除了生成图像，HCTI MCP 服务还可以管理已连接组织中的辅助资源：

资源	工具	用途
用量	check_usage	查看组织当前的图像用量和限额。
Open Graph 配置	create_og_config、update_og_config、get_og_config、list_og_configs、delete_og_config	管理网站页面的动态社交预览图像。
代理	create_proxy、update_proxy、get_proxy、list_proxies、delete_proxy	管理 HCTI 访问源网站时使用的代理。
存储目标	create_storage_destination、update_storage_destination、get_storage_destination、list_storage_destinations、delete_storage_destination、get_aws_storage_external_id	管理生成图像的外部目标，并获取 AWS 设置所需的外部 ID。

动态 Open Graph 图像配置 是特别实用的集成点。Agent 可以解析现有的 HCTI 模板，将页面元数据映射到模板变量，可选择配置好的代理或存储目标，并创建持久化配置以提供缓存的社交图像。

资源工具作用于 OAuth 授权期间选定的 HCTI 组织，可用工具取决于授予该连接的权限。列出和检索操作为只读；创建、更新和删除操作会更改账户。特别是，update_og_config 会替换完整配置，因此 Agent 应先检索当前配置，并在更新前保留未更改的设置。

示例请求

• “使用此标题和配色方案创建一张 1200×630 的 Open Graph 图像。”
• “截取 https://example.com/pricing 上的定价表。”
• “列出我的 HCTI 模板，并使用此标题渲染社交卡片模板。”
• “创建五种产品卡片变体，分别使用不同的强调色。”
• “使用我的社交卡片模板，为 https://example.com 创建动态 Open Graph 配置，并将页面元数据中的标题和描述映射到配置中。”

数据处理

通过插件发送的请求由托管的 HTML/CSS to Image 服务处理。提供给 HCTI 的 HTML、CSS、模板值、目标 URL、渲染选项和资源配置都会发送至该服务；持久化资源则存储在已连接的 HCTI 组织中。除非你有意配置经过授权的渲染工作流，且了解 HCTI 会处理这些数据，否则请勿提供 Cookie、授权标头、私有 URL 或其他机密信息。

许可和服务条款

本仓库中的插件文件采用 MIT 许可证。该许可证适用于本仓库的源代码、配置和文档；不适用于托管的 HTML/CSS to Image 服务。服务的使用另受使用条款和隐私政策约束。

验证

运行仓库检查：

node scripts/validate-template.mjs

使用 Claude Code 官方严格验证器验证 Claude 适配器：

claude plugin validate . --strict

已验证的兼容性

已使用 Claude Code 2.1.258 测试插件运行时、共享 HCTI 技能、MCP 发现功能和基于浏览器的 OAuth 流程。要严格验证目录列表元数据（例如 privacyPolicyUrl），请使用 Claude Code 2.1.281 或更高版本。

Grok 适配器通过 xAI 市场的目录和组件索引检查进行验证，检查基于固定提交执行。

HOL Registry

我们的 AI Agent 插件已在 HOL Plugin Registry 中注册，你可以在其中查看安装详情、安全发现、来源信息和当前信任评分。

文档与支持

• HTML/CSS to Image MCP 文档
• 官方 ChatGPT 和 Codex 插件
• OpenAI 插件打包文档
• Kimi Code 插件文档
• Gemini CLI 扩展文档
• GitHub Copilot 插件文档
• Cline MCP 安装说明
• Cursor 插件文档
• Cursor 插件参考
• Claude Code 插件文档
• Claude Code 插件参考
• 支持：[email protected]