skills.rest
jgtolentino
jgtolentinoCOMMUNITY
Explore all skills by this author →
GitHub

design-system-cli

Extract design tokens, assets, and component structures from websites.

2|Updated Nov 20, 2025
Search Tags:#automation#UI/UX#code generation#design system#Playwright#reverse engineering#functional cloning
One-click install
npx skills add https://github.com/jgtolentino/design-system-cli --skill design-system-cli
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system-cli
Source: https://github.com/jgtolentino/design-system-cli/tree/main/.
Command: npx skills add https://github.com/jgtolentino/design-system-cli --skill design-system-cli

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires playwright, pixelmatch, pngjs, @google/generative-ai, and includes scripts (resource) components.

What problem does it solve?

This Skill eliminates the tedious, manual work of reverse engineering web applications. It automates the extraction of visual design systems and functional behavior, saving countless hours in development, competitive analysis, and legacy system documentation. Stop guessing, start cloning.

Core Features & Use Cases

  • Visual Cloning: Extract design tokens (colors, typography, spacing), visual assets, and generate framework-specific code (React/Tailwind, MUI). Use cases include rapidly building new UIs, creating Figma plugins, and generating AI-ready prompts for asset recreation.
  • Functional Cloning: Record user interactions, extract user flows, infer data models (entities), and identify business rules (state machines, validations). Use cases include reverse engineering SaaS applications, documenting undocumented legacy systems, and generating functional app scaffolds (Next.js).
  • Hard Fork & Rebrand: Transform extracted sites into legally clean, brand-neutral templates by stripping brand names, shifting color palettes, and renaming components, ensuring compliance and reusability.

Quick Start

Clone the entire visual and functional behavior of the web application at https://www.gradual.com, generating a Next.js app scaffold.

Frequently Asked Questions about design-system-cli

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

FAQPage Schema
How do I extract design tokens and visual assets from a website automatically?▼

Design-system-cli extracts design tokens (colors, typography, spacing) and visual assets from any website using Playwright-based automation, normalizing them into structured formats ready for code generation or Figma plugins without manual reverse engineering.

Can I generate framework-specific code from a cloned website's design system?▼

Yes. After extracting design tokens and components, the Skill generates production-ready code for React with Tailwind, React with MUI, or Vue with Tailwind, eliminating manual coding of UI frameworks from extracted designs.

What's the best way to reverse engineer a SaaS application's user flows and data models?▼

Functional cloning records user interactions via Playwright, extracts workflows, infers data entities and business rules, then generates a Next.js scaffold—automating the documentation of undocumented legacy systems and SaaS behavior.

How do I create a brand-neutral version of an extracted website design?▼

Hard fork and rebrand functionality strips brand identifiers, shifts color palettes, and renames components to produce legally clean, reusable templates from any extracted site.

Can I use Playwright and AI together to regenerate visual assets from a cloned design system?▼

Yes. The Skill uses Playwright for extraction and Google's generative AI for asset prompting and generation, combining visual inspection with AI-driven asset recreation to build complete design catalogs.

Do I need to manually code components after extracting a website's design system?▼

No. The extraction pipeline normalizes tokens and component structures, then auto-generates framework-ready components in React, Vue, or as Figma plugin assets—eliminating manual component authoring.

Related Skills

Explore More Software Engineering Skills→
CENKSSSCENKSSS

visual-testing-advanced

Automate visual regression testing with pixelmatch and AI diff analysis.

Community
Advanced
kobogithubkobogithub

uiux-pixelmatch

Compare PNG screenshots against design exports using pixelmatch for visual regression testing.

Community
Advanced
aquariuscookaquariuscook

visual-testing-advanced

Compare screenshots across viewports and browsers to detect visual regressions.

Community
Advanced
e2662020e2662020
1

web-shader-extractor

Extract WebGL, Canvas, and shader effects from websites into standalone JavaScript projects.

Community
Advanced