iT邦幫忙

2026 iThome 鐵人賽

DAY 16
0
自我挑戰組

Vibe 30: 我的聽說讀寫英文助手系列 第 16

UI 工具探索 & 理解 LiveKit (?)

  • 分享至 

  • xImage
  •  

鐵人賽走到 Day 16,其實我覺得環繞在英語學習的情境,大部分我想過的 prototype 都差不多有一輪實作了。目前探索過的 prototype 有:

  • 單字書:這個因為最早做,也比較是直接進入日常應用的。所以弄的細節比較多
  • 口說練習工具:也算是單人可用了,體驗有大幅優化的空間。
  • 每日推薦(閱讀 & 聽力)
    • 大概釐清了各自的輸出形式 & 素材搜尋限制
    • 搜尋的 prompt 沒怎麼優化,真的要做的話還需要很深入的校調
    • 目前沒有定義「難度」的設計,我很明顯感覺到找回來的素材對我這個 B2 學習者來說都太難,但我還沒想清楚要怎麼量化這件事
  • 自建 meeting room:我昨天和朋友試用了一次,雖然 UI 亂七八糟⋯⋯但可以進行一次約 60 分鐘的完整通話。真是太神奇了。

抗拒面對 UI 的我

目前幾個東西都是獨立的專案,到目前為止所有的東西都是用文字型的 prompt,螢幕截圖 → 簡報加註,然後叫 AI 弄的。

不過感覺各種奇怪的小細節累積到一個臨界值了,並且若要繼續發展下去,需要把整件事的體驗做一個通盤的想像。

我對 UI design 這件事其實一直有點抗拒,因為⋯⋯因為我覺得就是很難嗚嗚嗚嗚,我覺得美學 sense 是我的低信心領域,低信心導致低理解與低能力,我直到現在都還沒有能力在 Canvas 上好好做一張圖出來⋯⋯

但還是要面對!對吧?

我決定先從獨立的 meeting room 開始,因為 meeting room 需要的體驗並不會超過我們對 zoom & google meet 的想像。

我探索了一下世界上有沒有出現比 Figma 更簡單的工具(我真心覺得 Figma 超難),ChatGPT 推薦我可以試試 Visily,我先下載了一些 video call 的 template 並且試了一下 AI 元素生成,然後看看他的介面⋯⋯嗚看起來還是好難哦寶寶覺得頭痛。

https://ithelp.ithome.com.tw/upload/images/20260922/201292372xR1lu2pQG.png

另外我也瞄了一下其他的候選工具,試用 Google Stitch 時我只隨便打了一行指令是「教學專用的會議軟體」,產生了一個看起來很有樣子但和我意圖完全不同的 mobile app。

雖然我覺得很厲害,但目前感覺一切的 tweak 都只能用指令去調整?(但你抗拒 figma 不就是你抗拒去學那個 PhotoShop 試的複雜功能列嗎⋯⋯)

https://ithelp.ithome.com.tw/upload/images/20260922/20129237X203E2OfEm.png

另外也看了一下 Relume,感覺比 Visily 簡單很多,但好像不太適用於「復刻 zoom」的情境,也許之後要做 landing page 時可以來試一下。

總之就是鎖定 Visily 了,但我感覺要慢慢研究。總之接下來的主線進度就是要把 meeting room 弄得正常一點,然後和朋友聊天時就努力試用一下。

理解 LiveKit Cloud

LiveKit 註冊後有附贈 5000 分鐘的免費額度。結果我發現不知不覺用完了,中間除了幾次連線測試,真的認真使用只有和朋友聊天 1 小時。

原來是我在把瀏覽器關掉時就以為 meeting room 結束,但 session 並沒有被自動關掉,所以還在繼續跑。哈哈這感覺就像小白 vibe coding 會發生的事情。

所以默默的進入了要付帳單的階段⋯⋯但因為金額不算很高(如果我學會怎麼正確使用的話),我決定接下來還是先用 LiveKit Cloud。

目前的架構是這樣:

【媒體路徑】聲音與影像
  學生瀏覽器 ─┐
  老師瀏覽器 ─┼──► LiveKit Cloud (SFU) ──► 各自的瀏覽器
  STT agent ─┘        

【應用路徑】課堂狀態
  瀏覽器 ──► Cloudflare Tunnel ──► eleven:8787 (Node server)
            網頁檔、WebSocket(分組/計時/逐字稿)、發 LiveKit token

補充一下,其中的 eleven 是我對一切衍生分身帳號的命名,包括但不限於遊戲小帳、龍蝦 agent、自架 server 的名稱⋯⋯照這樣一直濫用下去很快就會產生類似 eleven13 之類的編號⋯

我本來以為遲早需要部署,但研究了一下費率之後,覺得通訊端還是暫放在 LiveKit Cloud 上比較保險。而應用端感覺遲早會離開我的房間,but not today…

之前不小心把免費額度 5000 分鐘整個耗完的是出在,像傳統 zoom 介面上會有一個「結束會議/離開會議」的選項。Host 結束會議時應該要真正按下「結束會議」

https://ithelp.ithome.com.tw/upload/images/20260922/20129237uxLbX1tJkm.png

但因為我在 UI 上並沒有把那個「結束會議」的按鈕做起來哈哈,而且有時候也會直接把瀏覽器關掉。所以⋯人看起來離開會議室了,session 在伺服器上繼續跑⋯⋯

今天在修這條線。

總之我要來把會議室 UI 好好再研究一下~祝我和 Visily 相處愉快吧,有更適合我這種美學苦手的設計工具也可以推薦給我~(對著空氣祈禱)


上一篇
聽力素材搜尋
下一篇
還是回到了 Claude Design
系列文
Vibe 30: 我的聽說讀寫英文助手17
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言