前言¶

在 DeepSeek Harness（DSH）裏做活動圖、多尺寸海報或同一套素材的多版式輸出時，常見做法是藉助外部設計工具或腳本拼 PNG，再把成品掛回對話或工作流。圖層關係、多尺寸同步改文案或換圖，往往要重複導出多遍。DSH 生態按「一切皆插件」擴展能力；社區目錄 skillhub.cn 上的客戶端插件可以內嵌解決一部分排版與批量導出需求。下面介紹維護者 northstacker 發佈的 dsh-design-studio（包名 @local/design-studio）：在 Harness 主面板裏完成多設計、多圖層排版，並通過綁定組實現「一處改內容、多圖同步」，最後批量導出 PNG / JPG / ZIP。

這是什麼¶

dsh-design-studio 是面向 DeepSeek Harness Web 的分層設計工作臺插件：上傳圖片、按圖層排版，把不同設計裏的圖片層或文字層綁到同一綁定組，一處修改多圖同步，再批量導出 PNG / JPG / ZIP。

• 維護者：northstacker
• 分類：客戶端（Host 半 index.js 負責項目落盤，Client 半 client.js 負責界面與畫布）
• 入口：左側欄圖標 design-studio（排序 6），點開後佔據中間主面板
• 許可證：MIT（package.json 版本 1.0.0）
• 源碼與說明：GitHub — northstacker/dsh-design-studio

倉庫 README 標明平臺爲 DeepSeek Harness Web，測試徽章爲 211 項檢查通過；插件以當前 DSH 進程權限運行，安裝前應自行審閱源碼與許可證。

核心功能¶

多設計與圖層¶

• 新建設計：預設尺寸包括 1080×1080、1080×1350、1080×1920、1920×1080、1200×628，或自定義寬高。
• 上傳（PNG / JPG / WebP）：可「每張圖片新建一個設計」，或「作爲圖層加入當前設計」（默認約 80% 鋪滿並保持比例）。
• 圖層：圖片層與文字層；列表可拖拽排序、顯隱、鎖定、重命名、複製與刪除。畫布支持移動、縮放（Shift 鎖比例）、旋轉（Shift 15° 吸附）、視圖平移與縮放。
• 屬性：位置、尺寸、旋轉、透明度；圖片的適應 / 填充 / 鋪滿 / 原始尺寸與裁切；文字的字體、字號、字重、顏色、對齊、行距、斜體。
• 撤銷 / 重做覆蓋編輯動作；一次綁定組批量修改只佔一條撤銷記錄。

跨設計綁定¶

同一份活動背景或標題文字，可在多張不同尺寸的設計裏各自排版（位置、字號、顏色等獨立），而共享內容（圖片素材或文字串）通過綁定組同步：

1. 選中圖層 → 右側「綁定」標籤。
2. 新建綁定組（圖片層只能建圖片組，文字層只能建文字組）。
3. 其他設計中選中同類圖層 → 加入已有綁定組。
4. 編輯共享內容時會列出受影響的設計與關聯數量，確認後一次同步全部成員。
5. 位置、尺寸、旋轉、透明度及文字樣式始終各設計獨立；替換圖片時保留各圖層的顯示區域，按各自的適應 / 裁切設置重繪。

解除綁定或刪除綁定組後，圖層保留當前內容與外觀；刪除某一設計或圖層不會影響其他設計裏的關聯圖層。

保存與導出¶

• 保存：手動保存寫入 ~/.dsh/design-studio/project.json（存在 $DSH_HOME 時使用該變量）；保留上一版 project.prev.json；編輯後約 1.8s 防抖自動保存。圖片素材以 base64 data URL 隨項目持久化。Host 路由不可用時回退瀏覽器 localStorage（約 5MB 上限）。
• 導出：勾選任意設計；單個直接下載，多個打包 ZIP。格式爲 PNG（可選透明）或 JPG（可選背景色與 0.5–1 質量）。導出像素尺寸嚴格等於畫布尺寸。導出前等待字體與素材就緒；失敗項會在結果中列出。

界面佈局（來自 README）：頂部工具條（項目名、上傳、新建設計、撤銷、重做、保存、導出）；左側設計列表與素材列表；中間畫布；右側圖層列表與屬性 / 綁定面板；底部狀態欄。

安裝與啓用¶

倉庫只包含插件本體（client.js 已構建，裝完即用）。不要憑插件名拼接未在文檔出現的 dsh plugin add 類命令。官方 README 給出的方式如下。

在 DeepSeek Harness 中任選一種：

1. 插件頁安裝：將已獲得的插件目錄作爲本地插件安裝。
2. profile 鏈接（路徑爲 ~/.dsh/profiles/<profile>/）：

ln -s /path/to/dsh-design-studio node_modules/@local/design-studio

並在該 profile 的 package.json 的 dependencies 中加入：

"@local/design-studio": "link:/path/to/dsh-design-studio"

在 dsh.profile.bundles 末尾加入 "@local/design-studio"，然後重啓 Harness。

包名固定爲 @local/design-studio（按路徑安裝，不走 npm registry）。若修改 src/，在插件目錄執行 npm run build 重新生成 client.js。

典型用法¶

README 用「同一份活動背景、三張不同尺寸設計」說明能力：各設計對背景圖使用 cover / contain、不同透明度等排版；標題文字通過文字綁定組共享內容，但字號、顏色、對齊、斜體在各設計中獨立。導出 PNG 的寬高嚴格等於畫布（文檔示例爲 1080×1080 與 1080×1920），爲引擎真實導出而非編輯器截圖。

可復現的操作順序：

1. 上傳背景或新建預設尺寸設計，在畫布上排圖片層與文字層。
2. 對需要在多稿中同步的圖層創建綁定組，在其他設計中把對應圖層加入同一組。
3. 在綁定側修改共享圖片或文字，確認影響範圍後同步。
4. 在導出對話框勾選目標設計，選擇 PNG 或 JPG（多選則 ZIP），下載成品。

Host 半提供 POST /design-studio/state 的 save / load；項目結構在 README 中概括爲 Project（含 designs、bindings、assets）及圖層、綁定、素材字段約定。

適用場景與注意¶

適合：需要在 Harness 內快速做多尺寸海報、活動圖、縮略圖變體，且希望同一文案或主視覺在多張稿之間只改一次的開發者或運營配合場景。

限制（README「已知限制」）：僅圖片層與文字層，無形狀、蒙版、濾鏡、混合模式、多選變換；畫布上限約 8000 萬像素；文字排版基於 measureText 折行，無字距微調、連字、豎排與富文本分段。

安全與信任：插件分類爲客戶端，仍與 DSH 同進程；安裝前請閱讀 倉庫源碼 與 MIT 許可證。社區目錄站點與 DeepSeek / 幻方無官方從屬關係，僅爲生態索引。

開發者可在插件目錄執行 npm install（測試依賴 @napi-rs/canvas）與 npm test 跑四套共 211 項檢查；運行時插件不依賴 Skia。

結尾¶

dsh-design-studio 把分層排版、跨設計內容綁定和批量 PNG / JPG / ZIP 導出收進 Harness 主面板，減少「多尺寸重複改圖、重複導出」的往返。進一步瞭解可訪問社區目錄頁 northstacker/dsh-design-studio 與 GitHub 倉庫 https://github.com/northstacker/dsh-design-studio。