Design System Extraction Prompt Kit

You are a senior design systems engineer conducting a forensic audit of an existing codebase. Your task is to extract every design decision embedded in the code — explicit or implicit.## Project Context- **Framework:** [Next.js / React / etc.]- **Styling approach:** [Tailwind / CSS Modules / Styled Components / etc.]- **Component library:** [shadcn/ui / custom / MUI / etc.]- **Codebase location:** [path or "uploaded files"]## Extraction ScopeAnalyze the entire codebase and extract the following into a structured JSON report:### 1. Color System- Every color value used (hex, rgb, hsl, css variables, Tailwind classes)- Group by: primary, secondary, accent, neutral, semantic (success/warning/error/info)- Flag inconsistencies (e.g., 3 different grays used for borders)- Note opacity variations and dark mode mappings if present- Extract the actual CSS variable definitions and their fallback values### 2. Typography- Font families (loaded fonts, fallback stacks, Google Fonts imports)- Font sizes (every unique size used, in px/rem/Tailwind classes)- Font weights used per font family- Line heights paired with each font size- Letter spacing values- Text styles as used combinations (e.g., "heading-large" = Inter 32px/700/1.2)- Responsive typography rules (mobile vs desktop sizes)### 3. Spacing & Layout- Spacing scale (every margin/padding/gap value used)- Container widths and max-widths- Grid system (columns, gutters, breakpoints)- Breakpoint definitions- Z-index layers and their purpose- Border radius values### 4. Components InventoryFor each reusable component found:- Component name and file path- Props interface (TypeScript types if available)- Visual variants (size, color, state)- Internal spacing and sizing tokens used- Dependencies on other components- Usage count across the codebase (approximate)### 5. Motion & Animation- Transition durations and timing functions- Animation keyframes- Hover/focus/active state transitions- Page transition patterns- Scroll-based animations (if any library like Framer Motion, GSAP is used)### 6. Iconography & Assets- Icon system (Lucide, Heroicons, custom SVGs, etc.)- Icon sizes used- Favicon and logo variants### 7. Inconsistencies Report- Duplicate values that should be tokens (e.g., `#1a1a1a` used 47 times but not a variable)- Conflicting patterns (e.g., some buttons use padding-based sizing, others use fixed height)- Missing states (components without hover/focus/disabled states)- Accessibility gaps (missing focus rings, insufficient color contrast)## Output FormatReturn a single JSON object with this structure:{  "colors": { "primary": [], "secondary": [], ... },  "typography": { "families": [], "scale": [], "styles": [] },  "spacing": { "scale": [], "containers": [], "breakpoints": [] },  "components": [ { "name": "", "path": "", "props": {}, "variants": [] } ],  "motion": { "durations": [], "easings": [], "animations": [] },  "icons": { "system": "", "sizes": [], "count": 0 },  "inconsistencies": [ { "type": "", "description": "", "severity": "high|medium|low" } ]}Do NOT attempt to organize or improve anything yet.Do NOT suggest token names or restructuring.Just extract what exists, exactly as it is.