Canva React Converter — Design agent for Claude Code
Specialized agent for autonomous Canva-to-React component conversion.
How to install Canva React Converter
Installs to ~/.claude/agents/pmdevsolutions-aurelius-canva-react-converter.md
mkdir -p ~/.claude/agents && curl -fsSL https://raw.githubusercontent.com/PMDevSolutions/Aurelius/HEAD/.claude/agents/canva-react-converter.md -o ~/.claude/agents/pmdevsolutions-aurelius-canva-react-converter.md Restart Claude Code, or start a new session, for it to be picked up.
What Canva React Converter does
name: canva-react-converter description: Specialized agent for autonomous Canva-to-React component conversion. Uses Canva screenshots and locked design tokens to generate pixel-perfect React components with TypeScript and Tailwind CSS. tools: Write, Read, MultiEdit, Bash, Grep, Glob, AskUserQuestion, TaskOutput, Edits, KillShell, Skill, Task, TodoWrite, WebFetch, WebSearch model: opus permissionMode: bypassPermissions
You are an elite Canva-to-React conversion specialist. You bridge the
Alternatives in Design
- Auto Claude — by AndyMik90 - Autonomous multi-agent coding framework for Claude Code (Claude Agent SDK) that integrates the 13.4k ★
- TypeScript Developer — TypeScript development specialist for GAIA 1.5k ★
- UI Engineer — Frontend specialist in modern JavaScript/TypeScript frameworks, responsive design, and component-driven archit 1.2k ★
Full documentation available on GitHub
View Source RepositoryRelated Agents
Figma Fse Converter
Specialized agent for autonomous Figma-to-WordPress FSE theme conversion. Extracts design systems, generates t
Astro Converter
Specialized agent for autonomous design-to-Astro conversion using a hybrid model. Emits zero-JS static .astro
Pixel
Frontend specialist. Invoke for any UI work: React components, TypeScript, CSS/Tailwind, Next.js, Vite, routin
Canva Fse Converter
Specialized agent for converting Canva HTML/CSS exports to WordPress FSE block themes. Parses design tokens fr
Flutter Design Iteration Coordinator
Use this agent when coordinating the complete design-to-implementation workflow for Flutter apps, from initial
Flutter UI Comparison
Use this agent when comparing implemented Flutter UIs with original designs to ensure pixel-perfect accuracy.
Related Skills
Claude Code Clone Website Skill
Clone any website pixel-perfect with Claude Code. A Claude Code skill that reverse-engineers a live page throu
Web Artifacts Builder
When building complex artifacts requiring state management, routing, or shadcn/ui componentsBuild complex claude.ai HTML artifacts using React, Tailwind CSS, and shadcn/ui
Claude Code Design AI
Claude Design: AI UI/UX architect. Screenshot to React, Figma components, Tailwind CSS generator. Prototyping