Forem: Putu Adi

Vibe Coding with Gemini in Google AI Studio

Putu Adi — Mon, 09 Mar 2026 09:49:07 +0000

Vibe Coding with Gemini in Google AI Studio 🚀

Build, Refine, and Deploy an AI-Generated App

The AI era is changing the way developers build software. As a frontend developer, I’ve noticed that AI tools are no longer optional—they’re becoming an essential part of the workflow.

One interesting trend is Vibe Coding: generating and iterating on applications using AI with natural language prompts.

In this article, I’ll show how I used Gemini inside Google AI Studio to:

Generate a working application from a single prompt
Refine the UI using annotation tools
Save the project directly to GitHub
Deploy it to Vercel

Let’s walk through the process.

What You'll Do

In this tutorial you will:

Build & Prompt
Use Google AI Studio's Build Mode to generate a working app from a single prompt.
Refine with System Instructions
“Vibe check” the AI by defining a persistent coding style and persona.
Save to GitHub
Bootstrap a new repository directly from AI Studio.
Deploy to Vercel
Deploy the generated application quickly.

What You'll Learn

By the end of this tutorial you will learn:

How to use Build Mode in Google AI Studio for rapid prototyping
How System Instructions help maintain consistent AI behavior
How to integrate Google AI Studio with GitHub
How to deploy an AI-generated app to Vercel

What You'll Need

Before starting, make sure you have:

Chrome Web Browser
Google Account
Gmail Account
GitHub Account
Vercel Account

Before You Begin

Open the Google Cloud Console and create or select a project.

👉 https://console.cloud.google.com/

Go to the Project Selector page and either:

Select an existing project
Or create a new one

This project will be used by Google AI Studio.

Brainstorming the Idea 💡

First, we brainstorm the idea we want to build.

In this example, I decided to build a Nutrition Tracker for bulking and cutting.

The Final Prompt

Once the idea is clear, we write a detailed prompt.

Here is the final prompt used in Google AI Studio Build Mode:

Build a Next.js web application for a Bulking & Cutting Nutrition Tracker
with a high-contrast "Dark Gym" aesthetic using Tailwind CSS.

Features:
- Macro-Centric Dashboard displaying real-time progress for Protein, Carbs, Fats, and Calories
- Dynamic goals based on Bulking or Cutting mode
- Goal Switcher to toggle between modes
- Efficiency Score (Protein per 100 Calories) for each food item
- Meal Logger using weight-based input (grams)
- Use a 5-item dummy food database
- Body Weight & Body Fat % tracker

All user data should be stored and synchronized using LocalStorage with React Hooks.

The UI should be mobile-first and look like a professional fitness application.

Implementing the Prompt

After submitting the prompt, Google AI Studio generates the application automatically.

Within minutes, we already have a working prototype.

This is where Vibe Coding shines: fast iteration with AI assistance.

Improve the Result with Annotation Mode ✨

To refine the UI, we can use Annotation Mode.

This feature allows you to draw directly on the app preview and attach instructions to specific UI elements.

Example improvements:

Draw:
Use the box tool to highlight the score counter.

Comment:

"Make this font larger, digital, and glitchy."

Sketch:
Point to the Play/Pause buttons.

Comment:

"Change these to glowing neon icons."

This allows you to refine your UI visually instead of writing long prompts.

📚 Reference:
https://codelabs.developers.google.com/vibe-code-with-gemini-in-aistudio#3

Save the Project to GitHub

Instead of downloading files and manually creating a repository, Google AI Studio integrates directly with GitHub.

Steps:

Connect your GitHub account
Create a new repository
Push the generated project automatically

This saves time and simplifies the workflow.

📚 Reference:
https://codelabs.developers.google.com/vibe-code-with-gemini-in-aistudio#5

Deploy the Application 🚀

You can deploy using:

Google Cloud Platform
Or other platforms

In this example, I used Vercel (free tier).

Steps:

Open Vercel
Import the GitHub repository
Follow the default configuration

📚 Reference:
https://codelabs.developers.google.com/vibe-code-with-gemini-in-aistudio#6

Demo Project

Here is the deployed demo project:

👉 https://iron-track-food-nutrition-apps.vercel.app/

Final Thoughts

Vibe Coding with Google AI Studio is a powerful way to rapidly prototype applications.

Instead of spending hours building a basic structure, you can:

Generate a full app with a prompt
Iterate visually with annotations
Push code directly to GitHub
Deploy instantly

For developers, AI should not replace our skills—but amplify productivity and creativity.

And honestly, it’s pretty fun.

References

Google AI Studio Codelab
https://codelabs.developers.google.com/vibe-code-with-gemini-in-aistudio

MCP Figma: The Frontend Developer’s New Assistant

Putu Adi — Tue, 02 Dec 2025 08:26:15 +0000

Recently, I explored a new piece of technology called MCP Figma or as I prefer to call it, The Frontend’s Assistant.

At first, a few questions crossed my mind:

“Will this make my work easier, or do I need to adapt to new behaviors?”
“Since Figma is mainly used by designers, will frontend developers like me struggle to understand it?” (For context: I’m still a junior frontend developer, haha.)
“Is this assistant going to replace frontend developers?”

This article is my attempt to answer those questions based on my research and hands-on experimentation.

1. What is MCP?

As stated on the official site:
“An open-source standard for connecting AI applications to external systems.”
(https://modelcontextprotocol.io/)

In simple terms:

An MCP Server is an external service that exposes data or functions so AI applications can access them through the Model Context Protocol.
It acts as a bridge that connects AI to things like files, databases, APIs, or specific tools in a safe and structured format.

Instead of the AI interacting directly with your system, it communicates through the MCP Server. This makes integrations safer, more consistent, and easier to manage especially when connecting AI to multiple external data sources.

2. What is Figma?

(https://www.figma.com/)

Figma is a cloud-based design platform for creating UI/UX designs, prototypes, and collaborative workflows in real-time.
Because it runs directly in the browser, designers, developers, and product teams can work together in the same file without installing additional software.

With features like Auto Layout, prototyping, shared libraries, and component systems, Figma makes it easy to maintain large-scale design projects. It also provides integrations and plugins that support developer handoff making the design-to-code workflow smoother and faster.

3. Why Figma MCP Server Exists

After understanding MCP and Figma individually, the next question is:
Why combine them? Why does “Figma MCP Server” exist?

The answer is simple:

There is a growing need for AI to directly understand, analyze, and extract structured data from design files.

Figma MCP Server allows AI tools to:

read design structures
inspect components and metadata
automate documentation
convert design into code
validate UI accuracy
speed up design-to-development workflows

AI no longer needs to interpret a screenshot.
It can access real, structured design data in a standardized and secure way.

This results in faster, more accurate, and more efficient collaboration between designers and frontend developers.

📘 Setup Guides

Official Setup Guide:
https://help.figma.com/hc/en-us/articles/32132100833559-Guide-to-the-Figma-MCP-server

🧩 Supported AI Tools

a. Cursor AI
Guide by Sergei Chyrkov:
https://www.youtube.com/watch?v=PPqt_xLg_5c

Reference: https://cursor.directory/mcp/figma

b. VS Code + Copilot / MCP
Guide by Snyk:
https://www.youtube.com/watch?v=50tkvZhOVqM

Reference:
https://code.visualstudio.com/docs/copilot/customization/mcp-servers#_add-an-mcp-server-to-your-workspace

Figma API Key (if needed):
https://essential-addons.com/docs/how-to-get-figma-api-key/

4. My Own Implementation

A few weeks ago, I created a personal design case study:

A fruit shop e-commerce landing page called “Jaya Abadi.”
The page includes sections for products, business info, partners, testimonials, contact, and more fully responsive for desktop and mobile.

🎨 My Mockup

🔧 My Workflow

a. Set up MCP Server (I used Cursor AI)

b. Selected a model (I used the free plan limited, but okay).
c. Prompting process.

Example prompt I used:

create complete html, css native, sass and images used in the figma (_this link to figma selection part
![Image here](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l2oahbexpq2j9gzu90ap.png)_)

d. And boom the output arrived.
e. So… how was the result?

5. The Result

this demo result link website : https://experiment-use-figma-mcp-server-wit.vercel.app/

Just with a prompt,
I was able to generate a full website structure.

6. Conclusion

For me, the result is surprisingly good.
Yes, the setup time is a bit long (especially if you're starting from zero), but the output is worth it.

✅ Pros

A very fast way to generate initial code from design
Roughly 50% accurate to the original design
Clean code structure
- The AI even used BEM CSS methodology
- And a folder layout similar to Atomic Design

❌ Cons

Some visual adjustments still needed design sense is not perfect
CSS and spacing require manual refinement
Free model limitations reduce quality

💡 Suggestions

A better model produces a better output, simple as that
Use good, clean prompting
If you're a developer, prepare your project setup before running the MCP workflow
Expect to refine the design manually at the end

Final Thoughts

This is a fascinating innovation.
It helps a lot, especially for frontend developers who:

don’t want to design from scratch
want faster design-to-code workflows
enjoy experimenting with AI tools

It won’t replace frontend developers, but it will empower us to focus more on structure, logic, performance, and polish.

And I’m excited to see how this evolves next.

Thanks for reading! 🙌

Moment.js vs Day.js — Which One Should You Use Today?

Putu Adi — Sat, 05 Jul 2025 11:41:52 +0000

Hi everyone! 👋

Welcome to my very first online article! 😄

This is actually my first time writing a technical post, so please bear with me if it’s not perfect. I'm open to feedback and discussion — feel free to drop your thoughts in the comments to keep me motivated and excited to share more!

🔍 Background

This article is inspired by a recent task I received from my team at work. We're currently working on a JavaScript-based project using Nuxt.js, and I was asked to research date manipulation libraries.

We had previously used Moment.js, but I kept encountering discussions comparing it to Day.js — some even questioned whether Moment.js was still relevant. That piqued my curiosity.

So I ran a quick technical comparison between the two. Rather than saying one is "better", I wanted to understand where each library excels and what trade-offs they offer. Hopefully, this post helps you make the right choice for your use case too!

🆚 Moment.js vs Day.js

Here’s a side-by-side comparison of the two popular JavaScript libraries for date and time handling.

📆 Moment.js

Released: September 15, 2011
Created by: Tim Wood
Purpose: Simplify date parsing, validation, manipulation, and formatting with a developer-friendly API.

🔍 Project Status

As of 2020, Moment.js is in maintenance mode.
No new features are planned, but bug fixes and security updates may still be provided.
Reference – Project Status

📆 Day.js

Released: May 23, 2018
Created by: @iamkun
A modern and lightweight alternative to Moment.js, with a similar API.

✨ Strengths of Day.js

Small bundle size (~2KB without plugins)
Fast performance
Immutable date objects
Tree-shaking friendly
Plugin-based system for optional features
Compatible with modern frameworks like Vue, Nuxt, and React

📊 Quick Comparison Table

Feature	Moment.js	Day.js
Release Year	2011	2018
Bundle Size	~67 KB	~2 KB
Performance	Moderate	Fast
Tree-shaking Support	❌ Not supported	✅ Supported
Project Status	Maintenance	Actively maintained
Immutability	❌ Mutable	✅ Immutable
Timezone Support	✅ Built-in	➕ Via plugin
Parsing Flexibility	✅ High	➕ With plugin (customParseFormat)

📦 Moment.js on Bundlephobia

📦 Day.js on Bundlephobia

🎯 When to Use What?

Here’s a quick guide to help you decide:

✅ Use Moment.js if:

You're maintaining or working on a legacy codebase.
You need comprehensive parsing and timezone support out-of-the-box.
Bundle size is not a major concern.

✅ Use Day.js if:

You're building a modern application where performance and size matter.
You prefer immutability and a modular plugin system.
You're using frameworks like Vue, Nuxt, React, etc.

🧠 Conclusion

Both Moment.js and Day.js are powerful in their own ways.

Moment.js remains a mature and battle-tested option for robust date handling, especially in older codebases.
Day.js offers a more modern take, focused on size, speed, and simplicity — while keeping the familiar API.

Rather than suggesting one is strictly "better" than the other, I hope this article shows how they serve different needs depending on your project context.

💡 Final Thoughts

If you're starting a new JavaScript project, it’s worth evaluating Day.js for its modern architecture and smaller footprint.

If you're maintaining a legacy project, Moment.js might still be the more practical choice, but keep in mind its status.

Ultimately, the best tool is the one that fits your project’s requirements, team familiarity, and long-term maintainability goals.

🙏 Thank You

Thanks so much for reading my first blog post!

I hope this helped clarify the differences and use cases between Moment.js and Day.js. If you’ve used either (or both), I’d love to hear your experience in the comments!

💻 Check out the small experiment I built:

👉 Live Demo – GitHub Pages

Until next time — happy coding and keep learning! 🚀