Unprose

和你的 AI agent 在同一張 board 上討論設計。

Unprose 是你和 coding agent 一起用的 board。Agent 依照 repo 裡的設計檔，畫出 EventStorming、domain story、story map、kanban、UI mock 和 agent workflow。你指著一個方塊發問，它在對話串裡回答；要等你同意，才會修改檔案。

給用 Claude Code、Codex 或任何 MCP agent 寫軟體的人。開源（Apache-2.0），在你自己的電腦上執行。

開始使用 閱讀使用說明
Unprose canvas：一個「預約借書」的 domain story，以圖示、編號箭頭和兩個上色的群組畫出。選取了工作物件「hold」，右側 Chat 分頁顯示使用者的提問「What if a copy is on the shelf when Mia asks? Does she still place a hold?」，以及 agent 在同一個對話串裡的回答。
選取東西，直接問。這裡使用者問 domain story 裡的 hold；畫出 design/holds.domain-story.yaml 的 agent 在對話串回答，並提議把另一種情況另外講成一個 story。（畫面內容為英文示範。）

AI agent 的長篇輸出很難對齊，board 不會。

在一大段文字裡，你沒辦法指著某一句說「就是這裡」。在 board 上可以：一個項目、幾個項目、檔案的幾行，或整張圖。

  • 檔案才是真相

    每張圖都是 repo 裡 design/ 的一個檔案。Board 是從檔案畫出來的，每次修改都是一般的 git diff。

  • Agent 動手，你做決定

    你提問、你決定。Agent 寫檔、lint，再重畫 board。

  • 在 board 上的修改都是提案

    拖動的連線、在原始碼視窗改的文字、另一個 agent 的 diff，都會在對話串裡等你同意。Canvas 自己從不寫檔。

  • 你的排版會保留

    重畫時，你移動過的位置會保留，你刪掉的東西也不會再出現。

提問、討論、同意，然後檔案才改。

每段對話都綁在你選取的東西上，agent 清楚知道你指的是什麼。

  1. 請 agent 畫一張圖

    在 Unprose 上畫一張我們註冊流程的 EventStorming。

    它會寫出 design/signup.es.yaml、檢查，然後畫在 localhost:4400 的 board 上。

  2. 指著某個東西發問

    選一個方塊，打開 Chat 分頁，輸入問題，按 Ask AI。每則訊息都會顯示目前狀態：

    • Sent
    • Seen by agent
    • Agent is working…
    • Needs you

  3. 你同意了，檔案才改

    Agent 在對話串回答，或提出具體的修改（diff）。你說好之前什麼都不寫；說好之後，持有這些檔案的 agent 套用修改、lint、重畫。

Board 的 Chat 裡的一個提案：「proposed edit, design/holds.es.yaml, +3 −0」，由 codex-b 提出，unified diff 新增 event「Hold expired」和 command「Expire hold」，註明還沒寫進檔案，並有 Agree 和 Decline 按鈕。
第二個 agent codex-b 不能寫你的檔案，所以它提出 diff，在對話串裡等你按 Agree 或 Decline。

從發生了什麼、到先做什麼、到手上的工作。

依問題的形狀選圖。每張圖是 design/ 裡的一個檔案；多張圖可以放在同一張 board，用 traces 連起來：這個 story 來自那個 command，這張卡片來自那個 story。

Domain Storytelling

用圖示句子講一個具體的情境：誰、拿什麼、做了什麼，圖示可以照你的領域自己畫，群組可以上色。Play story 一句一句講給你聽。可與 Egon.io 匯入、匯出。

design/<name>.domain-story.yaml

Domain story 的重播，第 4 步（共 6 步）：「Library app sends pickup notice to Mia (member)」這句以藍色標示，前面的句子已畫出，後面的句子淡淡顯示。

EventStorming

依照《Introducing EventStorming》的畫法，討論系統隨時間怎麼運作：event、command、policy、read model 和 hotspot 由左到右排列，並有文法檢查。

design/<name>.es.yaml

EventStorming 時間軸：Member、Place hold、Library app、Hold placed；Librarian、Check in copy、Circulation desk、Copy checked in；一個 policy、Match oldest hold、一張紫色 hotspot 和顏色圖例。

Story map

決定先做什麼：activity、step 和 story，用 release 切線分批。Agent 可以從你的 EventStorming 或 domain story 提議 stories。

design/<name>.story-map.yaml

Story map：activity「Reserve a book」、「Wait for it」、「Pick it up」，底下是 step，stories 分成 First release 和 Later 兩列。

UI mock 與 wireframe

看起來像真的畫面，可選手機、筆電或桌機尺寸，淺色或深色。可以只針對一個按鈕留言；編號的註解說明每個部分的用途；Clickable 顯示每個點擊會到哪裡，Play 可以一頁一頁走過。也有低擬真的 wireframe。

design/<name>.ui.yaml 或 .wireframe.yaml

筆電尺寸的圖書館書籍頁 UI mock：書名、「All 4 copies on loan」和「3 people waiting」標籤、取書分館選單、標著「Hold placed」的 Place hold 按鈕、館藏表格，以及畫面旁三則編號註解。

Kanban

把一個 release 的 stories 變成工作，一欄一欄往前推，可設定 WIP 上限。每張卡片都能追溯回它的 stories。

design/<name>.kanban.yaml

Kanban：Backlog、Doing（2/2）、Review、Done 四欄，卡片如 Place a hold、Pickup email，各有標籤。

Agent workflow

把 agent 流程寫成資料：trigger、step、step 之間的 event，以及每一步由誰執行。Inspector 顯示一個 step 的 agent、prompt、輸入、輸出和限制。可以 lint、golden test，也能直接執行。

<name>.workflow.yaml

Issue triage 的 workflow board：trigger、fetch、由 @triager 執行的 AI step triage、route gate、ask-reporter、confirm 和 park。右側 Inspector 顯示 triage step 的 agent、model、prompt、input、output 和限制。

在 Claude Code 輸入 /unprose: 就能開始：/unprose:eventstorm、/unprose:domain-story、/unprose:storymap、/unprose:kanban、/unprose:mockup、/unprose:wireframe，或用 /unprose:help 找出適合的那一個。Codex 和其他 MCP agent 會以 MCP prompts 取得同樣的功能。User journey 也是支援的圖之一。

同一張 board，不只一個 agent。

你筆電上的 Claude Code、另一台機器上的 Codex、雲端的 agent，都可以在你同意後加入；誰回答、誰被問、誰能改檔案，都有清楚的規則。

  • 遠端 agent

    把 client 指向 https://<你的 canvas>/mcp。它會顯示一次性的配對碼，你的 canvas 頁面會詢問是否允許連線：輸入配對碼、按 Allow 即可。也可以建立唯讀或可繪圖的 token，隨時撤銷。

  • 由你決定誰回答

    在 board 標題列設定 Answered by。在留言裡寫 @codex-b，就把這個對話串交給那個 agent。Agent 之間也用同樣方式互問，在沒有你參與的情況下來回幾則就會暫停。

  • 檔案由一個 agent 持有

    畫出這張圖的 agent 持有它的檔案，只有它能重畫。其他 agent 提出 diff，等你同意後由它套用。你也可以把檔案交給另一個 agent。

  • 大家從同樣的脈絡開始

    Board 的 Context 筆記告訴每個 agent 加入前討論過什麼；每次修改都記著是誰做的。

另一個 agent 說「好」，永遠不等於你的同意：只有你能核准修改。各 client 的設定：docs/agents-setup.md（英文）。

五分鐘就能開始。

需要 Node.js 20 以上和 git。不用 npm install：repo 已附可直接執行的 build。

Claude Code

Clone 下來並啟動 canvas，board 會開在 http://localhost:4400。

git clone https://github.com/river0825/unprose && cd unprose
node scripts/canvas.mjs

讓它繼續跑著。在另一個終端機把 Claude Code 連到 board：

claude mcp add unprose -e AWD_CANVAS_URL=http://localhost:4400 -- node "$PWD/scripts/mcp.mjs"

接著在任何專案打開 Claude Code，問它：「在 Unprose 上畫一張我們註冊流程的 EventStorming。」不知道從哪裡開始？輸入 /unprose:help。

Claude Code plugin 會一併加入 skill 和 /unprose: 指令

/plugin marketplace add river0825/unprose
/plugin install unprose@unprose

每次開始 session 時，它會在 localhost:4400 啟動 canvas；更新後會用新版本重啟。

Codex 與其他 MCP client

把 stdio server 加到 ~/.codex/config.toml，並把 AGENTS.md 複製到你的專案：

[mcp_servers.unprose]
command = "node"
args = ["/path/to/unprose/scripts/mcp.mjs"]
env = { AWD_CANVAS_URL = "http://localhost:4400" }
tool_timeout_sec = 1900

其他 MCP client：指令 node，參數 /path/to/unprose/scripts/mcp.mjs，環境變數 AWD_CANVAS_URL=http://localhost:4400。

從安裝到第一次 session、每一種 agent 的步驟：使用說明。各 client 的細節與注意事項：docs/agents-setup.md。完整說明：繁體中文 README、diagrams、canvas 與 MCP 工具（英文）。

最新版本

版本 0.30.0,

  • Draw an actor again at one sentence
  • A new drawing lands next to where you put its neighbour

所有版本的更新說明（英文）