Vibe Coding in Action: From Design to Code in AI Studio, One Prompt at a Time!
In the last phase, we nailed down a high-quality landing page design for MokerSaaS using Google Stitch at zero cost. After getting a UI we're happy with, the next step isn't to open an editor and painstakingly slice images and write code. Instead, we're sticking to our "Vibe Coding" philosophy—outsourcing the actual work directly to AI.
Today, I'm going to do a complete breakdown of how I seamlessly imported the Stitch design into Google AI Studio and, using the Gemini 3.5 Flash model, turned a static design into perfectly functional frontend code with just a few "plain English" prompts.
Prerequisite: Building from Scratch (0 to 1)
First, select the finalized landing page design in Google Stitch and export it to Google AI Studio with one click. Here, I directly hooked it up to the Gemini 3.5 Flash model—which balances speed and logic—to build the base code. In the AI Studio workspace, the left side shows the code being generated in real-time, and the right side is the visual web preview. What you see is what you get.
Build Experience: Because it's building the entire frontend architecture from scratch, the first rendering takes a little longer (just be patient and let the progress bar finish). But when the complete webpage instantly loads on the right, the satisfaction of not having written a single line of code by hand is indescribable. The basic framework is there; next, we fine-tune it step-by-step with prompts:
Step 1: Aesthetic Correction, Removing the "AI-Signature Gradients"
After the first version of the code was generated, the overall framework was very complete. However, I immediately noticed a common issue: all AI models seem to love flashy "gradients" when initially generating frontends, making the interface look a bit cheap. Without any complex CSS debugging, I just typed my first tuning prompt into the chat:
My Prompt: "Do not use gradients."
Result: As soon as I sent it, the flashy gradients in the preview were instantly removed. The interface immediately switched to a clean, crisp, minimalist modern style, vastly improving the texture.
Step 2: Streamlining Pricing Logic
Generic code often comes with a lot of redundant features. Next, we needed to "trim" the page according to MokerSaaS's actual business model. First is the pricing table area. The AI defaulted to a complex monthly/annual billing toggle, which we need to simplify:
My Prompt: "The monthly/annual billing toggle in the pricing section is not needed. Just keep three prices."
Result: The AI perfectly understood my business intent. It cleanly chopped off the redundant billing toggle tab, leaving only the three most intuitive pricing cards.
Step 3: Axe the Redundant Dashboard Entrance
The core business model of MokerSaaS is "source code delivery." Users take the code and deploy it themselves. Therefore, the "Local Dashboard" entrance generated by default in the top navigation bar is completely unnecessary and must go:
My Prompt: "The local dashboard is not needed. The delivery is direct source code delivery."
Result: The logic of the page became extremely streamlined. The extra navigation entrance was completely removed, perfectly aligning with the "source code delivery" business positioning.
Step 4: Adding Dark/Light Mode
With the basic framework and business logic cleaned up, it's time to add a touch of "premium feel" to MokerSaaS. As a modern SaaS product, Dark/Light mode switching is an essential user experience standard:
My Prompt: "Add light and dark mode buttons, and make them toggleable."
Result: The AI quickly appended a theme toggle button to the navigation bar. Clicking the button in the preview area triggered a buttery-smooth transition into dark mode.
Step 5: Integrating Multi-Language Support (i18n)
To capture global traffic later, the website must support multiple languages. We started with the basics: English and Chinese. No matter how complex the function, it's just a sentence away:
My Prompt: "It needs to support Chinese and English, and they can be toggled."
Result: A language toggle button successfully appeared on the page. Clicking it instantly switched between English and Chinese, perfectly setting up the basics of internationalization (i18n).
Step 6: Frontend Architecture Refactoring for Future Scalability
After checking the multi-language toggle, I habitually glanced at the project directory on the left and spotted a potential "landmine." To save time, the AI stuffed all the Chinese and English translation key-value pairs into a single src/translations.ts file. While this barely works for just two languages, it completely contradicts my architectural vision for expanding to more languages later. Maintaining it in the future would be an absolute nightmare.
While the code was still fresh, I decisively instructed the AI to refactor:
My Prompt: "src/translations.ts should be separated. One for Chinese, one for English."
Result: The AI promptly took the order and immediately refactored the directory structure, splitting the translation file into zh.ts and en.ts. The underlying engineering structure instantly became clear and modular, laying a solid foundation for future multi-language expansion.
Conclusion
In less than half an hour, I didn't manually type a single line of HTML code, nor did I wrestle with a single line of CSS. A pure, clean landing page—fully responsive, supporting dark/light mode, bilingual, and with a crystal-clear underlying code structure—was quite literally "chatted" into existence using 6 prompts across 6 steps.
This is the core charm of Vibe Coding: the developer is no longer a boring "code typist," but a "product director" controlling the big picture. You just output your business logic and aesthetic intuition; leave the underlying grunt work entirely to the AI!
Posted Jun 11, 2026, 2:33 AM UTC