[Level 2] LP Creation (Gemini CLI Edition): Taking on Gemini and VibeCoding!
My personal self-expansion level using Gemini up to this point
・Created a simple app with Python
・Created an LP using HTML and CSS
・My first-ever Mac debut
→ It would take a long time to explain this part, but after my Windows PC kept throwing errors, I made my first-ever Mac debut.
Anyway, just as I was wondering how much I should fine-tune the LP I created last time, 'Gemini CLI' appeared.
Hmm...? What is CLI in the first place...?
I was at this level at the beginning ( ´艸｀)
What is the abbreviation 'Gemini CLI' for?
CLI stands for Command Line Interface.
The meanings of each word are as follows.
Command: Instructions or orders you want the computer to execute
Line: A format where input is entered one line at a time (text-based)
Interface: A point of contact or means for exchanging information between a user and a computer
In other words, it means an interface (operation screen) for operating a computer by entering commands one line at a time using text (characters).
Confirming the first question
'Can I use it too?'
Yes, it is possible for you to use Gemini CLI!
You might feel that 'CLI' is for developers, but Google has designed it so that more people can utilize AI.
Reasons why even non-developers can use it
Instructions in natural language: Instead of writing programming code, Gemini CLI allows you to give instructions in natural language, just like you speak normally. For example, you can give instructions like 'Summarize this text' or 'Change the name of this file'.
-
Wide range of uses: Beyond coding assistance, it can be utilized for various purposes such as the following.
Content generation: Creating blog posts, social media updates, emails, etc.
Information search and summarization: It can link with Google Search to easily find the latest information and summarize its content.
Problem solving: You can ask for solutions or tips regarding any issues you are facing.
Task management: It can also be used for organizing ideas or creating simple lists.
Simple setup: If you have an environment where Node.js is installed, you can start using it immediately by installing it with a few commands and authenticating with your Google account.
Free tier provided: If you log in with a personal Google account, a sufficient free usage quota is provided through the free Gemini Code Assist license.
Thinking that I might as well try it out, I decided to challenge myself to create an LP with the same content, as it would also serve as a comparison to using Colab!
By now, you might have noticed my personality; I'm the type who gathers information while executing at the same time, so I tend to run into errors and fail quite often, haha.
First Gemini CLI
There were some troubles even during the environment setup phase, but I managed to get it working somehow✨
I typed "gemini" into the terminal I finally learned to use and launched it!
Oh wow!!
*You can choose between Dark or Light themes using the arrow keys.
After that, authenticate with your Google account.
I wonder if I should type here...?
I immediately asked if it could create an LP!
It said it could, so I requested it.
The basic structure of the LP is as follows.
Hero Section (Top, first view)
Catchphrase: Catch the visitor's eye and convey the purpose of the LP concisely.
Main Visual: Visually appealing elements such as an image of the "Heart Concierge" app fairy (an animated GIF would be even better!) or an image of a conversation with Gemini.
Call to Action (CTA): A button to encourage the next step, such as "Experience it now."
Problem Statement and Empathy Section
Present the worries and challenges the target audience faces, such as "Programming is difficult" or "I gave up because I couldn't write code," to evoke empathy.
Presenting the Solution (What is Vibe Coding? / Introduction to Gemini)
Explain that "Vibe Coding" is what solves those worries. And that Gemini is what makes that Vibe Coding possible.
Convey the core message here: **"You don't have to write code; you can create creative works just through conversation."**
Introduction to the "Heart Concierge" AppIntroduce the app actually created as a concrete example.
Feature Description: The fairy changes according to emotions, music suggestions, messages from the fairy, etc.
App Images: Screenshots of the app actually running (it would be good to have versions for multiple emotions).
Benefits of the Vibe Coding ExperienceSpecifically appeal to the joy of becoming a creator, the fun of shaping thoughts, and the experience of touching the possibilities of Python.
Re-emphasize the message that "you can realize the world you want to create" even if you are not a programmer.
Concrete Experience Method / Next StepsEncourage concrete actions such as "Open Gemini and start a conversation" or "Experience that this LP itself is made with Vibe Coding."
CTA button again.
FooterSimple credits, etc.
What is so amazing about the CLI?
Wow. As a beginner, I'm just moved by it (/・ω・)/
When I made the request, it started by creating folders and automatically generated HTML and CSS files.
It even properly confirms whether it's okay to access things ✨
Something that was quietly difficult when using Colab was placing images.
Saving images to Google Drive and setting up sharing.
Extracting the ID from the URL and incorporating it into a format that Colab can read.
With the CLI, I just saved them in a folder and told it "I want you to insert an image here," and it put it in for me!!
The completed LP
It really didn't even take 30 minutes, and this is what was completed.
Fine-tuning is of course necessary, and you can keep obsessing over it, but it didn't take time for the general framework.
The CTA color also changes 💕
After this, if I place images here or add animations, it might be at a public-ready level ✨
Realizations
Gemini continues to evolve. Careful explanations, persistence with errors, integration with Google apps, and even being able to perform folder operations in natural language.
And it can be used for free.
Especially regarding folder operations and access within the PC, it's really scary for a beginner unless it's a brand you can trust.
Because it is building code with VibeCoding = you can perform operations without understanding the meaning.
What if malicious operations were embedded...?
In that sense, I deeply felt that having a trustworthy brand is also important.
(You might be thinking, 'Shouldn't you acquire basic knowledge before that?' haha)
The project I've been working on with Gemini is finally reaching its final stage.
Here is the progress as of now.
Currently taking on this challenge.
As someone who usually uses ChatGPT, I'm taking on Gemini and VibeCoding!
This might be the chance to wipe away my many past experiences of giving up on programming.
A hidden theme is also how much I can self-expand together with Gemini.
First, I created a small app using Python.
I tried creating an LP using Colab.