dsh-moodboard
DeepSeek Harness 的视觉参考情绪板：收集链接、Mobbin 和 Are.na 参考资料，固定风格指南，并将灵感转化为自己的 UI 组件。
插件会安装到这里；不确定时保持 web。
npx -y @deepseek-ai/dsh plugin --profile web add github:Stijnus/dsh-moodboard#2b9e1038e80dd0a46bf7909d651fdb582ca2904dMoodboard 以 dsh-moodboard 发布，当前版本为 0.4.2。Plugin Hub 会校验它的 manifest，并保存精确安装来源，便于复现安装结果。
A visual reference moodboard for DeepSeek Harness. Collect screenshots and inspiration images in the Web UI, tag and annotate them, pin the ones that define your app's visual language, and let the agent read that style guide before it generates or restyles UI.
The panel is the Warm Sand Studio interface: a warm sand canvas, white cards, one coral accent, deep warm ink, soft 18–22px radii and pill controls. It is built from the Harness theme tokens, so light and dark follow the host. See docs/UI-REDESIGN.md.
Moodboard panel: warm sand canvas, active style guide, gallery, tag filters and reference cards
A quick tour after installation:
? for shortcuts.Install · Requirements · Agent API · Limits
The fastest path is the Plugins page: Add plugin → dsh-moodboard,
which installs the package and enables the Moodboard bundle. From the CLI:
dsh plugin --profile web add dsh-moodboard
The CLI installs the package; the Moodboard bundle still has to be enabled on the Plugins page. Restart the Harness (or refresh the Web UI) if the sidebar entry does not appear.
More from this suite: Moodboard · Composer Predictions · Move to Workspace · Workspace Status · Prompt Rewrite
⭐ If this saves you a step, a star helps the next DSH user find it.
n / 20 link counter, a real pin setting row with an
explanation, and a sticky footer with the coral primary on the right.client.js in light and
dark across page, dialog, inspector, lightbox, bulk bar and phone widths.Full history: CHANGELOG.md.
--dsw-alias-* through a local
--mb-* layer: a warm canvas, card surfaces, hairline warm borders, one
coral accent, warm ink, 4px-based spacing and soft shadows. Motion honours
prefers-reduced-motion; focus rings, live regions and labelled controls are
preserved.+n tag overflow count.n / 20 links counter, tag editor, pin setting row, and a sticky footer with
Close plus the coral primary. Discover has source, query, platform and results
fields with the Mobbin key hint; results report added / already-on-board /
failed counts and offer Copy workflow.The panel's Add from link button opens the Add references dialog, which has two intakes:
mobbin and arena as the source; other ids are rejected with
invalid-argument before any request. Are.na search returns a mixed
text/image result list, so only image blocks count toward the requested
number of results — text blocks are skipped, not counted and not reported as
failures.Add references dialog: From links and Discover tabs, live link counter, tags and pin setting
The dialog is the redesigned intake surface: a gradient header with a coral link
badge, icon segmented tabs, a live n / 20 links counter, a proper pin setting
row, and a sticky footer with Close and the right-most coral primary. After an
import it shows added / already-on-board / failed counts, the first failure
messages, and a Copy workflow action. The import does not close the dialog;
the board refreshes silently behind it.
The agent has the same abilities through the moodboard tool:
action: "import" with urls, paths (local screenshots from a browser MCP)
or source + query; action: "sources" lists what is configured; and
action: "workflow" returns the reference-to-component method.
Configure Mobbin with MOBBIN_API_KEY or
<DSH_HOME>/moodboard/sources.json ({ "mobbinApiKey": "…" }; the default
DSH home is ~/.dsh). The file is re-read on every import, and the environment
variable wins. Dribbble blocks server-side page fetches, so capture it with a
browser MCP or upload the screenshot — see
docs/INSPIRATION-WORKFLOW.md for the browser
MCP setup, the source matrix and the designer-respect rules.
Selecting a gallery card opens the reference inspector next to the gallery.
The inspector keeps the working surface close to the reference:
The inspector is a 360px side column on wide screens, narrows to 330px below 1100px, and becomes a dismissible bottom sheet at 1024px and below. The gallery, lightbox, bulk bar, tag merge dialog and shortcuts dialog use the same Warm Sand tokens.
The plugin ships the method as a prompt section and a copyable workflow, not just a gallery:
layout, type, palette, component,
motion, flow) and pin the 2–4 that define the direction.Full guide: docs/INSPIRATION-WORKFLOW.md.
DeepSeek Harness >=0.2.1-rc.3 <0.3.0-0 with the Web profile (the Host half
needs attachments, tools, systemPrompt, webServer, and connection;
the browser half needs the slots and locale services).
Renamed in 0.2.7. This plugin publishes as
dsh-moodboard. The earlier scoped name@stijnus/dsh-moodboardwas unpublished, so pins to it now return 404 — installdsh-moodboardand remove the old entry from your profile.
The Plugins page installs the package and enables the bundle in one step. The
agent's plugin_manager tool does the same:
plugin_manager action: "install_bundle" target: "dsh-moodboard"
install_bundle installs the package and selects the bundle; target is the
package name or an absolute local bundle directory. The CLI command only
installs the package:
dsh plugin --profile <profile> add dsh-moodboard
Then enable the Moodboard bundle on the Plugins page. Reload the Web UI if the sidebar icon does not appear immediately.
Or add a plugin market index to Discover (Plugins → Discover → Index sources):
https://raw.githubusercontent.com/Stijnus/dsh-composer-predictions/main/market-index.jsonhttps://raw.githubusercontent.com/Stijnus/dsh-moodboard/main/market-index.jsonCI runs Node 24. The plugin has no runtime dependencies, so a fresh clone needs no install step:
git clone https://github.com/Stijnus/dsh-moodboard.git
cd dsh-moodboard
npm test # syntax checks + the full node:test suite
npm run pack:check # verify the published tarball file list
A real-render harness executes the actual client.js under a stubbed Harness
host and captures the panel, Add references dialog, inspector, lightbox, bulk
bar and responsive states:
node verification/harness/capture.mjs
It drives Chrome through Playwright's playwright-core; set
HARNESS_PLAYWRIGHT_CORE for a custom entry or HARNESS_CHANNEL for a
different browser channel. Generated PNGs stay local; shots/console.json
records the run. See
verification/harness/REPORT.md.
Install a local checkout into a profile for manual testing:
plugin_manager action: "install_bundle" target: "/absolute/path/to/dsh-moodboard"
The current build contract for the Host and Client halves is docs/CONTRACT.md.
moodboard| action | meaning |
|---|---|
active (default) | pinned style guide, or the whole board when nothing is pinned. Returns metadata and the images themselves. |
query | filter by tag(s): tags: ["dark","typography"], match: "any" | "all". Returns matching images. |
list | metadata for every image, no image bytes (cheap overview). |
get | one image by id, with complete notes, tags and source URL. |
brief | text-only style brief (names, tags, notes, sources). |
import | add references: urls (link capture), paths (local screenshots), or source + query (Mobbin/Are.na discovery). Optional tags, notes, pinned; platform (ios/web) and limit (1–12) for discovery. |
sources | list the configured inspiration sources, the local config path and the browser-MCP bridge hint. |
workflow | the reference-to-component method plus the active brief. |
includeImages: false suppresses image content blocks. Image content is capped
at 6 per call. active and query return abbreviated overviews with reference
IDs; use get for complete metadata, or list to find all reference IDs.
import returns imported images, duplicates (already on the board) and
per-item failures; a failed item never fails the whole batch.
The Host half serves one authenticated prefix route /moodboard (owner
session cookie required, same origin as the Web UI). The agent normally uses
the tool; these endpoints exist for the panel and for programmatic reads:
| Method + path | Purpose |
|---|---|
GET /moodboard/api/state | full board + revision |
POST /moodboard/api/images | upload { data, mediaType, name?, tags?, notes?, sourceUrl? } |
PATCH /moodboard/api/images/<id> | update name, tags, notes, sourceUrl, pinned, order |
POST /moodboard/api/images/<id>/replace | replace bytes, keep metadata |
DELETE /moodboard/api/images/<id> | remove |
POST /moodboard/api/images/reorder | set the complete gallery order { ids: [...] } |
POST /moodboard/api/images/bulk | bulk { ids, pinned?, addTags?, removeTags?, delete? } |
POST /moodboard/api/tags/merge | rename/merge { from, to } across the board |
GET /moodboard/api/active | active guide with tags/notes/sources/brief |
GET /moodboard/api/query?tag=…&match=any&limit=50 | tag lookup (limit 1–200, default 50) |
GET /moodboard/api/health | liveness + image count |
GET /moodboard/api/revision | cheap change detector for the open panel { revision, updatedAt, images } |
GET /moodboard/api/sources | configured inspiration sources, workflow text, config path |
POST /moodboard/api/import | { urls } / { paths } / { source, query, platform?, limit? } + tags?, notes?, pinned?; returns { imported, duplicates, failures } |
GET /moodboard/image/<id>?v=<attachmentId> | normalized image bytes for that revision |
All JSON responses use { ok: true, … } or
{ ok: false, error: { code, message } }. GET /moodboard/api/state carries
the same process-local revision as /api/revision; the panel compares it (and
the board timestamp, so a Host reload is noticed too) with what it last applied
and only re-reads the full board when either changed.
<DSH_HOME>/moodboard/board.json (atomic writes; corrupt files are
backed up as board.corrupt-<timestamp>.json and the board starts empty).<DSH_HOME>/moodboard/sources.json (optional; currently
{ "mobbinApiKey": "…" } and the snake_case mobbin_api_key alias). The
environment variable MOBBIN_API_KEY wins. The file is re-read on every
import.Plugin chrome composes the Harness theme tokens (--dsw-alias-*) through a
small local layer (--mb-*): warm sand canvas, white cards, hairline warm
borders, one coral accent, deep warm ink, 18px cards, 22px dialogs, 12px inputs
and pill controls. Light and dark both derive from the host tokens, so the
panel follows theme switching without a theme hook. Motion is quiet
(180ms; prefers-reduced-motion turns transitions and lift off), focus rings
are visible, and image thumbnails are the user's own artwork. The design brief
and token table are in
docs/UI-REDESIGN.md.
source is limited to mobbin or arena, and
any other value fails with invalid-argument before a request is made.moodboard tool returns at most 6 image content blocks per call.moodboard tool instead.Releases are tag-driven and published from GitHub Actions using npm
trusted publishing (OIDC). No long-lived npm token is stored in the
repository: npm trusts this repository's release.yml workflow at a tagged
commit, and the short-lived credential minted for that run cannot be reused
elsewhere.
Every release of dsh-moodboard from 0.2.8 onward is published with a
provenance attestation that binds the tarball to this repository, the workflow
file, and the commit. 0.2.7 (the first release under the current name) has no
attestation, and the earlier @stijnus/dsh-moodboard versions are unpublished.
The npm package page shows the Provenance badge for the attested versions.
Verify a release:
npm view dsh-moodboard@<version> dist.attestations
npm view dsh-moodboard@<version> dist.integrity
The attestation URL resolves to the signed in-toto statement; npm prints the matching Sigstore transparency-log entry during the release. The one-time publisher setup, tag/release steps, and post-publish checks are in RELEASING.md; version history is in CHANGELOG.md.
MIT. Icon and screenshots: original artwork for this plugin; the screenshots use the project's own reference board.
⌘V/Ctrl+V paste, / search, ⌘A select all,
⌘⇧A invert, Alt+←/→ reorder a focused card, ←/→ browse the lightbox,
Esc clear or close, and ? for the shortcuts list. Dialogs are labelled
and focus-trapped; selection and filter changes are announced through live
status regions.moodboard tool with active / query / list / get / brief /
import / sources / workflow actions. active and query return the
reference images themselves as image content blocks, so the model analyses
the actual pixels, plus tags, notes and source URLs.moodboard:style-guide system-prompt section tells the agent the
moodboard exists and to load it before designing UI.moodboard:inspiration-workflow prompt section and a copyable workflow
turn references into tokens and components instead of copied screens.<DSH_HOME>/moodboard/board.json; image bytes live in the durable
attachment store (<DSH_HOME>/attachments/v1). Survives sessions, reloads
and restarts.