# Canvas Image Reference To Code

> Use when converting approved JarvisHub webpage preview screenshots or image references into final `webHero` HTML/CSS/JS code.

- Skill: `lyl1015/canvas-image-reference-to-code` (Agent Skill)
- Install (CLI): `npx skillmds@latest add lyl1015/canvas-image-reference-to-code`
- Raw SKILL.md: https://api.skillmd.com/api/skills/lyl1015/canvas-image-reference-to-code/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: lyl1015 (https://skillmd.com/u/lyl1015)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/lyl1015/canvas-image-reference-to-code

---


# JarvisHub Image Reference To Code

Convert approved reference images into final code only after the model has real visual context.

## Required Inputs

- Target `webHero` node id.
- Approved preview screenshot node ids.
- Any resolved webpage asset node ids or URLs.
- User approval evidence for the preview set.

## Execution Rules

1. Call `canvas_read_node_media_for_context` with every approved preview screenshot node id before writing final code.
2. Generate code section by section in the same order as the preview screenshots.
3. Construct complete `webHeroHtml` and `webHeroCss`; do not construct or stage `webHeroDocumentHtml` because the server derives it.
4. In an Agent canvas workflow, call `canvas_webhero_check_readiness`, copy its exact `flowUpdatedAt` and `previewNodeIds`, stage only HTML/CSS with one stable session ID, then call `canvas_webhero_code_commit`.
5. When the frontend WebHero runner explicitly requests strict JSON and owns tool execution, return the requested HTML/CSS JSON to that runner; the runner must use the same readiness/stage/commit transaction before reporting success.
6. Never use `canvas_update_node_data` or a generic Flow patch for final WebHero code.
7. Ensure the final DOM contains at least one real `<section>` per approved preview screenshot.
8. Check that every CSS/JS `#section-id` reference exists in the DOM.

## Prohibited

- Do not put final HTML/CSS/JS into a text node.
- Do not rely only on preview prompts or URLs; the model must read the actual images through multimodal context.
- Do not collapse multiple approved preview sections into a single generic section.
- Do not finish if the code contains CSS/JS for a section but no matching DOM section.
- Do not persist a model-produced `webHeroDocumentHtml`; accept only the server-derived document returned by commit.