After Clawdbot became popular, I couldn't help myself: Practical Vibe Coding for Beginners in the Humanities

CN
2 hours ago

Written by: Denise, Bbo, Biteye

Recently, while browsing X, I saw that everyone was using Clawdbot for various tasks with AI agents, and I suddenly felt that liberal arts students could also play with code in a "vibe" way. Thus, I began this hands-on experience from scratch.

Vibe Coding is seen as a new paradigm of "demand equals code," and it is even expected to "enable non-programmers to build tools."

However, a real issue persists: when the technical barrier is lowered, does the actual implementation capability follow suit?

To answer this question, I, as a user with no coding experience, fully experienced three mainstream Vibe Coding tools.

The process was not smooth: I encountered pitfalls, failures, and repeatedly had to start over. But because of this, I figured out where the most common problems arise and how to avoid these pitfalls.

This article is not a tool review but a genuine record from cognition to practice.

1. Concept Understanding: What is Vibe Coding?

This is a new development model that focuses on "just stating requirements, without writing code."

The concept was first proposed by former OpenAI co-founder Andrej Karpathy, who said:

"This is a new way of programming that I call Vibe Coding. You completely hand it over to the vibes, embracing exponential efficiency gains, even forgetting the existence of code."

In the Vibe Coding model, you are no longer a "builder" but more like a "product manager" or even a "client."

Your task is to accurately tell the AI: "I want to build a house, with a floor-to-ceiling window here and a swimming pool there."

If you're not satisfied, you just say: "It doesn't feel right, make some changes."

That's Vibe!

2. Pitfall Avoidance Guide: The Safety Red Lines of Vibe Coding

Before opening the door to AI programming, you must first secure your "vault." Many beginners unconsciously share sensitive information with AI during conversations, which is extremely dangerous.

1. Three Types of Data You Must Never Leak

  • API Key: Equivalent to a "stored value card" for various platforms; if leaked, your balance can be wiped out instantly.
  • Private Key / Mnemonic Phrase: Absolutely, forever, do not send to any AI or write in any code files. Once leaked, your on-chain assets will be zeroed out.
  • Cookie Data: Some tutorials may teach you to obtain cookies from your browser for automation, but cookies contain your login status. If leaked, others can log into your Twitter, Discord, or even exchange accounts without a password.

2. Core Principles: Environment Isolation, Data De-sensitization

Never write API Keys or sensitive information directly in code or prompts.

The correct approach is to use "environment variables," allowing the code to read the system's variable names instead of directly reading the key contents.

The configuration steps for Windows are as follows:

  • Press win+s on the keyboard, search for "Environment Variables"
  • Create a new variable
  • Enter the variable name and value to save

The configuration steps for MacOS are as follows:

  • Press Command + Space on the keyboard, search for "Terminal" and open it.
  • In the pop-up black box, copy and paste the following command (be sure to replace with your actual Key), then press enter:
  • echo 'export CRYPTOHUNTAPIKEY="your sk-xxxxxx key"' >> ~/.zshrc
  • To make the configuration take effect immediately, continue typing and press enter: source ~/.zshrc
  • (Optional) To verify success, type: echo $CRYPTOHUNTAPIKEY. If your key is printed on the screen, the configuration is successful.

3. Practical Experience (Failures) Review: Three Tools, Three Experiences

Having covered the theory, let's dive into practice. To find the most suitable tool, I tested three mainstream tools. The reason for choosing them is that they each represent one of the three mainstream forms of Vibe Coding:

  • Google AI Studio: Represents the lightweight route of "rapid prototype generation"
  • Antigravity: Represents the engineering route of "AI agent + local full-stack development"
  • Lovable: Represents the abstract route of "conversation equals application"

If you just want to know which tool is most suitable for zero-based direct implementation, you can jump directly to the third tool, Lovable; if you want to avoid detours, I recommend reading this section in full. Let's start the review in order.

1. Google AI Studio

Positioning: Suitable for individual developers and startup teams

Experience: Focuses on "speed" and "free," allowing you to validate an AI idea in just a few minutes

Official website: https://aistudio.google.com/apps

The first time I used it was on Christmas. Everyone was making cyber Christmas trees, and I decided to give it a try. I casually threw in a prompt, and in just 5 minutes, it generated a very beautiful 3D page, with particles flowing smoothly with gestures.

This made me marvel at how times have changed. Think about it: in the past, a tech guy would stay up late writing a string of code to impress a girl, and after running it for half a day, if a beating heart popped up, he would feel very cool. But now? You can completely hand it over to vibe coding, and it can instantly maximize emotional value.

With the success stories backing me up, I started to "inflate" and began working on something serious: calling the Cryptohunt API to create a Twitter data dashboard.

I confidently fed it the API documentation. Everything started smoothly, the backend logic was connected in seconds, and the data was successfully fetched. I thought: is that it?

However, when I asked it to display the data beautifully on the frontend, the nightmare began:

  • Charts not displaying? It changed the code.
  • Displayed but incomplete? It changed the code again, resulting in broken interactions.
  • Fixed the interactions? Now the API data wouldn't load.

I found myself trapped in an infinite loop of "fixing bugs—creating new bugs." After spending 2 days, I gave up.

Final display image (AI has started to give me nonsensical drawings)

Pitfall summary: Google AI Studio is a specialized student. It excels at creativity and making a single-page demo. But once it involves deep integration of frontend and backend (like API data flow + complex frontend display), it can easily overlook critical aspects. If you have no understanding of code logic, you can easily get stuck in a dead end of frontend display like I did.

2. Antigravity

Positioning: An integrated full-stack development tool with multi-model switching

Features: Multi-model switching, task decomposition, automated testing

Official website: https://antigravity.google/

During actual use, before I even started writing code, I was almost deterred by its login process. Unlike most tools that allow you to jump right in after opening the webpage, it has quite strict requirements for accounts and network environments.

The account restrictions are not determined by your current network IP but by the "associated country/region" of your Google account. If your region is not on the support list (e.g., mainland China, Hong Kong), the system will directly reject your login. My requests to change the region were also denied several times.

After going through the entire process, I can only describe it in one sentence: it was exhausting.

After experiencing three account bans and multiple environment switches, I found a workaround for logging in: Antigravity tools.

1) Start by setting a US IP + tun global mode.

2) Download Antigravity tools. Shared link from a Twitter user: https://x.com/idoubicc/status/2004848130693759213

3) After downloading, add your account and start OAuth authorization.

4) Once authorized successfully, you can jump to the login page and visually see your model quota.

(Risk Warning: Antigravity Tools is an open-source project that facilitates the integration of Antigravity models with tools like Claude Code. However, during the Vibe Coding process, it is recommended to isolate the operating environment from asset wallets or important accounts to reduce potential security risks.)

Once inside the tool, I also summarized two extremely important tips for beginners:

  • Install the Chinese plugin: Search for "Chinese" in the left extension bar, install the Simplified Chinese language pack, and restart the software. This step can change the interface to Chinese, significantly reducing the understanding cost.
  • Inject a "global persona": Antigravity allows you to set a "global rule" that the AI must follow at all times. How to operate: Click the Rules icon on the right → Select + Workspace (add workspace rules) and directly paste a "global rule prompt," which can force it to use Chinese and significantly improve code output quality.

(The prompt content is quite long, so I won't elaborate here, but I can share it in the comments if needed.)

However, even after successfully logging in and completing the basic configuration, I was splashed with cold water when I actually started running the code. It couldn't preview instantly like Google AI Studio. I had to download a bunch of supporting preview software like Node.js, VS Code, or only view results in HTML. Moreover, the response speed of the large model was visibly slow. Every time I submitted a request, the screen would just spin.

But Antigravity has a stunning feature: automatic testing. After writing the code, it would launch a video preview, clicking through the webpage like a real person to check if the logic could run smoothly. Watching the AI click around on the screen indeed gave a sense of "the future has arrived."

The project I asked it to try was: "A cryptocurrency Alpha signal catcher. Use the Cryptohunt API to monitor Twitter data, automatically capture Ticks in tweets, count which tokens are being discussed, and rank them by discussion heat."

The reality was harsh. Although it seemed to be working hard to help me write code and test it, I still hit a wall when it came to connecting the API, which was the core part. It might be due to the complexity of the local network environment or the AI's misunderstanding of the API documentation; the data just wouldn't connect.

demo: Display effect of simulated data

Looking at the terminal filled with red error messages and the AI's illusion of "this time it will definitely work," I realized: full-stack development is great, but due to the black box issues of networks and environments, creating a truly usable tool remains a high barrier for beginners. Because Antigravity assumes you are already a developer.

3. Lovable

Positioning: "Conversation equals application" platform

Features: No need to configure a local environment, what you think is what you get

Official website: https://lovable.dev/

Using Lovable made me experience what it truly means to be a client. Is it because only he needs to pay? (Tip: I spent 15 RMB on a certain fish to purchase 100 credits, and I still haven't used them all after completing the project.)

On Lovable, I didn't change a single line of code and successfully created the following Crypto Twitter monitoring tool ----- Crypto Pulse (Crypto Pulse) monitoring dashboard.

Yes, you read that right; this time I finally succeeded.

Online experience address: https://tweet-whisperer-dash.lovable.app/

"Function Details"

A. Panoramic Data and AI Summary

Upon entering the homepage, the first thing that catches your eye is the content's "thermometer":

Real-time data cards: The top displays the total number of tweets, total interactions, number of active KOLs, and market sentiment index within the last 24 hours. Without looking at specific content and comparing it to the previous 24 hours, just a glance at whether it's red or green tells you whether the market is in fear or greed today.

AI Smart Summary: This is the most time-saving feature. The system integrates Gemini AI, which automatically reads thousands of tweets from the past few hours and then writes a market briefing for you.

B. Trend Radar

Don't want to miss the next hundredfold coin?

Smart Classification: Automatically filters hot topics and categorizes them into Topic, Project, Token, and KOL.

Rise and Fall Indicator: Next to each label is the change rate of mentions over the past 24 hours (up/down). Where the discussion volume surges, there lies opportunity.

C. Smart Information Stream

Say goodbye to a cluttered timeline; here are four cleaned-up tabs:

Essence: High-value content filtered by AI, removing meaningless spam.

Hot: The current tweets with the highest interaction (likes + retweets).

Big V: Real-time statements from industry leaders (like Elon Musk, Vitalik, etc., with followers >100K).

Latest: The latest tweets from CT-related accounts, constantly discovering new content.

  • Experience details: Supports filtering by region (English-speaking area / Chinese-speaking area), and clicking on cards can directly jump to the original tweet.

Usage Reminder: Since I am currently using my personal API Key, data return will consume API Credits, which are limited. I recommend everyone to experience it quickly.

4. Practical Guide to Cryptohunt API

During the Vibe Coding process, I chose the cost-effective Cryptohunt database. While I didn't have a clear understanding of coding, I did get a good grasp of the API, so here’s a guide.

Official link: https://pro.cryptohunt.ai/

1. Precise Feeding

Many beginners directly throw tens of thousands of words of API documentation at the AI, and the AI gets confused.

  • Incorrect Example: This is the API documentation; you figure it out.
  • Correct Example: I want to create a token monitoring feature. Please read the section on post/tweet/mention_tweets in the Cryptohunt API. Tell me how to get the data from the last hour?

Prompt example: "Please call the /tweet/mention_tweets interface to search for tweets with the ticker SOL. Limit the time to the last 24 hours. Help me filter out the top 5 tweets with the highest interaction (likes + retweets) to see how people feel about SOL."

2. Debugging Tool

During the Vibe Coding process, the most frustrating situation is: I clicked the button, but there was no response on the screen. At this point, beginners often fall into self-doubt: Is the AI's code wrong? Is the network lagging? Or is the API down?

This is when you can open the API usage refresh:

  • There are records, points deducted: This means the API call was successful! The data has been successfully sent back to your computer. This is a frontend display issue. You can tell the AI: "The data has been retrieved, but the screen is not displaying; please check the rendering code."
  • No records at all: This means the request was never sent! So it's a logic/network issue. Tell the AI: "The button click has no response; the request was not sent; please check the click event."

By directly throwing the conclusion to the AI, it will fix it faster. In the Vibe Coding process, the real energy consumption is no longer writing code but determining where the problem lies.

When we hand over the tedious syntax and implementation details to the AI, the focus of development returns to controlling the information.

Therefore, everyone says that the end of Vibe Coding is not code, but data.

5. In Conclusion: Mastering Two Core Play Styles of Vibe Coding

After experiencing the "trial" of Google AI Studio, the "torture" of Antigravity, and the "explosion" of Lovable, I finally understood: tools are just the sword in your hand; your Vibe is the path in your heart.

When trying Vibe Coding, please remember these two core points; they are more important than any code:

1. Dare to Imagine: Imagination is your only "ceiling"

In the era of Vibe Coding, technical barriers have collapsed. In the past, we didn't dare to create tools because we were afraid we couldn't write them. Now, through practical experience, it has been proven that as long as the logic is sound, AI can write it.

Don't just be a "brick mover"; be an "architect": Boldly conceive those products you previously didn't even dare to think about. Is it a radar monitoring all network data? Or an automated arbitrage robot? What you need to do is turn that vague "want" in your mind into a clear "blueprint."

2. Know How to Speak: Prompts are your source code

Many beginners fail not because the AI is dumb, but because you are too "polite" or too "vague."

Vague requirements = vague results

Reject vagueness: Don't tell the AI, "Help me make a good webpage." (AI: What is good?)

Embrace precision: Speak as I did when creating the dashboard: "I want a dark mode dashboard, with these four data cards at the top, the middle should call this API, and the right side should use AI for automatic summarization…"

Remember, you are now the client. The authority of the client comes from clear requirements and persistent feedback. If the AI gets it wrong, don't doubt yourself; just tell it: "No, that's wrong, start over; I want A, not B."

If you've read this far, it means you likely have the ability to create tools using Vibe Coding.

Don't hesitate—turn your Vibe into Coding quickly.

免责声明:本文章仅代表作者个人观点,不代表本平台的立场和观点。本文章仅供信息分享,不构成对任何人的任何投资建议。用户与作者之间的任何争议,与本平台无关。如网页中刊载的文章或图片涉及侵权,请提供相关的权利证明和身份证明发送邮件到support@aicoin.com,本平台相关工作人员将会进行核查。

Share To
APP

X

Telegram

Facebook

Reddit

CopyLink