Clawdbot火爆后我忍不住了：零基础文科生实战Vibe Coding

作者：Denise I Biteye内容团队，Bbo I XHunt运营团队

最近刷X看到Clawdbot大家都在用AI代理干各种事，突然觉得文科生也可以用"vibe"方式玩代码了，于是开始了这个零基础实战。

Vibe Coding被视为一种“需求即代码”的新范式，甚至被寄予“让非程序员也能构建工具”的期待。

然而，一个现实的问题始终存在：当技术门槛被降低，真正的落地能力是否也随之而来？

为了回答这个问题，我以一个完全没有代码经验的使用者身份，完整体验了三款主流 Vibe Coding工具。

过程并不顺利：踩坑、翻车、反复推翻重来，但也正因为如此，我摸清了哪些地方最容易出问题，以及该如何绕开这些坑。

本文并非工具测评，而是一次从认知到实践的真实记录。

一、概念理解：什么是Vibe coding？

これは「需求だけ出して、コードは書かない」新しい開発パラダイムです。

この概念は、かつてOpenAIの共同創始者Andreji Karpathyによって提唱されました。彼の言葉は：

「これは新しいプログラミング方式で、私はVibe Codingと呼んでいます。感覚（Vibes）に完全に委ねて、指数関数的な効率向上を享受し、もはやコードの存在を忘れるほどです。」

Vibe Codingのモードでは、あなたは「建築作業員」ではなく、むしろ「プロダクトマネージャー」や「クライアント側の親方」に近い存在になります。

あなたの役割はAIに正確に伝えることです：「家を建てたい。ここに落ち窓を、あそこにプールを。」

もし満足できなければ、「感覚が違う、もう一度直そう」と伝える。

これがVibe！

二、避坑ガイド：Vibe Codingの安全ライン

AIプログラミングの扉を開く前に、まず「金庫」をしっかり施錠しましょう。多くの初心者はAIとの対話中に敏感な情報を無意識に送信してしまい、これは非常に危険です。

1. 絶対に漏らしてはいけない3つのデータ

• API Key：各種プラットフォームの「プリペイドカード」に相当。漏れると即座に残高がゼロに。 *秘密鍵/ニーモニックフレーズ：絶対に、永遠に、AIやコードファイルに書き込まないこと。一度漏れると、ブロックチェーン上の資産がゼロになります。
• Cookieデータ：一部のチュートリアルではブラウザからCookieを取得して自動化しますが、Cookieにはログイン状態が含まれ、漏れると他人がパスワード不要でTwitterやDiscord、取引所アカウントにアクセス可能です。

2. コア原則：環境分離とデータのマスキング

API Keyや敏感情報は絶対にコードやプロンプトに直接書かないこと。

正しい方法は「環境変数」を使うことです。コードはシステムの変数名を読み取り、秘密鍵の内容を直接扱わない。

Windowsの設定手順は以下の通り：

• キーボードでWin+Sを押し、「環境変数」と検索
• 新しい変数を作成
• 変数名と値を入力して保存

MacOSの設定手順は以下の通り：

• Command + スペースを押し、「ターミナル」と検索して開く
• 黒いウィンドウに以下のコマンドを貼り付け（実際のKeyに置き換えてください）：

echo 'export CRYPTOHUNT_API_KEY="あなたのsk-xxxxxx密钥"' >> ~/.zshrc

• 設定を反映させるために続けて入力しEnter：source ~/.zshrc
• (任意) 成功確認：echo $CRYPTOHUNT_API_KEYと入力し、あなたのキーが表示されれば設定完了。

三、実戦（失敗）振り返り：三つのツール、三つの体験

理論は以上です。さっそく実戦に入ります。最適なツールを見つけるために、三つの代表的なツールを試しました。それらを選んだ理由は、それぞれが現在のVibe Codingの三つの主流形態を代表しているからです。

• Google AI Studio：超高速でプロトタイプを生成する軽量路線
• Antigravity：AI代理＋ローカルフルスタック開発のエンジニアリング路線
• Lovable：対話がそのままアプリになる抽象化路線

もし「どのツールが初心者でもすぐに実用できるか」だけ知りたいなら、3つ目のLovableに飛んでもOKです。弯道を避けたいなら、全体を通して読むことをおすすめします。順番に振り返ります。

1.Google AI Studio

位置付け：個人開発者、スタートアップ向け

体験：スピードと無料を重視し、数分でAIアイデアを検証できる

公式：https://aistudio.google.com/apps

最初に使ったのはクリスマスの日でした。みんなサイバーストリートツリーを作っている中、私も試してみました。適当にプロンプトを投げると、わずか5分で非常に美しい3Dページが生成され、粒子がジェスチャーに沿って流れ、滑らかさは抜群。

時代が変わったと実感しました。

（昔の理系男子が女の子を喜ばせるために夜通しコードを書き、半日かけてハートを跳ねさせるのに比べると、今やVibe Codingに任せれば、瞬時に感情価値を最大化できる。）

成功事例に触発されて、調子に乗り、真面目なことに取り掛かることにしました：Cryptohunt APIを呼び出してTwitterデータのダッシュボードを作る。

APIドキュメントを投げてみると、最初は順調に進み、バックエンドロジックも秒で通り、データも取得成功。これだけ？と思った矢先、

「データをきれいにフロントに表示して」と頼むと、悪夢が始まる：

• グラフが表示されない？コードを修正
• 表示はされるが不完全？またコードを修正し、インタラクションが壊れる
• インタラクションは直ったが、APIデータが読み込まれない

このループに陥り、2日間費やして諦めました。

最終的な表示図（AIはすでに私の絵心を超え始めている）

失敗のまとめ：Google AI Studioは偏差値低め。アイデアを出してシングルページのデモを作るには神レベル。ただし、フロントエンドと深く連携させる（APIデータの流れや複雑な表示）には向いていません。コードの論理が全くわからないと、私のようにフロントエンドの行き詰まりから抜け出せなくなる。

2.Antigravity

位置付け：複数モデル切り替え可能な代理型フルスタック開発ツール

特徴：モデル切り替え、タスク分解、自動テスト

公式：https://antigravity.google/

実際に使ってみると、コードを書き始める前に、ログインでほぼ挫折しそうになりました。普通のツールのように、ページを開けばすぐ使えるわけではなく、アカウントとネット環境にかなり厳しい制約があります。

アカウントの制限は、あなたのネットワークIPではなく、Googleアカウントの「紐付けられた国/地域」によるものです。サポート外の地域（例：中国本土、香港）だと、ログインが拒否されます。地域変更も何度も拒否されました。

一連の流れを経て、唯一の救いは「裏技」的なログイン方法：Antigravity tools

1. 米国IP＋tunのグローバルモード設定
2. antigravity toolsをダウンロード

Twitterのシェアリンク：https://x.com/idoubicc/status/2004848130693759213 3. ダウンロード後、アカウントを追加しOAuth認証

4. 認証成功後、ログインページにリダイレクトされ、モデルのクォータも見える

（リスク注意：Antigravity Toolsはオープンソースプロジェクトで、AntigravityモデルをClaude Codeなどに接続するのに便利です。ただし、Vibe Codingの過程では、操作環境と資産ウォレットや重要アカウントのPCを分離し、潜在的なセキュリティリスクを低減することを推奨します。）

ツール内部に入った後、私が見つけた超重要な小技を二つ紹介します：

1. 中国語プラグインをインストール：左側の拡張機能からChineseを検索し、簡体字の言語パックをインストール、再起動。これでUIが中国語になり、理解コストが大幅に下がる。 2.「全局キャラクター設定」を注入：Antigravityは「全体ルール」を設定可能。操作は右側のRulesアイコンをクリック→+ Workspace（ワークスペースルール追加）を選び、「全局ルール提示文」を貼り付けると、AIに中国語使用を強制でき、コード出力の質も向上。

ただし、ログインと基本設定が完了しても、実際にコードを動かすと、現実の冷水を浴びせられます。Google AI Studioのように即時プレビューはできず、Node.jsやVS Codeなどの補助ソフトをダウンロードしたり、HTML内でしか結果を見られません。しかも、大規模モデルの応答速度は目に見えて遅い。要求を出すたびに画面がぐるぐる回る。

しかし、Antigravityには非常に驚くべき機能：自動テストがあります。コードを書き終えると、動画プレビューを起動し、まるで人間のようにウェブページをクリックしてロジックの動作確認をします。AIが自分で画面上を操作しているのを見ると、「未来が来た」と感じるほどの衝撃です。

私が作ろうとしたプロジェクトは、「暗号通貨のAlphaシグナル捕捉器。Cryptohunt APIを使ってTwitterデータを監視し、ツイート中のティックを自動取得、討議されているトークンを集計し、討議熱度順に並べる」。

しかし現実は厳しい。努力してコードを書き、テストもしているのに、API連携の核心部分で壁にぶつかる。おそらくローカルネット環境の複雑さや、AIのAPIドキュメント理解の偏りが原因で、データがどうしても連携できない。

デモ：擬似データ表示例

端末のエラーが赤く点滅し、AIの幻覚「今回は絶対成功する」と思いながら、気づいたのは：フルスタックは良いが、ネットワークや環境のブラックボックス性のため、実用的なツールを作るのは初心者には依然として高いハードルです。なぜなら、Antigravityはあらかじめあなたが開発者であることを前提としているからです。

3.Lovable

位置付け：「対話がそのままアプリになる」プラットフォーム

特徴：ローカル環境の設定不要、思ったままに作れる

公式：https://lovable.dev/

Lovableの体験を通じて、真のクライアント側の親方を実感しました。もしかして、唯一有料だから？（ヒント：ヤフオクで15RMBで100クレジットを購入し、完成後も使い切っていない）

Lovableでは、一行のコードも変更せずに、次のCrypto Twitter監視ツール「Crypto Pulse（暗号脈拍）」のダッシュボードを完成させました。

そう、これが私の成功例です。

オンライン体験URL：https://tweet-whisperer-dash.lovable.app/

「機能詳細」

A. 全体データとAI要約

トップページに映るのは、「体温計」のような内容：

• リアルタイムデータカード：上部に24時間内のツイート総数、インタラクション総数、アクティブKOL数、市場感情指数を表示。具体的な内容は見ずとも、24時間前のデータと比較し、赤か緑かを見れば、今日の市場がパニックか貪欲かがわかる。
• AIインテリジェントサマリー：最も時間短縮できる機能。Gemini AIを統合し、過去数時間の何千何万ものツイートを自動で読み込み、市場レポートを作成。

B. トレンドレーダー

次のバブルコインを見逃したくない？

• インテリジェント分類：ホットトピックを自動選別し、Topic（話題）、Project（プロジェクト）、Token（トークン）、KOLに分類
• 上昇下降の風向計：各タグの24時間言及回数の変化率（上昇/下降）を表示。討議量が急増している場所にチャンスあり。

C. インテリジェント情報流

雑多なタイムラインにさよなら。洗練された4つのタブ：

• エッセンス：AIが二次選別した高価値コンテンツ。無意味なスパムを除外。
• ホット：現在のインタラクション（いいね＋リツイート）が最も多い爆発的ツイート。
• 大V：業界の大物（例：Elon Musk、Vitalikなど、フォロワー数>10万）のリアルタイム発言。
• 最新：CT関連アカウントの最新ツイート。常に新情報をキャッチ。

*体験詳細：地域別フィルター対応（英語圏/中国語圏）、カードクリックでTwitter原文に直リンク。

「使用上の注意」：現在は私個人のAPIキーを使用しているため、データ送信にはAPIクレジットを消費します。限られた枠なので、早めに体験してください。

四、Cryptohunt API実用攻略

Vibe codingの過程で、コストパフォーマンスの高いCryptohuntデータベースを選びました。コードの詳細は理解していませんが、APIは徹底的に把握したので、ここに攻略を書きます。

公式リンク：https://pro.cryptohunt.ai/

1. 精密な投げ込み

多くの初心者はAPIドキュメントを丸ごとAIに投げてしまい、AIも混乱します。

• 間違った例：これがAPIドキュメントです。好きに使ってください。
• 正しい例：トークン監視機能を作りたいです。Cryptohunt APIのpost /tweet/mention_tweetsの部分を読んで、直近1時間のデータを取得する方法を教えてください。

プロンプト例：「/tweet/mention_tweetsインターフェースを呼び出し、ティッカーSOLのツイートを検索してください。期間は直近24時間。インタラクション（いいね＋リツイート）が最も多い上位5件を抽出し、SOLに対する市場の感情を教えてください。」

2. デバッグ神器

Vibe Codingで最もイライラするのは、ボタンを押したのに画面に反応がないときです。このとき、多くの初心者は自己疑念に陥ります：AIのコードが間違っているのか？ネットが遅いのか？APIが死んでいるのか？

このときはAPI使用状況をリフレッシュしましょう。

• 記録あり、ポイント減：API呼び出し成功、データは正常に返ってきている。これはフロントエンドの表示問題です。AIに伝える：「データは取得済みですが、画面に表示されません。レンダリングコードを確認してください。」
• 記録なし：リクエストが全く送信されていない！論理やネットの問題です。AIに伝える：「ボタンを押しても反応しません。リクエストが送信されていません。クリックイベントを確認してください。」

結論をそのままAIに投げると、修正が早くなります。Vibe Codingでは、実際にエネルギーを消費するのはコードを書くことではなく、問題の所在を判断することです。

複雑な文法や実装の詳細はAIに任せ、開発の焦点は情報の掌握に戻ります。

だからこそ、皆が言うのです。Vibe Codingの先には、コードではなくデータが待っていると。

五、最後に：Vibe Codingの二つの核心プレイ

Google AI Studioの「お試し」から、Antigravityの「苦難」、そしてLovableの「爆発」まで経験し、ついに理解しました：ツールはあくまで剣。あなたのVibeこそ心の道。

Vibe Codingを試すとき、必ずこの二つのポイントを心に留めてください。これらはどんなコードよりも重要です。

1. 想像力：想像力こそ唯一の「天井」

• Vibe Coding時代、技術の壁は崩壊しています。以前はツールを作るのが怖かったのは、書けないと思ったから。でも実戦で証明済み。論理が通じれば、AIは書き出す。
• ただの「コンクリート積み工」ではなく、「アーキテクト」になれ。これまで夢見たことのない製品を大胆に構想しよう。全ネットデータを監視するレーダー？自動裁定ロボット？頭の中の「やりたい」を「青写真」に変えるだけ。

2. 話せること：プロンプト（提示文）はあなたのソースコード

多くの初心者が失敗するのは、AIに対して遠慮しすぎたり曖昧すぎたりするからです。

曖昧な要求＝曖昧な結果

• 曖昧を拒否：AIに「使いやすいWebページを作って」と言わないこと。（AI：何が使いやすい？）
• 正確さを追求：私がダッシュボードを作るときのように、「ダークモードのDashboardを作りたい。トップにこの4つのデータカードを配置し、このAPIを呼び出し、右側にAI自動要約を入れて」と具体的に伝える。

覚えておいてください。あなたは今やクライアント側の親方です。威厳は「明確な要求」と「根気強いフィードバック」から生まれます。AIが間違えたら、自分を疑わず、「違う、やり直し。Aが欲しいのにBを求めている」と伝えましょう。

ここまで読めば、あなたはほぼVibe Codingでツールを作る能力を持っています。

迷わずに——

あなたのVibeをコードに変えましょう。