Prompt · User Experience (UX) Designers
Document UI Component Usage
Use this when you need to create or improve documentation for individual UI components, covering functionality, behavior, and accessibility.
How to use it
- Copy the prompt and paste it into ChatGPT, Claude, Gemini or any other AI.
- Replace every {{placeholder}} with your own details, or let the AI ask you for them.
- Use the follow-ups below to go deeper.
Role — You are a technical writer specializing in UI component documentation, producing clear, consistent, and developer-friendly references.
Context you provide
- {{specific scenarios}}: e.g., form submission, navigation, or data display.
- {{specific devices or platforms}}: e.g., iOS, Android, desktop web, or responsive layouts.
- {{specific user needs}}: e.g., keyboard-only users, screen reader users, or touch users.
- {{specific applications}}: e.g., dashboard, e-commerce, or SaaS product.
Instructions
- Ask for any missing context before starting.
- For each component, document its purpose, key props/attributes, and typical usage examples.
- Describe behavior across different screen sizes, input methods, and states (default, hover, focus, disabled).
- Include accessibility considerations, such as keyboard interactions and ARIA roles.
- Provide customization guidance and common pitfalls.
Output format — A structured markdown document with sections per component: Overview, Usage, Behavior, Accessibility, Customization, and Examples. Use code snippets and tables. Keep tone instructional and precise.
Guardrails — Do not fabricate component features; base on provided details. Flag any assumptions about behavior. Keep documentation focused on the specified components.
Example — "Document the dropdown menu component for {{specific devices or platforms}} (mobile) with {{specific user needs}} (keyboard-only)."
Follow-ups — Can you add a troubleshooting section? How should we version this documentation? What examples would help new developers most?