htmlcsstoimage

Generate images from HTML/CSS and capture web page screenshots via the hcti.io API.

76|18|Updated Dec 12, 2025
One-click install
npx skills add https://github.com/vm0-ai/vm0-skills --skill htmlcsstoimage
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: htmlcsstoimage
Source: https://github.com/vm0-ai/vm0-skills/tree/main/htmlcsstoimage
Command: npx skills add https://github.com/vm0-ai/vm0-skills --skill htmlcsstoimage

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill generates images from HTML/CSS or captures screenshots of web pages, enabling dynamic visuals.

Core Features & Use Cases

  • Images from HTML/CSS - dynamic social cards and certificates
  • Screenshots - full-page or element-specific captures
  • OG images - optimize for social sharing

Quick Start

bash -c 'curl -s "https://hcti.io/v1/image" -X POST -u "${HCTI_USER_ID}:${HCTI_API_KEY}" -d 'html=<div>Hello</div>'' | jq .

Frequently Asked Questions about htmlcsstoimage

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate images from HTML and CSS dynamically?

Generate images from HTML/CSS by sending curl requests to the HTMLCSStoImage API endpoint with your HTML markup and styling. The API converts your code to an image URL, enabling dynamic creation of social cards, certificates, and OG images without manual design tools.

Can I capture screenshots of web pages and convert them to images?

Yes, capture full-page or element-specific screenshots by providing a page URL to the HTMLCSStoImage API via curl. The API fetches and renders the page, returning an image URL suitable for thumbnails, previews, or archival purposes.

What authentication do I need to use the HTMLCSStoImage API?

Use HTTP Basic authentication with your User ID and API Key stored in environment variables (HCTI_USER_ID and HCTI_API_KEY). Pass these credentials in the curl request header to authenticate with the https://hcti.io/v1/image endpoint.

How do I create optimized OG images for social sharing?

Create OG images by defining custom HTML/CSS with your content and branding, then submit to the HTMLCSStoImage API via curl. The generated image URL can be embedded in meta tags to control how your content appears when shared on social platforms.

Can I use custom fonts and styling in generated images?

Yes, custom fonts and styling are supported in HTMLCSStoImage. Include font declarations and CSS rules in your HTML submission to the API, and the rendered image will reflect your design, enabling branded visuals for certificates and social cards.

What input formats does the HTMLCSStoImage API accept?

The API accepts either raw HTML/CSS code or a complete page URL as input via curl POST requests. Both formats produce image URLs, giving flexibility to generate images from code snippets or capture existing web pages.