Domain Canvas Skill：用同一個模型連結畫面、業務概念與ER圖

讓更新有一個共同起點

Domain Canvas Skill結合作業指引與Python產生程式。流程會檢查專案程式碼和規格，將畫面、業務物件及資料結構整理到model.json，再產生供瀏覽的HTML畫布。它以安裝在專案內的Claude Code技能形式提供，而非獨立的託管服務。

核心是共用一個模型，不必各自維護三份圖。修改model.json並重新產生HTML後，各視圖會讀取更新後的資料。畫面對應記在bindings，業務及資料關係記在relationships，因此仍須核對相關欄位的一致性。

README：概要與提供方式

用三種問題閱讀同一個對象

領域指的是客戶、申請、合約等具有業務意義的對象與規則。實體關係圖（ER圖）呈現資料屬性及關係。切換視圖，就是改變檢查同一個對象的細節層次。

Design不會自動設計完成版介面。它可以引用畫面圖片或本機HTML原型，若沒有則顯示暫代預覽。Concept顯示說明和關係；ER顯示屬性與鍵標記。目前ER視圖會排除kind: domain，也就是僅表示業務意義的關係線。

產生程式：呈現與驗證

沿著不動產CRM範例追蹤關係

隨附模型包含客戶、物件、申請、合約、文件五個物件，三個詳情畫面及五項關係。合約詳情以合約為主要對象，客戶與物件為背景資訊，文件為相關清單。同一畫面可以依角色連結多個物件。

假設要在合約詳情顯示待補文件，可以先在Design確認文件的對應，再於Concept閱讀合約與文件的意義，最後到ER查看document.contract_id等屬性。這是本文的應用情境，示範本身不會判定缺少哪些文件。

示範上方可切換Design / Concept / ER。拖曳可平移，滾輪或＋／−可縮放，Fit可回到全貌。範例的畫面預覽是暫代顯示，並非實際CRM的螢幕截圖。

不動產CRM範例模型

區分已確認的關係與推論

讓AI整理系統時，畫線的依據比線看起來是否合理更重要。技能要求依主張選擇來源：資料表與外鍵應查結構定義、遷移檔和ORM；業務意義查規格；畫面則查路由和元件。

關係以confidence區分confirmed（已確認）和inferred（推論）。Concept及ER以虛線顯示推論關係。抽取規則也明確要求，不得只因兩個概念出現在同一畫面就認定資料庫關係成立。

不過，confirmed仍是寫入模型的判斷。產生程式不會閱讀證據並證明其正確。來源及未解決假設應記在隨附README，供後續查核。

抽取與證據規則

安裝後，從小範圍開始更新

瀏覽公開示範不需安裝。若要在自己的專案建立模型，請將儲存庫的.claude/skills/domain-canvas/複製到目標專案的相同位置，再於Claude Code呼叫：

/domain-canvas contracts

contracts是範圍的指定範例。也可用自然語言要求把合約相關畫面、概念模型和ER圖整理在同一畫布。先限縮為一個功能，更容易和原始資料核對。

.domain-canvas/model.json

模型的基準檔案，變更在此更新。

.domain-canvas/index.html

產生的瀏覽用畫布。

.domain-canvas/README.md

記錄來源、未解決假設與更新指令。

python .claude/skills/domain-canvas/scripts/generate_canvas.py \
  --model .domain-canvas/model.json \
  --out .domain-canvas/index.html

產生程式需要Python 3，不依賴額外Python套件。執行指令後，以瀏覽器開啟HTML。若要試用隨附範例，輸入改為example/model.json，輸出改為example/index.html。

持續使用時，應把模型更新、重新產生與審查納入功能變更流程。直接編輯產生的HTML會在下次產生時被覆蓋，應修改模型。HTML內嵌模型，因此分享前應確認接收者是否適合取得內部結構及引用的畫面素材。

技能定義：專案作業流程

圖的一致性與業務正確性要分開確認

目前產生程式檢查必要根欄位、實體與畫面ID重複、關係端點及畫面參照。它不會自動驗證所有資料庫限制或業務規則。

例如範例的document.contract_id為nullable: true，但合約與文件關係的合約端多重度卻寫為1。需要確認文件能否在尚未連結合約時存在，或圖只描述已附屬於合約的文件，才能確定解讀方式。成功產生HTML不等於語意已經一致。

HTML檢視器也不提供模型的直接編輯與儲存、向程式碼或資料庫寫回變更、持續監看變更等功能。概念模型要省略技術性中介表，也需要在建模時判斷。目前Concept與ER使用相同的實體清單。

這個技能的實用價值，是讓理解差異成為可審查的對象。選一個功能，建立有依據的模型，再和業務及開發人員確認尚未確定的關係。若能持續這樣的小型維護流程，畫布就能成為交接畫面與資料對應關係的共同文件。

產生程式：呈現與驗證

來源與驗證範圍

本文確認了README、技能定義、抽取規則、範例模型與產生程式，並以隨附範例執行Python，確認輸出HTML包含5個實體、3個畫面及5項關係。未測量實際專案的抽取準確度或減少返工的成效。來源連結固定至查核時的提交版本；公開示範後續可能更新。

• README：概要與提供方式
• 產生程式：呈現與驗證
• 不動產CRM範例模型
• 抽取與證據規則
• 技能定義：專案作業流程

GitHub commit: 914d68fe3f12