# Canvas Design Tools

> Interactive canvas-based design and layout creation

- Skill: `majiayu000/canvas-design-tools` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds add majiayu000/canvas-design-tools`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/canvas-design-tools/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/canvas-design-tools

---


# Canvas Design Tools

**DEMONSTRATE ONLY - Template skill for testing purposes**

## Purpose

This skill enables agents to:
- Create interactive canvas designs
- Manipulate visual elements
- Build layouts and compositions
- Export design assets

## Instructions

When working with canvas design:

1. **Setup canvas**
   - Initialize canvas context
   - Set dimensions and resolution
   - Configure coordinate system

2. **Add elements**
   - Draw shapes (rectangles, circles, paths)
   - Add text and typography
   - Import and place images
   - Layer elements with proper z-index

3. **Apply transformations**
   - Scale, rotate, translate elements
   - Apply filters and effects
   - Adjust colors and opacity

4. **Export**
   - Save as raster (PNG, JPG) or vector (SVG)
   - Generate design specifications
   - Export individual layers

## Example Workflow

```
1. Create 800x600 canvas
2. Set background color
3. Add geometric shapes
4. Apply gradients
5. Add text overlays
6. Export as PNG
```

## Limitations

This is a mock skill for demonstration only. Actual implementation would require HTML5 Canvas API, WebGL, or similar graphics frameworks.