Should design tools code?
GPT-3: Describe what you want, and let the computer design and build it for you! šš
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.](https://wp.prototypr.io/wp-content/uploads/2020/07/Screenshot-2020-07-22-at-15.55.48-1024x639.png)
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
![](https://wp.prototypr.io/wp-content/uploads/2019/05/image_preview.png)
Letter
ā ļø 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](https://wp.prototypr.io/wp-content/uploads/2020/07/2020-07-22-14-39-08.2020-07-22-16_07_50.gif)
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.](https://wp.prototypr.io/wp-content/uploads/2020/07/Screenshot-2020-07-22-at-16.19.51-1024x995.png)
A couple more of Sharifās demos include:
2. Next, Jordan Singer built āDesignerā, a GPT-3 Figma Plugin:
![GPT-3 Figma Plugin](https://wp.prototypr.io/wp-content/uploads/2020/07/ezgif-4-b0d0754ab6a8.gif)
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!
![AI tool can design websites](https://wp.prototypr.io/wp-content/uploads/2020/07/Screenshot-2020-07-22-at-16.32.12-1024x354.png)
4. Harley Turan shared GPT-3 generated color scales
![GPT-3 generated color scales](https://wp.prototypr.io/wp-content/uploads/2020/07/EcvvnayXoAAgZox.jpeg)
5. ā¦And GPT-3 generating React components:
![GPT-3 generating React components](https://wp.prototypr.io/wp-content/uploads/2020/07/Screenshot-2020-07-22-at-16.36.56-1024x831.png)
6. Daniel Davis resurfaces his article on GPT-2: Generative Design is Doomed to Fail
![Generative Design is Doomed to Fail Generative design is doomed to fail](https://wp.prototypr.io/wp-content/uploads/2020/07/Screenshot-2020-07-22-at-20.28.20-1024x474.png)
[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:
![](https://wp.prototypr.io/wp-content/uploads/2020/07/Screenshot-2020-07-27-at-17.03.27.png)
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
![](https://wp.prototypr.io/wp-content/uploads/2019/05/image_preview-1024x48.png)
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:
2023 update, check out this article for more on Generative Design: