frontend-design-extractorExtract 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.
Install via ClawdBot CLI:
clawdbot install Xsir0/frontend-design-extractorExtract a reusable UI/UX design spec from a frontend codebase by inventorying UI sources, documenting foundations, cataloging components, and capturing page-level patterns and behaviors. Exclude business logic and domain-specific workflows. Framework-agnostic: adapt to the actual stack in the target repo.
1) Confirm mode: new project (greenfield) or refactor existing. Clarify that business logic is out of scope.
2) If existing repo: run scripts/scan_ui_sources.sh to scan the repo root (no directory layout assumptions). It uses common globs + keyword hits, and ignores common build/cache dirs and extraction output folders by default.
3) Optionally: scripts/scan_ui_sources.sh or --root/--out/--ignore for nonstandard layouts.
4) Create the output folder (default ./ui-ux-spec) via scripts/generate_output_skeleton.sh and write all extraction results inside it.
5) Produce outputs in the default structure (see "Output structure").
Goal: create a reusable UI/UX foundation and starter UI without business logic.
1) Define foundations: tokens (color/typography/spacing/radius/shadow/motion), global styles, breakpoints, layout shell.
2) Create a baseline component set: Button, Input, Select, Card, Modal, Table/List, Tabs, Toast, EmptyState.
3) Create page templates: list/detail/form/dashboard skeletons with placeholder data.
4) Provide implementation notes for the target framework (CSS architecture, theming mechanism, file structure).
5) Optionally run scripts/generate_output_skeleton.sh [out_root] to scaffold folders and empty templates. Default output root is ./ui-ux-spec.
Deliverables:
Goal: extract current UI/UX, normalize tokens, and plan safe, incremental improvements.
1) Inventory UI sources (scan script + manual inspection).
2) Normalize tokens and map existing styles to them.
3) Identify high-impact components/patterns for first pass.
4) Plan migration with minimal diffs (wrappers, theme adapters, gradual replacement).
5) Document behavioral and a11y gaps to fix progressively.
Deliverables:
Use this when applying an existing ui-ux-spec/ to a target project. Always work from a plan and execute step-by-step to avoid missing gaps.
Use one of the templates below to keep requests precise and plan-driven.
Please refactor the existing project based on this UI/UX spec:
- Project path: /path/to/target-project
- Spec path: /path/to/ui-ux-spec
- Goal: UI/UX only (tokens, styles, components, layout), do not change business logic/APIs
- Scope: start with global styles + base components
- Constraints: minimal changes, small-step commits, reversible
- Deliverables: refactor plan + actual code changes + list of impacted filesPlease refactor UI/UX in phases; only do Phase 1:
- Project path: /path/to/target-project
- Spec path: /path/to/ui-ux-spec
- Phase 1: align tokens + global styles (colors/typography/spacing/radius/shadows)
- Do not change: business logic/routing/APIs
- Deliverables: list of changed files + alignment diff notesPlease align the following components to the spec while keeping business logic unchanged:
- Project path: /path/to/target-project
- Spec path: /path/to/ui-ux-spec
- Component list: Button, Input, Modal, Table
- Goal: only change styling/structure/interaction details
- Deliverables: alignment notes per component + code changesui-ux-spec/).This structure is a recommended documentation layout. It does not need to match the target project's directory structure, and it can be renamed or relocated (e.g., docs/ui-ux-spec/).
ui-ux-spec/
01_Foundation/
02_Components/
03_Patterns/
04_Pages/
05_A11y/
06_Assets/
07_Engineering_Constraints/scripts/scan_ui_sources.sh: find candidate UI sources in a repo.scripts/generate_output_skeleton.sh: create the standard output folders and placeholder templates.references/design-extraction-checklist.md: detailed checklist derived from README.Generated Mar 1, 2026
A fintech startup with a React-based web app needs to migrate from an inconsistent, ad-hoc styling approach to a unified design system to improve development speed and brand consistency. The skill extracts existing UI patterns, normalizes design tokens, and creates a migration plan for incremental adoption without disrupting core financial transaction logic.
An e-commerce company using Vue.js wants to build a reusable component library from their existing product pages and checkout flows to standardize UI across multiple storefronts. The skill inventories components like buttons, modals, and cards, documenting variants and accessibility gaps while excluding backend integration and payment processing logic.
A healthcare provider has an outdated Angular application with fragmented styles and poor accessibility. The skill analyzes the codebase to extract design tokens and global styles, enabling a phased refactor to meet WCAG standards and create a maintainable UI spec, ensuring compliance without altering patient data workflows.
A media company with separate Next.js web and React Native mobile apps seeks to unify their UI/UX design systems for consistency. The skill extracts reusable patterns like color schemes, typography, and interaction behaviors from both codebases, focusing on visual elements while ignoring content delivery and user authentication logic.
A SaaS startup building a new analytics dashboard with Vite needs a scalable UI foundation from scratch. The skill defines design tokens, creates baseline components like tables and charts, and provides page templates, enabling rapid prototyping without embedding business logic for data processing or user management.
Offer specialized UI/UX extraction and migration services to clients, charging per project or hourly. This model leverages the skill to analyze codebases, deliver design specs, and guide refactoring, generating revenue from expertise in frontend modernization and design system implementation.
Develop and sell a SaaS platform that automates the extraction process, providing users with self-service scans, spec generation, and migration planning. Revenue comes from monthly or annual subscriptions, targeting teams needing ongoing UI consistency across multiple projects.
Partner with digital agencies to integrate the skill into their service offerings for web development and redesign projects. This model generates revenue through referral fees or white-label solutions, helping agencies deliver faster, more consistent UI outcomes without in-house expertise.
💬 Integration Tip
Integrate this skill early in project planning to define UI constraints and avoid costly refactors later; use the provided scripts for automated scanning to save time on manual code inspection.
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
Expert frontend design guidelines for creating beautiful, modern UIs. Use when building landing pages, dashboards, or any user interface.
Use when building UI with shadcn/ui components, Tailwind CSS layouts, form patterns with react-hook-form and zod, theming, dark mode, sidebar layouts, mobile navigation, or any shadcn component question.
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when building web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
Create distinctive, production-grade static sites with React, Tailwind CSS, and shadcn/ui — no mockups needed. Generates bold, memorable designs from plain text requirements with anti-AI-slop aesthetics, mobile-first responsive patterns, and single-file bundling. Use when building landing pages, marketing sites, portfolios, dashboards, or any static web UI. Supports both Vite (pure static) and Next.js (Vercel deploy) workflows.
AI skill for automated UI audits. Evaluate interfaces against proven UX principles for visual hierarchy, accessibility, cognitive load, navigation, and more. Based on Making UX Decisions by Tommy Geoco.