design-system-cli

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.