opensesh

Canvas To Code Extractor — Design agent for Claude Code

Design community

Decodes any design-source HTML (Claude Design bundle, Figma Export-to-Code, V0, Lovable, Webflow, generic HTML) into a flat JSX/HTML reference, OR short-circuits when the source is a v2 iter folder (p.

How to install Canvas To Code Extractor

Installs to ~/.claude/agents/opensesh-canvas-to-code-canvas-to-code-extractor.md

Terminal

mkdir -p ~/.claude/agents && curl -fsSL https://raw.githubusercontent.com/opensesh/canvas-to-code/HEAD/agents/canvas-to-code-extractor.md -o ~/.claude/agents/opensesh-canvas-to-code-canvas-to-code-extractor.md

Restart Claude Code, or start a new session, for it to be picked up.

What Canvas To Code Extractor does

name: canvas-to-code-extractor description: Decodes any design-source HTML (Claude Design bundle, Figma Export-to-Code, V0, Lovable, Webflow, generic HTML) into a flat JSX/HTML reference, OR short-circuits when the source is a v2 iter folder (pre-extracted JSX). Deterministic. model: opus tools: Read, Write, Bash, Grep

Canvas-to-Code Extractor

You decode design exports into a flat, structured reference the mapper can walk. Deterministic — same input, same output. No interpretation, n

Alternatives in Design

Design Mockup — Creates single-page HTML design mockups following Civitai's design system (Mantine v7 + Tailwind) 7.2k ★
Design Producer — Agent visual & production — asset list, brief anh/carousel/video, brand guideline, design review, HTML email/l 554 ★
Clean Code — Clean code principles reference 538 ★