Experience from a non-tech with Lovable and Google AI Studio

"Not an engineer, have no CS background, but I want to build my own website." This isn’t a motivational quote — it’s literally my current reality.

As I mentioned in my bio, I believe biomedical scientists deserve a professional writing and research tool that helps us focus more on experimental design, instead of being buried in repetitive tasks.

But here’s the problem: I don’t know how to write frontend code.

First Love: Lovable — It’s Truly Lovable

Two months ago, I discovered Lovable, an AI coding tool designed for non-engineers. Based on your prompt, it can generate a complete frontend project — including HTML, CSS, and JavaScript. The best part? It syncs everything directly to a GitHub repo. For someone whose GitHub profile is mostly empty, this felt like magic.

I asked Lovable to build a one-page website to showcase my AI-powered research assistant idea. What it delivered deserved a solid 4.5/5. The UI was modern, clean, and soft in color. For the first time, it felt like my goal — to help biomedical researchers escape mundane tasks — could actually come to life.

Here is my complete prompt:

Create a modern, elegant, one-page web app with a clean and warm UI 
 
**Key Features** 
-   A full-screen landing page with a soft gradient background. 
-   A hero section with bold text introducing my purpose: 
 
**In the one-page website, introduce background of why to build this deep research tool** 
-  I hope to release the time of scientists occupied by repetitive daily work: search paper, read paper, and write paper. 
-  I hope to provide a tool to quickly provide scientists knowledge more on cross-disciplinary innovation. 
-  Privacy disclaimer: no research- or idea-related information is recorded. We value your research privacy. 
 
**How It Works** 
1. User Input: 
-  Build a chat widget and place it at right-bottom corner, followed the instruction provided by the n8n (https://www.npmjs.com/package/@n8n/chat) 
-  Open the chat widget, users enter a topic they want to study 
-  Example: "I want to study how lncRNA being used as gene therapy targets” 
 
2. Webhook Communication with n8n: 
-  The user's input is sent back to n8n workflow that I have already built. 
-  The webhook processes the request and returns a structured response. 
 
3. AI Response Display 
-  The design should follow the best UI/UX principles based on the app’s purpose. 
 
**App-Specific Features** 
-  The UI should be designed to support the purpose biomedical research, e.g. to show the profession. 
-  The system should provide step-by-step action to guide users how to use this website. 
 
**Design & User Experiences** 
-  Visual Aesthetic: Should match the app's purpose. 
-  Typography & colors:Use a professional and modern style 
-  Navigation & UI Flow: 
    -  Include an input area at the bottom for users to submit queries. 
    -  Display AI responses in an organized and structured format. 
    -  Provide clear call-to-action buttons (e.g. try again).

But then came the catch — Lovable’s free tier only allows 5 prompts per day. Yes, just 5. If your prompt isn’t clear enough or you’re unhappy with the output, you’ll have to wait until tomorrow to try again.

New Flame: Google AI Studio + Gemini 2.5 Pro

Just as I was getting frustrated with that 5-prompt limit, Google released Gemini 2.5 Pro. I immediately jumped ship and started building my ideal website using Google AI Studio.

With the prompt provided above, just like Lovable, Gemini 2.5 Pro gave me everything I asked for — but for free.

Even better, it knew how to integrate the n8n chat widget I had already set up. It provided structured steps for connecting to a webhook: the user inputs a topic, the data is sent to my backend workflow, and the AI’s response is displayed back on the site. Is this my dream product manager?

The biggest surprise: Gemini told me exactly where to place each piece of code —

• Which part goes in <script> tags
• How to link the CSS properly
• What each file should be named

I could break down the code bit by bit and learn as I went. Finally, I wasn’t stuck at the “I have HTML, but where do I put the chat widget?” stage.

Design Help? Bring in ChatGPT 4o

When it came to visual elements — color palettes, logo, layout — I called in the design expert: ChatGPT 4o. Its image-generation and visual reasoning are on another level:

• I gave it a theme, and it gave me a full color scheme with hex codes, along with rationale like “this combination feels warm and professional.”
• It even helped me sketch a simple logo and suggested icon styles. Basically, it became my virtual design team.

Side-by-Side Comparison

Final Thoughts: From “I Can’t Code” to “I Built a Website”

This whole journey has been eye-opening. I used to think non-engineers could only use tools, not build them. But with the help of AI, we can actually become tool creators.

If you’ve ever wanted to build a website or app, try these three tools. You’ll be amazed at what’s possible — even without formal training. All you need is a clear idea and a bit of patience to craft good prompts. These AI coding tools will be your ultimate co-pilot.

More importantly, they let us go from tweaking code to understanding full project structures — and maybe, just maybe, take the first step toward a future in software engineering.