Render HTML, CSS, public webpages, and reusable templates into high-quality images or PDFs through HCTI MCP tools.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install html-css-to-image
2. Manual Installation
Copy the skill folder to one of these locations
~/.openclaw/skills/ <project>/skills/ Priority: Workspace > Local > Bundled
3. Prompt Installation
Copy this prompt to OpenClaw to install it automatically.
Help me install html-css-to-image using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).
Prefer to download?
Get the raw skill files in a ZIP archive.
What is HTML/CSS to Image API?
HTML/CSS to Image API connects OpenClaw agents to the hosted HTML/CSS to Image service through MCP, enabling browser-rendered screenshots, social cards, Open Graph images, PDFs, and other visual assets without manually managing a browser. Agents can render one-off HTML and CSS, capture selected elements from public URLs, or populate reusable HCTI templates with dynamic content.
This skill is designed for reliable asset generation while preserving requested dimensions, formats, viewport settings, selectors, color schemes, and rendering timing. It uses OAuth rather than API-key environment variables, keeps authorization in the client's credential storage, and includes safeguards for account credits, remote URL privacy, template mutations, and rendering errors. It is a practical addition to Openclaw Skills for automated visual content production.
HTML/CSS to Image API Use Cases
- Generate screenshots from supplied HTML and CSS for prototypes, documentation, QA, or design reviews.
- Capture a public webpage or a specific public-page element with
create_url_image. - Produce social media graphics, Open Graph images, link previews, and branded marketing visuals.
- Populate an existing HCTI template with changing names, prices, headlines, metrics, or campaign data.
- Resolve a template by name with
list_templatesbefore generating a templated image. - Create image batches when the user specifies an explicit quantity and the account supports the requested batch size.
- Export browser-rendered designs as images or PDFs while preserving requested output settings.
- Manage reusable HCTI templates only when the user explicitly requests creation, updates, or version inspection.
- Avoid using the skill for editing, analyzing, or interpreting an existing image.
How HTML/CSS to Image API Works
- Identify the requested operation: use
create_imagefor HTML/CSS,create_url_imagefor public webpage capture,create_templated_imagefor a known template, orlist_templateswhen a template ID must be resolved. - Confirm the required output details, including format, dimensions, viewport, selector, color scheme, timing behavior, and any requested batch count.
- Inspect the selected MCP tool's current input schema rather than assuming optional parameters are available.
- Prepare safe rendering inputs: keep HTML semantic, make CSS self-contained, and use absolute HTTPS URLs for remote assets when possible.
- Add a render delay or ready signal only when client-side work must finish before capture; otherwise allow HCTI defaults to apply.
- Send the request through the authenticated HCTI MCP server, recognizing that rendering consumes account credits and that URL capture sends the target page to HCTI's remote renderer.
- Wait for a successful tool result before reporting completion, then return the generated asset URL and identify the format or variation when useful.
- Present the generated asset as media when the active channel supports it, while preserving the returned URL.
- Handle authorization, credit, invalid input, and inaccessible URL errors with a clear explanation; do not repeatedly retry account-limit failures.
HTML/CSS to Image API Setup
- Confirm that the user has an HCTI account, available image credits, and an OpenClaw client that supports MCP OAuth connections.
- Check whether an HCTI connection already exists before adding a new one:
openclaw mcp list
- Add the hosted HCTI MCP server only if the existing
hctientry is absent or does not point to the correct service:
openclaw mcp add hcti --url https://mcp.hcti.io --transport streamable-http --auth oauth
- Start browser-based OAuth authorization and have the user select the correct HCTI organization:
openclaw mcp login hcti
- Verify connectivity before rendering:
openclaw mcp doctor hcti --probe
- Ensure the current agent session exposes the HCTI tools. Reload the MCP connection or start a new session if the tools are not available.
- Do not overwrite an existing
hctientry that points elsewhere. Do not place OAuth tokens in skill files, shell commands, or chat; use the client's credential storage. - If the installed OpenClaw version does not provide these MCP commands, consult its supported MCP connection workflow or update the client. Installing the skill provides instructions but does not automatically register or authorize the server.
- Review the HCTI MCP documentation at https://docs.htmlcsstoimage.com/integrations/mcp/ and OpenClaw MCP setup guidance at https://docs.openclaw.ai/cli/mcp/registry.
HTML/CSS to Image API Data Schema & Taxonomy
The skill does not define a local database or required output directory. Rendering inputs are sent to the hosted HCTI service, and successful operations return remotely hosted asset URLs.
| Data area | Organization and examples |
|---|---|
| Direct render input | HTML, self-contained CSS, output format, dimensions, viewport, selector, color scheme, and timing options for create_image. |
| URL capture input | A public target URL and, when needed, a selected public-page element for create_url_image. |
| Template input | HCTI template ID or resolved template name plus dynamic template values for create_templated_image. |
| Template management | Template creation, updates, and version listings through create_template, update_template, and list_template_versions; these modify or inspect HCTI account resources. |
| Batch metadata | Explicit image count and account-supported maximum, checked with get_max_batch_size before create_batch_images when limits may be relevant. |
| Returned asset | Generated image or PDF URL, with format or variation details when supplied by the tool. |
| Authentication metadata | OAuth credentials and organization selection stored by the MCP client, never embedded in skill files or commands. |
| Safety metadata | Credit consumption, authorization status, URL accessibility, input validity, and whether a requested operation mutates a template. |
Use templates for repeated designs with changing content and direct HTML/CSS for one-off graphics. Do not forward cookies, authorization headers, private URLs, or other credentials to the remote renderer unless the user explicitly requests it and understands the data transfer.
HTML/CSS to Image API Advanced Features
- MCP-based rendering through the hosted HCTI Streamable HTTP server, without manual browser lifecycle management.
- OAuth authorization with organization selection and client-managed credential storage.
- Multiple rendering modes for direct HTML/CSS, public URL capture, selected page elements, templates, and batch generation.
- Reusable template workflows with template discovery, creation, updates, and version inspection.
- Batch-size validation through
get_max_batch_sizebefore potentially large image jobs. - Fine-grained control over dimensions, output format, viewport, selectors, color scheme, remote assets, render delays, and ready signals.
- Credit-aware execution that requires explicit authorization for image creation and clarification when batch counts are ambiguous.
- Mutation safeguards that require explicit user intent or confirmation before creating or updating templates.
- Privacy-aware URL capture that defaults to public pages and avoids forwarding credentials.
- Robust result handling that returns asset URLs only after successful tool responses and explains actionable failures.
- Session and connectivity diagnostics using OpenClaw MCP discovery, OAuth login, and probe commands, making this skill a dependable component of Openclaw Skills workflows.
SKILL.md
Loading
Related Openclaw Skills
Chuhaijiang TikTok Live Commerce Intelligence
A read-only TikTok live commerce research skill for discovering livestreams, analyzing session performance, and identifying products sold through Chuhaijiang.
Chuhaijiang TikTok Product Market Intelligence
A public TikTok Shop market intelligence skill for discovering products, analyzing performance, tracing promotion channels, and finding visually similar items.
Cargo CLI — Segmentation
Cargo CLI Segmentation lets you define, save, inspect, export, and monitor named audiences over Cargo models.
Crun Media Agent Skills
Crun Media Agent Skills orchestrates safe, model-routed workflows for generating, editing, and transforming image, video, audio, music, and other media.
Browser Execution
Browser Execution completes direct browser tasks with Playwright, computer controls, secure vault handling, recovery tactics, and an explicit verified result.
Render on Hermes
Render on Hermes configures an AI agent to manage Render through its pre-registered MCP server without installing the Render CLI.
Featured*
