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

Clean Code — Clean code principles reference 538 ★
Canvas Designer — Use this agent for UI/UX design and implementation — production-grade interfaces with intentional aesthetic 523 ★
Omd Designer Review — Visual + brand consistency reviewer 465 ★