What problem does it solve?
Canva does not expose design data via public APIs, making manual extraction of design tokens from screenshots tedious, time-consuming, and prone to human error. This skill eliminates that friction by using AI vision to automatically infer design tokens from Canva or general design screenshots.
Core Features & Use Cases
- AI Vision Token Inference: Analyzes screenshots to extract colors, typography, spacing, border radii, shadows, and other visual styling with confidence scoring for each value.
- User Confirmation Workflow: Presents extracted tokens grouped by category, flagging medium and low confidence values for user review and correction before finalizing.
- Pipeline Integration: Generates standardized design token lockfiles and framework-specific styling configurations (Tailwind CSS for web, NativeWind for React Native) that plug directly into the Aurelius app build pipeline.
- Use Case: If you are building a React app from a Canva design, use this skill to automatically pull all design tokens without manually identifying hex codes, font sizes, or spacing values from screenshots.
Quick Start
Use the canva-token-inference skill to extract design tokens from your Canva design screenshots and generate a ready-to-use Tailwind config for your project.
