How I developed a Design System using ChatGPT and Storybook

In the ever-changing landscape of product design and development, maintaining consistency and efficiency is a constant challenge. As a product designer who specializes in design systems and front-end development, I went on an interesting journey to build an effective design system with ChatGPT and Storybook. The following article covers the processes I followed, the tools I used, and why every designer should consider learning to code to bridge the gap between design and development.

Why a Design System?

A design system is more than a collection of UI components; it is a set of guidelines for managing design at scale. It ensures that design decisions are reusable and consistently applied across multiple projects. Lack of a solid design system frequently results in inconsistent user experiences, brand identities, and product development efficiency.

The challenge

In many organizations, developers often do not meticulously follow Figma designs or prefer not to write CSS due to its perceived complexity. Furthermore, they are frequently limited in time and focus on building functionalities, sometimes ignoring design details and principles. This is where my experience as a product designer with some front-end knowledge was helpful. By creating the design system myself, I was able to ensure that it adhered exactly to our design principles and was consistent throughout all products.

Step 1: Creating a Next.js preset for ChatGPT

To streamline the component creation process, I created a Next.js expert preset for ChatGPT, enabling the AI to generate TypeScript components based on my prompts. Here’s a guide on how you can create a similar preset for ChatGPT:

1. Identify the need: My primary need was to generate consistent and functional TypeScript components quickly.
2. Design the prompt template: I created a prompt template that provided clear instructions and formatting to generate component code. This included specifying props, structures, and styles that align with our design system.
3. Continuous Refinement: The initial outputs from ChatGPT were reviewed, and the prompts were refined iteratively to ensure the highest quality and alignment with our design principles.

This preset drastically shortened the time required for component creation while ensuring that the resulting code was consistent and met our criteria.

Step 2: Integrating with Storybook

Storybook is an invaluable tool for developing UI components in isolation and documenting them. To enhance this process, I created a Storybook preset for ChatGPT, allowing the AI to write Storybook stories based on the generated components. Here’s how:

1. Preset adaptation: I adapted the Next.js Expert preset to include Storybook stories. This involved enhancing the prompt template to not only generate component code but also the corresponding stories.
2. Story structure: I clearly defined the structure of our stories, including the component props, default states, and various use cases.
3. Automated script: A script was created to take the generated component and its Storybook story, integrating it seamlessly into our Storybook setup.

Our TextInput component inside Storybook with documentation

By using Storybook, each component was well-documented and visually evaluated, resulting in improved team communication and faster iteration cycles.

Step 3: Styling with CSS Modules

For styling, I used CSS modules to ensure that our styles were scoped and modular, reducing conflicts and improving maintainability. I based all of my CSS on Figma designs and verified that the syntax was consistent between Figma and our Next.js environment. Here’s how:

1. Extracting design tokens from Figma: I exported our design tokens, such as colors, typography, and spacing units, from Figma.
2. Consistent syntax: The variable names defined in Figma were carefully mirrored in our stylesheets, ensuring a seamless transition from design to code.
3. Implementing CSS Modules: I used CSS modules for scoping styles specific to each component. This modular approach helped in maintaining clean styles, adhering strictly to our design system.

Our semantic color variables inside Figma

This process not only made it easier to convert designs into code but also ensured a high level of fidelity to the original designs, maintaining aesthetic and functional consistency.

Step 4: Manual review and adjustment

While ChatGPT helped generate the initial syntax for components and Storybook stories, manual review and modifications were essential. Here’s why:

1. Accuracy and precision: The AI-generated code provided a solid basis, but manual tweaks were required to ensure accuracy and address edge cases that the AI could not predict.
2. Custom styles: While ChatGPT could produce basic styles, creating CSS to match complicated design specifications required a human touch. This stage is critical for getting the desired look and feel.
3. Integration and debugging: Proper integration and bug fixing are beyond the scope of automated tools. Ensuring seamless functioning within the broader project context required detailed manual coding and testing.

By combining automated code generation with meticulous manual adjustments, I ensured high-quality, functional, and visually appealing components.

Why designers should know how to code

As you can see, getting a result like mine involves some coding knowledge. While tools like ChatGPT can help generate basic syntax, the code still needs to be manually checked, modified, and optimized. CSS writing and final component refinement require the use of a designer who is at ease with code navigation and modification. Here are some reasons why designers should learn to code:

• Precision and control: Being able to code gives designers great control over the finished result. It ensures that the designer's vision is appropriately reflected in the end product.
• Better communication: Knowing how to code breaks down the communication barriers between designers and developers. It leads to more effective collaboration and fewer misunderstandings.
• Faster prototyping: Designers who can code can quickly prototype their ideas, test them, and iterate faster, leading to increased productivity and innovation.

Overcoming Common Challenges

The main challenge I noticed was the consistent interpretation and implementation of designs by developers. Developers often prioritize functionality and may find developing CSS boring. They may also opt not to spend significant effort developing a design system from scratch. This motivated me to lead the development of our design system, ensuring that our design principles were followed correctly and that our products seemed consistent and reliable.

By leveraging the power of ChatGPT for automated component and story generation and using CSS modules for styling, I was able to ensure consistency and efficiency in our development process.

Conclusion

Creating a design system with ChatGPT and Storybook has been a game-changer. It has allowed me, a product designer with just HTML, CSS, and basic JavaScript knowledge, to bridge the gap between design and development. This process not only ensured that our design principles were followed but also fostered a more efficient and collaborative environment.

For designers, learning to code opens numerous possibilities and can significantly enhance the precision, consistency, and efficiency of the design and development workflow. If you’re a designer, I highly encourage you to delve into coding — it’s a powerful skill that can transform your approach to product development.

By sharing my journey, I hope to inspire others to take a similar path, leveraging tools like ChatGPT and Storybook to create robust, consistent design systems that stand the test of time.