← Creative ClawCONTENT HISTORY

Update to Creative Claw

Snapshot Sep 30, 2026 · 23:19 UTC · version 5.2.0

Collection source: not recorded for this historical snapshot. These snapshots do not have a confirmed matching collection source. Differences in file lists alone do not establish changes to the package.

WHAT CHANGED · RULE-BASED ANALYSIS

Supporting file metadata differs

Newly listed paths: agents/openai.yaml. This compares saved file lists, not package contents; a different collection source can change the list.

Observed in package metadata. These changes alone do not establish a new customer-facing feature.

Supporting files

Before

[{"relative_path":"references/job-recovery.md","size_in_bytes":3786},{"relative_path":"references/media-assembly.md","size_in_bytes":3876},{"relative_path":"references/platform-upload.md","size_in_bytes":1416},{"relative_path":"reference...

After

[{"relative_path":"agents/openai.yaml","size_in_bytes":528},{"relative_path":"references/job-recovery.md","size_in_bytes":3786},{"relative_path":"references/media-assembly.md","size_in_bytes":3876},{"relative_path":"references/platform-u...

Compare saved observations

Download comparison JSON
Full technical diff · 1 changed fields

changed /included_files

BEFORE
[
  {
    "relative_path": "references/job-recovery.md",
    "size_in_bytes": 3786
  },
  {
    "relative_path": "references/media-assembly.md",
    "size_in_bytes": 3876
  },
  {
    "relative_path": "references/platform-upload.md",
    "size_in_bytes": 1416
  },
  {
    "relative_path": "references/workflow-basics.md",
    "size_in_bytes": 7159
  }
]
AFTER
[
  {
    "relative_path": "agents/openai.yaml",
    "size_in_bytes": 528
  },
  {
    "relative_path": "references/job-recovery.md",
    "size_in_bytes": 3786
  },
  {
    "relative_path": "references/media-assembly.md",
    "size_in_bytes": 3876
  },
  {
    "relative_path": "references/platform-upload.md",
    "size_in_bytes": 1416
  },
  {
    "relative_path": "references/workflow-basics.md",
    "size_in_bytes": 7159
  }
]
Full snapshot data
{
  "name": "creativeclaw-render-html-image",
  "description": "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.",
  "included_files": [
    {
      "relative_path": "agents/openai.yaml",
      "size_in_bytes": 528
    },
    {
      "relative_path": "references/job-recovery.md",
      "size_in_bytes": 3786
    },
    {
      "relative_path": "references/media-assembly.md",
      "size_in_bytes": 3876
    },
    {
      "relative_path": "references/platform-upload.md",
      "size_in_bytes": 1416
    },
    {
      "relative_path": "references/workflow-basics.md",
      "size_in_bytes": 7159
    }
  ],
  "skill_md_contents": "---\nname: creativeclaw-render-html-image\ndescription: \"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.\"\n---\n\n# Render HTML Image\n\nRead [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.\n\nUse `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.\n\n## Good uses\n\n- A brand or theme reference board with exact fonts, color swatches, logo placement, and sample copy.\n- A deterministic OG image, quote card, title card, badge, comparison graphic, or UI mockup.\n- A reusable layout whose text and image slots need exact placement.\n- A code-rendered reference image that the user wants to approve before using it as `image_url` for later image or video generation.\n\nFor a reusable parameterized layout, use `create_template` and `render_template`.\n\n## Workflow\n\n1. Confirm the final pixel dimensions, exact visible copy, and whether the user supplied HTML or wants you to author it.\n2. For branded work, call `get_theme`; use `search_assets` for approved logos and images. Import local or attached media before referencing it.\n3. 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 `<style>` blocks work as in Chromium.\n4. Pass public images or fonts through `inline_images` and reference each token as `{{token}}`. URLs must be publicly reachable at render time.\n5. Call `render_html_image` with `html`, `width`, `height`, a useful `name`, and stable `tags`.\n6. Inspect the returned PNG for font loading, text fit, crop, contrast, and logo fidelity. The image render completes synchronously; do not call `check_job` for it.\n\n## Example: theme reference board\n\nAfter `get_theme`, substitute its approved values and the durable logo URL:\n\n```text\nrender_html_image({\n  width: 1600,\n  height: 900,\n  name: \"acme-theme-reference-v1\",\n  tags: [\"acme\", \"theme\", \"reference\"],\n  inline_images: [{ token: \"logo\", url: \"https://<durable-logo-url>\" }],\n  html: `<!doctype html>\n  <html><head><style>\n    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&display=swap');\n    *{box-sizing:border-box} html,body{margin:0;width:100%;height:100%;overflow:hidden}\n    body{font-family:Inter,sans-serif;background:#0B1020;color:#F7F4ED;padding:72px}\n    .swatches{display:flex;gap:20px}.swatch{width:180px;height:180px;border-radius:24px;padding:18px;display:flex;align-items:flex-end;font-weight:700}\n  </style></head><body>\n    <img src=\"{{logo}}\" alt=\"\" style=\"width:220px;height:80px;object-fit:contain;object-position:left center\">\n    <h1 style=\"font-size:92px;line-height:.95;max-width:1100px\">Build the remarkable.</h1>\n    <div class=\"swatches\">\n      <div class=\"swatch\" style=\"background:#FF6B35\">#FF6B35</div>\n      <div class=\"swatch\" style=\"background:#4CC9F0;color:#0B1020\">#4CC9F0</div>\n      <div class=\"swatch\" style=\"background:#F7F4ED;color:#0B1020\">#F7F4ED</div>\n    </div>\n  </body></html>`\n})\n```\n\n## Example: deterministic social card\n\n```text\nrender_html_image({\n  width: 1200,\n  height: 630,\n  name: \"launch-announcement-card\",\n  html: `<main style=\"width:1200px;height:630px;display:grid;place-items:center;background:linear-gradient(135deg,#111827,#312e81);color:white;font:800 72px/1.05 Inter,sans-serif;text-align:center;padding:90px\">Version 2.0<br>ships today</main>`\n})\n```\n\n## Gotchas\n\n- Do not use this tool when the user names an image model; the explicit model choice wins.\n- 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.\n- No default font is injected. Load a web font or provide a durable font URL through `inline_images`; always include a sensible fallback.\n- Remote images and fonts must be reachable over HTTP(S). Do not use local paths, blob URLs, or inaccessible signed URLs.\n- 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.\n"
}

SHA-256: f2d267a5010a6c968b47ff951ac5b01b537facbc8f9d98735d49626faed908be