小編精選 - 技術文章翻譯 · 09月15日

AI Avatar v20、Cursor Avatar、Notification Avatar（Voxel Avatar）🧊

簡介

AI Avatar 是一款免費 App，讓你的 VRoid（VRM）虛擬角色全力為你加油。🤗 它會住在你的 VS Code 側邊欄（會對 Claude Code / GitHub Copilot 做出反應）或 瀏覽器側邊面板（會對 ChatGPT / Claude 做出反應）。動畫和對話泡泡也都可以在沒有 AI 的情況下運作。

這次我準備了 4 個主要主題：

Voxel Avatar
萬花筒
游標 Avatar
通知 Avatar

讓我們一起來看看吧！😆

Voxel Avatar

https://www.youtube.com/watch?v=8LUaYPmRIYk

https://www.youtube.com/watch?v=RnIMtYAWeVQ

我想加入一個合作夥伴 Maximum Blue 提出的 放置型遊戲 模式。放置型遊戲是指會自動執行的遊戲。AI Avatar 會被 Claude Code 或點擊所觸發，所以我覺得它很符合放置型遊戲的概念。另外，我選擇 花園園藝 作為這個模式的主題，是因為我的一位 DEV Community 朋友 @shubhradev 很喜歡園藝，而培育花朵也非常適合放置型遊戲。

我一開始先做成簡單、類似 Minecraft 的體素花園。你可以透過 Claude Code 讓花園自動成長，也可以點擊後親手手動培育。你可以整地並種下花朵，也可以放蝴蝶。有時候會下雨，但之後你就能看到彩虹。請盡情享受 Voxel Avatar，打造一座開滿美麗花朵的花園吧。我希望它能陪你度過一段溫馨又放鬆的寫程式時光。

最難的部分不是寫程式，而是製作 3D 物件。我本來只想用 Three.js 做一朵簡單的 3D 花，但 AI 完全做不出來。它做的第一版花朵，是一根圓柱上面硬接了一顆球。🤣 所以我只好一步一步詳細說明怎麼做花，例如在花心周圍加上 5 片細長的橢圓花瓣，像是用細圓柱做出來一樣。

萬花筒

https://www.youtube.com/watch?v=KBcl5JZrwcQ

我加入了萬花筒模式。你可以欣賞隨機形狀的背景。而且萬花筒的樣式是可調整的，你可以依照喜好調整成想要的形狀。

Piper TTS

我之前一直把 Kokoro 當作我的 TTS（文字轉語音）。它品質很好，但有一點延遲，而且還需要一些設定才能使用。所以我又加入了 Piper TTS，作為更簡單、更方便聽取對話泡泡內容的選項。

AI Avatar 衍生作品

AI Avatar 只能存在於 VS Code 和 Chrome 側邊面板裡，因為它是一個擴充功能。所以我做了一個衍生的 Electron 桌面應用程式。現在這個角色可以待在任何地方，甚至不受側邊面板限制。

1. 游標 Avatar

https://www.youtube.com/watch?v=qMxZJqRQXg8

游標 Avatar。你點擊任何地方，VRM 角色就會跳出來，並附帶動畫和加油氣泡。↓
https://github.com/webdeveloperhyper/cursor-avatar

2. 通知 Avatar

https://www.youtube.com/watch?v=0SCemZqVo4w

我在工作上使用 Claude Code 和 Codex。它們預設沒有停止與核准通知，而且我常常沒注意到它們已經停了。所以我使用 Hooks 做了 Notification Avatar。

我先做了一個簡單的腳本並確認它能正常運作。↓
https://github.com/webdeveloperhyper/claude-code-codex-notification

接著，我把它整合進角色裡，做出了 Notification Avatar。↓
https://github.com/webdeveloperhyper/notification-avatar

看起來 Hooks 還能做到更多事情，所以我想繼續深入了解。

如何使用 AI Avatar 的 VS Code 擴充功能版本（感謝 300+ 次安裝！）

你可以透過兩種方式下載 AI Avatar 的 VS Code 擴充功能。

方式 1：從 VS Code 安裝：左側欄的 Extensions 按鈕 > 搜尋 AI Avatar > Install ↓↓
方式 2：從 VS Code Marketplace 安裝：https://marketplace.visualstudio.com/items?itemName=web-developer-hyper.ai-avatar ↓↓

如何使用 AI Avatar 的 Chrome 版本

從 Chrome 線上應用程式商店安裝：↓↓
https://chromewebstore.google.com/detail/ai-avatar/afmcfaeaaojalninahhhjnonhmlmiidi

特別感謝

我的 DEV Community 朋友兼 CCO（首席創意長）🤣，@annavi11arrea1 在第 17 版與 Catbot 和 AI Avatar 合作，並且一直持續支持我。非常感謝！
我的朋友兼 CDO（首席設計長）🤣，@rutenveil 幫忙做出了第 15 版的酷炫效果，並且一直持續支持我。非常感謝！
我的 DEV Community 朋友兼 CTO（首席技術長）🤣，@gramli 幫忙更新了第 2 版的 AI Avatar，並且一直持續支持我。非常感謝！
我的 DEV Community 朋友兼 CMO（首席行銷長）🤣，@itsugo。我們的角色合作專案是 AI Avatar 的起點，並且一直持續支持我。非常感謝！
我的同事 Maximum Blue 幫忙製作了第 6 版的獨特角色，並且一直持續支持我。非常感謝！