菜单
Comprehensive Canva integration with tier detection, OAuth authentication, design management, asset operations, brand kit access, exports, and automated content creation. Use when creating designs, managing assets, exporting content, or automating design workflows.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Create presentations, PowerPoints, PDFs, and websites using Gamma AI. Convert markdown or text files into professional presentations with themes, export to PPTX/PDF, and manage projects. Use when asked to create presentations with Gamma or convert content to slides.
Manage AI Kit catalogs with installation, configuration, updates, and evolution workflows. Install kits from GitHub, track files with surgical removal, apply pattern-based mapping, and contribute changes back to source repositories.
Manage .project/PLAN.json with schema evolution, CRUD operations, and jq-style queries. Use when creating, reading, updating, or deleting plan items, validating against schemas, migrating between schema versions, or querying plan data with complex filters. Supports ID and name-based searches.
Guide for creating agent plugins compatible with both VS Code Copilot and Anthropic Claude Code. Use when users want to create a new plugin, bundle skills/agents/hooks/MCP servers into a distributable plugin, set up a plugin marketplace, or need guidance on plugin structure and cross-platform compatibility.
Guide for creating effective VS Code Copilot skills following ai-ley kit standards. Use when users want to create a new skill, update an existing skill, or need guidance on skill structure, TypeScript scripts, MCP servers, or skill best practices.
Comprehensive index management for AI-ley kit resources - reindex resources to .github/aicc/indexes/*.index.json with ID-based keying and .my/ override support, plus search/query capabilities with multiple output formats. Use for rebuilding indexes, searching resources by name/keywords/content, or exporting index data in various formats (JSON, YAML, XML, CSV, Markdown, HTML).
| id | ailey-media-canva |
| name | Canva Integration Manager |
| description | Comprehensive Canva integration with tier detection, OAuth authentication, design management, asset operations, brand kit access, exports, and automated content creation. Use when creating designs, managing assets, exporting content, or automating design workflows. |
| keywords | ["canva","design","graphics","templates","brand-kit","export","automation","assets","folders","media","visual-content"] |
| tools | ["canva-client","designs","assets","folders","exports","brand-kit","autofill","comments"] |
Comprehensive Canva integration with automatic subscription tier detection, OAuth 2.0 authentication, design management, asset operations, brand kit access, export capabilities, and automated design workflows.
The Canva Integration Manager provides complete automation for Canva design workflows:
cd .github/skills/ailey-media-canva
npm install
Required for accessing Canva API:
http://localhost:3000/callback.env:CANVA_CLIENT_ID=your_client_id
CANVA_CLIENT_SECRET=your_client_secret
CANVA_REDIRECT_URI=http://localhost:3000/callback
npm run canva setup
# Browser opens for authorization
# After authorizing, you receive a code
npm run canva oauth-callback -- --code YOUR_AUTH_CODE
.env:CANVA_ACCESS_TOKEN=your_access_token
CANVA_REFRESH_TOKEN=your_refresh_token
The skill automatically detects your Canva subscription tier and enables/disables features accordingly:
npm run canva detect-tier
| Feature | Free | Pro | Teams | Enterprise |
|---|---|---|---|---|
| Templates | 250,000 | 610,000 | 610,000 | 610,000 |
| Storage | 5 GB | 1 TB | 1 TB | Unlimited |
| Brand Kit | ✗ | ✓ | ✓ | ✓ |
| Magic Resize | ✗ | ✓ | ✓ | ✓ |
| Background Remover | ✗ | ✓ | ✓ | ✓ |
| Custom Fonts | ✗ | ✓ | ✓ | ✓ |
| Team Members | 0 | 0 | 50 | Unlimited |
| Brand Kit Sharing | ✗ | ✗ | ✓ | ✓ |
| Priority Support | ✗ | ✗ | ✓ | ✓ |
| SSO | ✗ | ✗ | ✗ | ✓ |
| API Rate Limit | 60/min | 120/min | 200/min | 300/min |
npm run canva me
# All designs
npm run canva designs
# Search designs
npm run canva designs -- --query "social media"
# Filter by ownership
npm run canva designs -- --ownership owned
npm run canva create-design -- --type presentation --title "Q1 Report"
# Export to PNG
npm run canva export -- --id DESIGN_ID --format PNG --quality high
# Export to PDF
npm run canva export -- --id DESIGN_ID --format PDF
# Check export status
npm run canva export-status -- --job JOB_ID
# List assets
npm run canva assets
# Search assets
npm run canva assets -- --query "logo" --type IMAGE
# Upload asset
npm run canva upload -- --file ./image.png --type IMAGE
# View brand colors
npm run canva brand -- --colors
# View brand fonts
npm run canva brand -- --fonts
# View brand logos
npm run canva brand -- --logos
import { getCanvaConfig } from './.github/skills/ailey-media-canva/scripts/config.js';
import CanvaClient from './.github/skills/ailey-media-canva/scripts/canva-client.js';
// Initialize client
const config = getCanvaConfig();
const client = new CanvaClient(config);
// Detect tier
const tier = await client.detectTier();
console.log(`Subscription tier: ${tier}`);
// Get current user
const user = await client.getCurrentUser();
console.log(`Hello, ${user.display_name}`);
// List designs
const designs = await client.listDesigns({ limit: 10 });
for (const design of designs.items) {
console.log(`${design.title} - ${design.urls.view_url}`);
}
// Create design
const newDesign = await client.createDesign({
design_type: 'presentation',
title: 'My Presentation',
});
console.log(`Design created: ${newDesign.urls.view_url}`);
// Export design
const exportJob = await client.exportDesign(newDesign.id, 'PDF', {
quality: 'high',
});
console.log(`Export job ID: ${exportJob.job.id}`);
// Check export status
const job = await client.getExportJob(exportJob.job.id);
if (job.status === 'success') {
console.log(`Download: ${job.urls.get_url}`);
}
// Upload asset
const asset = await client.uploadAsset('./logo.png', 'IMAGE');
console.log(`Asset ID: ${asset.asset_id}`);
// Access brand kit (Pro+ tier)
const colors = await client.getBrandColors();
for (const color of colors.items) {
console.log(`${color.hex_code} - ${color.name}`);
}
Available export formats:
The client automatically checks feature availability based on detected tier:
// This will throw an error if brand kit not available in current tier
await client.getBrandColors();
// Manual feature check
const tier = await client.detectTier();
import { checkFeatureAvailability } from './.github/skills/ailey-media-canva/scripts/config.js';
const brandKitAvailable = checkFeatureAvailability(tier, 'brandKit');
API rate limits vary by tier:
The client automatically handles rate limit errors and provides retry-after information.
All environment variables (checked in order):
~/.vscode/.env (global configuration)<workspace-root>/.env (project configuration)<workspace-root>/.env.local (local overrides)# OAuth 2.0 Authentication
CANVA_CLIENT_ID=your_client_id
CANVA_CLIENT_SECRET=your_client_secret
CANVA_REDIRECT_URI=http://localhost:3000/callback
# Access Tokens
CANVA_ACCESS_TOKEN=your_access_token
CANVA_REFRESH_TOKEN=your_refresh_token
# API Endpoints (optional, defaults shown)
CANVA_API_URL=https://api.canva.com/rest/v1
CANVA_AUTH_URL=https://www.canva.com/api/oauth
# Manual Tier Override (optional, auto-detected if not set)
CANVA_TIER=pro
# Brand and Team IDs (optional)
CANVA_BRAND_ID=your_brand_id
CANVA_TEAM_ID=your_team_id
Problem: No authentication configured
Solution: Complete OAuth setup and add CANVA_ACCESS_TOKEN to .env
Problem: Rate limit exceeded
Solution: Implement exponential backoff or upgrade subscription tier for higher limits
Problem: Feature "brandKit" is not available in free tier
Solution: Upgrade subscription to Pro or higher tier
Problem: Cannot auto-detect subscription tier
Solution: Manually set CANVA_TIER environment variable
Full API documentation: Canva Connect APIs