Extract design structure and content from Canva URLs into build-spec.json.
npx skills add https://github.com/PMDevSolutions/Aurelius --skill canva-intake
Please help me install this Agent Skill. Skill: canva-intake Source: https://github.com/PMDevSolutions/Aurelius/tree/main/.claude/skills/canva-intake Command: npx skills add https://github.com/PMDevSolutions/Aurelius --skill canva-intake
This skill eliminates the tedious manual work of analyzing Canva designs to extract page structure, components, and content for app development, removing guesswork and repeated user questions from the design-to-code workflow.
Use the canva-intake skill with your Canva design URL to generate a complete build specification for your app in one step.
High-intent search queries and answers about installing and using this skill.
To convert Canva designs to code, this skill exports design screenshots, applies vision analysis to extract page structure and components, and outputs a machine-readable build-spec.json for your pipeline.
The best way to extract components from a Canva design URL is using automated vision analysis to detect visual hierarchy, reusable components, and text content, producing a standardized build specification.
Yes, you can generate a build spec for an existing React project. The skill auto-detects local frameworks, UI libraries, and design tokens to align the extracted Canva design with your codebase.
Yes, design-to-code pipeline initialization works for Chrome extensions and PWAs. It handles both new project scaffolding and integration with existing codebases using the generated build-spec.json.
Vision analysis detects page sections and visual hierarchy by leveraging Claude's vision capabilities on high-resolution screenshots exported via the Canva AI Connector, identifying all visible text and components.
No, you do not need to manually screenshot Canva pages. The skill uses the Canva AI Connector MCP to automatically export high-resolution screenshots of all design pages without manual intervention.
baekenoughAutomate Vercel deployments with framework detection and preview URL generation.
PMDevSolutionsDispatch independent build phases in parallel while respecting dependency graphs and resource constraints.
MayandevAutomate creation of production-grade frontend interfaces with structured design systems.
phoenicisfBuild or update full-page Figma screens using published design system components and tokens.
