Skip to content
Writings

From Idea to Polished App with AI

Kexin Li

TL;DR

  1. Tried Manus / Google Stitch. Realized that one-click design generation is really a test of how well you can describe your product. If you haven't thought through what you actually want, you won't even know what to cut.
  2. Tried Figma / Figma Make. Unfortunately I'm just not good with design tools.
  3. Used Claude's AskUserQuestion tool to have deep conversations about product vision and design.
  4. Studied products I love until I could precisely articulate what makes them good.
  5. Used Claude Prototype to build HTML versions, then had Claude Code implement them in Swift.
  6. Once AI understood the product's tone, I let AI be the creator and I became the curator.
  7. I describe the imagery, Claude Code brainstorms what UI can express it. Design skills are just icing on the cake for me.
  8. Let Claude Code drew the app icon in SVG.

Before we start

Over the past month, I built an iOS app from scratch with AI: Melior.

It's a "reflect on your year with 30 questions" app, inspired by an article from Obsidian's CEO kepano: https://stephango.com/40-questions.

Here's what Melior looks like:

Yesterday I looked back at the whole process and put together the evolution of how I use AI for design.

⚠️

Quick note: I used Manus, Google Stitch, Figma Make, Codex, Claude, and more. But this isn't a tool review. It's about how my approach to using AI kept changing.

#1 Manus Version

I was still traveling in Australia, just getting into vibe coding. One day I used my phone to have Manus build the first version. I probably wrote a few sentences describing the features.

The result was obviously way too generic:

#2 Google Stitch Version

After the trip, Google Stitch was blowing up. Stitch's pitch was one-click design drafts, then import into Google AI Studio to generate a working app. Same deal, I described the features and style in a few sentences.

A tiny bit better than the Manus version, but still not what I wanted.

🤔

This is when it hit me.

#3 Figma Version

So I went back to basics. Rethought what kind of product I actually wanted to build. Moved to Figma with Figma Make to get the ideas out of my head.

The result was pretty mediocre, because I just don't know how to use design tools. The learning curve was too steep, so I decided to try a different route.

#4 First Claude Code Version

I subscribed to Claude Pro. I had Claude Code use AskUserQuestion to think through the product with me. I also talked to ChatGPT and Gemini about the design, and put together a bunch of documents. Then I had Claude Code build the first module.

But after going through the whole flow, I felt like this was a product I wouldn't even want to use myself. I knew it wasn't right, but I couldn't figure out how to make it better.

#5 Claude Prototype Version

After that, I did two things:

  1. Actively studied the products I love. What makes them good. Studied them until I could describe exactly why they're good.
  2. Sometimes at night, lying in bed, I'd want to try an idea with Claude. I'd open the Claude app on my phone, use Sonnet to build a prototype. I noticed that the web pages it made with the frontend-design skill actually looked really good.
🤔

At this point I thought Sonnet was more creative than Opus. So I'd have Sonnet build the HTML first, then have Opus recreate it in Swift and polish the details.

Step by step, it kept getting better. This is also when I upgraded from Claude Pro to Max.

  • Left: HTML
    • Middle: Recreated + tweaked
    • Right: After polishing details

I used the same approach to finish the first module and added dark mode:

#6 Claude Code Version

For the next two modules I switched things up again. The product's tone was already set. So if AI understands the tone, why not let it create on its own instead of relying on my limited design knowledge?

🤔

At this stage, I described the imagery. Claude Code brainstormed what kind of UI could express that imagery. When it came up with multiple options, I'd say, build them all, let me see, then I'll decide.

The Summary module, built around the imagery of a "book":

The Recaps module, built around the imagery of a "polaroid":

#7 App icon

Like I said, I don't use design tools. So I wondered, can Claude Code make an app icon?

🤔

For icons, SVG is the perfect format. It stays sharp at any size and you can style it with CSS.

So I used Claude to build HTML prototypes, polished them version by version, and once I was happy with it, had it export an image at the right specs. All of this I could do on my phone.

🤔

In a company, designers make mockups, engineers implement them in code. We're really just using different tools to output the same thing.

Final thoughts

After finishing Melior, I went on to build a lot more web pages that I'm really proud of. At this point I honestly can't tell if the model has learned my taste, or I've gotten better at working with it, or the models just keep improving. So the only answer is: keep trying.

If you were moved by kepano's article like I was，give my iOS App Melior a try!

Here is the story behind Melior.