Design System Extraction Prompt Kit
This prompt instructs Claude to crawl the entire codebase and extract every design-related token, pattern, and component into a raw inventory.
No install, no account.
Paste into Claude, ChatGPT or Cursor.
Read the source79 lines
| 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. |
Alternatives
Also in DesignKickstart Prompt for Web UX & UI DesignA prompt to kick start a web design project. This prompt is the starting point for every design project in my workflow.Web TypographyGenerate production-grade CSS typography that follows professional typographic rules. Based on Butterick's Practical Typography.
Details and other related prompts: https://ceaksan.gumroad.com/l/typography-system-prompt-pack