Skip to content

juanhcode/canva-design

v1.0.0MIT

Create, edit, search, and export Canva designs directly from Kiro using natural language and Canva MCP.

🎨 Canva Design Power for Kiro

Design, edit, search, and export Canva designs directly from Kiro using the official Canva MCP server.

The Canva Design Power for Kiro brings Canva design capabilities directly into your AI-powered development workflow.

Instead of manually switching between Kiro and Canva, you can use natural language to create, edit, search, manage, and export designs through the official Canva MCP server.


✨ Features

  • 🎨 Create Canva designs using natural language
  • ✏️ Edit existing Canva designs
  • πŸ”Ž Search designs in your Canva account
  • πŸ–ΌοΈ Work with Canva assets
  • 🏷️ Apply brand guidelines
  • πŸ“± Create social media graphics
  • πŸ–₯️ Create presentations
  • πŸ“’ Create event graphics
  • πŸ”„ Create design variations
  • πŸ“€ Export designs
  • πŸ’¬ Work with comments when supported
  • πŸ€– AI-assisted design workflows inside Kiro

🧠 How It Works

The Canva Design Power provides design-specific instructions, workflows, and skills that help Kiro work with Canva.

The Power does not implement the Canva API or the Canva MCP server.

Instead, Canva MCP provides the actual connection between Kiro and Canva.

β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”
β”‚          User            β”‚
β”‚                          β”‚
β”‚ "Create an event banner" β”‚
β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”¬β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜
             β”‚
             β–Ό
β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”
β”‚           Kiro           β”‚
β”‚                          β”‚
β”‚      Canva Design        β”‚
β”‚          Power           β”‚
β”‚                          β”‚
β”‚  β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”  β”‚
β”‚  β”‚ Skills             β”‚  β”‚
β”‚  β”‚ Steering           β”‚  β”‚
β”‚  β”‚ Workflows          β”‚  β”‚
β”‚  β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜  β”‚
β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”¬β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜
             β”‚
             β”‚ MCP
             β–Ό
β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”
β”‚       Canva MCP          β”‚
β”‚         Server           β”‚
β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”¬β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜
             β”‚
             β”‚ OAuth
             β–Ό
β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”
β”‚          Canva           β”‚
β”‚                          β”‚
β”‚ Designs Β· Assets Β· Brand β”‚
β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜

Two separate components

The setup consists of two independent components:

β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”
β”‚   Canva Design      β”‚
β”‚       Power         β”‚
β”‚                     β”‚
β”‚ Instructions        β”‚
β”‚ Skills              β”‚
β”‚ Workflows           β”‚
β”‚ Design guidelines   β”‚
β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”¬β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜
           β”‚
           β”‚
           β–Ό
β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”
β”‚     Canva MCP       β”‚
β”‚       Server        β”‚
β”‚                     β”‚
β”‚ Canva functionality β”‚
β”‚ Authentication      β”‚
β”‚ Design operations   β”‚
β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜

The Power is distributed through this repository.

The Canva MCP server is provided and operated by Canva.


πŸš€ Getting Started

Prerequisites

Before using the Power, make sure you have:

  • Kiro installed
  • A Canva account
  • MCP support enabled in Kiro
  • Access to the official Canva MCP server

1. Install the Power

Install the Canva Design Power using Kiro's Power installation flow.

The Power contains:

canva-design/
β”œβ”€β”€ plugin.json
β”œβ”€β”€ POWER.md
β”œβ”€β”€ README.md
β”œβ”€β”€ PRIVACY.md
β”œβ”€β”€ LICENSE
β”œβ”€β”€ dev.kiro/
β”‚   └── steering/
└── skills/

The Power itself does not contain any Canva credentials or authentication information.


2. Configure Canva MCP

Configure the official Canva MCP server separately in your Kiro environment.

The official Canva MCP endpoint is:

https://mcp.canva.com/mcp

Example configuration:

{
  "mcpServers": {
    "canva": {
      "url": "https://mcp.canva.com/mcp"
    }
  }
}

This configuration is intentionally not included in this repository. Each user configures the Canva MCP connection in their own Kiro environment.


3. Authenticate with Canva

When Kiro first connects to Canva MCP, you may be asked to authenticate with your Canva account.

Follow the Canva authorization flow and grant the requested permissions.

Authentication is handled externally by Canva MCP.

Do not store:

  • Canva passwords
  • OAuth tokens
  • Access tokens
  • API keys
  • Client secrets

inside this repository.


4. Start Designing

Once the Canva Design Power and Canva MCP are configured, you can interact with Canva directly from Kiro using natural language.

For example:

Create an Instagram post for my next AWS event.
Use a modern technology-focused style.

Or:

Find my latest Canva presentation about Kiro.

Or:

Edit the event design and change the date to September 20.

πŸ’‘ Usage

You don't need to know Canva's API or MCP tools to use the Power.

Simply describe what you want Kiro to create or change.

🎨 Create a Design

Create an Instagram post announcing our next AWS event.
Use a modern cloud computing style.
Create a professional event banner for a Kubernetes workshop.
Create a presentation introducing Kiro for a technical audience.

πŸ”Ž Search Designs

Search your Canva library using natural language:

Find my latest AWS event designs in Canva.
Find the presentation I created about Kiro.
Find the designs related to our Kubernetes workshop.

✏️ Edit Designs

Modify existing designs:

Find the latest event design and change the date to September 20.
Change the speaker name to Juan Manuel Hoyos.
Make the title more prominent while keeping the current design.

The Power encourages preserving the existing visual identity unless the user explicitly requests a redesign.


πŸ”„ Create Design Variations

Create versions for different platforms:

Create a LinkedIn version of this design.
Create an Instagram Story version.
Create a presentation cover based on this event design.
Create three variations of this design.

πŸ–ΌοΈ Use Canva Assets

Use existing assets from Canva:

Find the AWS logo in my Canva assets and use it in the design.
Find the speaker's photo in our Canva assets.
Use the existing community logo from Canva.

When appropriate, the Power prioritizes existing brand assets instead of recreating them.


🏷️ Apply Brand Guidelines

Organizations can customize the Power with their own branding rules.

These rules can include:

  • Colors
  • Typography
  • Logos
  • Visual style
  • Layout
  • Spacing
  • Social media guidelines

Branding instructions can be configured in:

dev.kiro/steering/brand-guidelines.md

For example:

Create a promotional graphic for our next meetup.

Follow the brand guidelines defined in the Canva Design Power.

πŸ“€ Export Designs

When supported by Canva MCP, you can request exports directly:

Export this design as PNG.
Export the presentation as PPTX.
Export the final design as PDF.

Available export formats depend on Canva MCP capabilities and the user's Canva permissions.


🎯 Example Workflow

A typical event campaign could look like:

User
 β”‚
 β”‚ "Create the campaign for our Kubernetes workshop"
 β”‚
 β–Ό
Kiro
 β”‚
 β”œβ”€β”€ Identify event information
 β”‚
 β”œβ”€β”€ Apply brand guidelines
 β”‚
 β”œβ”€β”€ Search existing Canva assets
 β”‚
 β”œβ”€β”€ Create event graphic
 β”‚
 β”œβ”€β”€ Create social media variation
 β”‚
 └── Export requested formats
 β”‚
 β–Ό
Canva MCP
 β”‚
 β–Ό
Canva

Example conversation

User:
Create an Instagram post for our next Kiro workshop.

Kiro:
I'll create an Instagram design using the configured
branding and the event information.

User:
Make the title larger and add more visual emphasis.

Kiro:
I'll update the existing design while preserving
the current visual identity.

User:
Now create a LinkedIn version.

Kiro:
I'll create a version optimized for LinkedIn.

User:
Export both designs as PNG.

Kiro:
I'll export the requested designs.

πŸ“ Project Structure

canva-design/
β”‚
β”œβ”€β”€ plugin.json
β”œβ”€β”€ POWER.md
β”œβ”€β”€ README.md
β”œβ”€β”€ PRIVACY.md
β”œβ”€β”€ LICENSE
β”‚
β”œβ”€β”€ dev.kiro/
β”‚   └── steering/
β”‚       β”œβ”€β”€ canva-design.md
β”‚       └── brand-guidelines.md
β”‚
└── skills/
    β”œβ”€β”€ create-design/
    β”‚   └── SKILL.md
    β”œβ”€β”€ edit-design/
    β”‚   └── SKILL.md
    β”œβ”€β”€ search-designs/
    β”‚   └── SKILL.md
    β”œβ”€β”€ manage-assets/
    β”‚   └── SKILL.md
    β”œβ”€β”€ export-design/
    β”‚   └── SKILL.md
    └── workflow/
        └── SKILL.md

plugin.json

The Agent Plugin manifest required by the Kiro Powers Registry.

It declares the Power's name, version, description, author, keywords, license, and repository.

POWER.md

The main definition of the Power.

It describes:

  • Purpose
  • Capabilities
  • When the Power should be used
  • General design behavior
  • Design principles

dev.kiro/steering/

Persistent instructions that guide Kiro's design behavior.

canva-design.md

General design principles such as:

  • Layout
  • Typography
  • Composition
  • Visual hierarchy
  • Accessibility

brand-guidelines.md

Organization-specific branding rules.

This file can be customized for different organizations, communities, or projects.

skills/

Specialized design workflows. Each skill lives in its own directory with a SKILL.md file.

SkillDescription
create-designCreate new Canva designs
edit-designModify existing Canva designs
search-designsSearch Canva designs
manage-assetsWork with Canva assets
export-designExport Canva designs
workflowEnd-to-end design workflow guidelines

🧩 Extending the Power

The Canva Design Power is designed to be extensible.

Add a New Skill

Create a new directory under:

skills/

For example:

skills/social-media/SKILL.md

A social media skill could define workflows for:

  • Instagram posts
  • Instagram Stories
  • LinkedIn posts
  • YouTube thumbnails
  • Event announcements

Each skill directory must contain a SKILL.md file with frontmatter including name and description.

Add Steering Instructions

Create additional files under:

dev.kiro/steering/

For example:

dev.kiro/steering/social-media-guidelines.md

This allows communities and organizations to customize the Power without modifying the core workflows.


πŸ” Security

This project does not store or manage Canva credentials.

Never commit:

.env
credentials
access tokens
OAuth secrets
API keys
passwords

Authentication should be handled through the mechanisms provided by Kiro and Canva MCP.

If you discover a security vulnerability, please do not open a public issue containing sensitive information.

Instead, report it privately to the maintainers.


🀝 Contributing

Contributions are welcome!

Getting Started

  1. Fork the repository.
  2. Create a feature branch.
git checkout -b feature/my-new-skill
  1. Make your changes.
  2. Test the Power with Kiro.
  3. Commit your changes.
git commit -m "feat: add social media design skill"
  1. Push your branch.
git push origin feature/my-new-skill
  1. Open a Pull Request.

What Can You Contribute?

You can contribute:

  • New skills
  • Better design workflows
  • Steering instructions
  • Brand configurations
  • Documentation
  • Examples
  • Bug fixes
  • Improvements to existing workflows

πŸ“‹ Contribution Guidelines

When adding a new skill:

  • Keep the instructions focused.
  • Clearly describe the skill's purpose.
  • Define when it should be used.
  • Include practical examples.
  • Avoid hardcoding credentials.
  • Avoid organization-specific rules unless the skill is explicitly organization-specific.
  • Prefer reusable workflows.

Organization-specific branding should generally live in:

dev.kiro/steering/brand-guidelines.md

rather than inside the core skills.


🌎 Community

This project is intended to be community-driven.

If you create your own:

  • Skills
  • Steering files
  • Design workflows
  • Brand configurations
  • Integrations

consider sharing them with the community.

Contributions that make the Power useful across different organizations and communities are especially welcome.


πŸ”’ Privacy Policy

This project does not collect, store, or manage Canva credentials, OAuth tokens, or API keys.

For full details, see the Privacy Policy.


πŸ†˜ Support

If you have questions, find a bug, or want to request a feature:


πŸ“„ License

This project is licensed under the MIT License.


πŸ™ Acknowledgements

This project builds upon:

  • Kiro β€” AI-powered development environment
  • Canva β€” Visual design platform
  • Model Context Protocol (MCP) β€” Open protocol for connecting AI applications with external tools

The Canva MCP server is provided by Canva.

This project is an independent open-source project and is not affiliated with or endorsed by Canva unless explicitly stated.


⭐ Support the Project

If you find this Power useful:

  • ⭐ Star the repository
  • πŸ› Report issues
  • πŸ’‘ Suggest improvements
  • πŸ”§ Contribute new skills
  • πŸ“– Improve the documentation
  • πŸ“’ Share the project

Let's make AI-powered design workflows accessible directly from Kiro. πŸŽ¨πŸ€–