Design System/Style Guide Creation
Establishing Component Documentation Standards
This prompt helps teams create detailed documentation standards for components in a design system. It ensures components are clearly described, with usage guidelines, visual examples, and code snippets, enabling seamless collaboration between design and development teams.
Responsible:
Product Design
Accountable, Informed or Consulted:
Design, Product, Engineering
THE PREP
Creating effective prompts involves tailoring them with detailed, relevant information and uploading documents that provide the best context. Prompts act as a framework to guide the response, but specificity and customization ensure the most accurate and helpful results. Use these prep tips to get the most out of this prompt:
Identify the core components that require documentation.
Review current workflows between design and development teams.
Evaluate existing documentation tools and their capabilities.
THE PROMPT
Help establish documentation standards for components in [specific product or design system]. Focus on:
Component Descriptions: Writing clear, concise explanations of each component’s purpose and functionality.
Visual Examples: Including annotated visuals or prototypes that demonstrate the component in different states (e.g., default, hover, disabled).
Usage Guidelines: Defining do’s and don’ts for when and how to use the component.
Code Snippets: Providing implementation-ready code examples for developers, with notes on customization options.
Platform Variations: Documenting differences in behavior or appearance across platforms (e.g., mobile vs. desktop).
Provide detailed recommendations for organizing and maintaining component documentation, including tools (e.g., Storybook, Zeroheight, Notion) to host the documentation. If additional details about team workflows or target platforms are needed, ask clarifying questions to refine the suggestions.
Bonus Add-On Prompts
Propose a template structure for documenting components, including visuals, code, and accessibility notes.
Suggest tools for integrating design and development workflows into component documentation.
Highlight best practices for keeping component documentation up-to-date as the system evolves.
Use AI responsibly by verifying its outputs, as it may occasionally generate inaccurate or incomplete information. Treat AI as a tool to support your decision-making, ensuring human oversight and professional judgment for critical or sensitive use cases.
SUGGESTIONS TO IMPROVE
Focus on specific types of components, such as form elements or interactive widgets.
Include guidelines for documenting accessibility features and considerations.
Highlight modular approaches to documentation for easier updates.
Propose naming conventions and categorization for easier navigation.
Add suggestions for testing documentation clarity with new team members or external developers.
WHEN TO USE
During the creation or update of a design system.
To improve collaboration and handoffs between design and development teams.
When onboarding new team members or external collaborators to the design system.
WHEN NOT TO USE
If the product does not involve reusable components.
When focusing solely on aesthetic aspects of a design system.