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 Scope

Analyze 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 Inventory

For 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 Format

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