DEV Community

Cover image for How I Use AI to Build Frontend Apps: My Candid, Messy Process

How I Use AI to Build Frontend Apps: My Candid, Messy Process

Rizèl Scarlett on November 04, 2025

I've noticed that some of the pushback against using AI to code stems from people not knowing how to use it. I know, I know you've heard the “skill...
Read full post
Collapse
 
adiatiayu profile image
Ayu Adiati •

OMG. We're alike! I'm a messy one, too. 😂
And it reminds me when I vibe-coding for the first time, built the curated, open source portfolio with total chaos. 😅

The site looks neat, Rizèl! Love it!!! 😍

Collapse
 
shemith_mohanan_6361bb8a2 profile image
shemith mohanan •

Really appreciate how honest this breakdown is. It’s refreshing to see someone show the messy, real side of using AI — not just perfect results. Loved the Claude → Loveable → goose workflow; it’s a smart combo for balancing creativity and structure. 👏

Collapse
 
hashbyt profile image
Hashbyt •

Right? It's the perfect combo. Claude for the big ideas, Loveable for the polish, and Goose to make it real.

Collapse
 
tochukwu_dev profile image
Tochukwu Nwosa •

This is how to use AI.

I also use it to get structure of what I want where there is no design and have a deadline to beat. I get the layout and then manually design it to my taste leveraging the structure and path it created for me.

AI is here to stay, it can only get better, we just have to integrate it and make work faster and less cumbersome.

Collapse
 
hashbyt profile image
Hashbyt •

Exactly, using it to build the scaffold so you can focus on the artistry is the perfect balance.

Collapse
 
hashbyt profile image
Hashbyt •

Love this realistic take. It's not about AI doing the work for you, but being a creative partner that speeds up the messy process.

How much of your time was spent guiding the AI versus hands-on coding?

Collapse
 
cyber8080 profile image
Cyber Safety Zone •

Thanks so much for sharing your workflow, Rizèl Scarlett! This is a really refreshing and honest look at using AI in frontend development. I especially appreciate how you embrace the "messy" process of iteration — that’s often the most productive space.

A few standout takeaways for me:

  • The way you used Claude Sonnet 4 to brainstorm and refine prompt ideas really underscores how AI can accelerate early-stage ideation rather than replace human judgment.
  • The “two-mode” landing page concept (professional vs unconventional input) is clever: it gives visitors a clear contrast and a compelling “aha” moment when they switch modes.
  • Your decision to still play the role of critical editor (e.g., disagreeing with Goose’s suggestion) is a great reminder that AI tools are best when paired with human oversight and taste.
  • The setup you describe (hooks in for voice, gestures, dark mode, responsiveness) shows how integrating newer interactive paradigms (e.g., webcam, hand-tracking) adds value beyond just “standard web page” output.

If you don’t mind a couple of questions:

  • Around time saved: do you feel the AI-driven workflow (Claude → Loveable → Goose) significantly reduced your total build time compared to your prior “manual only” builds?
  • In terms of trade-offs: did using AI ever introduce extra complexity (e.g., cleaning up code, refactoring AI-generated snippets) that you wouldn’t have had when doing everything yourself?

Overall, this is a great piece for anyone experimenting with AI in development workflows. Thanks for pulling back the curtain on your process! 👏

Collapse
 
z2lai profile image
z2lai • • Edited

Quality comment for a quality article! I second your sentiment about finally seeing an honest look at using AI in frontend development.

Of course, it said I was absolutely right!

This is when I know this experiment was for real.

I too wonder these question:

  • as a developer, was using these tools actually productive in the end and even in the future when you have to maintain this
  • Who should be using these tools to vibe code the way you did. Senior engineers cuz they can be the authority to verify output, or junior-mid because they need help from AI for design decisions and they may even learn a thing or two. Or maybe juniors shouldn't use these tools like this cuz they actually end up understanding nothing for the rest of their career if they work like this.

Personally, I find that I'm always disagreeing with the solution or overall design provided by vibe coding tools when it comes to frontend work because I already have existing patterns or team conventions that im used to. Its always hard to use these tools in existing projects. It really does sound like a pitch for indie solo devs working on new project after project, but never existing enterprise applications.

As an Angular dev, I'm going to attempt to setup some agents and MCP servers to build a NextJs app. So I'll be the junior in that case and I'll really be relying on AI to do the right thing and teach me things along the way. Wish me luck.

Collapse
 
fadnisw profile image
FadnisW •

I have only been using AI for debugging (mostly Ides) it works perfectly (okay, sometimes it doesn't). As for most of the frontend and backend work, I prefer to do it by myself, but this post makes me wonder if I should also create an AI workflow like this, slightly messy and not too sophisticated.

Collapse
 
lymah profile image
Lymah •

GREAT POST!!!

Collapse
 
we-the-developers profile image
We The Developers •

Good 👍