skills.rest
Lutimi
LutimiCOMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/Lutimi/claude2figma --skill skillui-workflow
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
mathruffian-dotmathruffian-dot
70

codex-env-setup

Set up Codex environments across desktop, CLI, and IDE extensions.

Community
Intermediate
vikingokftvikingokft

stitch::extract-design-md

Extract a Stitch-compatible DESIGN.md from frontend source code.

Official
Intermediate
erikliebeneriklieben
7

meta-contribute-back

Package skill adaptations into contribution branches in the agentic-workflow repository.

Community
Advanced
chuan-khunachuan-khuna
3

extract

Identify reusable UI patterns and plan their consolidation into a design system.

Community
Intermediate