Skip to main content
Glama

dsh-visual-skin

DeepSeek Harness Skin Studio — una herramienta de cambio de piel visual con un clic para DeepSeek Harness

Un estudio visual de pieles para DeepSeek Harness (DSH): diseña, previsualiza y aplica pieles de forma segura con un solo clic, sin tocar archivos de configuración. Se envía como un Agent Skill + servidor MCP + plugin DSH, con un instalador PowerShell de un solo uso.

Después de la instalación, tu asistente de IA solo necesita una imagen para completar automáticamente el flujo completo de cambio de piel: subida de imagen → creación de tema → vista previa aislada → confirmación manual de aplicación; también puedes abrir la página web independiente de Studio para ajustar visualmente la piel y escribirla en DSH con un clic.


✨ Funcionalidades

Capacidad

Descripción

🎨 Skin Studio (Diseñador visual)

Interfaz web independiente: fondo de dos áreas (barra lateral/zona principal), fondo de imagen/gradiente, vidrio esmerilado, ajuste de tokens, selector de zonas, lo que ves es lo que obtienes

🤖 Agent Skill

Tras la instalación, cuando el asistente DSH / Codex recibe una solicitud de "cambiar piel / usar esta imagen como fondo", orquesta automáticamente el flujo completo de cambio de piel

🔌 Servidor MCP (26 herramientas)

doctor / design_create / asset_upload / theme_patch / theme_get / theme_validate / preview_start / theme_apply_plan / theme_apply, etc., registradas como mcp__skin-studio__*

🖥️ Plugin DSH

Fondo persistente (CSS a nivel de body, no se pierde al cambiar de conversación), máscara de diálogo (efecto inmediato al hacer clic, cambio sin percepción), línea divisoria de la barra lateral, barra de saldo (botón de saldo sobre la configuración + visualización del saldo en detalles de la conversación, actualizable)

🛡️ Límites de seguridad

Todas las operaciones de "escritura en DSH" pasan por vista previa aislada de DSH → plan de aplicación inmutable → confirmación manual en la interfaz visible; el MCP nunca puede falsificar la confirmación

📦 Instalación con un clic

El instalador PowerShell realiza automáticamente: compilación → instalación de Skill → registro de plugin → registro de MCP → inicio de Studio → (opcional) sincronización con Codex


Related MCP server: dstools

🎬 Demostración

Hero · Exhibición en oscuridad (12s)

Generación · De imagen a piel (7s)

Hero · Exhibición en oscuridad (12s)

Generación · De imagen a piel (7s)

▶ Descargar MP4 · Abrir HTML animado

▶ Descargar MP4 · Abrir HTML animado

Animación realizada por huashu-design · Storyboard en docs/demo/storyboard.md · Tablero de dirección en docs/demo/direction-boards.html


📦 Instalación

Requisitos previos

Dependencia

Versión

Descripción

Windows

10 / 11

El instalador es un script PowerShell

Node.js

22+

Necesario para el plugin y el Controller

pnpm

11+

Solo necesario en la primera instalación (para compilar el runtime portátil)

DeepSeek Harness

0.1.0-rc.6

Versión objetivo, capacidad fijada; si la versión no coincide, el plugin falla de forma cerrada

Método 1: Instalación por línea de comandos (recomendado)

# 1. 获取项目
git clone https://github.com/trrrrrryg/dsh-visual-skin.git
cd dsh-visual-skin

# 2. 一键安装(默认目标:%USERPROFILE%\.dsh,profile: web,Controller 端口 11862)
powershell -NoProfile -ExecutionPolicy Bypass -File .\install.ps1

El instalador realiza automáticamente:

  1. Compila/reutiliza el runtime portátil autocontenido (Controller + Studio + MCP + plugin, aproximadamente 51 MB, instalado en el directorio de Skills);

  2. Instala el Skill en %DSH_HOME%\skills\deepseek-harness-skin-studio (el asistente DSH obtiene inmediatamente esta habilidad);

  3. Registra el plugin DSH (bloque alojado en cordis.patch.yml, que incluye la tarjeta de configuración Configuración de piel);

  4. Registra el servidor MCP (mcp__skin-studio__*, apuntando al runtime autocontenido instalado);

  5. Inicia Studio (Controller, puerto predeterminado 11862, navegador accede a http://127.0.0.1:11862);

  6. Si detecta Codex, sincroniza automáticamente el Skill y registra el MCP de Codex.

Después de la instalación, reinicia DSH una vez (o reinicia desde el lanzador del escritorio) para que el parche de perfil y el cliente MCP surtan efecto.

Parámetros opcionales

Parámetro

Descripción

-DshHome <path>

Directorio raíz de DSH (predeterminado %USERPROFILE%\.dsh)

-ProfileName <name>

Perfil objetivo (predeterminado web)

-DataDir <path>

Directorio de datos de Studio (predeterminado %LOCALAPPDATA%\DeepSeekHarnessSkinStudio)

-ControllerPort <port>

Puerto del Controller de Studio (predeterminado 11862)

-SkipBuild

Usar runtime ya compilado, omitir la compilación

-SkipSkill / -SkipStudio / -SkipCodexMcp

Omitir el componente correspondiente

-RestartDsh

Reiniciar DSH automáticamente después de la instalación (no se reinicia por defecto para no interrumpir sesiones en ejecución)

Ejemplo (instalación personalizada + reinicio automático de DSH después de la instalación):

.\install.ps1 -DshHome C:\Users\me\.dsh -ProfileName web -ControllerPort 12000 -RestartDsh

Método 2: Instalación por IA

Entrega este repositorio a cualquier agente y dile:

Por favor, lee el README y el install.ps1 de este repositorio, y luego ejecuta la instalación.

El agente completará la instalación siguiendo el proceso anterior (también puede ejecutar install.ps1 directamente).

Verificar instalación

# 插件健康检查(在 DSH 端口上,应返回 ok:true;默认 DSH 端口 10402)
Invoke-RestMethod http://127.0.0.1:10402/dsh-skin/health

# Controller / Studio 状态检查(应返回 ok:true、capabilities.compatible:true)
Invoke-RestMethod http://127.0.0.1:11862/api/v1/status
  • Studio abierto: http://127.0.0.1:11862 (o haz clic en el menú de inicio/icono de la bandeja)

  • En la página de configuración de DSH debería aparecer la tarjeta «Configuración de piel»; dile al asistente «cambia la piel» para activar la herramienta mcp__skin-studio__*.


🚀 Uso

Después de la instalación y reinicio, dile directamente al asistente DSH:

  • «Cámbiame la piel» / «Usa esta imagen como fondo» → El asistente llama automáticamente a mcp__skin-studio__* para crear la piel y la previsualiza en Studio;

  • «Cambia el fondo de la piel actual» → El asistente modifica el diseño actual;

  • Ajusta manualmente en Studio (fondo, zona, token, línea divisoria) → Haz clic en Escribir en mi DSH, confirma manualmente en la ventana de plan de aplicación que aparece → Reinicia DSH para que surta efecto.

Diagrama de flujo de cambio de piel

用户指令 / 图片 ──▶ Agent Skill ──▶ MCP (design_create → asset_upload → theme_patch
                                      → theme_validate → preview_start)
                                              │
                                              ▼
                              隔离 DSH 预览(真实渲染,不碰你的 DSH)
                                              │
                                              ▼
                          Studio 可见确认(theme_apply_plan → theme_apply)
                                              │
                                              ▼
                              你的 DSH 皮肤生效(可随时 Restore 还原)

🗂️ Estructura de directorios

├─ install.ps1                     # 一键安装器(命令行 / AI)
├─ apps/
│  ├─ controller/                  # Studio 后端(API、隔离预览、apply/restore、GC)
│  └─ studio/                      # Studio Web UI(React + Vite)
├─ packages/
│  ├─ dsh-plugin/                  # DSH 插件(host 路由 + client 皮肤渲染)
│  ├─ theme-schema/                # ThemeSpec v2 数据契约
│  ├─ design-session-core/         # 设计会话 / 确认票据 / 操作日志
│  ├─ shared/                      # 跨端类型与错误码
│  ├─ agent-cli/                   # dsh-skin JSON CLI
│  ├─ mcp-server/                  # MCP stdio 服务器(26 个工具)
│  └─ portable-runtime/            # 便携运行时聚合
├─ agents/codex-skill/deepseek-harness-skin-studio/
│  ├─ SKILL.md                     # Agent Skill 指令(自动换肤流程)
│  └─ scripts/                     # open-studio / build-portable / install-local
├─ research/                       # 同类项目调研材料(16 个项目 README)
├─ docx/                           # 项目文档(实施计划 / 需求分析 / 架构设计)
└─ tests/                          # 回归测试(含真实 rc.6 隔离 Chromium 预览)

🛠️ Desarrollo

pnpm install          # 安装依赖(需要 Node 22+ / pnpm 11+)
pnpm build            # 构建全部包
pnpm test             # 回归测试(会启动真实 rc.6 隔离预览)
pnpm controller       # 本地启动 Controller(开发)
pnpm dev              # Studio 开发模式(Vite)

🗑️ Desinstalación

  1. Elimina todas las entradas entre los bloques de comentarios # >>> dsh-skin-studio y # <<< dsh-skin-studio en %DSH_HOME%\profiles\<profile>\cordis.patch.yml;

  2. Elimina %DSH_HOME%\profiles\node_modules\@dsh-skin y %DSH_HOME%\skills\deepseek-harness-skin-studio;

  3. Reinicia DSH;

  4. Si deseas limpiar los datos de Studio, elimina %LOCALAPPDATA%\DeepSeekHarnessSkinStudio.


🔒 Seguridad y compatibilidad

  • Versión objetivo de DSH: 0.1.0-rc.6 (capacidad fijada; si la versión no coincide, el plugin falla de forma cerrada).

  • El modelo de piel (ThemeSpec) solo permite datos estructurados: colores CSS literales, imágenes direccionadas por contenido (sha256), tokens controlados; no acepta CSS/JS/URL arbitrarios.

  • La vista previa utiliza un DSH temporal aislado propiedad del Controller; la confirmación y escritura deben ser realizadas manualmente por un humano en el Studio visible.

  • Consulta de saldo: la clave API solo se analiza en el lado del host (DSH_SKIN_BALANCE_API_KEY → DEEPSEEK_API_KEY → %DSH_HOME%\.credentials.yaml), el navegador solo ve el saldo agregado, la clave no se almacena en el navegador.


📄 Documentación

  • docx/ — Plan de implementación, documento de análisis de requisitos, documento de diseño de arquitectura técnica

  • CHANGELOG.md — Registro de cambios

  • RELEASING.md — Lista de verificación de lanzamiento (GitHub Release / npm)

📃 Licencia

MIT © 2026 trrrrrryg

Related MCP Connectors

Related MCP Servers