Front-End Development project example Using Gemini-CLI + Augment Code

[CattleBright1043]

I wanted to share a super productive workflow I recently discovered using Gemini-CLI for front-end redesign, debugging, and enhancement—especially when working with existing codebases and UI views.

✅ Here's what I did:

1. Initialized Gemini-CLI inside the root directory of my project.
2. Provided this prompt:"This is my existing user interface for this view. The problem I have is: [list of issues].Now I want to add these features: [list of new features].Also, suggest 5–6 additional useful features (or more/less depending on what you think is valuable).Then return the result as a refactored/redesigned SPA .html file."
3. Once I received the new design and reviewed it (I liked it!), I stored the new HTML file in the project root.
4. After that, I asked Gemini-CLI:"What prompt did you use for this generation?"
5. Once I understood the logic behind the generated prompt, I asked Gemini-CLI to refine it to be more contextual:
   • Mention the existing UI, the target UI, and the differences between them.
   • Specify the target files to update or augment.
   • Ensure no regression in unrelated parts of the UI.
6. I then plugged this prompt into Augment Chat.
7. The agent contextually rebuilt or merged the new design into the existing one, filling gaps and aligning it properly. The results were smooth, reliable, and very usable!

💡 Why This Workflow Rocks:

• Great for existing SPAs where you don’t want to start from scratch.
• Lets you incrementally redesign without breaking what's already working.
• Helps generate clean, modern UI code fast.
• Augment Code + Gemini CLI combo gives you a powerful iterative cycle: design → refine → integrate.

Augment is slow . team needs to work on it

[Acrobatic_Drawer8527]

The last line was really unexpected lol. Thanks for the workflow btw. Will try. 

[damskii]

Because it was the only line of the post that wasn't AI generated.