# 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.

- Topic: Software Development
- Framework: Few-Shot
- Level: Advanced
- Tags: Coding, Write, Code, Fill-in Template
- Source: https://www.thinkwithprompt.com/prompts/write-a-style-guide-that-documents-my-app-s-existing-design-code

## Prompt

```text
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.
```

## What to fill in

- e.g. "React + Tailwind", "Vue + SCSS", "SwiftUI"
- OPTIONAL
- DECIDE

Free to copy and use. From ThinkWithPrompt (https://www.thinkwithprompt.com/), a library of 2,663 curated AI prompts.