uditalias

Claude Canvas — Design skill for Claude Code

Design community

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

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.

Build Status npm version License Node.js

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