Frontend Design Extractor

Overview

Extract 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.

Quick start

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 <repo_root> [out_file] [extra_glob ...] 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").

Modes (choose one)

A) Greenfield (from blank)

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.