AI Collaboration / Visual Thinking
Co-Canvas
把 AI 對話變成看得見、能編輯，也能繼續延伸的思考脈絡。
- 我的角色
- 產品設計、AI 互動設計、全端開發
- 方法
- 節點式資訊架構、生成預覽、情境化對話
- 成果
- 結合 AI 對話、多人權限與影片分析的視覺思考工具
01 / CONCEPT
讓生成內容離開對話框，
成為可以整理的思考素材。
Co-Canvas 是一套結合 AI 對話與視覺化節點畫布的人機協作系統。使用者可以選取畫布上的節點作為上下文，要求 AI 拆解、延伸、比較或整理內容，再決定哪些建議值得加入自己的思考結構。
專案將 AI 的回覆視為可被檢視與選擇的提案，而不是直接覆蓋使用者的內容；對話、節點和連線因此能共同留下推理過程。
02 / COLLABORATION FLOW
從選取脈絡，
到形成自己的知識結構。
- 01
選取
從畫布挑選相關節點，明確指定這次對話的上下文。
- 02
共創
透過 AI 拆解、延伸、比較或整理既有內容。
- 03
決定
先預覽生成節點，再選擇是否加入並連回畫布。
03 / SYSTEM DESIGN
讓自由探索與持續使用，
都能留在同一個工作空間。
- 01
可持續編輯的畫布
支援新增、拖曳、連線、自動排版、搜尋與 Undo／Redo，讓生成內容能繼續被修改。
- 02
本機與雲端專案
未登入時可直接以 localStorage 保存；登入後則能使用 Neon Postgres 跨裝置管理專案。
- 03
協作與權限
以擁有者、編輯者與檢視者權限支援私人或公開專案，讓畫布可以分享也保有控制。
- 04
多媒體脈絡
影片節點可標記片段時間，並讓 AI 分析所選片段，使影音內容也能進入思考流程。
- React
- TypeScript
- React Flow
- Zustand
- FastAPI
- Gemini
- Neon Postgres