Design System Extraction Prompt Kit

Forensic Codebase Audit Report

You are a senior design systems engineer tasked with conducting a thorough forensic audit of an existing codebase to extract every design decision embedded within it — explicit and implicit. Your goal is to produce a comprehensive, structured JSON report that documents the current state of the design system as it exists within the codebase.

Project Context

• Technology Stack:
  • Frontend Framework: [Next.js / React / Angular / Vue.js / etc.]
  • Styling Approach: [Tailwind CSS / CSS Modules / Styled Components / Custom CSS / etc.]
  • Component Library: [shadcn/ui / Material UI / Ant Design / custom / etc.]
  • Location: [Provide a specific path or indicate that files will be uploaded]

Extraction Scope and Guidelines

General Instructions

• Analyze every file in the codebase that contributes to the visual presentation of the application.
• Look for explicit design decisions (CSS variables, styled components, theme configurations) and implicit decisions (hardcoded values, inline styles, prop combinations).
• Document everything you find in the exact form it appears in the code, without attempting to reorganize or suggest improvements.
• Note inconsistencies, gaps, and anomalies that deviate from a coherent design system approach.

Report Sections

1. Color System

• Extraction: Identify every unique color value used throughout the codebase.
• Categorization: Group colors by purpose — primary, secondary, accent, neutral, semantic (success, warning, error, info), etc.
• Attribution: Note where each color is defined (CSS variables, Tailwind classes, inline styles, theme configurations).
• Documentation: Record the actual CSS variable definitions and their fallback values if present.
• Opacity and Dark Mode: Flag opacity variations and note how colors are handled in dark mode if a theme is present.

2. Typography

• Font Families: Identify all font families loaded, including fallback stacks and external imports (Google Fonts).
• Size Scale: Record every unique font size used (px, rem, em, Tailwind classes).
• Weight and Style: Document the font weights used for each family and the specific styles combined (bold, italic, underline).
• Spacing: Note line heights paired with each font size and any letter spacing values.
• Responsive Rules: Extract rules that apply different styles based on screen sizes.
• Component Mapping: Record how Typography styles are applied to components (e.g., "heading-large" = Inter 32px/700/1.2).

3. Spacing & Layout

• Spacing Scale: Identify every unique margin, padding, and gap value used.
• Container Sizes: Document container widths, max-widths, and responsive behavior.
• Grid System: Note column counts, gutter sizes, and any grid-related CSS.
• Breakpoints: Extract breakpoint definitions and the layout changes they trigger.
• Layering: Record z-index values and their apparent purposes.
• Border Radii: Note every unique border radius value used.

4. Components Inventory

For each reusable component found:

• Component Details: Record the component name, file path, and TypeScript prop interface if available.
• Variants: Document all visual variants supported (size, color, state changes).
• Internal Tokens: Note the spacing and sizing tokens used internally within the component.
• Dependencies: Identify other components this component relies on.
• Usage Count: Estimate the component's usage count across the codebase.

5. Motion & Animation

• Transitions: Record every transition duration and timing function used.
• Keyframes: Document all animation keyframes found.
• State Transitions: Note hover, focus, active state transitions for interactive elements.
• Page Transitions: Extract any global page transition patterns.
• Scroll Animations: If used, document scroll-based animations and their dependencies.

6. Iconography & Assets

• System and Size: Identify the icon system used (Lucide, Heroicons, custom SVGs) and the sizes applied.
• Variants: Document logo and favicon variants if present.

7. Inconsistencies and Anomalies

• Duplicates: Flag duplicate values that should be tokens (e.g., hardcoded colors used in multiple places).
• Conflicting Patterns: Note any conflicting design patterns within the same component or across components.
• Missing States: Document components lacking essential states like hover, focus, or disabled.
• Accessibility Gaps: Identify missing focus rings, insufficient color contrast, and other accessibility failures.

Output Format

Return a single JSON object with the following structure:

{
  "colors": { "primary": [], "secondary": [], "neutral": [], "semantic": { "success": [], "warning": [], "error": [], "info": [] } },
  "typography": { "families": [], "scale": { "fontSize": [], "lineHeight": [], "letterSpacing": [] }, "styles": [] },
  "spacing": { "scale": [], "containers": [], "breakpoints": [] },
  "components": [ { "name": "", "path": "", "props": {}, "variants": [], "usageCount": 0 } ],
  "motion": { "durations": [], "easings": [], "animations": [] },
  "icons": { "system": "", "sizes": [], "count": 0 },
  "inconsistencies": [ { "type": "", "description": "", "severity": "high|medium|low" } ]
}

Important Notes

• Do NOT attempt to organize or rename anything. Document exactly what exists in the codebase.
• Do NOT suggest token names, restructuring, or improvements. The goal is to understand the current state, not to optimize it.
• Be thorough: Look in every relevant file, including theme configurations, CSS modules, styled components, and inline styles.
• Be specific: Provide actual values and locations whenever possible.

Please produce a detailed, comprehensive JSON report based on this enhanced prompt, documenting every design-related decision found within the provided codebase.