dsh_design
其他 活跃维护

dsh_design

xbyzzZ/dsh_design

提供面向原型设计场景的可交互HTML画布工具,支持点击事件绑定、元素自由拖拽与实时效果预览,无需复杂配置即可快速搭建高保真可点击原型,满足Web端交互方案快速验证需求。

0
Stars 标星
0
Forks 分支
0
Watchers 关注
0
Open Issues
JavaScript
主要语言
MIT
开源协议
224 KB
仓库大小
1 个月前
最后推送
一键安装扩展 / 插件指令
dsh plugin --profile web add github:xbyzzZ/dsh_design
git clone https://github.com/xbyzzZ/dsh_design.git
git clone git@github.com:xbyzzZ/dsh_design.git
README.md main

dsh-design

English 中文

Clickable HTML prototypes inside DeepSeek Harness.

License: MIT

Chat view tab Prototype: a scaled 1280×800 web login with zoom, pan, pins, and a prototype list

What it does

  • Agent tools (design_*) write HTML under .dsh-design/
  • Preview is a scaled artboard at the platform size
  • Click the page, drop pins, and continue in the same chat

Official plugin docs: tools · publish · Cordis

Requirements

  • DeepSeek Harness web profile, Node.js 22+
  • dsh-better-sidebar for the sidebar tab (optional; tools still write files without it)

Two places to open Prototype (toolbar checkboxes):

Entry Where
Sidebar tab (on by default) better-sidebar + → Prototype
Chat tab (off by default) in-chat view tab

Install

From this directory:

dsh plugin --profile web add .

Restart DSH. Open better-sidebar + and choose Prototype.

dsh plugin installs into $DSH_HOME/profiles/web and appends the bundle because package.json declares dsh.bundle.patch.

If add fails with pnpm v11.12.0 is a broken release, bump the profile packageManager pin (for example pnpm@11.22.0) and run the same command. That pin is not in this package.

Use

  1. In chat: “Make a login page.” If you did not already say platform / look, the agent asks: web, iOS, or Android? paper or ink?
  2. It calls design_create then design_write. HTML lands under .dsh-design/.
  3. The Prototype tab shows a scaled artboard:
    • web 1280×800, iOS 390×844, Android 412×915
    • several prototypes in one workspace → pick from the strip under the toolbar
    • − / % / + zoom · Pan or hold Space and drag · two-finger scroll to pan · ⌘/Ctrl+scroll to zoom
  4. Pin: click a spot, write a note, then mention it in chat. The agent reads pins before rewriting.

Files may nest two folders. HTML can <link href="css/app.css">, <a href="settings.html">, <img src="https://raw.githubusercontent.com/xbyzzz/dsh_design/main/assets/logo.png">. Raster images use encoding=base64. design_systems with id=paper or ink loads a sample page.

Looks:

id Use
paper Light product UI (auth, settings, content)
ink Dark operations UI (admin, tables, dashboards)

Agent tools

Tool Role
design_status Projects in this workspace and the file currently previewed
design_systems Platforms, default artboards, and paper / ink
design_create New project; pass platform and designSystem from discovery
design_brief Complete or change the brief on an existing project
design_write Write html / css / js / svg / raster; first HTML needs a complete brief
design_list List files in a project
design_open Point preview at an existing HTML file or another project
design_comments Read canvas pins (x,y in 0..1, optional CSS selector) before rewriting

Storage

<workspace>/.dsh-design/
  current.json
  projects/<id>/
    project.json
    comments.json
    index.html
    css/app.css
    assets/logo.png
    settings.html

Safe to commit or gitignore. Paths stay under .dsh-design. Single file cap is 512 KiB (maxFileBytes).

Config

The bundle ships cordis.patch.yml. Official patches replace config wholesale. To override:

- insert:
    - id: dsh-design
      name: dsh-design
      config:
        maxFileBytes: 524288

Develop

node --test test/*.test.js

Tests use Node builtins only.

Product notes (Chinese): docs/prd.md.

License

MIT. See LICENSE.