Sal7one/DSH-Design-Studio

Install

---
## Todos

- Remove The scerenshot feature it's buggy


## ✨ Features

### Core platform

- **One command, persistent** — a dual-face `dsh.bundle` + `dsh.client` package:
  `dsh plugin add` once, and the tool, the preview route, the prompt section and the
  **Design Studio tab** are all present on every launch. No build step, no TypeScript,
  **zero runtime dependencies** (plain JavaScript).
- **`design_studio` agent tool** — your assistant (and any subagent) can
  `list / all / create / read / write / zip / reveal / delete / sweep` design systems,
  manage identity presets, run vision reviews, chat with the design agent, read its
  history, and configure the studio — all scoped to `temp_design_folder/` design folders.
- **Live preview route** — `/design-studio/<slug>/html/index.html`, served by the
  harness web server; the studio tab embeds it in an iframe with hot reload on save.
- **Design-brief routing** — a system-prompt section turns operator screen briefs into
  design systems automatically.

### Design systems

- **Mockup-scoped files** — every design system is `html/index.html`,
  `css/style.css`, `css/token.css`, `js/app.js` (minimal presentation) plus
  `design_prompts_forcoders.md` (the brief the coding agent follows) and
  `assets/images/` for uploads. Mock data stays honest — empty/loading states,
  never fabricated live numbers.
- **Per-conversation ownership** — each design system is bound to the conversation
  that created it; the tab shows only your chat's designs (unbound legacy systems
  are adopted on first list).
- **Drop zones** — drop images or code files onto the tab; images land in
  `assets/images/` and auto-select in the agent chat picker.
- **Zip export + Finder reveal + delete** — `_zips/<slug>.zip` (files only), `open -R`,
  and shell-free recursive delete that works even on hosts with no POSIX shell.

### Design agent (real harness subagent)

- **It does the work itself** — the agent chat runs a **harness subagent** (spawn
  engine, design-studio persona) that lists, reads and edits the design files across
  multiple tool calls per message, then summarizes file-level changes.
- **Live activity** — its reads/edits stream into the chat as they happen, with
  inline errors, a persisted per-system history, and run timeouts.
- **Vision pre-pass** — images explicitly selected in the picker (or mentioned by
  filename) are pre-described by your configured vision model, so "the image"
  always means the right one and the agent never guesses between assets.
- **Design-cache discipline** — on every turn (even a bare "ok") the agent verifies
  the freshness stamp, reports whether the design changed since its last turn,
  adopts the latest files as truth, and asks what you want when the request is vague.

### 🎯 Element picker + two-agent apply flow

Click **🎯 Select**, click any element in the live preview, describe the change:

| Button | What happens |
| --- | --- |
| **🤖 Ask DeepSeek** *(default)* | Saves `EDIT_REQUEST.md`, injects the request into your **main chat**. DeepSeek edits the files itself and invokes the design agent only when it needs vision (the tool routes it explicitly). A **live run banner** tracks queued → working → finished in the tab, and the studio **auto-runs a design-agent verification** once the edits settle — guaranteed designer involvement, not a hope. |
| **◈ Make the design agent do it** | The classic flow: the design agent applies the change itself and replies in its chat. |
| **💾 Save only** | Just writes `EDIT_REQUEST.md` — apply later from either chat. |

### Freshness stamps (multi-agent safety)

- Every design change bumps a **stamp `{hash, at}`** (fresh random hash + ISO time,
  latest-status only) — the plugin detects changes from *any* editor via the
  harness `fs/observed` stream, plus synchronous bumps on its own write paths.
- Agents compare their remembered hash with the current one: drift ("changed since
  your last turn") is surfaced in prompts and tool output, and the design agent
  records a per-turn **design cache** so the next turn can prove UNCHANGED/CHANGED.

### Vision, screenshots & presets

- **📸 Shot** — capture a screen region (`screencapture` on macOS) straight into the
  design system's `assets/images/`.
- **👁 Review** — honest `GOOD | POOR` verdict + one-sentence notes from your
  OpenRouter vision model against the brief (configurable models, effort, options).
- **Identity presets** — save palettes/typography/logos as presets; `preset_apply`
  writes `css/token.css` and copies logo assets. Credentials are handled through the
  harness credential seam (`OPENROUTER_API_KEY`) — the key is never rendered or returned.

### Settings & data

- **Settings → Design Studio / All designs** pages: config, key status, system list,
  zip/reveal/delete per design.
- **Everything survives restarts** — designs, presets, config, reviews and agent
  history live on disk under `temp_design_folder/`.

---

## Quick start

Works with **both** harness distributions — the npm distribution
(`npx @deepseek-ai/dsh web`) and a source checkout (`pnpm dsh web`).

Add Sal7one/DSH-Design-Studio to your DSH config (web profile) to enable.