developer data_extraction template risk: low

Codebase Design System Forensic Auditor

Instructs the model to act as a senior design systems engineer conducting a forensic audit of a codebase to extract design decisions including colors, typography, spacing, componen…

PROMPT

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.

INPUTS

Framework REQUIRED

Framework used (e.g., Next.js / React / etc.)

e.g. Next.js

Styling approach REQUIRED

Styling method (e.g., Tailwind / CSS Modules / etc.)

e.g. Tailwind

Component library REQUIRED

Component library (e.g., shadcn/ui / custom / etc.)

e.g. shadcn/ui

Codebase location REQUIRED

Path or location of codebase (e.g., uploaded files)

e.g. uploaded files

REQUIRED CONTEXT

codebase

OPTIONAL CONTEXT

framework
styling approach
component library

ROLES & RULES

Role assignments

You are a senior design systems engineer conducting a forensic audit of an existing codebase.

Do NOT attempt to organize or improve anything yet.
Do NOT suggest token names or restructuring.
Just extract what exists, exactly as it is.

EXPECTED OUTPUT

Format

json

Schema

json_schema · colors, typography, spacing, components, motion, icons, inconsistencies

Constraints

single JSON object
exact extraction only
no organization or improvements
no token suggestions

SUCCESS CRITERIA

Extract every color value used and group by categories
Extract typography details including families, sizes, weights, and styles
Extract spacing scale, containers, and breakpoints
Inventory reusable components with name, path, props, variants
Extract motion and animation details
Extract iconography details
Report inconsistencies with type, description, and severity

FAILURE MODES

May organize or improve extracted data instead of raw extraction
Might miss implicit design decisions in code
Could fail to accurately count usages or dependencies without full codebase
May not correctly group or flag inconsistencies

CAVEATS

Dependencies

Requires the entire codebase for analysis
Requires project context details like framework, styling approach, component library, and codebase location

Missing context

Actual codebase files or path
Filled project context (framework, styling approach, component library)

QUALITY

OVERALL: 0.90
CLARITY: 0.90
SPECIFICITY: 0.95
REUSABILITY: 0.90
COMPLETENESS: 0.85

IMPROVEMENT SUGGESTIONS

Use templating syntax like {{framework}} for placeholders to enhance reusability.
Add guidance on inferring color groups (e.g., 'Infer semantic groups based on usage context like buttons or alerts').
Specify approximation method for component usage count (e.g., 'grep/search-based count').
Define severity criteria for inconsistencies (e.g., 'high: affects multiple components').

USAGE

Copy the prompt above and paste it into your AI of choice — Claude, ChatGPT, Gemini, or anywhere else you're working. Replace any placeholder sections with your own context, then ask for the output.