Automated ingestion of prompt: Design System Extraction Prompt Kit

prompts/coding/design_system_extraction_prompt_kit_1435.md

@@ -0,0 +1,85 @@
+---
+title: "Design System Extraction Prompt Kit"
+contributor: "@gokbeyinac"
+tags: #coding, #gokbeyinac
+---
+
+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.