It combines focus soundtracks, ambient sounds, background video, and a session timer to help you get into deep work. All sessions are tracked locally on your machine. No account, no cloud.
I spent Saturday evening and Monday morning building a native iOS app with AI. Seeing it work was amazing—I never thought I could build a native app by myself. But the excitement was tempered by frustration.
The 80/20 Reality
AI can build about 80% of an app without writing a line of code. That's impressive. But the last 20%—adjusting colors, font sizes, layouts, and other UI details—is where things break down. Without foundation knowledge of iOS, even small customizations become impossible. That's when the frustration really kicks in.
Native vs. Hybrid: A Question of Foundation
Maybe native is too ambitious? I kept thinking hybrid development (React Native) would be easier since I'm familiar with web tech. Plus, with web dev, I can just inspect elements. With iOS, I'm still figuring out how to do that.
But then I realized: everything feels harder because it's all new—new workflow, new editor (first time with Xcode), new paradigms. The real issue isn't that native is harder. It's that I don't understand the foundation.
The Plan: 100 Days of SwiftUI
I'm starting "100 Days of SwiftUI." My goal isn't to master SwiftUI, but to understand the foundation well enough to customize and tweak. Once I have that, I can leverage AI effectively to build native apps.
Why iOS Only?
Two reasons: First, I'm an iOS fan and love the native iOS experience. Second, the economics make sense. Research shows iOS users are willing to pay 2-3x more than Android users for apps. If I'm building a paid subscription app rather than an ad-supported one, focusing on iOS (the 80% concept) is worth it.
Current Project
I'm building a self-message app for saving text, links, and quick notes. It looks pretty native already, but there are many details that need work.
It's worth the effort. I'll be back soon with a stronger foundation in SwiftUI.
Finding a professional, good-looking invoice was painful. Even though there are many similar tools, none of them satisfied my needs. I ended up using Figma to create invoices. But that’s too much work, to be honest.
That’s why I think creating a simple tool to help people create professional invoices easier will be helpful.
In the process of learning to build things with AI, this tool is a good start for me. Simple enough to see the progress to stay motivated, but helpful enough to scratch people’s itches.
If you’re trying to code with AI, there are many times that you will get errors and you ask AI to fix them. But it keeps getting errors again and again. That’s frustrating.
Or when you try to build a prototype, or animation effects that aren’t quite right. You keep iterating but the results keep getting errors and errors. Here is the simple step you can use to overcome it.
Here come the importance of different modes: Planner and Executor.
First, you should use the Planner mode to describe your output. Add all details you have. Then ask the AI to share different options/suggestions they can do. AI will suggest the best option (from their opinion), but you should read, review, and make a decision. After that, you ask AI to write a detailed plan on how they do it.
Once the plan is OK, hand over to Executor mode. Basically, ask AI to implement that plan that we did before.
By using that process, the errors returned are almost zero, and the output is exactly what I envisioned.
It also depends on the AI tools you use, but for me, Claude and Claude Code work the best for me.
As a designer who builds my own ideas, it’s a must to understand the basics of CSS so you can optimize the final products.
If you have tried using AI to build your ideas, you would see that the output is very generic and similar to other apps. And there are many small details that look bad. I’m sure your natural designer sense won’t make you happy. We need more padding, buttons need to be smaller, the card doesn’t need a border,…
You can ask AI to adjust it, but you need to be very specific.
The other way is to understand what they are and what options are. So we can learn from it.
I’m new to TailwindCSS. It’s the best CSS/HTML framework. I’m not familiar with it. But I want to learn so I can optimize my product. Whenever I find something new, I ask Cursor what they are and what options are. Cursor will explain it clearly and give us an example.
I found that’s the best way to learn. I guess “learn while doing” is like that?
What’s the feeling so far? So excited but also frustrated.
I feel excited because of the possibility. I can create complicated tools without writing a single line of code. AI takes care of the front-end, back-end, and database. I feel that we can build anything. As long as we have ideas, curiosity, and time.
But at the same time, AI isn’t perfect. The feature doesn’t work as expected, even after many times of iterating, communicating, fixing, and testing.
And as a designer’s point of view, the UI is very generic and similar to other apps. Many details need to be optimized. But when asking AI, they can’t do it as we wanted. And at this time, we need to know the basics of the technical to optimize the way we want. The pride of a designer doesn’t let me skip this step. I guess that’s the main point of a designer’s founder?!
But here is what I found and learned:
Claude Code is super good, much smarter than Cursor. Cursor makes a lot more errors than Claude Code. I think it more than 10x time. After trying Claude for a couple of days, I feel Curor is a junior engineer, and Claude Code is a staff-level engineer.
Having two different roles for the Agent will help you build a better product and take less time.
Planner: will make us think about the feature, the motivation, the user experience, the whole journey before jumping into the paradox of details.
Executor: Will help us execute the plan and visions that Planner built.
In another language, it’s a team work between designers/PM vs Engineers. The same for AI.
Shadcn UI and components are amazing. It’s an open-source Next.js component, but the details, how it works, and readiness,… are on another level. I can call it the best front-end component in the world now. All projects should use it. It’s also customizable and flexible, especially with TailwindCSS.
I finally looked at TailwindCSS. How to say, it’s powerful, beautiful, well-set up. But it needs time to learn, and it bombards the HTML.
Don’t work with the database so early. We should focus on the front-end and the experience first before working with the database. That will save us lots of time and money. Because once the front-end and database are connected, it’s much more complex for the Agent to build the app, especially when we want to add, remove, or edit some data point. Do them at the same time like you would need 3 different engineers: front-end, backend, and QA. While working with the front-end first, you focus on solving problems and working with only front-end engineers.
Use more planning mode. Because it helps you really think about the product, not about the technical issues.
Spend more time writing PRD. It will help you build a better product and guide the dev later. Less errors.
Lovable builds 80% of the work in hours. But the remaining 20% takes weeks. Can we focus on 80%? But which one is the 20% that brings 80% value?
