Canvas Design
Generates responsive website mockups and UI prototypes from text descriptions using a visual canvas.
Install on your platform
We auto-selected Claude Code based on this skill’s supported platforms.
Run in terminal (recommended)
claude mcp add sickn33-canvas-design npx -- -y @trustedskills/sickn33-canvas-design
Or manually add to ~/.claude/settings.json
{
"mcpServers": {
"sickn33-canvas-design": {
"command": "npx",
"args": [
"-y",
"@trustedskills/sickn33-canvas-design"
]
}
}
}Requires Claude Code (claude CLI). Run claude --version to verify your install.
About This Skill
What it does
This skill enables AI agents to design and manipulate canvas elements in web applications, including drawing shapes, adding text, applying styles, and exporting visual outputs. It provides tools for creating interactive and dynamic graphics directly within the browser.
When to use it
- Creating custom UI components or data visualizations for dashboards
- Generating images or illustrations dynamically based on user input
- Building interactive art applications or games with canvas-based rendering
Key capabilities
- Draw shapes (rectangles, circles, paths)
- Add and style text elements
- Export canvas content as image files (e.g., PNG, JPEG)
- Handle mouse events for interactivity
Example prompts
- "Draw a red circle with a black border in the center of the canvas."
- "Export the current canvas as a high-resolution PNG file."
- "Add interactive text that changes color when hovered over."
Tips & gotchas
- Ensure the canvas element is properly sized and accessible in the DOM before manipulating it.
- Be mindful of performance when rendering complex or frequent updates on the canvas.
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 |
🌐 Community
Passed automated security scans.