Introduction

The DSH (DeepSeek Harness) settings panel is assembled from multiple plugins. Historically, pages from different sources often used different font sizes, card border radii, and control styles, resulting in a visually fragmented interface. To improve this experience, a standardized design language is needed to unify the visual presentation of all settings pages.

What Is This

dsh-settings-beautify is a Headless plugin that provides a single design language for the DSH settings interface. It does not include navigation entries; instead, it observes the structure of the settings panel and marks DOM elements to apply a set of unified style rules.

Core Features

The plugin primarily achieves the following goals:

  1. Unified typography: Titles, descriptions, item titles, and body text sizes remain consistent across all pages.
  2. Three-tier structure: Defines a unified hierarchy: Title → Description → Content.
  3. Unified controls: Cards, row controls, labels, scrollbars, and focus states (Focus Ring) have consistent styles across all pages.
  4. Extensibility: Supports the data-dshb-scan attribute so pages contributed by third-party plugins can also opt into this design language.
  5. Animation support: Micro-interaction animations automatically respect the system’s prefers-reduced-motion setting.

Installation and Enabling

This plugin follows DSH’s community marketplace package conventions and can be installed via the plugin marketplace or the command line.

  1. Run the installation command:
    dsh plugin --profile <profile> add dsh-settings-beautify
  1. After installation is complete, restart DSH Desktop (or refresh the Web window), and the design language will take effect automatically.

Typical Usage

Because the plugin is Headless, it does not add new entries to the settings navigation bar. You can configure or extend it in the following ways:

  • Enable third-party pages: Add the data-dshb-scan attribute to the root element of a third-party page to enable the unified design language.
  • Adjust preferences: Preferences are stored in the browser’s localStorage. Open the browser console and you can use the window.DSHB.setPrefs method to adjust density and animation settings:
    // 设置为紧凑密度
    window.DSHB.setPrefs({ density: "compact" });
    // 禁用动画
    window.DSHB.setPrefs({ motion: false });

Use Cases and Notes

  • Headless mode: The plugin itself does not provide a settings page; preference data is only stored under the dsh-settings-beautify:prefs key in localStorage.
  • Compatibility: The current compatible version is DSH 0.1.7-rc.2, and it can run without modifying the DSH source code.
  • Coverage: Supports pages such as Shell (navigation bar, header), general settings, model configuration, agent presets, and built-in plugins.

Summary

The plugin resolves the fragmentation of the DSH settings interface by standardizing styles and attribute conventions. With simple installation and attribute configuration, overall visual consistency is improved.