If you’re a developer, you know the drill: you get a great side-project idea, open your code editor, start planning the architecture, get lost tweaking CSS alignments, and before you know it, the momentum dies. Another project ends up abandoned in your GitHub repositories.
Recently, I decided to break that cycle and ship GranaCheck—a web app that performs a financial health “checkup” and generates a personalized budget split (dynamically adjusting rules like 50/30/20 based on debt or emergency savings).
The twist? I used Artificial Intelligence as a full product team, broken down into clear, specialized stages. Here is the step-by-step breakdown of how it worked and how you can apply it to your next project.
- Idea Validation & Business Logic Instead of jumping straight into coding, I used AI as a Product Manager (PM).
I explained the core concept and asked it to structure:
The essential input variables (income, age, debt status, emergency fund).
The decision engine logic (e.g., if the user has high-interest debt, priority shifts to a 60/20/10/10 split).
The Minimum Viable Product (MVP) scope to avoid feature creep on day one.
Key Takeaway: Use AI to trim the fluff from your original idea before writing a single line of code.
- Visual Prototyping For the visual layer, I leveraged AI to generate structured screen layouts. Instead of asking for a generic “pretty design,” I provided prompts strictly focused on a Design System:
Style Guide: Defined a functional color palette (emerald green for investments, coral for debts, electric blue for guilt-free spending) and clean typography.
Componentization: Requested separate layout generations (Landing Page, Multi-Step Wizard, and Results Dashboard).
This ensured the UI had clear visual hierarchy right out of the gate.
- Modular Coding with Vue 3 & Tailwind CSS With the UI layout locked in, I moved to an AI code editor to build the app using Vue 3 (Composition API) and Tailwind CSS.
The key strategy here was modular prompting—building one component at a time:
BudgetCategoryCard.vue: Card component displaying each spending category.
BudgetChart.vue: Responsive donut chart.
BudgetWizard.vue: 3-step form with a progress bar.
useBudgetCalculator.js: The composable holding the algorithm’s core logic.
- Visual Refactoring via Image Prompts AI generates code fast, but CSS layout bugs still happen. On the first build of the dashboard, elements overlapped: the header banner bled into the cards, and the chart rendered in default black.
To fix it, I snapped a screenshot of the broken UI, fed the image back to the AI, and asked for targeted CSS fixes:
“The top banner is overlapping the grid. Add mb-8.”
“Category cards are squished together. Apply flex flex-col gap-4.”
“Replace the default black chart slices with our Design System tokens.”
In a single refactoring loop, the layout was fixed and production-ready.
Conclusion
The biggest advantage of using AI for product development isn’t just code generation speed—it’s eliminating operational and creative friction.
The AI acted as PM, UI Designer, Frontend Developer, and QA. My main role was Product Architect: making sure decisions made sense for the end-user and orchestrating the integration.
GranaCheck is live in production. If you have an idea sitting in your head, break the process into short, focused prompts, choose a stack you know, and ship your MVP.