frontend-design-extractor
Extract reusable UI/UX design systems from frontend codebases: design tokens, global styles, components, interaction patterns, and page templates. Use when analyzing any frontend repo (React/Vue/Angular/Next/Vite/etc.) to document or migrate UI/UX for reuse across projects. Focus on UI/UX only; explicitly ignore business logic and domain workflows.
Why use this skill?
Extract and document design tokens, components, and global styles from any frontend codebase. Standardize your UI/UX and build scalable design systems.
Install via CLI (Recommended)
clawhub install openclaw/skills/skills/xsir0/frontend-design-extractorWhat This Skill Does
The frontend-design-extractor is a specialized OpenClaw agent skill designed to bridge the gap between creative design systems and frontend implementation. It automates the extraction, documentation, and standardization of UI/UX assets from existing web projects or facilitates the creation of robust design systems for new projects (greenfield). By focusing exclusively on the visual and interaction layer—tokens, components, global styles, and layout patterns—it ignores complex business logic, ensuring that the extracted intelligence is purely about the design language and component architecture. Whether you are migrating from a legacy codebase, unifying disparate UI components, or starting a fresh design system, this tool provides the scaffolding to ensure consistency, scalability, and accessibility.
Installation
You can install this skill directly via the OpenClaw terminal:
clawhub install openclaw/skills/skills/xsir0/frontend-design-extractor
Use Cases
- Design System Auditing: Identify redundant CSS, inconsistent button styles, or non-compliant typography across a large-scale React or Vue application to trigger a consolidation phase.
- Migration & Modernization: Extract UI components from a legacy project to serve as the foundation for a new UI library or Tailwind/CSS-in-JS migration.
- Greenfield Scaffolding: Automatically generate a structured directory of design tokens, layout shells, and common components (Modal, Tabs, Table) to ensure a project starts with high-quality design foundations.
- Accessibility Reporting: Use the tool to map current component states against WCAG compliance, identifying gaps in interactive elements.
Example Prompts
- "Scan the current React project in the root directory and generate a report on all existing color tokens and typography usage so we can normalize them into a central design system."
- "Extract all card and modal components from this codebase and store them in the ./ui-ux-spec folder, ensuring they are documented with their respective props and state variants."
- "We are starting a new project. Create a greenfield design system using the design tokens from our previous project, including templates for a dashboard layout and basic form elements."
Tips & Limitations
- Focus on UI Only: The extractor ignores non-visual logic. If your components are tightly coupled to data-fetching logic, manual intervention will be required to decouple them during the extraction process.
- Framework Flexibility: The tool is designed to be framework-agnostic. While it works best with modular component-based frameworks (React/Vue), it can adapt to vanilla HTML/CSS if the file structure is consistent.
- Output Hygiene: Always use
scripts/generate_output_skeleton.shbefore running major extractions to ensure your filesystem remains organized and version-control friendly. Avoid scanning large build directories likenode_modulesordistto prevent performance degradation.
Metadata
Not sure this is the right skill?
Describe what you want to build — we'll match you to the best skill from 16,000+ options.
Find the right skillPaste this into your clawhub.json to enable this plugin.
{
"plugins": {
"official-xsir0-frontend-design-extractor": {
"enabled": true,
"auto_update": true
}
}
}Tags(AI)
Flags: file-read, file-write, code-execution