Forensic Design Systems Audit Prompt

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.

Forensic Design Systems Audit Prompt

提示词内容收藏

用法

参考资料

讨论