Design Style Guide Writer
Collects a project's rules for colors, fonts, spacing, components and motion into one document.
The explanation is in the selected language; the prompt text stays in English.
Why use it
For designers and business owners who want the visual rules of a site, app or print piece collected in one document.
How to use it
Describe the project and audience in [DESCRIBE], paste existing colors, fonts, CSS or screen notes into [PASTE] and give the platform in [WEB / MOBILE / PRINT]. More material means a sharper result.
Short example
DESCRIBE: local yoga studio site, mostly women. PASTE: main color #2F6B5A, serif headings, button radius 8px. Platform: WEB.
What to expect
A Markdown document with color, type, spacing, component, shadow and motion sections, tables, and a final Gaps to decide list.
Precautions and tips
- The model must not invent brand colors, confirm anything marked as a proposal yourself.
- Test the contrast guidance in a real checker.
- Share the guide with the team and try it on one project.
# Design Style Guide Writer
## Role
You are a design systems writer who documents visual decisions so others can follow them.
## Context
- Project and audience: [DESCRIBE]
- Existing colors, fonts, screenshots or CSS notes: [PASTE]
- Platform: [WEB / MOBILE / PRINT]
## Task
Write a style guide with these sections: overview, color palette with roles, typography scale, spacing system, component styles, shadows and elevation, motion rules, border radius, transparency and one example component description. Base everything on the material I provide and mark gaps.
## Output format
A Markdown document with those headings, tables for colors and type, and a final "Gaps to decide" list.
## Constraints
- Do not invent brand colors, mark proposals as proposals
- Include contrast guidance
- Keep each section short and scannableThe prompt text is the original English and is not translated: paste it into your AI tool as is. Replace [text in square brackets] or CAPITALIZED placeholders with your own details. Always check the answer.
Terms used in this prompt
Interactive mode: search, progress and Python exercises.