重要前提
安装AI Skills的关键前提是:必须科学上网,且开启TUN模式,这一点至关重要,直接决定安装能否顺利完成,在此郑重提醒三遍:科学上网,科学上网,科学上网。查看完整安装教程 →
htmlcsstoimage by vm0-ai/vm0-skills
npx skills add https://github.com/vm0-ai/vm0-skills --skill htmlcsstoimage通过直接使用 curl 命令调用 HTMLCSStoImage API,以从 HTML/CSS 生成图像或捕获网页截图。
官方文档:
https://docs.htmlcsstoimage.com/
在以下情况下使用此技能:
export HCTI_USER_ID="your-user-id"
export HCTI_API_KEY="your-api-key"
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
该 API 使用 HTTP 基本身份验证:
以下所有示例均假设您已设置 HCTI_USER_ID 和 HCTI_API_KEY。
API 的基础 URL 是:
https://hcti.io/v1/image从基本 HTML 生成图像。
写入 /tmp/hcti_html.txt:
<div style="padding:20px;background:blue;color:white;font-size:24px;">Hello World</div>
然后运行:
curl -s "https://hcti.io/v1/image" -X POST -u "$(printenv HCTI_USER_ID):$(printenv HCTI_API_KEY)" --data-urlencode "html@/tmp/hcti_html.txt"
响应:
{
"url": "https://hcti.io/v1/image/abc123..."
}
返回的 URL 是永久性的,并通过 Cloudflare CDN 提供服务。
生成一个带样式的卡片图像。
写入 /tmp/hcti_html.txt:
<div class="card"><h1>Welcome</h1><p>This is a styled card</p></div>
写入 /tmp/hcti_css.txt:
.card { padding: 40px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 12px; color: white; font-family: sans-serif; text-align: center; } h1 { margin: 0 0 10px 0; } p { margin: 0; opacity: 0.9; }
然后运行:
curl -s "https://hcti.io/v1/image" -X POST -u "$(printenv HCTI_USER_ID):$(printenv HCTI_API_KEY)" --data-urlencode "html@/tmp/hcti_html.txt" --data-urlencode "css@/tmp/hcti_css.txt"
生成带有自定义字体的图像。
写入 /tmp/hcti_html.txt:
<div class="title">Beautiful Typography</div>
写入 /tmp/hcti_css.txt:
.title { font-family: Playfair Display; font-size: 48px; padding: 40px; background: #1a1a2e; color: #eee; }
然后运行:
curl -s "https://hcti.io/v1/image" -X POST -u "$(printenv HCTI_USER_ID):$(printenv HCTI_API_KEY)" --data-urlencode "html@/tmp/hcti_html.txt" --data-urlencode "css@/tmp/hcti_css.txt" -d "google_fonts=Playfair Display"
多个字体:google_fonts=Playfair Display|Roboto|Open Sans
捕获任何公开 URL 的截图:
写入 /tmp/hcti_url.txt:
https://example.com
然后运行:
curl -s "https://hcti.io/v1/image" -X POST -u "$(printenv HCTI_USER_ID):$(printenv HCTI_API_KEY)" --data-urlencode "url@/tmp/hcti_url.txt"
在捕获前等待 JavaScript 渲染完成:
写入 /tmp/hcti_url.txt:
https://example.com
然后运行:
curl -s "https://hcti.io/v1/image" -X POST -u "$(printenv HCTI_USER_ID):$(printenv HCTI_API_KEY)" --data-urlencode "url@/tmp/hcti_url.txt" -d "ms_delay=1500"
ms_delay 在截图前等待指定的毫秒数。
仅截取页面上特定元素的截图:
curl -s "https://hcti.io/v1/image" -X POST -u "$(printenv HCTI_USER_ID):$(printenv HCTI_API_KEY)" --data-urlencode "url@/tmp/hcti_url.txt" -d "selector=h1"
使用任何 CSS 选择器:#id、.class、div > p 等。
生成 2 倍或 3 倍分辨率的图像。
写入 /tmp/hcti_html.txt:
<div style="padding:20px;font-size:18px;">High Resolution Image</div>
然后运行:
curl -s "https://hcti.io/v1/image" -X POST -u "$(printenv HCTI_USER_ID):$(printenv HCTI_API_KEY)" --data-urlencode "html@/tmp/hcti_html.txt" -d "device_scale=2"
device_scale 接受 1-3 的值(默认值:1)。
设置特定的视口尺寸:
curl -s "https://hcti.io/v1/image" -X POST -u "$(printenv HCTI_USER_ID):$(printenv HCTI_API_KEY)" --data-urlencode "url@/tmp/hcti_url.txt" -d "viewport_width=1200" -d "viewport_height=630"
非常适合生成 OG 图像(1200x630)。
捕获整个页面的高度:
curl -s "https://hcti.io/v1/image" -X POST -u "$(printenv HCTI_USER_ID):$(printenv HCTI_API_KEY)" --data-urlencode "url@/tmp/hcti_url.txt" -d "full_screen=true"
自动隐藏同意/Cookie 弹窗:
curl -s "https://hcti.io/v1/image" -X POST -u "$(printenv HCTI_USER_ID):$(printenv HCTI_API_KEY)" --data-urlencode "url@/tmp/hcti_url.txt" -d "block_consent_banners=true"
在图像 URL 后添加 ?dl=1 以触发下载。
写入 /tmp/hcti_html.txt:
<div style="padding:20px;background:green;color:white;">Download Me</div>
然后运行:
curl -s "https://hcti.io/v1/image" -X POST -u "$(printenv HCTI_USER_ID):$(printenv HCTI_API_KEY)" --data-urlencode "html@/tmp/hcti_html.txt" | jq -r '.url'
这将输出图像 URL。复制该 URL 并使用以下命令下载:
curl -s "https://hcti.io/v1/image/<your-image-id>?dl=1" --output image.png
添加宽度/高度查询参数以调整大小。
写入 /tmp/hcti_html.txt:
<div style="padding:40px;background:purple;color:white;font-size:32px;">Resizable</div>
然后运行:
curl -s "https://hcti.io/v1/image" -X POST -u "$(printenv HCTI_USER_ID):$(printenv HCTI_API_KEY)" --data-urlencode "html@/tmp/hcti_html.txt" | jq -r '.url'
这将输出图像 URL。添加查询参数以调整大小:
原始:https://hcti.io/v1/image/<your-image-id>
缩略图:https://hcti.io/v1/image/<your-image-id>?width=200&height=200
成功 (200):
{
"url": "https://hcti.io/v1/image/be4c5118-fe19-462b-a49e-48cf72697a9d"
}
错误 (400):
{
"error": "Bad Request",
"statusCode": 400,
"message": "HTML is Required"
}
--data-urlencode:正确编码特殊字符ms_delay:给 JavaScript 渲染留出时间device_scale:视网膜屏用 2 倍,标准屏用 1 倍每周安装数
90
代码仓库
GitHub 星标数
49
首次出现
2026 年 1 月 24 日
安全审计
安装于
opencode77
gemini-cli74
codex73
github-copilot71
cursor71
cline69
Use the HTMLCSStoImage API via direct curl calls to generate images from HTML/CSS or capture screenshots of web pages.
Official docs:
https://docs.htmlcsstoimage.com/
Use this skill when you need to:
export HCTI_USER_ID="your-user-id"
export HCTI_API_KEY="your-api-key"
The API uses HTTP Basic Authentication:
All examples below assume you have HCTI_USER_ID and HCTI_API_KEY set.
The base URL for the API is:
https://hcti.io/v1/imageGenerate an image from basic HTML.
Write to /tmp/hcti_html.txt:
<div style="padding:20px;background:blue;color:white;font-size:24px;">Hello World</div>
Then run:
curl -s "https://hcti.io/v1/image" -X POST -u "$(printenv HCTI_USER_ID):$(printenv HCTI_API_KEY)" --data-urlencode "html@/tmp/hcti_html.txt"
Response:
{
"url": "https://hcti.io/v1/image/abc123..."
}
The returned URL is permanent and served via Cloudflare CDN.
Generate a styled card image.
Write to /tmp/hcti_html.txt:
<div class="card"><h1>Welcome</h1><p>This is a styled card</p></div>
Write to /tmp/hcti_css.txt:
.card { padding: 40px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 12px; color: white; font-family: sans-serif; text-align: center; } h1 { margin: 0 0 10px 0; } p { margin: 0; opacity: 0.9; }
Then run:
curl -s "https://hcti.io/v1/image" -X POST -u "$(printenv HCTI_USER_ID):$(printenv HCTI_API_KEY)" --data-urlencode "html@/tmp/hcti_html.txt" --data-urlencode "css@/tmp/hcti_css.txt"
Generate an image with custom fonts.
Write to /tmp/hcti_html.txt:
<div class="title">Beautiful Typography</div>
Write to /tmp/hcti_css.txt:
.title { font-family: Playfair Display; font-size: 48px; padding: 40px; background: #1a1a2e; color: #eee; }
Then run:
curl -s "https://hcti.io/v1/image" -X POST -u "$(printenv HCTI_USER_ID):$(printenv HCTI_API_KEY)" --data-urlencode "html@/tmp/hcti_html.txt" --data-urlencode "css@/tmp/hcti_css.txt" -d "google_fonts=Playfair Display"
Multiple fonts: google_fonts=Playfair Display|Roboto|Open Sans
Capture a screenshot of any public URL:
Write to /tmp/hcti_url.txt:
https://example.com
curl -s "https://hcti.io/v1/image" -X POST -u "$(printenv HCTI_USER_ID):$(printenv HCTI_API_KEY)" --data-urlencode "url@/tmp/hcti_url.txt"
Wait for JavaScript to render before capturing:
Write to /tmp/hcti_url.txt:
https://example.com
curl -s "https://hcti.io/v1/image" -X POST -u "$(printenv HCTI_USER_ID):$(printenv HCTI_API_KEY)" --data-urlencode "url@/tmp/hcti_url.txt" -d "ms_delay=1500"
ms_delay waits specified milliseconds before taking the screenshot.
Screenshot only a specific element on the page:
curl -s "https://hcti.io/v1/image" -X POST -u "$(printenv HCTI_USER_ID):$(printenv HCTI_API_KEY)" --data-urlencode "url@/tmp/hcti_url.txt" -d "selector=h1"
Use any CSS selector: #id, .class, div > p, etc.
Generate 2x or 3x resolution images.
Write to /tmp/hcti_html.txt:
<div style="padding:20px;font-size:18px;">High Resolution Image</div>
Then run:
curl -s "https://hcti.io/v1/image" -X POST -u "$(printenv HCTI_USER_ID):$(printenv HCTI_API_KEY)" --data-urlencode "html@/tmp/hcti_html.txt" -d "device_scale=2"
device_scale accepts values 1-3 (default: 1).
Set specific viewport dimensions:
curl -s "https://hcti.io/v1/image" -X POST -u "$(printenv HCTI_USER_ID):$(printenv HCTI_API_KEY)" --data-urlencode "url@/tmp/hcti_url.txt" -d "viewport_width=1200" -d "viewport_height=630"
Perfect for generating OG images (1200x630).
Capture the entire page height:
curl -s "https://hcti.io/v1/image" -X POST -u "$(printenv HCTI_USER_ID):$(printenv HCTI_API_KEY)" --data-urlencode "url@/tmp/hcti_url.txt" -d "full_screen=true"
Automatically hide consent/cookie popups:
curl -s "https://hcti.io/v1/image" -X POST -u "$(printenv HCTI_USER_ID):$(printenv HCTI_API_KEY)" --data-urlencode "url@/tmp/hcti_url.txt" -d "block_consent_banners=true"
Add ?dl=1 to the image URL to trigger download.
Write to /tmp/hcti_html.txt:
<div style="padding:20px;background:green;color:white;">Download Me</div>
Then run:
curl -s "https://hcti.io/v1/image" -X POST -u "$(printenv HCTI_USER_ID):$(printenv HCTI_API_KEY)" --data-urlencode "html@/tmp/hcti_html.txt" | jq -r '.url'
This will output the image URL. Copy the URL and download with:
curl -s "https://hcti.io/v1/image/<your-image-id>?dl=1" --output image.png
Add width/height query parameters to resize.
Write to /tmp/hcti_html.txt:
<div style="padding:40px;background:purple;color:white;font-size:32px;">Resizable</div>
Then run:
curl -s "https://hcti.io/v1/image" -X POST -u "$(printenv HCTI_USER_ID):$(printenv HCTI_API_KEY)" --data-urlencode "html@/tmp/hcti_html.txt" | jq -r '.url'
This outputs the image URL. Add query parameters to resize:
Original: https://hcti.io/v1/image/<your-image-id>
Thumbnail: https://hcti.io/v1/image/<your-image-id>?width=200&height=200
Success (200):
{
"url": "https://hcti.io/v1/image/be4c5118-fe19-462b-a49e-48cf72697a9d"
}
Error (400):
{
"error": "Bad Request",
"statusCode": 400,
"message": "HTML is Required"
}
--data-urlencode for HTML/CSS: Properly encodes special charactersms_delay for JS-heavy pages: Give time for JavaScript to renderdevice_scale: 2x for retina displays, 1x for standardWeekly Installs
90
Repository
GitHub Stars
49
First Seen
Jan 24, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykWarn
Installed on
opencode77
gemini-cli74
codex73
github-copilot71
cursor71
cline69
Lark CLI Wiki API 使用指南:获取知识空间节点信息与权限管理
42,000 周安装
Angular Transloco 最佳实践:国际化、懒加载翻译与测试指南
102 周安装
游戏引擎开发资源大全 | Unreal, Unity, 开源引擎与安全研究指南
101 周安装
MCP服务器评估指南:创建复杂测试问题,衡量LLM工具调用能力
101 周安装
前端设计技能:创建独特、生产级UI界面,告别AI生成美学,实现创意前端开发
103 周安装
Swift Testing 框架指南:现代测试、迁移、F.I.R.S.T.原则与 Arrange-Act-Assert 模式
101 周安装
统一项目脚手架工具:AI优先开发、NestJS后端、NextJS前端、Expo移动端、Plasmo扩展
103 周安装