GPT-3 Design Hype 🤯

Should design tools code?

GPT-3: Describe what you want, and let the computer design and build it for you! 👀👇

GPT-3 Layout Generator by Sharif Shameem

Over the last couple of years, we’ve seen the odd design tool pop up that brings a touch of AI to design. One of the most anticipated in this category was UIzard, a tool that turned paper sketches into designs. Minds were blown all over #DesignTwitter as we saw an increasing number of AI-powered tools for web designers:

Sketch a wireframe in pen or pencil. Use your phone to take a photo of your sketch.

Then in early 2019, instead of the cliché question “should designers code?“, people started asking “should design tools code?“.

And now in 2020, minds are being blown again! This time though, instead of paper sketches, we’re turning words into UIs with a cool technology called ‘GPT-what’? Here’s a definition:

GPT stands for “generative pre-training transformer”, a language model which can generate world knowledge by training on a diverse corpus of text. GPT-3 is the third iteration of this model. It’s basically a language predictor: you feed it some content, and it guesses what should come next.

Anne-Laure Le Cunff in GPT-3 and the future of human productivity

⚠️ GPT-3 Hype

Here’s some of the hype around the internets and twitters about GPT-3 and design:

1. Sharif started with this GPT-3 layout generator:

GPT-3 Layout generator in action

Sharif is the founder of debuild.co, where he’s trying to provide this technology as a ‘faster way to develop web apps’:

Sharif Shameem: I just built a functioning react app by describing what I wanted to GPT-3.

A couple more of Sharif’s demos include:


2. Next, Jordan Singer built ‘Designer’, a GPT-3 Figma Plugin:

Check out more in his twitter thread, and this excellent article where he goes into details on GPT-3, and how he trained his app to create UI layouts.

When I saw all of the GPT-3 concepts going around, I just had to get my hands on it.

Jordan Singer


3. Then The Independent covered it!

The Independent article


4. Harley Turan shared GPT-3 generated color scales

GPT-3 generated color scales


5. …And GPT-3 generating React components:


6. Daniel Davis resurfaces his article on GPT-2: Generative Design is Doomed to Fail

Generative design is doomed to fail


[Update, Mon 27 Jul 2020]

7. Dhvanil builds another UI creator for Figma using @OpenAI’s GPT3.

Inspired by Sharif and Jordan, Designer and generalist, Dhavnil couldn’t stop himself from building his own GPT-3 UI creator in Figma:

GPT-3 UI creator for Figma

He highlights 2 levels where GPT3 comes in: Text classification, and JSON (text) generation. Check out his Twitter thread for a step-by-step explanation..

Define your UI component in simple English, and GPT3 + @figmadesign will create a full-blown mockup for you. With accurate text, images, and logos.

Dhvanil (@dhvanilp), Designer and Generalist

Those are just a few popular links floating about, and there’s probably a lot more to come. For more GPT-3 demos (maybe less design related), check these out:

Get Awesome Design Tips

Join ~18,000 and receive 4 quality articles
and the latest tools in your inbox once a week:

4
Like

If you found this article useful, why not buy the author a coffee? Not only will the author love you for it, but it helps keep content free and accessible for everyone too!

avatar
Join Prototypr
Available for all

Support Prototypr

We believe the web works better when everybody can access content, regardless of where they live or what they can afford. That's why our platform is free – no paywalls, popups, or abuse of data. As a tiny, independent team, we accept donations to help keep the lights on. Contributions are also redistributed to writers.