Design System/Style Guide Creation
Building a Responsive Design System for Multi-Device Usability
This prompt helps teams create a design system tailored for responsive and adaptive designs across devices, including desktops, tablets, and mobile platforms. It ensures consistency in layout, components, and interactions while prioritizing usability on various screen sizes.
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 primary devices and screen sizes used by the target audience.
Review existing design assets and their adaptability across devices.
Collect analytics data to understand user behavior on different platforms.
THE PROMPT
Help create a responsive design system for [specific product or platform]. Focus on:
Breakpoints: Defining standard screen size breakpoints and guidelines for scaling layouts and components.
Grid Systems: Establishing flexible grids and spacing rules to maintain consistency across devices.
Component Adaptability: Designing reusable components (e.g., buttons, cards, forms) that adjust to different screen sizes.
Typography Scaling: Setting font size, line height, and spacing rules for readability across devices.
Touch and Interaction: Ensuring interactive elements are optimized for touchscreens and mouse-based interactions.
Provide specific recommendations for building and documenting the responsive design system. Include tools (e.g., Figma, Sketch) or frameworks (e.g., Bootstrap, Tailwind) that can facilitate the implementation. If additional details about the product’s user base or target devices are required, ask clarifying questions to refine the suggestions.
Bonus Add-On Prompts
Propose grid systems and layout rules for creating seamless transitions across breakpoints.
Suggest strategies to ensure interactive elements remain functional and intuitive on smaller devices.
Highlight best practices for testing responsive designs on various screen sizes and resolutions.
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
Tailor the design system to focus on specific platforms, such as mobile-first or desktop-heavy products.
Include accessibility considerations, such as minimum touch target sizes and contrast ratios.
Propose strategies for dynamic content resizing, such as images and videos.
Highlight multi-device testing tools, such as BrowserStack or responsive simulators.
Add guidelines for adaptive typography and scalable vector graphics.
WHEN TO USE
During the design of a product targeting users on multiple devices.
To standardize layouts and components across web and mobile platforms.
When improving an existing design system to enhance responsiveness.
WHEN NOT TO USE
If the product is only accessible on a single platform or device type.
When focusing on print or static designs with no need for adaptability.