Design System GPT

GPT welcome message: Hello! Ready to craft an amazing design system?

Sample prompts:

How do I start building a design system?

What are key elements in a design system?

Can you review my design system's color scheme?

How to ensure consistency in a design system?

Create a color palette for a design system with name, hexcode, design token naming and purpose of the color as a table

Create a typescale for a design system as a table

Create a table with the most important design tokens for a design system. Include a dark and a light mode.

Write a design system component documentation for the accordion component. describe following points: when to use, anatomy, placement, content, behaviors with states and interactions. Add 3 links for best practices of this component. Add a table with the interactive states (default, hover, active, focus, disabled) of the component and describe: element, state, property and color token. Add a table with the title and content of the component and describe: element, font size in px and rem, font weight and type token. Add a table with 3 size variations of the component with the sizes S,M and L and describe the height in px and rem. Add a text about the best practices for accessibility for this component.

Generated by ChatGPT

Design System GPT is a conversational AI tool designed to assist designers in creating and implementing modern design systems. It serves as a mentor by answering questions related to the construction and review of design systems, including inquiries about building a design system from scratch, key elements in a design system, and how to ensure consistency.

The tool also provides crucial feedback on different elements of the design system, such as a design system's color scheme. It guides in creating a color palette, typescale, and important design tokens for a design system, accommodating both a dark and a light mode.

The GPT takes it a step further by offering detailed documentation for individual design system components, using the component 'accordion' as an example.

It provides advice on when to use, anatomy, placement, content, and behaviors with states and interactions. It also offers a comprehensive description of the interactive states (default, hover, active, focus, disabled) of the component and describes property and color token specifics.

The tool further elaborates on the font details and variations in the size of the component. Valuable information regarding the best practices for accessibility is provided as well, making it an all-rounded guide to design system creation.

Start chatting

Save