skillui-workflow

Extract design system components from websites, projects, and Git repositories using SkillUI CLI.

Updated Apr 17, 2026

Search Tags:#design-tokens #design-systems #token-generation #local-projects #skillui #reference-extraction

Ready to run

npx skills add https://github.com/Lutimi/claude2figma --skill skillui-workflow

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: skillui-workflow
Source: https://github.com/Lutimi/claude2figma/tree/main/.cursor/skills/skillui-workflow
Command: npx skills add https://github.com/Lutimi/claude2figma --skill skillui-workflow

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This SkillUI workflow automates the extraction of design systems from references (live sites, repos, or local directories) and translates them into reusable guidance for local projects.

Core Features & Use Cases

Pick a target source: live website, local project, or git repository, and run SkillUI to extract a design system.
Output is saved under ./design-systems/<reference-name> with artifacts like DESIGN.md, SKILL.md, tokens/.json, and references/.md.
Use cases include turning design tokens and components into reusable assets for teams and future projects.

Quick Start

Run SkillUI to extract a design system from a target URL or local directory and save the results to ./design-systems/<reference-name>.

Frequently Asked Questions about skillui-workflow

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

FAQPage Schema

How do I extract design tokens from a live website?▼

The SkillUI CLI automates the extraction of design tokens from live websites by targeting a URL and saving the generated artifacts locally. Output includes structured JSON token files and reference notes organized under the ./design-systems directory.

Can I generate a design system from a local project directory?▼

Yes, you can generate a design system from a local project directory by running the SkillUI CLI against your local path. The workflow processes local project files to output DESIGN.md, SKILL.md, and structured token JSON files for reusable guidance.

Do I need Node.js to extract design system components from Git repositories?▼

Yes, Node.js 18+ and the SkillUI CLI are required prerequisites to extract design system components from Git repositories. These environment dependencies enable the automated workflow that translates repository references into local design guidance.

What is the best way to turn design tokens into reusable assets for teams?▼

Automating reference extraction with the SkillUI workflow turns design tokens into reusable assets for teams. It generates structured documentation like DESIGN.md and JSON token files, standardizing the design system for future projects.

What files are generated when extracting a design system from a reference?▼

Extracting a design system generates DESIGN.md, SKILL.md, tokens/*.json, and references/*.md files. These artifacts are automatically organized under ./design-systems/<reference-name> to provide comprehensive design guidance and structured component data.