Hey ChatGPT can you make this button more clickable?
Case of a designer being replaced by ChatGPT 😱
It’s 2024, and using a computer now feels like stepping into the special effects of the movies we watched as kids. We were promised to be able to chat with our computers, zoom-in into low-res images and see all the details in one click etc. I remember looking at my C-64 hoping one day computers will be powerful enough to actually perform this kind of magic, while twisting the screwdriver in a cassette player in order to load the Great Giana Sisters from a ferro-magnetic bootleg tape. Fast-forward 30 something years:
To be honest, conversing with ChatGPT as my clients once did when I was a graphic designer yields surprisingly good results. They’re not perfect at first, as this example shows:
My first reaction was “OK this button actually IS uber-clickable but not really useful for what I was working on”. I just needed a button that “looks better” i.e. has the same shape, proportions, colors, fonts… yes sounds like useful context to begin with. But it doesn’t have to be. I was sure we can still get there in a very few prompts. What did the trick was adding the following information:
- it is an asset on a webpage it needs to be roughly the same size shape and bgr is white,
- make sure that the shape of the button is rectangular, wide and short enough to put “SIGN UP” in one line
Using it, ChatGPT redacted the prompt :
A realistic-looking rectangular button with a smooth gradient from light orange to deep red, and the text ‘SIGN UP’ in bold, white, sans-serif font across one line. The button has a subtle, realistic texture suggesting a semi-gloss finish and is designed with slight shadowing to appear clickable against a white webpage background. The shape is a wide rectangle, ensuring the text fits on one line without breaks, size 1792x256.
and used DALL-E to generate:
All this happened roughly in the amount of time that 10 years ago I would use to start my PC, open Blender and delete the default cube. But is this asset any good for prototyping? Almost.
Next, I needed to cut it out from the background and isolate the shadow. And for this I went super old-school and used Adobe Photoshop. Some 9 months ago they have introduced the “Object Selection Tool” — it should handle a simple shape like this, right?
It is just a rectangle with rounded corners and Adobe always seemed to me like an expert on math behind shapes like these but I think, judging by the results, these are still two separate technologies :D
So yes, there is still some space for manual work to be done. You can define a vector shape, use it as a mask, invert it, select the color range of the shadow and cut it out. This way you will have two elements and a transparent background. I would say it’s enough to use it on a rough mockup. There are also some typical AI-hallucinated artifacts like shapes that make very little sense from a typographic point of view. But again it’s nothing that a good old stamp and brush won’t fix:
Now this finally looks like a job for a human designer! One could spend at least a couple of hours making the shape look spotless. Fixing the lights, shadows, geometry and gradients until it looks perfect. But do we really need it? Depending on the context we could hold a series of meetings to discuss what to do with it or confirm what works better via AB tests, but since we’re a small indie studio, at this stage all this activities are out of scope.
…and it still looks better than just a flat shape done in Miro.
Wait what? Using Miro for UX?
Some of you may react allergic to creating mock-up screens in Miro instead of preparing them in Figma, but when the design is relatively simple, there are not many elements and all you need is some basic layout — I would argue that Miro + Photoshop + basic HTML and CSS is enough. And if you want to have responsive design or parallax effects, I think you can just ask ChatGPT to write some custom .js Would I bet my last penny on it? Definitely not. Would I write an another article if it looks decent enough? Absolutely!
(EDIT: see https://medium.com/@mdzikowski/create-responsive-websites-with-chatgpt-miro-and-canva-in-minutes-631ae9452c83 for the follow-up)
Conclusion
So here’s the thing: even as AIs like ChatGPT and DALL-E make design faster, we’re the ones who make sure that our design doesn’t just look good, it’s about making it feel right. I don’t think we’re being replaced — we’re evolving. As designers, our role is to blend AI efficiency with our creative instincts. We’re adding soul to the silicon. And that’s something AI can’t replicate.
