# Creativeclaw Render HTML Image > Render a deterministic HTML/CSS layout to a PNG with Creative Claw. Use only when the user explicitly asks for HTML/CSS image rendering, supplies HTML, or explicitly requests a code-based layout; do not activate for ordinary image, poster, banner, or social-card requests. - Skill: `creativeclawco/creativeclaw-render-html-image` (Agent Skill, multi-file: 6 files) - Install (CLI): `npx skillmds@latest add creativeclawco/creativeclaw-render-html-image` - Raw SKILL.md: https://api.skillmd.com/api/skills/creativeclawco/creativeclaw-render-html-image/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Design & Media - Author: creativeclawco (https://skillmd.com/u/creativeclawco) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/creativeclawco/creativeclaw-render-html-image --- # Render HTML Image Read [shared execution guidance](references/workflow-basics.md) once per task before using tools. It covers existing authorization, model discovery, optional cost checks, imports, and recovery. Use `render_html_image` for a pixel-controlled PNG assembled with browser HTML and CSS. This is an explicit-only route. A request for a poster, banner, social card, or branded image by itself is not permission to choose HTML rendering; use `creativeclaw-generate-image` unless the user asks for HTML/CSS or a deterministic code-based layout. ## Good uses - A brand or theme reference board with exact fonts, color swatches, logo placement, and sample copy. - A deterministic OG image, quote card, title card, badge, comparison graphic, or UI mockup. - A reusable layout whose text and image slots need exact placement. - A code-rendered reference image that the user wants to approve before using it as `image_url` for later image or video generation. For a reusable parameterized layout, use `create_template` and `render_template`. ## Workflow 1. Confirm the final pixel dimensions, exact visible copy, and whether the user supplied HTML or wants you to author it. 2. For branded work, call `get_theme`; use `search_assets` for approved logos and images. Import local or attached media before referencing it. 3. Write a complete, fixed-size layout. Set `html, body` margins to zero, hide overflow, and declare fonts explicitly. Tailwind utilities work without adding a CDN, and ordinary `

Build the remarkable.

#FF6B35
#4CC9F0
#F7F4ED
` }) ``` ## Example: deterministic social card ```text render_html_image({ width: 1200, height: 630, name: "launch-announcement-card", html: `
Version 2.0
ships today
` }) ``` ## Gotchas - Do not use this tool when the user names an image model; the explicit model choice wins. - Set the exact canvas size in the tool call and make the layout fill it. Avoid content whose height depends on the browser viewport or unbounded text. - No default font is injected. Load a web font or provide a durable font URL through `inline_images`; always include a sensible fallback. - Remote images and fonts must be reachable over HTTP(S). Do not use local paths, blob URLs, or inaccessible signed URLs. - HTML rendering preserves logo pixels and copy placement, but a later generative model may not. If the PNG becomes a generation reference, repeat the exact brand and text constraints in that generation prompt.