Claude Canvas — Design skill for Claude Code
A shared visual canvas for Claude Code — draw, diagram, and get visual feedback through CLI commands and an interactive browser UI.
How to install Claude Canvas
This entry records only its repository, not the path inside it, so there is no
exact command to give. Open uditalias/claude-canvas and copy the folder into
~/.claude/skills/, or the file into ~/.claude/agents/.
What Claude Canvas does
A shared visual canvas for Claude Code — draw, diagram, and get visual feedback through CLI commands and an interactive browser UI.
Alternatives in Design
- Canvas Design — Create beautiful visual art in PNG and PDF documents using design philosophy 94.1k ★
- Export Diagram — Export a diagram-design HTML file to .svg and .png next to the source 27.2k ★
- Plannotator — Interactive plan review UI for Claude Code with visual annotation, offline sharing, and Obsidian/Bear integrat 3.3k ★
README
claude-canvas
Give Claude Code eyes and a whiteboard. Install the skill, start a session, and Claude automatically draws diagrams, wireframes, and mockups on a shared canvas — asking visual questions and collecting your feedback instead of cluttering the terminal.
Installation • Quick Start • Visual Q&A • Drawing • DSL Format • Interactive Canvas • Claude Code Skill • CLI Reference
What is claude-canvas?
[Claude Code](https://claude.ai/code) is powerful, but it's stuck in text. When Claude needs to show you a layout, compare design options, or ask "which of these do you prefer?" — a terminal isn't enough.
**claude-canvas** is a shared visual canvas for Claude Code. Once
Related Skills
Uml Drawing Skill
Agent Skill: draw a correct UML class diagram via BESSER B-UML and generate SVG/PNG outputs in one call — no b
Architecture Diagrams Skill
Diagrams for software and chip design as one interactive offline HTML page: block diagrams, clock trees, pin-l
Carousel Tweak
Open the current carousel's slides.html in browser for visual tweaking, then walk the user through the sync ri
Mooting
Claude Code, Codex and Copilot in one shared council — CLI coding agents debate over MCP, and a human rules ev
Dsh Background Agents
Interactive long-session background agents for DeepSeek Harness: start a durable continuable child agent, watc
Motion Skill
Agent Skill for motion design videos with canvas + Web Audio → MP4 (Claude Code, Codex, Cursor, Gemini CLI…)
Related Agents
Visual Exporter
Convert a structured deepthinking thought into diagram source code. Use when the user asks to visualize, rende
Diagram Drawer
Diagram drawing specialist. Use for the drawing step of /diagram — turns a content inventory (boxes, arrows, g
Canvas To Code Data Binder
Classifies each visual unit's data source. Decides backend (wire to an existing service) vs mock (emit a JSON