Vide Coding Journey

Trying to build the first native iOS app with AI

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.

Haven't touched Figma for months

I didn't touch Figma for months. I design exclusively with Cursor and Claude Code now.

Is it probably a shift, or am I not a designer anymore?

Rebuilt Pafolios with AI

Five years ago, I launched Pafolios as a simple portfolio directory. Today it showcases 700+ design portfolios and gets 10K monthly visitors.

But the site was getting slow. Really slow.

Deployments took 30 minutes. The design felt outdated. I knew it needed a complete rebuild, but honestly? I thought it was impossible to do alone.

My first attempt was a disaster. I asked AI to convert everything to NextJS in one go. Gave up within hours.

Then I tried a different approach:

• Started with Lovable to build the project structure and foundation
• Once I hit my free token limit 💸, I connected it to GitHub and synced locally
• Then used Claude Code for the heavy lifting - optimizing design, refining interactions, migrating content

That third step was 80% of the work - optimizing design, refining interactions, migrating content, building automation.

The result? Deploy time went from 30 minutes to under 2 minutes. The whole rebuild took less than a week.

I'm genuinely proud of how it turned out. Better design, faster performance, smoother operations.

P.S. If you have a portfolio you're proud of, I'd love to feature it on Pafolios.

🚀 Launchin Invoice Dance

Launching Invoice Dance today.

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.

InvoiceDance is packed with features:

• Multi-language support: English, Japanese, Korean, Russian, Spanish, …
• Beautiful templates and customizable PDF for your own brand
• Support for most currencies in the world
• Auto-increasing invoice number, best for those who use it daily
• No login/sign-up need, you can use it straight away
• Reusable info is saved locally (your business info, currency, payment note, …), so you don’t need to add them again on new invoices

Happy to share it and appreciate your thoughts about the tool.

Have a try

Invoice Dance — Professional Invoice Templates

Browse professional invoice templates ready for instant download. Choose from multiple business-ready template designs, customize colors, and generate PDF invoices in seconds. Free forever, no signup required.

Invoice DanceInvoice Dance

Reduce errors and achieve expected outcomes with AI

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.

Using Cursor for learning new things

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?

I officially started on vide coding

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?

Will share more.