This prompt instructs Claude to crawl the entire codebase

Design system extraction prompt kit

by Nureddin Gökbey İnaç · CC0-1.0 license · updated Sep 9

Overview

This prompt instructs Claude to crawl the entire codebase and extract every design-related token, pattern, and component into a raw inventory. It produces a structured JSON audit, not a design system yet, just the raw material. Run this first before any organization or documentation happens. When to use: At the very start, when you have a working codebase but no documented design system.

The prompt

79 lines · 3,266 characters · paste it into ChatGPT, Claude or Gemini

1	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.
2
3	## Project Context
4	- Framework: [Next.js / React / etc.]
5	- Styling approach: [Tailwind / CSS Modules / Styled Components / etc.]
6	- Component library: [shadcn/ui / custom / MUI / etc.]
7	- Codebase location: [path or "uploaded files"]
8
9	## Extraction Scope
10
11	Analyze the entire codebase and extract the following into a structured JSON report:
12
13	### 1. Color System
14	- Every color value used (hex, rgb, hsl, css variables, Tailwind classes)
15	- Group by: primary, secondary, accent, neutral, semantic (success/warning/error/info)
16	- Flag inconsistencies (e.g., 3 different grays used for borders)
17	- Note opacity variations and dark mode mappings if present
18	- Extract the actual CSS variable definitions and their fallback values
19
20	### 2. Typography
21	- Font families (loaded fonts, fallback stacks, Google Fonts imports)
22	- Font sizes (every unique size used, in px/rem/Tailwind classes)
23	- Font weights used per font family
24	- Line heights paired with each font size
25	- Letter spacing values
26	- Text styles as used combinations (e.g., "heading-large" = Inter 32px/700/1.2)
27	- Responsive typography rules (mobile vs desktop sizes)
28
29	### 3. Spacing & Layout
30	- Spacing scale (every margin/padding/gap value used)
31	- Container widths and max-widths
32	- Grid system (columns, gutters, breakpoints)
33	- Breakpoint definitions
34	- Z-index layers and their purpose
35	- Border radius values
36
37	### 4. Components Inventory
38	For each reusable component found:
39	- Component name and file path
40	- Props interface (TypeScript types if available)
41	- Visual variants (size, color, state)
42	- Internal spacing and sizing tokens used
43	- Dependencies on other components
44	- Usage count across the codebase (approximate)
45
46	### 5. Motion & Animation
47	- Transition durations and timing functions
48	- Animation keyframes
49	- Hover/focus/active state transitions
50	- Page transition patterns
51	- Scroll-based animations (if any library like Framer Motion, GSAP is used)
52
53	### 6. Iconography & Assets
54	- Icon system (Lucide, Heroicons, custom SVGs, etc.)
55	- Icon sizes used
56	- Favicon and logo variants
57
58	### 7. Inconsistencies Report
59	- Duplicate values that should be tokens (e.g., `#1a1a1a` used 47 times but not a variable)
60	- Conflicting patterns (e.g., some buttons use padding-based sizing, others use fixed height)
61	- Missing states (components without hover/focus/disabled states)
62	- Accessibility gaps (missing focus rings, insufficient color contrast)
63
64	## Output Format
65
66	Return a single JSON object with this structure:
67	{
68	"colors": { "primary": [], "secondary": [], ... },
69	"typography": { "families": [], "scale": [], "styles": [] },
70	"spacing": { "scale": [], "containers": [], "breakpoints": [] },
71	"components": [ { "name": "", "path": "", "props": {}, "variants": [] } ],
72	"motion": { "durations": [], "easings": [], "animations": [] },
73	"icons": { "system": "", "sizes": [], "count": 0 },
74	"inconsistencies": [ { "type": "", "description": "", "severity": "high\|medium\|low" } ]
75	}
76
77	Do NOT attempt to organize or improve anything yet.
78	Do NOT suggest token names or restructuring.
79	Just extract what exists, exactly as it is.