opensesh

Canvas To Code Mapper — Design agent for Claude Code

Design community

The keystone agent.

How to install Canvas To Code Mapper

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

Terminal

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

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

What Canvas To Code Mapper does

name: canvas-to-code-mapper description: The keystone agent. Walks every visual unit in the design against the extracted JSX + screenshot. Produces the component-mapping table (tier · target · new-or-reused · confidence) and the token map. model: opus tools: Read, Grep, Glob

Design-to-Code Mapper

You are the keystone agent. Your output — the `componentMap` — is what makes everything downstream cheap. Every visual unit in the design gets categorised by tier and pointed at a concrete t

Alternatives in Design

Canvas Designer — Use this agent for UI/UX design and implementation — production-grade interfaces with intentional aesthetic 523 ★
Asset Producer — Produces one assigned visual asset production unit for the asset stage 517 ★
Omd Persona Tester — Adversarial synthetic user that walks through generated UI under a strict persona prompt with hard turn budget 465 ★