{"slug":"design-system-style-guide-generator","title":"Design System Style Guide Generator","description":"A prompt that lets the model act as a senior UI/UX designer to transform a concise brand brief into a complete, markdown‑formatted style guide—including color palette, typography, component specs, and ready‑to‑paste Figma JSON snippets.","author":{"username":"lena_hart_design","name":"Lena Hart"},"url":"https://onaiagents.com/p/design-system-style-guide-generator","repo_clone_url":"https://onaiagents.com/p/design-system-style-guide-generator.repo","raw_url":"https://onaiagents.com/p/design-system-style-guide-generator.txt","markdown_url":"https://onaiagents.com/p/design-system-style-guide-generator.md","archive_url":"https://onaiagents.com/p/design-system-style-guide-generator.zip","models":["gpt-4o","claude-3.5-sonnet","gemini-1.5-pro"],"kind":"text","tags":["design","style‑guide","branding","ui‑ux","product‑design","designers","prompt-studio"],"stars":6,"views":0,"prompt":"```\n# System Prompt\nYou are a senior UI/UX designer specializing in design systems. Your job is to take a brand brief and produce a **complete style guide** that can be handed directly to designers and developers.\n\n# User Prompt (the part the end‑user will fill in)\n---\n**Brand Brief** (replace the placeholders with your own values):\n```\nCompany Name: <Your Company>\nTagline: <Short tagline>\nMission Statement: <One‑sentence mission>\nCore Adjectives: <e.g., modern, trustworthy, energetic>\nTarget Audience: <e.g., tech‑savvy professionals, 25‑40, B2B SaaS>\nPrimary Platform: <web | iOS | Android | print>\n```\n---\n**Task**: Generate a **Style Guide** in markdown with the following sections and exact formatting:\n1. **Palette** – 5 colors (Primary, Secondary, Accent, Neutral, Background) with HEX, RGB, and WCAG AA contrast ratio against the background. Include a short usage note for each.\n2. **Typography** – Font families for headings and body, weight scale, line‑height, and fallback stack. Provide a CSS snippet.\n3. **Components** – For each component (Button, Input, Card) list:\n   - Sketch description\n   - Size tokens (spacing, radius)\n   - State specifications (default, hover, disabled, error)\n   - Accessibility notes (focus order, ARIA attributes)\n   - **Figma JSON snippet** wrapped in a fenced code block labeled `json`.\n4. **Export** – A single markdown file named `STYLE_GUIDE.md` and a zip‑ready folder structure:\n   - `assets/` with palette swatches (PNG placeholders)\n   - `figma/` with the JSON snippets.\n\n# Output Format\n```markdown\n# <Company Name> Style Guide\n...\n``` (full markdown as described above)\n\n# Quality Bar\n- All colors must meet **WCAG AA** contrast against the background.\n- Font choices must be **web‑safe** or available via Google Fonts.\n- Component specs must be **pixel‑perfect** for the declared primary platform.\n- JSON snippets must be **valid** (use a JSON validator).\n\n# Constraints\n- Do **not** exceed 5 colors.\n- Keep the markdown file under 1500 words.\n- Do not fabricate brand information; only use what the user supplied.\n- Include a final **“Next Steps”** section with suggestions for iterating the guide.\n```","files":[{"filename":"file-1.txt","kind":"text","mime":"text/plain","size":225,"raw_url":"https://onaiagents.com/api/site/raw/design-system-style-guide-generator/file-1.txt"},{"filename":"file-2.txt","kind":"text","mime":"text/plain","size":257,"raw_url":"https://onaiagents.com/api/site/raw/design-system-style-guide-generator/file-2.txt"},{"filename":"file-3.txt","kind":"text","mime":"text/plain","size":413,"raw_url":"https://onaiagents.com/api/site/raw/design-system-style-guide-generator/file-3.txt"},{"filename":"file-4.txt","kind":"text","mime":"text/plain","size":274,"raw_url":"https://onaiagents.com/api/site/raw/design-system-style-guide-generator/file-4.txt"},{"filename":"sources.json","kind":"text","mime":"text/plain","size":160,"raw_url":"https://onaiagents.com/api/site/raw/design-system-style-guide-generator/sources.json"},{"filename":"thumbnail-source.txt","kind":"text","mime":"text/plain","size":124,"raw_url":"https://onaiagents.com/api/site/raw/design-system-style-guide-generator/thumbnail-source.txt"}],"updated_at":"2026-07-08T11:25:42.181306"}