canvas-design

Canvas Design

A two-step design workflow: first articulate a design philosophy, then create visual designs on canvas. Based on the anthropics/skills canvas-design approach.

• Leverage native parallel subagent dispatch and 200k+ context windows where available.

When to Use This Skill

Use symptom -> action triggers: when one matches, apply this skill and verify with the protocol below.

• Creating design philosophy documents (.md)
• Generating visual canvas designs (.png/.pdf)
• Articulating design principles and aesthetic rationale
• Crafting multi-page design documents
• Exploring design thinking and intentional visual communication

Step 1: Design Philosophy Document

Create a markdown document that articulates the design philosophy before any visual creation.

Philosophy Document Structure

## Core Intent
What is this design trying to communicate? What feeling should it evoke?

## Guiding Principles
1. **[Principle Name]** — Explanation of how this shapes decisions
2. **[Principle Name]** — Explanation
3. **[Principle Name]** — Explanation

## Aesthetic Direction
- **Color Philosophy**: Why these colors, what they represent
- **Typography Philosophy**: What the type choices communicate
- **Spatial Philosophy**: How whitespace and layout serve the intent
- **Material/Texture**: Physical or digital texture decisions

## Inspirations & References
- [Reference 1]: What specifically resonates and why
- [Reference 2]: The element to borrow vs. what to avoid

## Step 2: Canvas Creation

After establishing the philosophy, create visual designs that embody those principles.

### Canvas Workflow
1. **Review philosophy** — Reread the design philosophy document
2. **Define canvas** — Set dimensions, background, grid system
3. **Establish hierarchy** — Place primary elements first
4. **Apply philosophy** — Every decision references a stated principle
5. **Refine** — Remove anything that doesn't serve the core intent

### Essential Design Principles

| Principle | Description |
|-----------|-------------|
| **Intentionality** | Every element exists for a reason |
| **Hierarchy** | Guide the eye through deliberate contrast and spacing |
| **Consistency** | Repeated patterns build trust and comprehension |
| **Restraint** | Fewer elements, each carrying more weight |
| **Craftsmanship** | Pixel-perfect alignment, harmonious proportions |

### Multi-Page Documents
For multi-page designs:
- Maintain consistent margins and grid across pages
- Use a master color palette derived from the philosophy
- Create a visual rhythm — varying density to prevent monotony
- Include breathing pages (minimal content) between dense sections

<!-- MCP:START -->

<!-- PORTABILITY:START -->
## Cross-Client Portability

This skill is written to stay usable across GitHub Copilot, Claude Code, and Codex.

- GitHub Copilot: keep the folder in a Copilot-visible skill path or wrap the
  workflow in project instructions when folder discovery is unavailable.
- Claude Code: keep the folder in a local skills directory or a compatible plugin source.
- Codex: install or sync the folder into
  `$CODEX_HOME/skills/canvas-design` and restart Codex after major changes.

<!-- PORTABILITY:END -->

## MCP Availability And Fallback

Preferred MCP Server: None required

- Fallback prompt: "Use the Canvas Design skill without MCP. Rely on its local instructions, bundled resources, standard shell or editor tools, and direct verification. Show the evidence used before concluding."
- Do not claim an MCP operation was used when the active host does not expose it.
- Treat local files, tests, rendered outputs, logs, or screenshots as the fallback evidence path.

<!-- MCP:END -->

## Anti-Patterns

- Starting from a generic template without adapting it: The output may look polished but still miss the real audience or medium.
- Ignoring final render or export review: Layout bugs often appear only after the asset is opened in its destination tool.