We turned concepts from the book ‘Flexible Design Systems’ into an interactive design tool.

"In a world of constant change, everything rigid will break. We need to unlearn static approaches and learn to see, understand and design flexible systems." -Dr. Martin Lorenz

We discovered the amazing research on Flexible Design Systems by Dr. Martin Lorenz through his recent book. This chimed with us as designer-developers delivering work that needs to be applied flexibly across various outputs. In order to extend and investigate Martin’s research, we partnered with design studio Public Websites to prototype a custom design tool using the concepts described in the book. We created a UI that could generate millions of designs through limited variations and incorporated ChatGPT to allow for text based input to populate that UI.

The book

Inspiration for the tool came from Dr Martin Lorenz’s book entitled Flexible Visual Systems which explores a variety of approaches on how to design flexible systems, adjustable to any aesthetic or project in need of an identifiable visual language. In the form based systems chapter Martin describes a method of designing systems based on a component (a basic shape), split, rotated and repeated in different ways to be ultimately used as the basis for multiple applications (completed designs). We felt compelled to see this process in action in order to assess its power and then its suitability for our own work.

A concept made for development

Flexible visual systems partner perfectly with the concepts of development in something like React. In React each component represents an independent and reusable element responsible for managing its own state dependent on properties passed to it from up the application tree. In form based flexible systems each element is an independent and reusable with it’s form dependent on choices passed down from wrapping elements. It is a perfect fit and thus made for some very beautiful and satisfying code.

The control component

Our hypothesis was that the philosophy informing the FVS approach would work well within the React framework. Like creating an application with React, FVS starts with simple components, such as geometric shapes in a grid, and then combines these components into larger more complex assets that can have many different applications. Imagining the variety of possible applications once the FVS framework had been translated into React, and being excited to see where it could lead, motivated us to build this tool.

Build process

The first iteration was built as a proof of concept and learning project by a junior member of the team. It involved a simple control component in the form of a 2x2 grid and examples of repetition of this grid. We were then able to allocate a bit more time to explore an application. So the second iteration was picking one of those from the book and extending the tool. This version also walked a user through the concepts of component, repetition and application which are the 3 steps that help you translate something simple to something useful. The third iteration was a refinement of that. We decided that walking through the concepts step by step was nice but ultimately users just want to play immediately. We put the component next to the application so you could instantly see the effect your changes made and added some features (colour schemes and presets). We built the tool using React and utilised Zustand to save the state of the design. The settings chosen at each step are stored as a simple javascript object, which allows for the creation of a wide range of variations and demonstrates the power of the system to achieve a huge variety of output with very few rules.

Integrating AI

Our final iteration has been to integrate ChatGPT. We used the openAI playground to craft a prompt that could reliably return a js object based on a natural language prompt. The js object had to fit our build so that we could populate the tool with the generated response. We thought this would be a great opportunity to experiment with using AI to generate new patterns based on a user’s request. As each pattern is represented by a simple javascript object, we would ask GPT-4 to generate us a new javascript object using the same variables but with different values. Training GPT-4 to do this involved building a system input prompt that GPT-4 reads behind the scenes before reading the user’s prompt. Within this system input we gave GPT-4 some context explaining that we were generating patterns from a javascript object, the specifics of what the javascript object must contain, what each of the variables represented and some examples of interesting design. We trained it through an iterative process of asking it to generate a design based on user input and then seeing if there any fundamental ways it was misunderstanding or if it appeared that some extra context would be helpful. We also used techniques such as asking GPT-4 to return a data object as well as an explanation of why it has chosen the particular values it has to see how well it could articulate what it was doing. The user could then ask for a “90’s rave theme” or “a penguin” and GPT-4 would use the system input and the user’s input to decide what data object to return.

Next Steps

Through building the tool, we learned a lot about the potential of Flexible Design Systems and also discovered the potential of using ChatGPT to deliver designs based on text input. We have many ideas for future additions to the tool, including animation, better AI integration, 3D capabilities, better typography options, user logins, shareable links, a user gallery, custom colours and custom SVGs as shapes, filters, and more shape sets. We see great potential in the tool and believe that it could evolve into a custom design program for delivering work to our clients.