Write a style guide that documents my app's existing design code
Reverse-engineers colors, typography, spacing, and component patterns from your codebase into a STYLE_GUIDE.md developers and AI agents can follow.
The prompt
Write a STYLE_GUIDE.md that documents the design system already in my code, so developers and AI coding agents build new UI that matches.
Stack: [e.g. "React + Tailwind", "Vue + SCSS", "SwiftUI"]
Source files: [PASTE the Tailwind/theme config, global CSS, design tokens, and 3-5 representative components]
Known inconsistencies or legacy patterns to avoid: [OPTIONAL]
Document only what the code actually shows. Where values conflict (e.g. three different grays used for borders), list them, recommend which one to standardize on, and mark it [DECIDE].
Sections:
1. Overview - the visual character in 2-3 sentences and the main rules.
2. Color palette - token names, values, and where each is used (background, text, border, accent, states); light and dark mode if present.
3. Typography - font families, size scale, weights, line heights, and which to use for headings, body, labels, and code.
4. Spacing and layout - spacing scale, container widths, breakpoints, grid conventions.
5. Border radius, shadows, and elevation - values and when to use each.
6. Opacity and transparency - values in use.
7. Motion - durations, easing, and what animates.
8. Components - for buttons, inputs, cards, modals, and anything else found: variants, states (hover, focus, disabled, error), and the exact classes or styles.
9. Common utility patterns - the class combinations that recur, written as copy-ready snippets.
10. Do and don't - rules that prevent drift, including accessibility (focus styles, contrast).
End with one example component written to the guide, and a short list of inconsistencies found in the code.
Highlighted [brackets] are blanks to replace with your own details.
Fill in the blanks and use this promptMore Software Development prompts
What to fill in
- e.g. "React + Tailwind", "Vue + SCSS", "SwiftUI"
- OPTIONAL
- DECIDE
How this prompt is built
This prompt follows the Few-Shot structure (Few-shot prompting). A few-shot prompt includes one or more worked examples of the input and the output you want, so the model can copy the pattern instead of guessing it.
Related prompts
- Write precise TypeScript types for my data and APIsSafer, readable TypeScript types that rule out impossible states, replace unsafe casts, and come with compile-time tests.
- Write a Semgrep rule to catch a risky code patternProduces a working Semgrep rule with test cases, so you can block a bug or security pattern across your codebase.
- Find and fix a race condition or concurrency bugAnalyzes code for race conditions, deadlocks, and lost updates, explains the exact interleaving that fails, and proposes a safe fix.
- Write documentation, a README, or API docsGenerates clear technical documentation from your code or notes.