Google AI Studio を使って開発者トレーディングカードジェネレーター「CodeCard Forge」を構築しました — お見せします

Google Cloud NEXT 執筆コンテストへの応募です。 正直に申し上げます：これは機能するとは思いませんでした。 「機能する」という言葉は、エラーなく動作するという意味ではなく、私の脳内のランダムなアイデアから、わずか午後一時間のうちに実際に人々が誇って展示できるデプロイされたウェブアプリへと至るという意味です。ソフトウェアが以前から感じたことのないことです。それは Google Cloud NEXT '26 までの話でした。 Google AI Studio は NEXT '26 で、英語の簡潔な記述だけでアプリを構築しながら、その過程を実際に前を見ていくことができるという機能を追加しました。TypeScript、React コンポーネント、API 連携など、フルセットです。Magic: The Gathering のカードデモを流れていました。クールでしたが、誰もがそれについて書こうとしていました。 私が求めているのは、自分自身のものを感じさせるものです。 したがって、このコードカードフォージに道しるべが：開発者が自身のアイデンティティを集得ible トレーディングカードとしてマイントできるアプリです。名前の入力、トップ 3 のスキル、経験年数、そして一文字のバイオの入力。Gemini はそのスタックに基づいて「特別な能力」の説明を、Imagen はアバターを生成します。さらに、カードはレアリティ階級（レア、エピック、レジェンダリー）を割り当てます。 キャッチコピー自体が書かれてしまいました：あなたの開発者アイデンティティを集得ibleとしてマイントしよう。 自分のカードのために、私は AI エンジン师、MI エンジニア、DL エンジニアというスキル、1 年の経験、そして「機械を生き物にすること」というバイオを入力しました。 私が Google AI Studio のビルドインターフェースに入力したプロンプトは正確に次の通りです： 『CodeCard Forge というアプリを生成してください。ユーザーは名前、トップ 3 のスキル、経験年数、一文字のバイオを入力します。Imagen を使ってカード用のスタイリッシュなアバター/ポートレートを、Gemini を使ってそのスキルに基づいて楽しい「特別な能力」の説明を書くようにしてください。カードを集得ible トレーディングカードのようなデザインで、ステータスとレアリティ階級（レア/エピック/レジェンダリー）を付与してください。』 実行を押し、そしてただ... 見た。 以前は AI コーディングツールを使ったことがありますが、1 時間かける必要のある半分未完成のものを期待していました。 私が見たのは、スニペットでもプロトタイプシェルでもない、完全で構造化されたアプリケーションの出現でした。ファイルツリー：コンポーネント/、サービス/、types.ts、App.tsx、デプロイ設定など。ファイルが書き進められる間にそれを読破しました。 本当に私を裏切る瞬間は、コードアシスタントパネル内の「思考中...」セクションでした。Gemini 2.5 はただ生成するだけでなく、声を上げて計画します。Imagen（視覚）と Gemini（テキスト/ロリ）の間の責任分担を、React コンポーネントの構造を、レアリティロジックの処理方法などを、自分で決断しました。私はそれらを告げませんでした。 他の一つ：生成中にエラーが発生した際（実際には発生しました、型不一致やインポート競合など）、それがまだ私が見る前に自分で捕捉し修正しました。赤い画面、Stack Overflow タブ、私に何をすべきかを尋ねるのはありませんでした。ただ：「10 エラーを分析中... 解決済み。』 それは新しい行動です。それは補完ではありません。 最終的なアプリには： 左側にクリーンな forge フォーム（名前、スキル、経験、バイオ） 右側にライブカードプレビューが生成されます あなたの実際のスタックに基づいた Gemini による「特別な能力」のロリ カードのレアリティに応じたスタイリングされた Imagen 生成の肖像画 レアリティ階級：レア → エピック → レジェンダリー（経験年数とスキル深さに基づき） フッター：「アートと能力の説明は Gemini AI で提供されています。Vintage CCG レアリティ基準にスタイル化されています。』 私は自身のカードを生成しました。共通レアリティです。 私はそれを挑戦として受け入れます。 しかしここは一つ：私が Gemini によって書かれた「特別な能力」を見てみましょう： 『アルゴリズム的覚醒 — フィールド上のあらゆる「ハードウェア」または「ツール」カードを「感性ある機械」ユニットに変換し、パワーと...』 共通レアリティ。レジェンダリーな能力。AI が初めて見た自らの自修開発者の最も正確な説明を書いた。あなたは最初は過小評価されます。適応します。スタックします。 私はカードジェネレーターが何か真実に言えることを見信りませんでした。

I Used Google AI Studio to Mint My Developer Identity as a Collectible Card — Here's What Happened This is a submission for the Google Cloud NEXT Writing Challenge I want to be honest with you: I did not expect this to work. Not "work" in the sense of running without errors. I mean work in the sense of — within a single afternoon, going from a random idea in my head to a real, deployed web application that I'm actually proud to show people. That's not how software has ever felt before. Until Google Cloud NEXT '26. Google AI Studio dropped a feature at NEXT '26 that lets you describe an app in plain English and watch it get built in front of you — full TypeScript, React components, API integrations, the whole thing. I'd seen the Magic: The Gathering card demo floating around. Cool, but everyone was going to write about that. I wanted to build something that felt mine. So I landed on this: CodeCard Forge — an app where developers mint their own identity as a collectible trading card. You enter your name, your top 3 skills, years of experience, and a one-liner bio. Gemini writes you a "Special Ability" description based on your stack. Imagen generates your avatar. And the card assigns you a rarity tier — Rare, Epic, or Legendary. The tagline wrote itself: Mint your developer identity as a collectible. For my own card I entered: AI Engineer, MI Engineer, DL Engineer — 1 year of experience — and a bio that says "like making machines alive." Here's the exact prompt I typed into Google AI Studio's Build interface: "Create an app called CodeCard Forge that generates a developer trading card. The user enters their name, top 3 skills, years of experience, and a one-line bio. Use Imagen to generate a stylized avatar/portrait for the card, and Gemini to write a fun 'special ability' description based on their skills. Style the card like a collectible trading card with stats and a rare/epic/legendary rarity tier." I hit Run. And then I just... watched. I've used AI coding tools before. I expected something half-baked that I'd need to spend an hour fixing. What I did not expect was how fast a complete, structured application appeared — not a snippet, not a prototype shell, but a full file tree: components/, services/, types.ts, App.tsx, deployment config and all. I was reading through the files while they were still being written. The moment that genuinely caught me off guard was the "Thinking..." section in the Code Assistant panel. Gemini 2.5 doesn't just generate — it plans out loud. It decided on its own how to split responsibilities between Imagen (visuals) and Gemini (text/lore), how to structure the React components, and how to handle the rarity logic. I didn't tell it any of that. The other thing: when it hit errors during generation (and it did — type mismatches, an import conflict), it caught and fixed them itself before I even saw the problem. No red screen, no Stack Overflow tab, no asking me what to do. Just: "Analyzing 10 errors... resolved." That's new behavior. That's not autocomplete. The final app has: A clean forge form on the left (name, skills, XP, bio) A live card preview that generates on the right Gemini-written "Special Ability" lore based on your actual stack An Imagen-generated portrait styled to the card's rarity Rarity tiers: Rare → Epic → Legendary (based on years of experience + skill depth) Footer: "Art and Ability descriptions powered by Gemini AI. Stylized after Vintage CCG Rarity Standards." I generated my own card. I got Common. I'm choosing to take that as a challenge. But here's the thing — look at the Special Ability Gemini wrote for me: *Algorithmic Awakening — Converts any 'Hardware' or 'Tool' card on your field into a 'Sentient Machine' unit with Power and... Common rarity. Legendary ability. An AI accidentally wrote the most accurate description of a self-taught developer I've ever seen. You start underestimated. You adapt. You stack. I did not expect a card generator to say something real. I write code with AI. I'm not ashamed of that — I review it, I understand it, I make sure it's correct. What changed with this NEXT '26 feature isn't the code quality. It's the starting point. Before, "I have an app idea" meant: set up the repo, configure the bundler, wire up the API client, figure out the deployment pipeline, write the boilerplate... and somewhere in there, lose the energy that sparked the idea in the first place. Now the starting point is a deployed URL with a working app behind it. The creative work — the idea, the angle, the why — that's still yours. The scaffolding just doesn't get in the way anymore. CodeCard Forge isn't production software. But it's a real thing that exists, that I built in an afternoon, that I can show in a portfolio and talk about in an interview. That's the shift. 🔗 CodeCard Forge — Live Demo Type in your stack and see what rarity you pull. If you're Legendary, you've earned it. And if you want to build something like this yourself, the Google AI Studio Build feature is free to try at aistudio.google.com. The only cost is the idea. Tags: #devchallenge #cloudnextchallenge #googlecloud #gemini #ai #webdev