Last year was all about the crypto craze, this year it's all about AI. The launch of ChatGPT has gotten everyone worried and excited about the future. Amongst that craze I saw a lot of people claiming "ChatGPT will replace all jobs", "ChatGPT is the future!" etc. Honestly, I had no idea what it is or how it works, but the sheer amount of articles coming up everyday did get me intrigued. So I thought I'll give it shot and take up a small project to see how well ChatGPT works.
Last year was all about the crypto craze, this year it's all about AI. The launch of ChatGPT has gotten everyone worried and excited about the future. Amongst that craze I saw a lot of people claiming "ChatGPT will replace all jobs", "ChatGPT is the future!" etc. Honestly, I had no idea what it is or how it works, but the sheer amount of articles coming up everyday did get me intrigued. So I thought I'll give it shot and take up a small project to see how well ChatGPT works.
My initial experiments with ChatGPT were pretty simple - writing an email, planning an itinerary and writing a twitter thread (this one was a fun one!) [screenshots below]. The output was as I would have wanted, but I also realized that it's strongly based on the input (prompt) I give. Being elaborative and being able to define what I want in english is a key to getting the desired output quickly.
But I wanted to take this further —
Can you use ChatGPT to actually make a website?
I took a basic problem that I was facing in my daily life - being able to plan holidays. More specifically, I'm a visual person, and just knowing at a glance at my calendar when I'm on holidays helped me immensely in planning my work schedule, calculating my Out Of Office (OOO) days, coordinating trips with friends etc.
My genius plan (or so I thought), the MVP, was a DIY Figma calendar - printed and ready to be doodled on. But after a few days, I had edited it too many times and there were a lot of overlapping holidays. It was like creating an art masterpiece which had started looking like a toddler's scribbles after an espresso shot. The calendar didn't do its job anymore.
My genius plan (1) a.k.a. the second iteration, was to do this digitally, in Figma. I'd edit the boxes, move them around and plan. Simple and editable. But it had one problem, it was in Figma. It's like having a Ferrari but only being able to drive it in your garage. I couldn't just open it anywhere and edit, I needed a laptop and it was view-only on my phone. Do you feel the pain?
But I wanted to take this further —
Can you use ChatGPT to actually make a website?
I took a basic problem that I was facing in my daily life - being able to plan holidays. More specifically, I'm a visual person, and just knowing at a glance at my calendar when I'm on holidays helped me immensely in planning my work schedule, calculating my Out Of Office (OOO) days, coordinating trips with friends etc.
My genius plan (or so I thought), the MVP, was a DIY Figma calendar - printed and ready to be doodled on. But after a few days, I had edited it too many times and there were a lot of overlapping holidays. It was like creating an art masterpiece which had started looking like a toddler's scribbles after an espresso shot. The calendar didn't do its job anymore.
My genius plan (1) a.k.a. the second iteration, was to do this digitally, in Figma. I'd edit the boxes, move them around and plan. Simple and editable. But it had one problem, it was in Figma. It's like having a Ferrari but only being able to drive it in your garage. I couldn't just open it anywhere and edit, I needed a laptop and it was view-only on my phone. Do you feel the pain?
Now picture this: You're in the midst of a heated debate with friends, planning that epic trip to the Bahamas. You want to whip out your calendar, match it with public holidays, and boom! Instant vacation plan. But, instead, you're left juggling Google searches like an amateur circus performer, counting your remaining OOO days in your head, and praying you haven't forgotten Aunt Berta's 90th birthday bash.
*puts on a hoodie, sits in a dark room, flips open the laptop, launches incognito mode ChatGPT*
The real hacking began.
The first prompt had been entered, we were now locked in for 48 hours… of pure awe and frustration..
Now being a rookie, I expected it to show me the output in the chat as well. When it didn't, I instructed the low-IQ robot to to show me the output, like you know, a normal smart human would. [Response in the picture below] Felt dumb not going to lie. But no worries, I copy pasted the code in a file, and launched it. It was as if a magician and put together the whole trick, called me to the stage to say the magic words Abracadabra!
As for the output, well, it wasn't what I was expecting. Grey boxes, 2000s webpage look, what was I even looking at?
I had to then open the HTML file myself to diagnose the problem, and oh boy, the code was tedious. Each date in the calendar was 1 line, for each month - 365 lines of codes just like that (!!) There was no concept of loops. But at least, I didn't have to do hard work.
I continued trying, hoping to turn this around. Instinctively, as a designer, my first problem that I wanted to solve was to make it look aesthetic. I gave the prompt of taking inspiration from a Codepen website [output of which as shown below] and that's when things got interesting! I had a website showing me a cute looking calendar month, which just needed more lines of code to show rest of the months.
Quick side note..
If you want to learn about designing for AI and with AI, checkout the AIxDesign Library
Once I'd gotten that,
it was easy to add the features one by one.
Features added
✅ Public holiday dates
✅ Tooltip for each public holiday
✅ Out Of Office (OOO) counter
✅ Drop down to switch cities
✅ Saving selected dates in cache
✅ Optimizing the code to reduce lines
Once I'd gotten that,
it was easy to add the features one by one.
Features added
✅ Public holiday dates
✅ Tooltip for each public holiday
✅ Out Of Office (OOO) counter
✅ Drop down to switch cities
✅ Saving selected dates in cache
✅ Optimizing the code to reduce lines
but not so easy either..
There were times when the whole output went haywire and once that happened there was no going back. You would have to start a new chat or do it manually, because it just couldn't understand how to fix it. It fixed only parts of the code, not the sections might be linked. The key to getting answers was to work in snippets because adding whole pieces of code or giving it too many steps just messed up robot's head (this is true for ChatGPT3.5, I've tried it with ChatGPT4 and it is way way better - will write about it soon). It honestly got frustrating sometimes, and sometimes, I would have had to go in the file and fix it myself.
but not so easy either..
There were times when the whole output went haywire and once that happened there was no going back. You would have to start a new chat or do it manually, because it just couldn't understand how to fix it. It fixed only parts of the code, not the sections might be linked. The key to getting answers was to work in snippets because adding whole pieces of code or giving it too many steps just messed up robot's head (this is true for ChatGPT3.5, I've tried it with ChatGPT4 and it is way way better - will write about it soon). It honestly got frustrating sometimes, and sometimes, I would have had to go in the file and fix it myself.
That ends ChatGPT3.5 test
In my opinion, it was much faster than if I'd done it myself, going over StackOverflow, that too considering designing is my primary profession. My next test is going to be updating this app using GPT4. Would want to test out the difference and speed, and knowing how to prompt, I should be able to do it more accurately. See you then!
That ends ChatGPT3.5 test
In my opinion, it was much faster than if I'd done it myself, going over StackOverflow, that too considering designing is my primary profession. My next test is going to be updating this app using GPT4. Would want to test out the difference and speed, and knowing how to prompt, I should be able to do it more accurately. See you then!
