Introduction¶

When developing front-end with DeepSeek Harness (DSH), the design phase often exists outside the agent workflow: screenshots are pasted into the chat, changes are described orally, and the agent opens a browser to verify changes after modifying code. Design and coding are often separate tracks; the agent cannot see the page and cannot verify what it has changed.

The philosophy of DSH is “everything is a plugin,” and this gap can be filled by a plugin. The @sal7one/dsh-design-studio introduced below is maintained by Sal7one under the MIT license. It integrates real-time preview, element selection, real design agents, and visual reviews into the harness, turning design drafts into files that agents can directly read, write, and verify.

What is it¶

One-sentence positioning: A DeepSeek Harness design plugin that turns design mockups into first-class AI workflows — featuring real-time preview, element selection, real design agents, and visual reviews.

A few fundamentals:

• Current version is 1.2.3, engines requires Node.js >= 22;
• Zero runtime dependencies, pure JavaScript, no build steps;
• Structure consists of dsh.bundle (host side) + dsh.client (Web UI side) “double bread”: run dsh plugin add once, and the design_studio tool, /design-studio preview route, prompt sections, and Design Studio tab are present every time the app starts;
• All design systems are real files under temp_design_folder/ on disk; designs, presets, configurations, reviews, and agent history remain after restart.

Core Features¶

design_studio Tool and Real-time Preview¶

design_studio is an agent tool callable by both the main assistant and sub-agents. It supports list / all / create / read / write / zip / reveal / delete / sweep for design systems, manages identity presets, runs visual reviews, converses with design agents, reads history, and configures the studio. Its scope is limited to the design directory under temp_design_folder/.

The real-time preview route is /design-studio/<slug>/html/index.html, provided by the harness web server. The Design Studio tab embeds this route via an iframe and hot-reloads upon saving. There is also a Design-brief prompt section that automatically converts the operator’s screen description into a design system.

Design System File Structure¶

The file structure of each design system is fixed:

html/index.html
css/style.css
css/token.css
js/app.js
design_prompts_forcoders.md
assets/images/

design_prompts_forcoders.md is the brief that the coding agent must follow; assets/images/ stores uploaded images. Mock data is honest — it only includes empty states and loading states, not fake live numbers.

Each design system is attributed to the session that created it, and the tab only displays designs for the current session.

Design Agent¶

The design agent is not a packaged persona but a real harness sub-agent with four behaviors:

1. Within each message, it reads and edits design files across multiple tool calls, then summarizes file-level changes;
2. Read and edit activities flow into the chat in real-time, accompanied by inline errors, history persisted by the system, and runtime timeouts;
3. Visual pre-pass: The image selected in the selector is first described by the configured vision model; the agent won’t guess “this image” among multiple assets;
4. Freshness stamp {hash, at}: The plugin detects any editor changes via the harness fs/observed stream. The agent records the design cache each round, and the next round proves UNCHANGED or CHANGED based on this.

Element Selection and Dual Agent Application¶

Click 🎯 Select, select any element in the real-time preview and describe the change, then choose one of three:

Visual Review and Identity Presets¶

• 👁 Review: Based on OpenRouter vision models, provides honest GOOD | POOR feedback with a one-sentence note based on the brief. Model, effort, and options are all configurable;
• Identity Preset: Saves palettes, fonts, and Logos; preset_apply writes to css/token.css and copies Logo assets;
• OPENROUTER_API_KEY is handled via the harness credential seam; the key is never rendered or returned;
• 📸 Shot: Captures a screen area (macOS screencapture) directly into assets/images/. Note that the author has planned to remove this feature in the README Todos as it is buggy.

Other Capabilities¶

• Drag and Drop Area: Dragging images or code files into the tab drops images into assets/images/ and automatically selects them in the agent chat selector;
• Zip export (_zips/<slug>.zip, files only), Finder location (open -R), and recursive deletion without a shell, usable on hosts without a POSIX shell;
• Settings → Design Studio / All designs page: Configuration, key status, system list, and individual design zip/reveal/delete.

Installation and Enablement¶

The plugin is compatible with two harness distribution methods: npm packages and source code checkouts. For npm packages, follow these three steps:

# 1. Start harness (if not running)
npx @deepseek-ai/dsh web

# 2. Install plugin
dsh plugin --profile web add "github:sal7two/dsh-design-studio#main"

# 3. Restart harness to load the new layer

For source code checkouts, use pnpm dsh web to start. Install from a local checkout:

dsh plugin --profile web add -w /absolute/path/to/dsh-design-studio

Two notes:

1. -w is only required when the profile directory is the pnpm workspace root (where pnpm-workspace.yaml exists), and the path must be absolute; otherwise, it will be misread as a GitHub owner/repo shorthand;
2. The installation command above is copied verbatim from the README. Note that sal7two does not match the GitHub repository ownership Sal7one/DSH-Design-Studio; please refer to the command given on the repository page before installing.

Typical Usage¶

After restarting the harness following the steps above, the Design Studio tab is available every time it starts. Using the element selection flow as an example:

1. Open the Design Studio tab;
2. Click 🎯 Select;
3. Select any element in the real-time preview and describe the desired change;
4. Choose an application method: The default 🤖 Ask DeepSeek writes the request to EDIT_REQUEST.md and injects it into the main chat, DeepSeek edits the files, and after the edit is finalized, the studio automatically runs a design agent for verification. You can also ◈ Delegate to the design agent to execute, or 💾 Save Only, and apply it later from either chat.

Another entry point is the Design-brief route: provide a screen description in the chat, and the system prompt section will automatically convert it into a design system without needing to manually create directories.

Applicable Scenarios and Notes¶

Who is it for: Developers using DSH for interface development; those who need an independent design track outside the main chat and want design and coding to share the same set of real files, rather than relying on screenshots and verbal handovers.

Pre-use considerations:

1. The plugin runs with the permissions of the current dsh process and can read/write temp_design_folder/ and invoke vision models. It is recommended to check the source code and license before installing (this plugin is MIT);
2. Runtime environment requires Node.js >= 22;
3. The 📸 Shot screenshot feature has been marked as buggy by the author and is planned for removal; please take note when using it;
4. For other operations like uninstallation, refer to the repository README.

Summary¶

@sal7one/dsh-design-studio transforms design drafts from images into real files that agents can read, write, and verify: real-time preview and element selection allow you to point to where changes are made, the dual agent application flow ensures every edit is verified by a design agent, and freshness stamps and visual pre-passes handle drift issues in multi-agent collaboration. If you are using DSH for interface development, it is worth a try.

• Community Directory (independent site, not official app store): https://www.skillhub.cn/plugins/Sal7one/DSH-Design-Studio
• GitHub: https://github.com/Sal7one/DSH-Design-Studio