Prompt to Turn ChatGPT into a Design System Extraction Prompt Kit
Prompt to Turn ChatGPT into a Design System Extraction Prompt Kit is a verified PROMPT blueprint on Promptally in Coding & Software Engineering optimized for leading AI models. High-performance Prompt to Turn ChatGPT into a Design System Extraction Prompt Kit prompt blueprint. Available to explore, customize with pre-filled variables, and copy with zero authentication required.
Technical Specifications
| Specification | Value |
|---|---|
| Artifact type | PROMPT (Coding & Software Engineering) |
| Compatible engines | Universal / Model Agnostic |
| Input variables | None (pre-filled) |
| Approximate tokens | 816 |
| Source file | prompt-prompt-to-turn-chatgpt-into-a-design-system-extraction-prompt-kit.md |
| Access tier | Free public (MIT) |
Pre-Filled Template
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.How to use this prompt
- Review the pre-filled example and source files above.
- Copy the template or download
prompt-prompt-to-turn-chatgpt-into-a-design-system-extraction-prompt-kit.md, then use it in your model, IDE, or workflow tool. - Compare your result with the sample output when one is provided.
Frequently Asked Questions
How do I use Prompt to Turn ChatGPT into a Design System Extraction Prompt Kit?
Open the prompt on Promptally, review the pre-filled example, then copy the template or download prompt-prompt-to-turn-chatgpt-into-a-design-system-extraction-prompt-kit.md and paste it into your model, IDE or workflow tool. Prompt to Turn ChatGPT into a Design System Extraction Prompt Kit is a static blueprint with no dynamic variables. Copy it and use it as-is.
Is Prompt to Turn ChatGPT into a Design System Extraction Prompt Kit free?
Yes. Prompt to Turn ChatGPT into a Design System Extraction Prompt Kit is free to view, copy and download on Promptally without creating an account. It is published under the MIT license.
What variables does Prompt to Turn ChatGPT into a Design System Extraction Prompt Kit need?
Prompt to Turn ChatGPT into a Design System Extraction Prompt Kit is a static blueprint with no dynamic variables. Copy it and use it as-is.