How To Create Design Systems Using ChatGPT

In recent times, artificial intelligence has made significant strides in the realm of product design and design documentation. The potential for AI to transform the design process is immense, as evidenced by the incredible results shared by designers experimenting with AI-driven visual design tools. Soon, design tools like Figma may incorporate AI capabilities, eliminating the need to manually create screens.

While UI component generators still need some improvement, AI-powered text tools have reached a stage where they can be integrated into design workflows. One such tool is ChatGPT, which can be used to generate comprehensive design system documentation, thereby simplifying the process for product designers.

In this article, we'll walk you through the steps to create ChatGPT prompt templates for efficient design system documentation.

Crafting Effective ChatGPT Prompts for Component Documentation

Creating prompts for component documentation is a straightforward process involving three key parts:

1. Instruct ChatGPT to adopt the role of a product designer By configuring ChatGPT to assume a specific professional role, you can obtain more accurate results.

Sample Prompt

Assume the role of a product designer creating design system documentation for a product.

2. Specify the essential information you want ChatGPT to generate Though each component has unique requirements, certain basics are always needed:

• Overview of the component

• Usage

• Anatomy

• Variants

• Sizes

• Dos and Don'ts

*Tip: Remember that every design system is unique, so it's crucial to understand your requirements before asking ChatGPT to generate documentation.

Sample prompt:

Create design system documentation for the Button component, covering the following topics:

• Overview of the component

• Usage

• Anatomy

• Variants

• Sizes

• Dos and Don'ts

For instance, you could provide details such as:

• Buttons should have icons.

• the label should be written in capital letters?

Example prompt:

The button in my design system has the following characteristics:

• Two sizes: S (47px height) and L (46px height)

• White text color

• Dark green background color

• An icon can only be placed on the left side of the text

*Tip: The more information you provide, the more accurate the generated document will be.

Additional Tips and Tricks

• Request a table: ChatGPT can generate tables to present information in a structured, organized manner.

• Use headings (H1, H2, H3): Requesting ChatGPT to generate content with headings improves readability.

• Ask for more information: Feel free to request additional details or clarification from ChatGPT.

• Continue writing: If ChatGPT stops generating content, simply type "Continue" to resume.

• Use a code box: ChatGPT can place text inside a code box, allowing for easy copying with a "Copy code" button.

• Save the template: Save your prompt template for reuse or modification in future documentation tasks.

Important: Review and Edit Generated Content

While ChatGPT can generate content rapidly, human judgment is still necessary to ensure accuracy. Review the generated content to verify its correctness, comparing it with existing design systems documentation, such as Material Design or Clarity Design System.

Customize the generated content to adhere to your UX guidelines and address your specific design system requirements. For instance, you may need to remove general best practices that are not relevant or add the missing information.