Canvas Design
Generates responsive website mockups and UI prototypes from text descriptions, accelerating frontend design workflows.
Install on your platform
We auto-selected Claude Code based on this skill’s supported platforms.
Run in terminal (recommended)
claude mcp add canvas-design npx -- -y @trustedskills/canvas-design
Or manually add to ~/.claude/settings.json
{
"mcpServers": {
"canvas-design": {
"command": "npx",
"args": [
"-y",
"@trustedskills/canvas-design"
]
}
}
}Requires Claude Code (claude CLI). Run claude --version to verify your install.
About This Skill
What it does
The canvas-design skill enables AI agents to create and manipulate visual elements on an HTML5 <canvas> element. It supports drawing shapes, text, images, and applying transformations like scaling or rotation. This allows for dynamic generation of graphics directly within web applications.
When to use it
- Generating custom charts or graphs dynamically in a web app
- Creating interactive animations or illustrations for user interfaces
- Designing UI elements such as buttons or icons programmatically
Key capabilities
- Drawing shapes (rectangles, circles, paths)
- Rendering text with customizable fonts and styles
- Importing and manipulating images on the canvas
- Applying transformations like rotation and scaling
Example prompts
- "Draw a red circle centered in the canvas."
- "Render a bar chart using the provided dataset."
- "Add a logo image to the top-left corner of the canvas."
Tips & gotchas
- Ensure that the canvas element is properly sized and accessible in the DOM before drawing.
- Be mindful of performance when rendering complex or high-frequency animations.
Tags
TrustedSkills Verification
Unlike other registries that point to live repositories, TrustedSkills pins every skill to a verified commit hash. This protects you from malicious updates — what you install today is exactly what was reviewed and verified.
Security Audits
| Gen Agent Trust Hub | Pass |
| Socket | Pass |
| Snyk | Pass |
🏢 Official
Published by the company or team that built the technology.