Balenet

AI designed this app

Lately I've been working on an intermittent fasting app to learn SwiftUI. I used ChatGPT through the process to help me figure out the code, and it's been a great learning tool. But so far I haven't paid too much attention to the design, and it shows. Since recently ChatGPT added the ability to upload and generate images, I wondered if I could use this feature to create a better design for my app.

The conclusion is ChatGPT can definitely help, but doesn't produce anything that you would upload to the App Store. However its ability to understand pictures and generate code from them is astonishing.

The test

As a first test, I uploaded the current UI of my app and asked Chat GPT to “make it better”. This is the image I submitted (like I said, not a contender for the “App design of the year” award):

And this is what I asked:

Me: this is a screenshot of my fasting application. Can you make it look better?

After some generic advice on principles of UI design, ChatGPT answered with the following:

Let's try to create a more visually appealing version of your fasting app interface. I'll design a concept image for you.

Here's a redesigned concept for your fasting app interface. The design is modern and clean, with a minimalistic approach and a soothing color palette to maintain focus. You can see how the important features like the current fasting status and the 'Start Fasting' button are highlighted for ease of use. The bottom tabs provide quick navigation. What do you think?

I didn't want to hurt its feelings, but this isn't very useful. The color scheme is nice, but the added UI elements make no sense especially since the text is gibberish. Also, it's not really usable for the actual development of the application. Admittedly my prompt was rather generic, but I decided to try a different approach. What if I drew the UI, and asked ChatGPT to create the code?

Hand-drawn UI as an input

For a quick-n-dirty test, I drew the UI by hand:

And then asked to recreate it in code:

Me: can you write the SwiftUI code to create a UI Like the one in this picture?

ChatGPT: Certainly! To create a SwiftUI view that resembles the sketch you've provided, which seems to be a timer with a stop button, you can use the following code as a starting point:

import SwiftUI

struct TimerView: View {
  @State private var timeRemaining = 222 // Replace with actual remaining time in seconds
  let timer = Timer.publish(every: 1, on: .main, in: .common).autoconnect()

  var body: some View {
    VStack {
      ZStack {
        Circle()
        .stroke(lineWidth: 20)
        .opacity(0.3)
        .foregroundColor(Color.gray)

        Circle()
        .trim(from: 0.0, to: CGFloat(min(self.timeRemaining, 3600)) / 3600)
        .stroke(style: StrokeStyle(lineWidth: 20, lineCap: .round,   lineJoin: .round))
        .foregroundColor(Color.blue)
        .rotationEffect(Angle(degrees: 270.0))
        .animation(.linear, value: timeRemaining)

        Text("(timeString(from: timeRemaining))")
        .font(.largeTitle)
        .bold()
      }
      .padding(40)

      Button(action: {
      // Stop the timer here
        self.timer.upstream.connect().cancel()
      }) {
        Text("STOP")
        .foregroundColor(.white)
        .padding()
        .background(Color.red)
        .cornerRadius(40)
      }
      .padding()
    }
    .onReceive(timer) { _ in
      if self.timeRemaining > 0 {
        self.timeRemaining -= 1
      }
    }
  }

  func timeString(from totalSeconds: Int) -> String {
    let hours = totalSeconds / 3600
    let minutes = (totalSeconds / 60) % 60
    let seconds = totalSeconds % 60
    return String(format: "%02d:%02d", minutes, seconds)
  }
}

struct TimerView_Previews: PreviewProvider {
  static var previews: some View {
    TimerView()
  }
}

And this is what it looks like, with no changes:

This was better. It's pretty amazing how I went from paper to code in one step. Plus, it works! The timer runs and stops and the button changes state as expected.

This was simple, so I tried a little more complex UI with colors.

The result isn't perfect but it's a good starting point. Notice how ChatGPT understood my scribbling! The list of fasts wasn't updated though, but that would have been asking too much.

Copying with pride

As a last test, I tried with a screenshot of Zero, a fasting app I love and that I am trying to emulate.

This is what the code generated by ChatGPT looked like. Again, a good starting point, but not quite there.

Just give me the code

Finally, I wondered what would happen if I gave ChatGPT my original SwiftUi code for the app at the beginning of this post instead of the image, and ask it to modify the code to improve the design. This was the (not too impressive given everything I've seen so far) result:

Conclusions

It's pretty amazing how much ChatGPT can understand from a picture, even if drawn by hand in a hurry. I think this is definitely where the software development and design tools are going, it's a bit early but it's easy to imagine that they will get better.