86 lines
3.3 KiB
Markdown
86 lines
3.3 KiB
Markdown
|
---
|
||
|
|
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.
|