diff --git a/prompts/coding/design_system_extraction_prompt_kit_1435.md b/prompts/coding/design_system_extraction_prompt_kit_1435.md new file mode 100644 index 0000000..9909cc0 --- /dev/null +++ b/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.