Interaction · 2026開發中
對稿
Duigao: club poster review
社團活動文宣討論區
Interaction · 2026
對稿
社團活動文宣討論區
作品集互動展示
作品集對稿示意:點位置留言、切版本、比較。 這裡不連真實房間、不放邀請連結或私人討論。
點海報上的位置即可註記,不用跳出對話框。
- 1. 主標再大一點
Live Demo · 狀態 verified開原站
沒有已驗證的公開 Demo 時,不會放假的產品畫面。
一句話
把做好的海報變成一條連結。夥伴不改原稿,只在畫面上指出哪裡要調。海報是主畫面,討論比編輯更快。
來源與證據
GitHub README · duigao
權限模型與雲端層取自 README。
https://github.com/aa0968111723-prog/duigaoGitHub 公開畫面 · duigao
本站 /media/github-exports/duigao 複製自公開 repo scripts/e2e/visual-baselines。不是 Canva 原作,也不是私人對稿房間。
https://github.com/aa0968111723-prog/duigao公開站 · duigao-k7q2.zeabur.app
BASELINE.md 記載的 production 站。狀態會隨部署變動。
https://duigao-k7q2.zeabur.app
GitHub verified · Demo verified · Canva not_configured
問題
文宣修改散落在 LINE 群組,對不到位置、對不到版本。需要手機優先、點位置就能說一句話的對稿。
我的角色
互動設計與產品建構:手機工作區、版本切換、邀請權限與分享預覽。
設計決策
- 看稿永遠是乾淨原稿,註記是覆蓋層。
- 分享連結用 #room + invite 高熵秘密;資料庫只存雜湊。
- 前端只放 publishable key,不放 service role。
- 雲端房間建立失敗時直接說暫時無法分享,不退回「看起來成功但其實要主辦方開著頁面」的連結。
AI 使用方式 / 多模態
- 圖像
- 影片時間點
- 註記
- LINE 分享
流程
- 上傳文宣版本
- 點位置或圈範圍留意見
- 待修改/已完成
- 可選視覺提案層
- 複製連結傳到 LINE
產出
- 手機與桌機同一套狀態、不同外殼
- 彩色/黑白/對切比較
- Open Graph 分享卡由 Edge Function 組裝,invite 留在瀏覽器 fragment
技術
- Vite
- React
- TypeScript
- Supabase
- PWA
限制與尚未完成
- 影片單次上傳、無續傳;上限刻意保守。
- HEVC 的 .mov 在部分瀏覽器播不出,會說明而不是給黑畫面。
- 本作品集不會讀取對稿的私人資料表或 token。