design-import

Name: design-import
Availability: InStock
Author: Anglesite

Import design tokens and page layouts from Canva or Figma into an Astro site.

2|1|Updated May 11, 2026

Search Tags:#Canva #Figma #Astro #design import #freedesignmd

Ready to run

npx skills add https://github.com/Anglesite/anglesite --skill design-import-anglesite

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: design-import
Source: https://github.com/Anglesite/anglesite/tree/main/agent-skills/design-import
Command: npx skills add https://github.com/Anglesite/anglesite --skill design-import-anglesite

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires sharp-cli, playwright, node-fetch, fs, path, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill automates the process of importing design tokens and page layouts from Canva, Figma, or freedesignmd systems, allowing you to build your Astro site more efficiently.

Core Features & Use Cases

Design Import: Import design tokens (colors, fonts, spacing) and page layouts from Canva, Figma, or freedesignmd systems.
Astro Integration: Designed for use within an Anglesite project (Astro + Keystatic, Node >=22).
Use Case: If you have a design system in Canva or Figma, you can use this Skill to import it into your Astro site, ensuring consistency and reducing manual design work.

Quick Start

Use the design-import skill to import your design from Canva by providing the Canva site URL.

Frequently Asked Questions about design-import

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I import design tokens from Figma into an Astro site?▼

To import design tokens from Figma into an Astro site, this Skill automates the extraction of colors, fonts, and spacing, mapping them directly into your site configuration to ensure design consistency without manual work.

Can I import Canva page layouts into an Astro project?▼

Yes, you can import Canva page layouts into an Astro project by providing the Canva site URL, which allows the Skill to automatically extract and map the design structure into your Astro site configuration.

Do I need Node.js to import designs from Canva or Figma?▼

Yes, you need a Node.js environment (version 22 or higher) to import designs from Canva or Figma, along with specific dependencies like sharp-cli and playwright to handle design token extraction and site configuration.

What is the best way to automate design import from freedesignmd to Astro?▼

The best way to automate design import from freedesignmd to Astro is using this Skill, which handles the extraction of design tokens and page layouts, seamlessly integrating them into your Anglesite project configuration.

What are the limitations of using sharp-cli and playwright for design import?▼

Using sharp-cli and playwright for design import requires a specific Node.js environment and an Anglesite project setup (Astro + Keystatic), meaning it is tailored for these platforms and may not suit other web frameworks.