{"slug": "how-i-launched-a-web-app-using-ai-without-getting-stuck-in-code-or-design", "title": "How I Launched a Web App Using AI (Without Getting Stuck in Code or Design)", "summary": "A developer used AI as a full product team to build and launch GranaCheck, a web app that performs financial health checkups and generates personalized budget splits. The developer broke the process into specialized stages, using AI for product scoping, UI design, componentized frontend development, and bug fixing via image-based feedback. The app is now live in production.", "body_md": "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.\n\nRecently, I decided to break that cycle and ship [GranaCheck](https://granacheck.com.br)—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).\n\nThe 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.\n\nI explained the core concept and asked it to structure:\n\nThe essential input variables (income, age, debt status, emergency fund).\n\nThe decision engine logic (e.g., if the user has high-interest debt, priority shifts to a 60/20/10/10 split).\n\nThe Minimum Viable Product (MVP) scope to avoid feature creep on day one.\n\nKey Takeaway: Use AI to trim the fluff from your original idea before writing a single line of code.\n\nStyle Guide: Defined a functional color palette (emerald green for investments, coral for debts, electric blue for guilt-free spending) and clean typography.\n\nComponentization: Requested separate layout generations (Landing Page, Multi-Step Wizard, and Results Dashboard).\n\nThis ensured the UI had clear visual hierarchy right out of the gate.\n\nThe key strategy here was modular prompting—building one component at a time:\n\nBudgetCategoryCard.vue: Card component displaying each spending category.\n\nBudgetChart.vue: Responsive donut chart.\n\nBudgetWizard.vue: 3-step form with a progress bar.\n\nuseBudgetCalculator.js: The composable holding the algorithm's core logic.\n\nTo fix it, I snapped a screenshot of the broken UI, fed the image back to the AI, and asked for targeted CSS fixes:\n\n\"The top banner is overlapping the grid. Add mb-8.\"\n\n\"Category cards are squished together. Apply flex flex-col gap-4.\"\n\n\"Replace the default black chart slices with our Design System tokens.\"\n\nIn a single refactoring loop, the layout was fixed and production-ready.\n\nConclusion\n\nThe biggest advantage of using AI for product development isn't just code generation speed—it's eliminating operational and creative friction.\n\nThe 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.\n\nGranaCheck 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.", "url": "https://wpnews.pro/news/how-i-launched-a-web-app-using-ai-without-getting-stuck-in-code-or-design", "canonical_source": "https://dev.to/lucasoneves/how-i-launched-a-web-app-using-ai-without-getting-stuck-in-code-or-design-5ha5", "published_at": "2026-09-03 00:02:05+00:00", "updated_at": "2026-09-03 00:22:33.822170+00:00", "lang": "en", "topics": ["ai-tools", "ai-products", "developer-tools", "generative-ai"], "entities": ["GranaCheck"], "alternates": {"html": "https://wpnews.pro/news/how-i-launched-a-web-app-using-ai-without-getting-stuck-in-code-or-design", "markdown": "https://wpnews.pro/news/how-i-launched-a-web-app-using-ai-without-getting-stuck-in-code-or-design.md", "text": "https://wpnews.pro/news/how-i-launched-a-web-app-using-ai-without-getting-stuck-in-code-or-design.txt", "jsonld": "https://wpnews.pro/news/how-i-launched-a-web-app-using-ai-without-getting-stuck-in-code-or-design.jsonld"}}