Speed Up Your Design System Documentation: How Chat GPT is Changing the Game

Unlocking the full potential of your design system with the power of chat GPT

In my last newsletter, I talked about how Chat GPT can generally help with design systems. This time, I want to get specific and focus on how it can revolutionize documentation for design systems.

The Pain of Documentation

As a designer, I know all too well the pains of having to spend countless hours writing documentation for design system components. It's a tedious and monotonous task that can feel like a form of "information-slavery." It drains my time and energy, taking away from the things I love most about my job: creating beautiful and functional designs. But, thanks to chat GPT, I no longer have to slave away at documentation. It liberates me, allowing me to focus on the creative and fulfilling aspects of my job, while automating the repetitive and monotonous tasks. And in the end, this leads to a better user experience, which is truly what matters.

How can Chat GPT help with the design system documentation?

The first question that should be asked is what information is necessary for good documentation of design system components? I used the Carbon Design System from IBM as an example and looked at what aspects are described there. I focus on everything that doesn't need visual support and doesn't go too much into development, as I want to write documentation for designers as users of the design system.

I have chosen the following topics that should be included in my component documentation:

• When to use

• Anatomy

• Placement

• Content

• Behaviours

  • States

  • Interactions

Now we need to decide for a component and to make it easy in the beginning, I decided for the “accordion”. I experimented a bit with the prompts and figured that the following prompt works fine:

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.

The Result

This is what Chat GPT answered (I cheated a bit here, since Chat GPT stopped from time to time, but you can force it to continue, with writing “continue”. I stitched all answers together in the screenshot):

I am very satisfied with the result and I think it is absolutely useful. Of course, one always needs to check whether the result fits the actual case and whether it is necessary to adjust the prompt or to rephrase the answer.

There is a clear boundary that Chat GPT does not exceed and perhaps cannot exceed, which is important for design documentation, and that is the visual description of the component: What colors are used? What are the dimensions? And so on.

I think for very generic components, the documentation can still be used and at least considered as a good starting point. Especially when you have a small team where you cannot involve a single designer for documentation for several weeks, Chat GPT can save a lot of time and work here.

Conclusion

I can highly recommend to use ChatGPT to help with the documentation of components. Ensure that everything is thoroughly checked and include visualizations to make the documentation stand out.

---