Develop Design System Documentation
ChatGPT Prompt
Write documentation for a design system supporting {product_type} across {platforms}. Structure it in three layers: foundations (colour, type, spacing, elevation, motion — all as named tokens, never raw values), components, and patterns. For each component document the anatomy, every variant and state including loading, empty, error and disabled, the props or parameters, accessibility requirements with keyboard behaviour and ARIA, responsive behaviour, and — most importantly — when NOT to use it and what to use instead. Add contribution guidelines, a deprecation process with migration paths, and versioning rules. Write for a developer who arrives via search and reads one page, not the whole site.
💡 Pro Tip: Replace placeholders in [BRACKETS] with your specific information for best results.
How to Use This Prompt
- 1Click the copy button above to copy the prompt to your clipboard
- 2Open ChatGPT, Claude, or your preferred AI assistant
- 3Paste the prompt and replace any [PLACEHOLDER TEXT] with your specific details
- 4Review the AI's response and iterate if needed for better results
Related Tags
Related Prompts
Technical Documentation Template
Create a technical documentation template for {project_type}. Structure it for someone arriving via search who will read exactly one page, not the whole site. Cover: what this is and what problem it solves in two sentences, when to use it and when not to, a quickstart that works end to end in under five minutes, core concepts with the vocabulary defined once, task-based how-to guides, an API or configuration reference, troubleshooting organised by the symptom the user observes rather than the underlying cause, and an architecture section for contributors. Specify which sections are mandatory, how code examples are kept runnable and tested, the review trigger that catches documentation drifting from behaviour, and the ownership model that stops it rotting.
Create User Personas
Build 3–4 user personas for {product} based on {research_source}. For each persona give: the job they are trying to get done, their current workaround and why it persists, the trigger that makes them look for something new, their success criteria in their own words, the objection that stops them adopting, and their technical comfort level. Ground every attribute in observed evidence and mark clearly anything that is an assumption to be validated. Skip demographic decoration — age, marital status and stock-photo names — unless it genuinely changes a design decision. Finish with the one design implication per persona and the question that would invalidate it.
Write a UX Audit Report
Write a UX audit of {site_or_app} focused on {primary_user_goal}. Evaluate against Nielsen's ten heuristics plus accessibility (WCAG 2.2 AA), then walk the three highest-value task flows end to end and note every point of friction, dead end and moment of uncertainty. For each finding give: the screen or step, the heuristic or guideline violated, the user consequence in behavioural terms, a severity rating with the reasoning, the recommended fix, and implementation effort. Separate findings that cost conversions from findings that are merely inelegant. Lead the report with the five fixes that would move the primary metric, and state what you could not assess without analytics or session data.
Design a Wireframe Annotation Guide
Create a wireframe annotation guide for {team_type}. Define what every wireframe must annotate: element purpose, data source and what happens when it is empty or still loading, interaction behaviour on click, hover and keyboard, validation and error messaging, conditional visibility rules, and navigation destinations. Establish a consistent numbering and callout convention, a rule for how much detail belongs at low versus high fidelity, and guidance on annotating what is intentionally undecided so it reads as an open question rather than an oversight. Include one fully annotated example screen and one common anti-pattern — the wireframe that looks complete but leaves every edge case to the developer's imagination.
Create Accessibility Guidelines
Write practical accessibility guidelines for {platform} targeting WCAG 2.2 AA. Organise by the work people actually do rather than by success criterion number: writing content, choosing colour, building forms, handling focus and keyboard navigation, images and media, motion and animation, and dynamic updates. For each area give the requirement, a correct and an incorrect code example, how to test it manually in under a minute, and which automated tool catches it (noting that automation finds roughly a third of issues). Include a definition of done for design, code review and QA. Add a short section on why each requirement exists in terms of a real user need, since teams comply better with rules they understand.
Write a Design Critique Framework
Design a critique framework for a {team_size} design team. Define the format: the presenter states the problem, the constraints and the specific feedback they want before showing anything; reviewers ask clarifying questions before offering opinions; feedback is tied to the stated goal rather than personal taste. Give sentence stems that produce useful critique ('I noticed X, which might make a user think Y') and name the patterns to stop — solutioning in the room, relitigating settled decisions, and the most senior person speaking first. Cover facilitation, timeboxing, how decisions and open items are recorded, and how to run this asynchronously for distributed teams.