An automated tool for extracting and documenting UI/UX design systems from frontend codebases while stripping away business logic.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install frontend-design-extractor
2. Manual Installation
Copy the skill folder to one of these locations
~/.openclaw/skills/ <project>/skills/ Priority: Workspace > Local > Bundled
3. Prompt Installation
Copy this prompt to OpenClaw to install it automatically.
Help me install frontend-design-extractor using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).
Prefer to download?
Get the raw skill files in a ZIP archive.
What is Frontend Design Extractor?
The Frontend Design Extractor is a specialized utility within the Openclaw Skills ecosystem designed to reverse-engineer comprehensive design systems from existing frontend repositories. It focuses exclusively on UI/UX elements—such as design tokens, global styles, and component patterns—while intentionally ignoring domain-specific business logic. This makes it an essential asset for developers looking to document legacy systems, migrate to new frameworks, or establish a clean design foundation for greenfield projects.
By automating the discovery of UI sources, this skill allows teams to create a single source of truth for their design language. Whether you are working with React, Vue, Angular, or Vite, the tool adapts to the target stack to generate a standardized specification that can be used for refactoring or as a starter kit for new development. Utilizing Openclaw Skills like this ensures that design consistency is maintained throughout the software development lifecycle.
Frontend Design Extractor Use Cases
- Extracting design tokens and component catalogs from legacy React, Vue, or Angular projects.
- Generating a reusable UI/UX specification for migrating a project to a new frontend framework.
- Documenting existing UI patterns and accessibility gaps to plan incremental refactors.
- Creating a greenfield UI starter kit based on proven design foundations and layout shells.
- Standardizing design systems across multiple repositories by identifying shared interaction patterns.
How Frontend Design Extractor Works
- Initialize the process by choosing between a greenfield setup or a refactor mode for an existing repository.
- Execute the scan script to identify UI sources, theme providers, and component wrappers without assuming a fixed directory layout.
- Document foundational design tokens including colors, typography, spacing, radius, and motion behaviors.
- Catalog individual UI components, capturing their variants, states, interactions, and accessibility attributes.
- Map page templates and layout rules to define how components are composed into functional views.
- Package all findings into a structured directory (defaulting to ui-ux-spec) that serves as the official design system documentation.
Frontend Design Extractor Setup
To begin using this tool among your Openclaw Skills, follow these steps:
- Ensure you have the skill files available in your agent's environment.
- To scan an existing codebase for UI sources, run the following command in your terminal:
./scripts/scan_ui_sources.sh <repo_root> [out_file]
- To scaffold the standard documentation directory structure, use the skeleton generator:
./scripts/generate_output_skeleton.sh [out_root]
- Confirm the output folder (default ./ui-ux-spec) is created and ready for data population.
Frontend Design Extractor Data Schema & Taxonomy
The skill organizes extracted data into a dedicated directory with a standardized taxonomy to ensure clarity and reusability:
| Folder | Description |
|---|---|
| 01_Foundation | Design tokens (colors, type, spacing, shadows) and global styles. |
| 02_Components | Detailed catalog of UI components with variants, states, and slots. |
| 03_Patterns | Reusable interaction patterns, loading strategies, and layout rules. |
| 04_Pages | Skeleton templates and module ordering for page-level views. |
| 05_A11y | Accessibility documentation, focus-visible rules, and compliance gaps. |
| 06_Assets | References to icons, images, brand assets, and i18n sources. |
| 07_Engineering_Constraints | Framework-specific implementation notes, naming conventions, and CSS architecture. |
Frontend Design Extractor Advanced Features
- Automated UI source discovery via flexible glob patterns and keyword scanning that ignores build artifacts.
- Framework-agnostic analysis capable of processing React, Vue, Angular, Next.js, and Vite stacks.
- Phased refactor planning that enables low-risk, incremental UI updates without impacting underlying business logic.
- Support for multi-agent workflows through structured prompt templates for component-level or global refactors.
- Integration with Storybook or existing documentation sites to enrich the extracted component catalog.
- Detailed accessibility gap identification to ensure extracted components meet modern inclusive design standards.
SKILL.md
Loading
Related Openclaw Skills
Wan Image Generation
A professional AI tool for generating high-resolution images via Alibaba's wan2.6-t2i model with automated local storage and cloud hosting.
OpenClaw Mem0 Plugin
A sophisticated memory integration that enables AI agents to remember user preferences, facts, and conversation history across multiple sessions.
MuskInsider Pro
A minimal HTTP service providing Elon Musk news briefings and demonstration payment integration for AI agents.
Triple Memory System with Baidu Embedding
A three-tier memory architecture combining Baidu-powered vector recall, structured Git-Notes, and local workspace search.
Gemini Multimodal Media (Image/Video/Speech)
A powerful integration for Google Gemini that enables end-to-end multimodal workflows including image generation, video synthesis, and speech-to-text capabilities.
LiblibAI Image & Video Generation Skill
A comprehensive tool for generating professional AI images and videos using Seedream 4.5 and Kling models via the LiblibAI API.
Featured*
