我用 Gemini 3 一口氣做了 10 個應用，附教程
整理版優先睇
用Gemini 3 Pro兩個鐘整咗十個小應用，仲可以免費發佈
呢篇文章係由空格寫嘅，佢用Gemini 3 Pro同Google AI Studio，兩三個鐘就整咗十個小應用。佢想分享點樣用好Gemini嘅代碼能力同谷歌免費基建，將諗法快速變成產品。整體結論係：Gemini嘅Canvas同AI Studio嘅Build模式勁到離譜，兩次對話就出到一個應用，仲內置API、免費、連到GitHub，完全唔使擔心token費用，發佈都好方便。
空格喺文章入面展示咗十個應用，包括城市名片生成器、生日檔案生成器、AI可視化生成、動物生命週期卡片、配色卡片、畫展、電影海報、繪畫思維導圖、命理卡片同人物關係圖譜。每個應用都係靠描述需求，由AI生成前端代碼同整合內容，效果仲幾靚。
最後佢總結咗一個快速整應用嘅方法論：第一要限定輸入場景，第二要用提示詞約束模型輸出結構化內容，第三要設計前端可視化容器。佢話如果讀者有興趣，仲可以再詳細分享對話內容。
- Gemini 3 Pro嘅代碼能力同Google平台免費基建，令到快速整應用同發佈變得極之容易。
- 用Canvas或AI Studio嘅Build模式，基本上兩次對話就生成一個應用，靠描述需求就得。
- 比起其他AI平台，Google勝在免費、內置API、連接GitHub，完全唔怕token超額。
- 作者總結咗快速整應用嘅三步法：限定輸入場景、約束模型輸出結構化內容、設計前端可視化容器。
- 你可以直接用文章入面嘅體驗地址試玩，或者跟住方法論自己整一個。
用Gemini整應用嘅體驗
作者用Gemini 3 Pro喺Canvas同AI Studio入面，
兩次對話
就整到一個應用。佢話Gemini唔止代碼能力頂級，仲有
免費基礎設施
同
內置API
，仲可以
連接GitHub
，完全唔使擔心token使費。呢個平台真係
財大氣粗
，令到快速落地同發佈變得超簡單。
十個應用示範
下面係作者用Gemini 3整嘅十個應用，每個都係
兩次對話
就出到，涵蓋地圖、生日、可視化、教育、設計等範疇。
- 1 城市名片生成器：輸入城市，自動生成地圖、旅遊路線、城市數據同美食推薦，仲可以下載圖片。
- 2 生日檔案生成器：輸入出生日期，調用API獲取同日大事、名人同冷知識，復古Windows風格。
- 3 AI可視化生成：將文字變成流程圖、SVG或HTML PPT，適合總結文章。
- 4 動物生命週期卡片：輸入動物，生成成長週期圖，適合教學，可下載PNG。
- 5 配色卡片：輸入主題（例如莫奈），生成漸變同純色色卡，每個色有名稱解釋，適合設計用。
- 6 畫展：輸入靈感，用SVG加Gemini繪圖，生成畫作介紹同配色推薦。
- 7 電影海報：輸入電影名，生成海報，可指定黑白等風格，附簡介同導演等資訊。
- 8 繪畫思維導圖：輸入關鍵詞，AI腦暴相關詞彙，選詞後生成圖片，幫助寫提示詞。
所有應用都可以
免費使用
，體驗地址喺文章入面。
快速整應用嘅方法論
作者總結咗快速整應用嘅
三步法
：
- 第一步：思考輸入場景。要限定輸入詞彙喺垂直場景，例如詩詞、小說、電影等。
- 第二步：約束模型思考。利用提示詞或MCP，將輸入詞彙擴展成結構化內容，例如電影名擴展成海報元素。
- 第三步：設計輸出容器。用前端代碼（SVG或HTML）可視化模型輸出，可以參考現有圖嘅樣式。
呢個方法論嘅核心係利用
提示詞約束輸出
同埋
前端可視化
。
我用 Gemini 3 Pro 用咗兩三個鐘頭整咗十個細應用，主要係用 Gemini 嘅應用同埋 Google AI Studio。
製作方法都好簡單，揀 Gemini 裏面嘅 Canvas，描述並送出自己嘅需求。基本上兩次對話就可以生成一個好似咁樣嘅應用。
如果係喺 Google AI Studio 裏面就揀 build 模式都可以製作。
Gemini 唔單止將寫 code 嘅能力提升到頂級，而且 Google 平台提供嘅基礎設施可以免費製作同發布應用。
真係財大氣粗，完全唔使擔心 token 使錢，佢用內置 API，仲可以連接到 GitHub，快趣將我哋嘅想法實現，發布畀用戶體驗。
喺 Google AI Studio 嘅 build 裏面就可以免費使用。
下面就係 10 個應用嘅製作過程，附體驗地址，可以喺電腦同手機瀏覽器入面體驗，相信會激發你創作產品嘅靈感。
1 城市名片生成器
第一個應用係一個城市名片生成器，輸入一個城市，然後佢可以幫我呢個城市畫一個地圖，推薦旅遊路線、城市數據同特色美食。睇呢個地圖上面繪製嘅方向，同我哋現實世界嘅位置係相關嘅。
仲可以揀唔同嘅顏色，仲可以將呢張圖片下載落嚟，可以見到呢個前端效果好靚，成張卡片都好優雅。
呢個製作嘅應用比較好嘅地方係，佢幫你內置咗一個 API。我唔知佢裏面用嘅係下面嘅 3 定係 2.5，但係佢個效果真係好好。
體驗地址：https://gemini.google.com/share/295b5dcd6c96
2 生日檔案生成器
呢個係一個生日檔案生成器，輸入出生日期，然後佢就會叫用 Gemini API 去拎到 1999 年 12 月 11 日呢一日發生咗啲咩事。
同日生日嘅名人，1999 年呢一日嘅大事，仲有呢一年嘅冷知識，真係好有意思，而且成個設計用咗復古嘅 Windows 風格。
體驗地址：https://gemini.google.com/share/ec45d9cdbdc2
3 AI 可視化生成
呢個係一個將文字透過 AI 可視化為流程圖、SVG、HTML-PPT 嘅生成器。我喺度是但揾咗篇文章叫《背影》，佢生成了關於呢篇文章嘅一個邏輯路線圖。樣式簡約美觀。
體驗地址：https://gemini.google.com/share/2f994ec1fe47
4 動物生命週期卡片
呢個細應用只要用戶輸入一個動物，佢就可以根據呢個動物描述佢嘅成長週期，好適合用嚟教小朋友。
例如下面呢個，我輸入蝴蝶，得到咗呢張圖：
上面標題下面係一個關於蝴蝶嘅冷知識：蝴蝶嘅生命週期雖然短，但係佢哋嘅幼蟲喺幾星期內增加到出世嗰陣嘅 3000 倍。然後下面係第一週、第四週、第八週嘅整個生命過程描述。呢張卡片都可以下載做 PNG。
製作原理，就係叫 AI 輸出 SVG 嘅語言，可視化展示成個資訊。
體驗地址：https://gemini.google.com/share/26884961f77a
5 配色卡片
呢個應用係配色卡片生成，例如我輸入一個莫奈，得到咗一個莫奈嘅主題顏色。裏面佢有推薦嘅睡蓮池塘拂曉日出，下面有色紙。
除咗呢個漸變色，仲有一個純色嘅卡片，呢個純色卡片都好靚，佢仲幫每個色卡改咗個顏色名，做咗個名稱解釋。呢個好適合做設計嗰陣用。
體驗地址：https://gemini.google.com/share/f80d7c1ea7d5
下面幾個係用 Google AI Studio 生成嘅。Google AI Studio 嘅製作能力，好似比 Gemini 更加強啲，佢製作應用會複雜啲。繼續嚟睇下
6 畫展
呢個係一個畫展嘅應用，你可以輸入你自己嘅一個靈感，佢會幫你畫一幅畫。佢嘅實現原理係用一個前端嘅 SVG 加上 Gemini 嘅畫圖能力，將呢兩個產生嘅內容拼埋一齊，整體形式好靚。
我輸入咗一個清晨迷霧，佢就推薦咗一幅印象日出嘅畫作，仲介紹咗畫嘅背景，推薦咗幾個畫嘅配色。
體驗地址：https://ai.studio/apps/drive/1DKEdJBuVfNyFMF_QcvR2XcoOnU3CdxHc?fullscreenApplet=true
7 電影海報
再嚟睇下，呢個係一個電影海報嘅製作，例如寫一個星際穿越。都係同上一個一樣，前端用咗 SVG，中間用咗 Gemini 畫圖。我要求佢畫嘅係一張黑白嘅圖，同成個背景有一個融合嘅效果。
你睇呢張圖好符合電影嘅故事，下面仲有一個簡短嘅介紹，跨越星辰，父愛永恆拯救人類。仲會寫上上映時間同導演係邊個。
呢啲都係靠提示詞設計嘅。約束好大模型結構化輸出資訊。
體驗地址：https://ai.studio/apps/drive/1SsgqYWJsxqEzWZIacwUcYFo11Spauwlc
8 繪畫思維導圖
呢個應用係我一直想做嘅，每次我畫畫嗰陣，唔知道點樣寫提示詞，但係大概得幾個關鍵詞。
我想 AI 可以拎我嘅關鍵詞去做一個頭腦風暴，以思維導圖形式呈現，然後我去揀腦暴嘅一個關鍵詞，最後生成一幅圖。
例如話我輸入一個柯基，佢會利用 AI 去拎到同柯基相關嘅一啲詞彙，以思維導圖嘅形式展示。
然後我去揀一啲關鍵詞，每一個維度下只可以揀一個關鍵詞。揀完之後，喺右邊就可以㩒開始生成，拎到圖片。
體驗地址：https://ai.studio/apps/drive/1VxCM7maWiwAB_ZatOZx65n84JeW0Fayy
9 命理卡片
輸入星座、MBTI、生肖、血型，就可以拎到一張命理解讀嘅卡片，一種結合咗中西新型命理分析，好好玩。如下：
體驗地址：https://gemini.google.com/share/c9fcd255f722
10 人物關係圖譜
最後一個係人物關係圖譜生成，輸入任何一個小說或者電影，就可以拎到呢個故事入面嘅人物關係圖譜，成個交互由 Gemini 3 一氣呵成，拖拽動效好驚艷，效果如下：
體驗地址：https://ai.studio/apps/drive/1Y0dONPf5AfmBwiPo608uiNSFFQho4Y05
呢個就係我整嘅十個應用。整體思路我總結咗一個方法論：
1 思考輸入嘅場景：
侷限輸入詞彙喺垂直場景，例如詩詞、小說、電影等
2 約束模型嘅思考：
利用提示詞、MCP，將輸入嘅詞彙擴展為結構化內容，例如電影名可以擴展成電影海報製作，再去拆解海報元素。
3 設計輸出嘅容器：
使用前端代碼，可視化模型輸出嘅內容，可以去揾啲圖，叫模型模仿呢張圖製作前端 SVG 或 HTML，將圖中內容替換成步驟 2 嘅文字。
如果你有興趣嘅話，我下期再詳細分享下做呢啲應用嘅具體對話內容，我係點樣將呢啲應用兩句對話就實現出嚟。
我係空格，多謝你讀到呢度，有用嘅話，㩒個讚同睇嚇支持一下。
我用 Gemini 3 Pro 兩三個小時做了十個小應用，主要用的是Gemini 的應用和Google AI studio。
製作方式也很簡單，選擇 Gemini 裏面的Canvas，描述併發送自己的需求。基本上兩次對話就能生成一個像這樣子的一個應用。
如果是在 Google AI studio 裏就選擇build模式也能製作。
Gemini不僅將代碼的能力提升到頂級，而且谷歌平台提供的基礎設施可以免費製作併發布應用。
真的財大氣粗，完全不用擔心token 花錢，它使用內置API，還能連接github，快速將我們想法落地，發佈給用戶體驗。
在Google AI studio的build裏就可以免費用。
下面就是10個應用的製作過程，附體驗地址，可以在電腦和手機瀏覽器裏體驗，相信會激發你創作產品的靈感。
1 城市名片生成器
第一個應用是一個城市名片生成器，輸入一個城市，然後它能給我這個城市做一個地圖的繪製，旅遊路線、城市數據和特色美食的推薦。看這個地圖上面的繪製的方向，和我們現實世界的位置是相聯繫的。
還可以選不同的顏色，還能把這個圖片下載下來，可以看到這個前端效果特別的漂亮，整個卡片也很優雅。
這個製作的應用比較好的點是，它給你內置了一個的API。我不知道它這個裏面用的是下面的3還是2.5，但它這個效果真的很好。
體驗地址：https://gemini.google.com/share/295b5dcd6c96
2 生日檔案生成器
這是一個生日檔案的生成器，輸入出生日期，然後它就調用Gemini API去獲取到1999年12月11日這一天發生了什麼事情。
同日生日的名人，1999年這一天的大事，還有這一年的冷知識，這非常有意思，而且整個設計是用了復古的windows風格。
體驗地址：https://gemini.google.com/share/ec45d9cdbdc2
3 AI可視化生成
這是一個將文本通過AI可視化為流程圖、SVG、Html-PPT的生成器。我這裏是隨便搜了一個文章叫背影，它生成了一個關於這篇文章的一個邏輯路線圖。樣式簡約美觀。
體驗地址：https://gemini.google.com/share/2f994ec1fe47
4 動物生命週期卡片
這個小應用只要用戶輸入一個動物，它能夠根據這個動物描述這個動物的成長的一個週期，非常適合給小朋友教學。
比如下面這個，我輸入蝴蝶，得到了這個圖：
上面標題下是一個關於蝴蝶的冷知識：蝴蝶的生命週期雖短，但它們的幼蟲在幾周內增加到出生時的3000倍。然後下面是第一週、第四周、第八週的整個生命過程的描述。這個卡片也可以下載成PNG。
製作原理，就是讓AI輸出SVG的語言，可視化展示整個信息。
體驗地址：https://gemini.google.com/share/26884961f77a
5 配色卡片
這個應用的是配色卡片生成，比如我輸一個莫奈，獲取到了一個莫奈的一個主題顏色。這裏面它有它推薦的睡蓮池塘拂曉日出，下面有色紙。
除了這個漸變色，還有一個純色的卡片，這個純色的卡片也很漂亮，它還給每一個色卡起了一個名字顏色，做了一個名稱解釋。這個很適合在做設計的時候使用。
體驗地址：https://gemini.google.com/share/f80d7c1ea7d5
下面幾個是用谷歌AI studio生成的。谷歌AI studio的製作能力，好像比這Gemini要更強一些，它製作應用會更復雜一些。繼續來看一下
6 畫展
這個是一個畫展的一個應用，你可以輸入你自己的一個靈感，它會給你畫一幅畫。它的實現原理是用一個前端的svg加Gemini的一個畫圖的一個能力，把這兩個產出的內容拼湊在了一塊兒，整體的形式非常漂亮。
我輸入了一個清晨迷霧，它就給我推薦了一個印象日出的一個畫作，還介紹了一個畫的背景，推薦了幾個畫一個配色。
體驗地址：https://ai.studio/apps/drive/1DKEdJBuVfNyFMF_QcvR2XcoOnU3CdxHc?fullscreenApplet=true
7 電影海報
再來看一下，這個是一個電影海報的製作，比如寫一個星際穿越。也是跟上一個一樣，前端用了svg中間用了Gemini畫圖。我要求它畫的是一個黑白的圖，和整個的背景有一個融合的效果。
你看這個圖非常符合電影的故事，下面還有一個簡短的一個介紹，跨越星辰，父愛永恆拯救人類。還會寫上這個上映時間導演是誰。
這些都是靠提示詞設計的。約束好大模型結構化輸出信息。
體驗地址：https://ai.studio/apps/drive/1SsgqYWJsxqEzWZIacwUcYFo11Spauwlc
8 繪畫思維導圖
這個應用是我一直想做的，每次我繪畫的時候，不知道怎麼去寫提示詞，但是大概只有幾個關鍵詞。
我想AI可以拿我的關鍵詞去做一個頭腦風暴，以思維導圖形式呈現，然後我去選擇腦暴的一個關鍵詞，最後生成一個圖。
比如說我輸入一個柯基，它會利用AI去獲取到跟柯基相關的一些詞彙，以思維導圖的形式展示。
然後我去選一些關鍵詞，每一個維度下只能選一個關鍵詞。選擇完之後，在右側就可以點開始生成，獲取到圖片。
體驗地址：https://ai.studio/apps/drive/1VxCM7maWiwAB_ZatOZx65n84JeW0Fayy
9 命理卡片
輸入星座、MBTI、屬相、血型，就能獲取到一張命理解讀的卡片，一種結合了中西方新型命理分析，非常好玩。如下：
體驗地址：https://gemini.google.com/share/c9fcd255f722
10 人物關係圖譜
最後一個是人物關係圖譜生成，輸入任一小說電影，就可以獲取到這個故事中的人物關係圖譜，整個的交互由 gemini3 一氣呵成，拖拽動效非常驚豔，效果如下：
體驗地址：https://ai.studio/apps/drive/1Y0dONPf5AfmBwiPo608uiNSFFQho4Y05
這就是我做的十個應用。整體思路我總結了一個方法論：
1 思考輸入的場景：
侷限輸入詞彙在垂直場景，比如詩詞、小說、電影等
2 約束模型的思考：
利用提示詞、MCP，將輸入的詞彙擴展為結構化內容，比如電影名可以擴展成，電影海報製作，再去張海報元素。
3 設計輸出的容器：
使用前端代碼，可視化模型輸出的內容，可以去搜一些圖，讓模型模仿這個圖製作前端 svg 或 hrml，把圖中內容替換成 步驟 2 的文字。
如果你感興趣的話，我下期再來詳細分享一下做這些應用的具體對話內容，我是怎麼把這些應用兩句對話就實現出來的。
我是空格，感謝你讀到這裏，有用的話，點個贊和在看支持一下。