canva-token-inference

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.