feat(landing): six more curated DeepSeek Harness design plugins (#6945)

* feat(landing): six more curated DeepSeek Harness design plugins

Extend the curated collection at /plugins/deepseek-harness-design-plugins/
from 13 to 19 entries with dsh-native plugins verified on the awesome-dsh-plugin
index: dsh-vision-router (free keyless vision chain + eleven pixel tools),
dsh-diagram (editable Excalidraw canvas), deepseek-harness-genui (task-scoped
React interfaces), dsh-annotate (structured browser element feedback),
dsh-hyperframes (HyperFrames by HeyGen skills port), and dsh-web-preview
(side preview panel with project runner and element marking).

Each entry carries verbatim install commands and upstream descriptions from
its README, a concept-illustrated cover in the collection's style, and
localized copy for all ten landing locales.

* fix(landing): make source-install commands reproducible for two curated entries

dsh-annotate's install command now includes the clone step so the relative
path resolves from any directory, and its run-with-agent steps spell out the
unpacked-extension load. dsh-web-preview's install command now changes into
the web profile directory first, and the mount step names the exact
cordis.patch.yml insert entry. Localized copy updated across all ten locales.

* fix(landing): chain the Chromium setup into the genui install command

The upstream README installs the plugin and then runs the profile-scoped
Playwright Chromium install; the detail page rendered only the first step,
so a user following it could hit Playwright launch failures. The command now
executes both steps and the run-with-agent prose names what the chained step
does, mirrored across all ten locales.

---------

Co-authored-by: Joey <236967869+joeylee12629-star@users.noreply.github.com>

apps/landing-page/app/_lib/deepseek-design.ts

@@ -51,8 +51,8 @@ export const DEEPSEEK_COLLECTION: DeepseekCollection = {
   heading: 'DeepSeek Harness plugins for design',
   lede: 'A curated collection of dsh plugins for design work: vision bridges that read screenshots, canvases and generative UI the agent can draw on, design review tools, and workbenches that preview it all. DeepSeek Harness reads the same SKILL.md format as Claude Code and Codex, so your design skill library carries over.',
   stats: [
-    { value: '13', label: 'curated dsh plugins' },
-    { value: '13', label: 'source repos' },
+    { value: '19', label: 'curated dsh plugins' },
+    { value: '19', label: 'source repos' },
     { value: 'SKILL.md', label: 'shared with Claude Code & Codex' },
   ],
   intro:
@@ -233,6 +233,47 @@ export const DEEPSEEK_SKILLS: readonly DeepseekSkill[] = [
     source: { label: 'akqwpeter-prog/dsh-media-skills', url: 'https://github.com/akqwpeter-prog/dsh-media-skills' },
   },
 
+  {
+    slug: 'dsh-vision-router',
+    name: 'dsh-vision-router',
+    category: 'Vision & Input',
+    badge: 'ysr666',
+    stars: 155,
+    tagline: 'Free, keyless eyes for text-only agents: a built-in vision chain plus eleven pixel-level tools.',
+    image: '/plugins/deepseek-harness-design/skills/dsh-vision-router.webp',
+    whatIsIt:
+      'A vision router that keeps the original pixels on the vision model’s side and DeepSeek on the reasoning side. Pick a “+ Auto Vision” model group, paste an image, and the agent drives eleven pixel-level tools — grounding, crop, pixel diff, palette, OCR, SVG trace, cutout, HTML screenshots — over a free anonymous vision fallback chain with no account and no key.',
+    whyForDesign: [
+      'A verifiable pixel loop for UI restoration: reference → screenshot → pixel diff with a red heatmap → fix → repeat until the mismatch converges.',
+      'Grounding and detection return original-image pixel boxes, and its README documents a rebuild verified down to a 2.54% final diff.',
+      'Palette extraction, SVG vectorization of icons and background cutout cover the small design chores around a rebuild.',
+    ],
+    howWithAgent: [
+      'Add the plugin to your web profile; its composition patch wires everything with zero manual file edits.',
+      'Open the model selector and choose a group marked “+ Auto Vision” before sending images.',
+      'Paste a screenshot and let the agent chain vision_ground, vision_crop, vision_describe and vision_pixel_diff.',
+    ],
+    covers: [
+      'Why this exists',
+      'How it compares',
+      'Quick start',
+      'Highlights',
+      'Tools',
+      'Provider fallback chain',
+    ],
+    tags: ['Vision', 'Pixel diff', 'Free tier', 'OCR'],
+    agentNote: 'Verified by 149 checked-in tests and certified on the dsh-recommend index',
+    repo: 'ysr666/dsh-vision-router',
+    install: {
+      kind: 'installer',
+      command: 'npx @deepseek-ai/dsh plugin --profile web add dsh-vision-router',
+    },
+    license: MIT,
+    upstreamDescription:
+      'Paste an image and it just works — eyes for text-only agents on DeepSeek Harness. Free out of the box, no key, no Python, one command.',
+    source: { label: 'ysr666/dsh-vision-router', url: 'https://github.com/ysr666/dsh-vision-router' },
+  },
+
   /* --------------------------- Canvas & Generative UI -------------------- */
   {
     slug: 'dsh-openpencil',
@@ -381,6 +422,87 @@ export const DEEPSEEK_SKILLS: readonly DeepseekSkill[] = [
     source: { label: 'THU-MAIC/dsh-openmaic', url: 'https://github.com/THU-MAIC/dsh-openmaic' },
   },
 
+  {
+    slug: 'dsh-diagram',
+    name: 'dsh-diagram',
+    category: 'Canvas & Generative UI',
+    badge: 'hanzhangzzz',
+    stars: 2,
+    tagline: 'Turn any article in the session into an editable Excalidraw canvas, not a disposable image.',
+    image: '/plugins/deepseek-harness-design/skills/dsh-diagram.webp',
+    whatIsIt:
+      'An Excalidraw canvas inside the harness: the agent calls diagram_create to build a flowchart, architecture diagram, timeline, hierarchy or comparison from a compact semantic spec, and a Canvas tab opens the full editor so you refine text, nodes and connections directly in the session.',
+    whyForDesign: [
+      'Editable, not disposable: keep working in a real vector canvas instead of accepting a static generated image.',
+      'Revision-based compare-and-set autosave prevents a stale editor from silently overwriting newer work.',
+      'Exports .excalidraw, SVG or PNG, and manual edits reach the agent only when you ask it to call diagram_read.',
+    ],
+    howWithAgent: [
+      'Add the plugin to your web profile and restart dsh web.',
+      'Ask for one clear diagram of the article in the session; the agent calls diagram_create.',
+      'Open the Canvas tab, edit directly, then export or let the agent read your changes back.',
+    ],
+    covers: [
+      'Why dsh-diagram?',
+      'Quick install',
+      'Create your first diagram',
+      'What it adds',
+      'Compatibility',
+      'Data, security, and limits',
+    ],
+    tags: ['Excalidraw', 'Diagrams', 'Canvas', 'Editable'],
+    agentNote: 'Fails closed unless dsh web binds to 127.0.0.1 — the canvas RPC never faces the LAN',
+    repo: 'hanzhangzzz/dsh-diagram',
+    install: {
+      kind: 'installer',
+      command: 'dsh plugin --profile web add dsh-diagram@latest',
+    },
+    license: MIT,
+    upstreamDescription:
+      'Turn any article already available in a DeepSeek Harness session into an editable Excalidraw canvas. The Agent creates the structure; you refine the text, nodes, and connections directly in DSH.',
+    source: { label: 'hanzhangzzz/dsh-diagram', url: 'https://github.com/hanzhangzzz/dsh-diagram' },
+  },
+  {
+    slug: 'deepseek-harness-genui',
+    name: 'deepseek-harness-genui',
+    category: 'Canvas & Generative UI',
+    badge: 'pengyue-polaron',
+    stars: 4,
+    tagline: 'The task grows a focused React interface — and what you choose in it flows back to the agent.',
+    image: '/plugins/deepseek-harness-design/skills/deepseek-harness-genui.webp',
+    whatIsIt:
+      'A runtime interface layer for agent tasks: when text gets in the way, the agent writes a small React + TypeScript app — shown inline, in Canvas, full screen or on localhost — to explain a difficult relationship, collect a complex decision, or operate a connected tool after task-scoped approval.',
+    whyForDesign: [
+      'Interfaces are code-first React, so layouts, controls and diagrams are real components, not screenshots.',
+      'Saved selections, inputs and drafts return to the task for later agent turns to read.',
+      'A DESIGN.md system with four visual profiles keeps generated apps on one design language.',
+    ],
+    howWithAgent: [
+      'Run the install command — it adds the plugin, then installs the Chromium that Playwright needs.',
+      'Ask for an interface when interaction helps: a picker, an explorable model, a code-path explorer.',
+      'Interact, then follow up — the agent reads what you selected instead of asking you to repeat it.',
+    ],
+    covers: [
+      'What Changes',
+      'When an Interface Helps',
+      'Inline & Canvas',
+      'How It Works',
+      'Design MD',
+      'Safety',
+    ],
+    tags: ['Generative UI', 'React', 'Canvas', 'Task state'],
+    agentNote: 'Generated code runs sandboxed; tool calls must be declared, scoped and approved',
+    repo: 'pengyue-polaron/deepseek-harness-genui',
+    install: {
+      kind: 'installer',
+      command: 'dsh plugin --profile web add dsh-plugin-genui && dsh plugin --profile web exec playwright install chromium',
+    },
+    license: MIT,
+    upstreamDescription:
+      'DeepSeek Harness GenUI is a runtime interface layer for Agent tasks. When text gets in the way, the Agent can make the current task grow a focused UI—to explain a difficult relationship, collect a complex decision, or operate a connected tool.',
+    source: { label: 'pengyue-polaron/deepseek-harness-genui', url: 'https://github.com/pengyue-polaron/deepseek-harness-genui' },
+  },
+
   /* ------------------------------ Design Workflow ------------------------ */
   {
     slug: 'dsh-web-review',
@@ -493,6 +615,74 @@ export const DEEPSEEK_SKILLS: readonly DeepseekSkill[] = [
     source: { label: 'YYTbit/dsh-plugin-claude-bridge', url: 'https://github.com/YYTbit/dsh-plugin-claude-bridge' },
   },
 
+  {
+    slug: 'dsh-annotate',
+    name: 'dsh-annotate',
+    category: 'Design Workflow',
+    badge: 'BrambleXu',
+    stars: 5,
+    tagline: 'Point at browser elements and send the agent structured facts, not vague descriptions.',
+    image: '/plugins/deepseek-harness-design/skills/dsh-annotate.webp',
+    whatIsIt:
+      'Visual browser feedback through a companion Chrome extension: /annotate enters selection mode, and each element you click contributes a selector, DOM facts, computed-style highlights, accessibility data, your comment and an optional viewport screenshot to the agent’s next turn.',
+    whyForDesign: [
+      'Visual feedback stays attached to the page element instead of becoming a vague description or a pasted screenshot.',
+      'Computed styles and accessibility data arrive as structured facts the agent can act on directly.',
+      'A loopback WebSocket bridge restricted by host, origin and extension ID keeps the channel local.',
+    ],
+    howWithAgent: [
+      'Clone the repo and add the project to a harness profile, then load its browser-extension folder as an unpacked extension from chrome://extensions.',
+      'Run /annotate, click elements on the page and attach a comment to each.',
+      'Submit — the captured facts and viewport screenshot land in the agent’s next turn.',
+    ],
+    covers: ['Why this exists', 'Features', 'Install', 'Use', 'Configure', 'Scope'],
+    tags: ['Annotation', 'Browser', 'Accessibility', 'Feedback'],
+    agentNote: 'Interaction inspired by pi-annotate, rebuilt on the harness’s human-command and attachment APIs',
+    repo: 'BrambleXu/dsh-annotate',
+    install: {
+      kind: 'installer',
+      command: 'git clone https://github.com/BrambleXu/dsh-annotate.git && dsh plugin --profile demo add ./dsh-annotate',
+    },
+    license: MIT,
+    upstreamDescription:
+      'Visual browser element annotation for DeepSeek Harness, capturing DOM, styles, accessibility data, comments, and viewport screenshots.',
+    source: { label: 'BrambleXu/dsh-annotate', url: 'https://github.com/BrambleXu/dsh-annotate' },
+  },
+  {
+    slug: 'dsh-hyperframes',
+    name: 'dsh-hyperframes',
+    category: 'Design Workflow',
+    badge: 'STARDUSTLC666',
+    stars: 2,
+    tagline: 'HyperFrames by HeyGen, ported: five official skills that turn HTML into finished video.',
+    image: '/plugins/deepseek-harness-design/skills/dsh-hyperframes.webp',
+    whatIsIt:
+      'One install registers the five official HyperFrames by HeyGen skills in the harness: HTML video composition with visual styles, palettes, captions and audio-reactive transitions, the hyperframes CLI, the component registry, a website-to-video pipeline, and a GSAP animation reference.',
+    whyForDesign: [
+      'Motion design in the medium you already work in: HTML and CSS become rendered video.',
+      'A seven-step website-to-video pipeline turns a URL into a produced clip.',
+      'The skills use the open SKILL.md format, so the same set carries to Claude Code, Cursor and Codex.',
+    ],
+    howWithAgent: [
+      'Add the plugin to your web profile and restart.',
+      'Say “turn this URL into a HyperFrames video” to trigger the pipeline.',
+      'Render through the hyperframes CLI; Node 22+ and FFmpeg are the only dependencies.',
+    ],
+    covers: ['安装', '技能清单', '依赖', '移植说明', '跨平台使用'],
+    tags: ['Video', 'Motion', 'HTML', 'HyperFrames'],
+    agentNote: 'Ported from the official Codex plugin cache with frontmatter converted to the dsh format',
+    bundle: 'Five skills: hyperframes, hyperframes-cli, hyperframes-registry, website-to-hyperframes, gsap',
+    repo: 'STARDUSTLC666/dsh-hyperframes',
+    install: {
+      kind: 'installer',
+      command: 'dsh plugin --profile web add dsh-hyperframes',
+    },
+    license: { label: 'MIT (per README)', url: 'https://github.com/STARDUSTLC666/dsh-hyperframes#license' },
+    upstreamDescription:
+      'DSH（DeepSeek Harness）视频创作技能插件：安装即把 HyperFrames by HeyGen 官方移植技能五件套注册进 DSH（HTML 写视频：合成、GSAP 动画、字幕、配音、音频响应、网址转视频）。',
+    source: { label: 'STARDUSTLC666/dsh-hyperframes', url: 'https://github.com/STARDUSTLC666/dsh-hyperframes' },
+  },
+
   /* ----------------------------- Workspace & Preview --------------------- */
   {
     slug: 'dsh-web-ui',
@@ -573,6 +763,39 @@ export const DEEPSEEK_SKILLS: readonly DeepseekSkill[] = [
       '\u4e00\u4e2a\u4fa7\u8fb9\u680f\u7684\u5b8c\u6574\u5de5\u4f5c\u53f0\uff0c\u652f\u6301\u4e09\u65b9\u62d3\u5c55\u6ce8\u518c\u65b0Tab\u9875\u9762\uff0c\u5185\u7f6e\u6587\u4ef6\u6e32\u67d3\u7f16\u8f91/\u7ec8\u7aef/Git/\u5b50\u4ee3\u7406',
     source: { label: 'omdsh-dev/DSH-better-sidebar', url: 'https://github.com/omdsh-dev/DSH-better-sidebar' },
   },
+  {
+    slug: 'dsh-web-preview',
+    name: 'dsh-web-preview',
+    category: 'Workspace & Preview',
+    badge: 'zoumutou',
+    stars: 1,
+    tagline: 'A glass side panel that previews the workspace, runs the project and annotates elements.',
+    image: '/plugins/deepseek-harness-design/skills/dsh-web-preview.webp',
+    whatIsIt:
+      'A side web-preview panel for the harness web UI: workspace files are served for preview — Markdown rendered, code with line numbers, images and HTML as-is — projects auto-detect their type (Cargo, package.json, go.mod, Python) and run with live logs, and a marking mode captures element annotations back into the conversation.',
+    whyForDesign: [
+      'The prototype the agent just wrote opens beside the chat, with the address bar synced and the panel width draggable.',
+      'Marking mode hover-highlights elements, captures a selector and HTML snapshot, and sends your note to the conversation.',
+      'Links, file paths and dropped files all open in the panel, so review never leaves the session.',
+    ],
+    howWithAgent: [
+      'Install the package into your web profile directory, then mount it by adding an insert entry named dsh-web-preview-panel to that profile’s cordis.patch.yml.',
+      'Restart dsh web and open the ▶ preview button at the top right of the conversation.',
+      'Run the project from the panel, annotate elements, and send logs or notes straight to the agent.',
+    ],
+    covers: ['功能', '安装', '开发', '协议'],
+    tags: ['Preview', 'Side panel', 'Project runner', 'Annotation'],
+    agentNote: 'A standard Cordis plugin package with host and client halves; per-session isolated state',
+    repo: 'zoumutou/dsh-web-preview',
+    install: {
+      kind: 'installer',
+      command: 'cd ~/.dsh/profiles/web && npm install dsh-web-preview-panel',
+    },
+    license: MIT,
+    upstreamDescription:
+      'DeepSeek Harness（DSH）侧边网页预览面板 —— 一个标准 Cordis 插件包（Host + Client 双半），把工作区目录托管成 iframe 预览，并支持项目运行、元素标记批注与链接点击接管。',
+    source: { label: 'zoumutou/dsh-web-preview', url: 'https://github.com/zoumutou/dsh-web-preview' },
+  },
 ];
 
 export function getDeepseekSkill(slug: string): DeepseekSkill | undefined {

apps/landing-page/app/_lib/deepseek-i18n/de.ts

@@ -10,8 +10,8 @@ export const de: DeepseekCopyOverride = {
   collectionLede:
     'Eine kuratierte Sammlung von dsh-Plugins für Designarbeit: Vision-Bridges, die Screenshots lesen, Canvases und generative UI, auf denen der Agent zeichnen kann, Design-Review-Tools und Workbenches, die alles in der Vorschau zeigen. DeepSeek Harness liest dasselbe SKILL.md-Format wie Claude Code und Codex — deine Design-Skill-Bibliothek kommt einfach mit.',
   collectionStats: [
-    { value: '13', label: 'kuratierte dsh-Plugins' },
-    { value: '13', label: 'Quell-Repos' },
+    { value: '19', label: 'kuratierte dsh-Plugins' },
+    { value: '19', label: 'Quell-Repos' },
     { value: 'SKILL.md', label: 'geteilt mit Claude Code & Codex' },
   ],
   collectionIntro:
@@ -271,5 +271,95 @@ export const de: DeepseekCopyOverride = {
         'Prüfe direkt an Ort und Stelle, was der Agent gebaut hat: Previews, Diffs, Terminal- und Browser-Tabs.',
       ],
     },
+    'dsh-vision-router': {
+      tagline: 'Kostenlose Augen ohne Key für rein textbasierte Agenten: eine eingebaute Vision-Kette plus elf Tools auf Pixelebene.',
+      whatIsIt:
+        'Ein Vision-Router, der die Originalpixel auf der Seite des Vision-Modells hält und DeepSeek auf der Reasoning-Seite. Wähl eine Modellgruppe mit „+ Auto Vision", füg ein Bild ein, und der Agent treibt elf Tools auf Pixelebene — Grounding, Zuschneiden, Pixel-Diff, Palette, OCR, SVG-Trace, Freistellen, HTML-Screenshots — über eine kostenlose anonyme Vision-Fallback-Kette, ganz ohne Account und ohne Key.',
+      whyForDesign: [
+        'Ein verifizierbarer Pixel-Loop für UI-Rekonstruktion: Referenz → Screenshot → Pixel-Diff mit roter Heatmap → Fix → wiederholen, bis die Abweichung konvergiert.',
+        'Grounding und Detection liefern Pixel-Boxen im Originalbild, und die README dokumentiert einen Nachbau, verifiziert bis auf 2,54 % finale Differenz.',
+        'Palettenextraktion, SVG-Vektorisierung von Icons und Hintergrund-Freistellen decken die kleinen Design-Handgriffe rund um einen Nachbau ab.',
+      ],
+      howWithAgent: [
+        'Füg das Plugin deinem web-Profil hinzu; sein Composition-Patch verdrahtet alles ohne einen einzigen manuellen Datei-Edit.',
+        'Öffne den Model-Picker und wähl eine mit „+ Auto Vision" markierte Gruppe, bevor du Bilder schickst.',
+        'Füg einen Screenshot ein und lass den Agenten vision_ground, vision_crop, vision_describe und vision_pixel_diff verketten.',
+      ],
+    },
+    'dsh-diagram': {
+      tagline: 'Macht aus jedem Artikel in der Session einen editierbaren Excalidraw-Canvas statt eines Wegwerf-Bilds.',
+      whatIsIt:
+        'Ein Excalidraw-Canvas im Harness: der Agent ruft diagram_create auf, um aus einer kompakten semantischen Spec ein Flussdiagramm, Architekturdiagramm, eine Timeline, Hierarchie oder einen Vergleich zu bauen, und ein Canvas-Tab öffnet den vollständigen Editor, sodass du Text, Knoten und Verbindungen direkt in der Session verfeinerst.',
+      whyForDesign: [
+        'Editierbar statt Wegwerfware: arbeite in einem echten Vektor-Canvas weiter, statt ein statisch generiertes Bild hinzunehmen.',
+        'Revisionsbasiertes Compare-and-Set-Autosave verhindert, dass ein veralteter Editor neuere Arbeit stillschweigend überschreibt.',
+        'Exportiert .excalidraw, SVG oder PNG, und manuelle Änderungen erreichen den Agenten nur, wenn du ihn diagram_read aufrufen lässt.',
+      ],
+      howWithAgent: [
+        'Füg das Plugin deinem web-Profil hinzu und starte dsh web neu.',
+        'Bitte um ein klares Diagramm zum Artikel in der Session; der Agent ruft diagram_create auf.',
+        'Öffne den Canvas-Tab, bearbeite direkt, dann exportiere — oder lass den Agenten deine Änderungen zurücklesen.',
+      ],
+    },
+    'deepseek-harness-genui': {
+      tagline: 'Die Aufgabe lässt ein fokussiertes React-Interface wachsen — und was du darin auswählst, fließt zurück zum Agenten.',
+      whatIsIt:
+        'Eine Runtime-Interface-Schicht für Agent-Aufgaben: wenn Text im Weg steht, schreibt der Agent eine kleine React-und-TypeScript-App — angezeigt inline, im Canvas, im Vollbild oder auf localhost — um eine schwierige Beziehung zu erklären, eine komplexe Entscheidung einzusammeln oder nach aufgabenbezogener Freigabe ein angebundenes Tool zu bedienen.',
+      whyForDesign: [
+        'Interfaces sind Code-first React: Layouts, Controls und Diagramme sind echte Komponenten, keine Screenshots.',
+        'Gespeicherte Auswahlen, Eingaben und Entwürfe kehren in die Aufgabe zurück, damit spätere Agent-Turns sie lesen können.',
+        'Ein DESIGN.md-System mit vier visuellen Profilen hält generierte Apps auf einer gemeinsamen Designsprache.',
+      ],
+      howWithAgent: [
+        'Führ den Installationsbefehl aus — er fügt das Plugin hinzu und installiert dann das Chromium, das Playwright braucht.',
+        'Frag nach einem Interface, wenn Interaktion hilft: ein Picker, ein erkundbares Modell, ein Code-Pfad-Explorer.',
+        'Interagiere und frag dann nach — der Agent liest, was du ausgewählt hast, statt dich alles wiederholen zu lassen.',
+      ],
+    },
+    'dsh-annotate': {
+      tagline: 'Zeig auf Browser-Elemente und schick dem Agenten strukturierte Fakten statt vager Beschreibungen.',
+      whatIsIt:
+        'Visuelles Browser-Feedback über eine begleitende Chrome-Extension: /annotate startet den Auswahlmodus, und jedes Element, das du anklickst, steuert einen Selektor, DOM-Fakten, Computed-Style-Highlights, Accessibility-Daten, deinen Kommentar und optional einen Viewport-Screenshot zum nächsten Turn des Agenten bei.',
+      whyForDesign: [
+        'Visuelles Feedback bleibt am Seitenelement verankert, statt zu einer vagen Beschreibung oder einem eingefügten Screenshot zu werden.',
+        'Computed Styles und Accessibility-Daten kommen als strukturierte Fakten an, auf die der Agent direkt reagieren kann.',
+        'Eine Loopback-WebSocket-Brücke, beschränkt auf Host, Origin und Extension-ID, hält den Kanal lokal.',
+      ],
+      howWithAgent: [
+        'Klone das Repo und füg das Projekt einem Harness-Profil hinzu, dann lade seinen browser-extension-Ordner über chrome://extensions als entpackte Extension.',
+        'Führe /annotate aus, klick Elemente auf der Seite an und häng an jedes einen Kommentar.',
+        'Absenden — die erfassten Fakten und der Viewport-Screenshot landen im nächsten Turn des Agenten.',
+      ],
+    },
+    'dsh-hyperframes': {
+      tagline: 'HyperFrames by HeyGen, portiert: fünf offizielle Skills, die HTML in fertiges Video verwandeln.',
+      whatIsIt:
+        'Eine Installation registriert die fünf offiziellen HyperFrames-by-HeyGen-Skills im Harness: HTML-Video-Komposition mit visuellen Stilen, Paletten, Untertiteln und audio-reaktiven Übergängen, die hyperframes-CLI, die Komponenten-Registry, eine Website-zu-Video-Pipeline und eine GSAP-Animationsreferenz.',
+      whyForDesign: [
+        'Motion Design in dem Medium, in dem du ohnehin arbeitest: aus HTML und CSS wird gerendertes Video.',
+        'Eine siebenstufige Website-zu-Video-Pipeline macht aus einer URL einen produzierten Clip.',
+        'Die Skills nutzen das offene SKILL.md-Format, dasselbe Set läuft also auch in Claude Code, Cursor und Codex.',
+      ],
+      howWithAgent: [
+        'Füg das Plugin deinem web-Profil hinzu und starte neu.',
+        'Sag „mach aus dieser URL ein HyperFrames-Video", um die Pipeline anzustoßen.',
+        'Rendere über die hyperframes-CLI; Node 22+ und FFmpeg sind die einzigen Abhängigkeiten.',
+      ],
+    },
+    'dsh-web-preview': {
+      tagline: 'Ein gläsernes Seitenpanel, das den Workspace in der Vorschau zeigt, das Projekt ausführt und Elemente annotiert.',
+      whatIsIt:
+        'Ein seitliches Web-Preview-Panel für das Web-UI des Harness: Workspace-Dateien werden zur Vorschau ausgeliefert — Markdown gerendert, Code mit Zeilennummern, Bilder und HTML unverändert — Projekte erkennen ihren Typ automatisch (Cargo, package.json, go.mod, Python) und laufen mit Live-Logs, und ein Markierungsmodus fängt Element-Annotationen zurück in die Unterhaltung ein.',
+      whyForDesign: [
+        'Der Prototyp, den der Agent gerade geschrieben hat, öffnet sich neben dem Chat — mit synchronisierter Adressleiste und per Drag verstellbarer Panelbreite.',
+        'Der Markierungsmodus hebt Elemente per Hover hervor, erfasst Selektor und HTML-Snapshot und schickt deine Notiz in die Unterhaltung.',
+        'Links, Dateipfade und abgelegte Dateien öffnen sich alle im Panel, das Review verlässt die Session also nie.',
+      ],
+      howWithAgent: [
+        'Installiere das Paket in dein web-Profilverzeichnis und mounte es dann, indem du einen insert-Eintrag namens dsh-web-preview-panel in die cordis.patch.yml dieses Profils einträgst.',
+        'Starte dsh web neu und öffne den ▶-Preview-Button oben rechts in der Unterhaltung.',
+        'Führe das Projekt aus dem Panel aus, annotiere Elemente und schick Logs oder Notizen direkt an den Agenten.',
+      ],
+    },
   },
 };

apps/landing-page/app/_lib/deepseek-i18n/es.ts

@@ -10,8 +10,8 @@ export const es: DeepseekCopyOverride = {
   collectionLede:
     'Una colección curada de plugins dsh para diseñar: puentes de visión que leen capturas, lienzos y UI generativa donde el agente puede dibujar, herramientas de revisión de diseño y bancos de trabajo que lo previsualizan todo. DeepSeek Harness lee el mismo formato SKILL.md que Claude Code y Codex, así que tu biblioteca de skills de diseño te acompaña.',
   collectionStats: [
-    { value: '13', label: 'plugins dsh seleccionados' },
-    { value: '13', label: 'repos de origen' },
+    { value: '19', label: 'plugins dsh seleccionados' },
+    { value: '19', label: 'repos de origen' },
     { value: 'SKILL.md', label: 'compartido con Claude Code y Codex' },
   ],
   collectionIntro:
@@ -284,5 +284,101 @@ export const es: DeepseekCopyOverride = {
         'Revisa lo que el agente construyó ahí mismo: vistas previas, diffs, terminal y pestañas del navegador.',
       ],
     },
+    'dsh-vision-router': {
+      tagline:
+        'Ojos gratis y sin key para agentes de solo texto: una cadena de visión integrada más once herramientas a nivel de píxel.',
+      whatIsIt:
+        'Un router de visión que mantiene los píxeles originales del lado del modelo de visión y a DeepSeek del lado del razonamiento. Elige un grupo de modelos «+ Auto Vision», pega una imagen, y el agente maneja once herramientas a nivel de píxel — grounding, recorte, diff de píxeles, paleta, OCR, trazado SVG, recorte de fondo, capturas HTML — sobre una cadena gratuita de respaldo de visión anónima, sin cuenta y sin key.',
+      whyForDesign: [
+        'Un bucle de píxeles verificable para restauración de UI: referencia → captura → diff de píxeles con mapa de calor rojo → corrección → repetir hasta que la diferencia converja.',
+        'El grounding y la detección devuelven cajas de píxeles de la imagen original, y su README documenta una reconstrucción verificada hasta un diff final del 2,54%.',
+        'La extracción de paleta, la vectorización SVG de iconos y el recorte de fondos cubren las pequeñas tareas de diseño alrededor de una reconstrucción.',
+      ],
+      howWithAgent: [
+        'Añade el plugin a tu perfil web; su parche de composición lo conecta todo sin editar un solo archivo a mano.',
+        'Abre el selector de modelos y elige un grupo marcado «+ Auto Vision» antes de enviar imágenes.',
+        'Pega una captura de pantalla y deja que el agente encadene vision_ground, vision_crop, vision_describe y vision_pixel_diff.',
+      ],
+    },
+    'dsh-diagram': {
+      tagline:
+        'Convierte cualquier artículo de la sesión en un lienzo de Excalidraw editable, no en una imagen desechable.',
+      whatIsIt:
+        'Un lienzo de Excalidraw dentro del harness: el agente llama a diagram_create para construir un diagrama de flujo, de arquitectura, una línea de tiempo, una jerarquía o una comparación a partir de una spec semántica compacta, y una pestaña Canvas abre el editor completo para que refines textos, nodos y conexiones directamente en la sesión.',
+      whyForDesign: [
+        'Editable, no desechable: sigue trabajando en un lienzo vectorial real en vez de conformarte con una imagen estática generada.',
+        'El autoguardado por revisiones con compare-and-set evita que un editor desactualizado sobrescriba en silencio trabajo más reciente.',
+        'Exporta .excalidraw, SVG o PNG, y las ediciones manuales solo llegan al agente cuando le pides que llame a diagram_read.',
+      ],
+      howWithAgent: [
+        'Añade el plugin a tu perfil web y reinicia dsh web.',
+        'Pide un diagrama claro del artículo de la sesión; el agente llama a diagram_create.',
+        'Abre la pestaña Canvas, edita directamente, y luego exporta o deja que el agente lea tus cambios.',
+      ],
+    },
+    'deepseek-harness-genui': {
+      tagline:
+        'A la tarea le crece una interfaz React a medida — y lo que eliges en ella vuelve al agente.',
+      whatIsIt:
+        'Una capa de interfaz en tiempo de ejecución para tareas de agente: cuando el texto estorba, el agente escribe una pequeña app en React + TypeScript — mostrada en línea, en Canvas, a pantalla completa o en localhost — para explicar una relación difícil, recoger una decisión compleja u operar una herramienta conectada tras una aprobación acotada a la tarea.',
+      whyForDesign: [
+        'Las interfaces son React nacido como código, así que las maquetaciones, controles y diagramas son componentes reales, no capturas de pantalla.',
+        'Las selecciones, entradas y borradores guardados vuelven a la tarea para que turnos posteriores del agente los lean.',
+        'Un sistema DESIGN.md con cuatro perfiles visuales mantiene las apps generadas en un único lenguaje de diseño.',
+      ],
+      howWithAgent: [
+        'Ejecuta el comando de instalación: añade el plugin y luego instala el Chromium que Playwright necesita.',
+        'Pide una interfaz cuando la interacción ayude: un selector, un modelo explorable, un explorador de rutas de código.',
+        'Interactúa y luego continúa — el agente lee lo que seleccionaste en vez de pedirte que lo repitas.',
+      ],
+    },
+    'dsh-annotate': {
+      tagline:
+        'Señala elementos del navegador y envíale al agente hechos estructurados, no descripciones vagas.',
+      whatIsIt:
+        'Feedback visual del navegador a través de una extensión complementaria de Chrome: /annotate entra en modo selección, y cada elemento en el que haces clic aporta un selector, hechos del DOM, estilos computados destacados, datos de accesibilidad, tu comentario y una captura opcional del viewport al siguiente turno del agente.',
+      whyForDesign: [
+        'El feedback visual queda anclado al elemento de la página en vez de convertirse en una descripción vaga o una captura pegada.',
+        'Los estilos computados y los datos de accesibilidad llegan como hechos estructurados sobre los que el agente puede actuar directamente.',
+        'Un puente WebSocket de loopback restringido por host, origen e ID de extensión mantiene el canal en local.',
+      ],
+      howWithAgent: [
+        'Clona el repo y añade el proyecto a un perfil del harness; luego carga su carpeta browser-extension como extensión sin empaquetar desde chrome://extensions.',
+        'Ejecuta /annotate, haz clic en elementos de la página y adjunta un comentario a cada uno.',
+        'Envía — los hechos capturados y la captura del viewport aterrizan en el siguiente turno del agente.',
+      ],
+    },
+    'dsh-hyperframes': {
+      tagline:
+        'HyperFrames de HeyGen, portado: cinco skills oficiales que convierten HTML en vídeo terminado.',
+      whatIsIt:
+        'Una sola instalación registra en el harness las cinco skills oficiales de HyperFrames de HeyGen: composición de vídeo HTML con estilos visuales, paletas, subtítulos y transiciones reactivas al audio, la CLI de hyperframes, el registro de componentes, un pipeline de web a vídeo y una referencia de animación GSAP.',
+      whyForDesign: [
+        'Diseño de movimiento en el medio en el que ya trabajas: HTML y CSS se convierten en vídeo renderizado.',
+        'Un pipeline de web a vídeo en siete pasos convierte una URL en un clip producido.',
+        'Las skills usan el formato abierto SKILL.md, así el mismo conjunto sirve en Claude Code, Cursor y Codex.',
+      ],
+      howWithAgent: [
+        'Añade el plugin a tu perfil web y reinicia.',
+        'Di «convierte esta URL en un vídeo de HyperFrames» para disparar el pipeline.',
+        'Renderiza con la CLI de hyperframes; Node 22+ y FFmpeg son las únicas dependencias.',
+      ],
+    },
+    'dsh-web-preview': {
+      tagline:
+        'Un panel lateral de cristal que previsualiza el workspace, ejecuta el proyecto y anota elementos.',
+      whatIsIt:
+        'Un panel lateral de vista previa web para la web UI del harness: los archivos del workspace se sirven para previsualizar — Markdown renderizado, código con números de línea, imágenes y HTML tal cual —, los proyectos detectan su tipo automáticamente (Cargo, package.json, go.mod, Python) y se ejecutan con logs en vivo, y un modo de marcado captura anotaciones de elementos de vuelta a la conversación.',
+      whyForDesign: [
+        'El prototipo que el agente acaba de escribir se abre junto al chat, con la barra de direcciones sincronizada y el ancho del panel arrastrable.',
+        'El modo de marcado resalta elementos al pasar el cursor, captura un selector y un snapshot HTML, y envía tu nota a la conversación.',
+        'Los enlaces, las rutas de archivo y los archivos arrastrados se abren en el panel, así la revisión nunca sale de la sesión.',
+      ],
+      howWithAgent: [
+        'Instala el paquete en el directorio de tu perfil web y luego móntalo añadiendo una entrada insert llamada dsh-web-preview-panel en el cordis.patch.yml de ese perfil.',
+        'Reinicia dsh web y abre el botón de vista previa ▶ arriba a la derecha de la conversación.',
+        'Ejecuta el proyecto desde el panel, anota elementos y envía logs o notas directamente al agente.',
+      ],
+    },
   },
 };

apps/landing-page/app/_lib/deepseek-i18n/fr.ts

@@ -10,8 +10,8 @@ export const fr: DeepseekCopyOverride = {
   collectionLede:
     'Une sélection de plugins dsh pour le design : des ponts de vision qui lisent les captures d’écran, des canevas et de l’UI générative où l’agent peut dessiner, des outils de revue de design et des workbenches qui prévisualisent le tout. DeepSeek Harness lit le même format SKILL.md que Claude Code et Codex : votre bibliothèque de skills design vous suit.',
   collectionStats: [
-    { value: '13', label: 'plugins dsh sélectionnés' },
-    { value: '13', label: 'dépôts sources' },
+    { value: '19', label: 'plugins dsh sélectionnés' },
+    { value: '19', label: 'dépôts sources' },
     { value: 'SKILL.md', label: 'partagé avec Claude Code & Codex' },
   ],
   collectionIntro:
@@ -271,5 +271,95 @@ export const fr: DeepseekCopyOverride = {
         'Passez en revue ce que l’agent a construit, sur place : aperçus, diffs, terminal et onglets de navigateur.',
       ],
     },
+    'dsh-vision-router': {
+      tagline: 'Des yeux gratuits et sans clé pour les agents purement textuels : une chaîne de vision intégrée plus onze outils au pixel près.',
+      whatIsIt:
+        'Un routeur de vision qui garde les pixels d’origine côté modèle de vision et DeepSeek côté raisonnement. Choisissez un groupe de modèles « + Auto Vision », collez une image, et l’agent pilote onze outils au pixel près — grounding, recadrage, pixel diff, palette, OCR, vectorisation SVG, détourage, captures HTML — sur une chaîne de repli de vision anonyme et gratuite, sans compte ni clé.',
+      whyForDesign: [
+        'Une boucle pixel vérifiable pour la restauration d’UI : référence → capture → pixel diff avec heatmap rouge → correction → répéter jusqu’à convergence de l’écart.',
+        'Grounding et détection renvoient des boîtes en pixels de l’image d’origine, et son README documente une reconstruction vérifiée jusqu’à un diff final de 2,54 %.',
+        'Extraction de palette, vectorisation SVG des icônes et détourage de fond couvrent les petites corvées de design autour d’une reconstruction.',
+      ],
+      howWithAgent: [
+        'Ajoutez le plugin à votre profil web ; son patch de composition câble tout sans la moindre édition manuelle de fichier.',
+        'Ouvrez le sélecteur de modèles et choisissez un groupe marqué « + Auto Vision » avant d’envoyer des images.',
+        'Collez une capture et laissez l’agent enchaîner vision_ground, vision_crop, vision_describe et vision_pixel_diff.',
+      ],
+    },
+    'dsh-diagram': {
+      tagline: 'Transformez n’importe quel article de la session en canvas Excalidraw éditable, pas en image jetable.',
+      whatIsIt:
+        'Un canvas Excalidraw dans le harness : l’agent appelle diagram_create pour construire un organigramme, un schéma d’architecture, une chronologie, une hiérarchie ou une comparaison à partir d’une spec sémantique compacte, et un onglet Canvas ouvre l’éditeur complet pour affiner texte, nœuds et connexions directement dans la session.',
+      whyForDesign: [
+        'Éditable, pas jetable : continuez à travailler dans un vrai canvas vectoriel au lieu d’accepter une image générée statique.',
+        'L’autosauvegarde compare-and-set basée sur les révisions empêche un éditeur périmé d’écraser silencieusement un travail plus récent.',
+        'Exporte en .excalidraw, SVG ou PNG, et vos éditions manuelles n’atteignent l’agent que lorsque vous lui demandez d’appeler diagram_read.',
+      ],
+      howWithAgent: [
+        'Ajoutez le plugin à votre profil web et redémarrez dsh web.',
+        'Demandez un diagramme clair de l’article présent dans la session ; l’agent appelle diagram_create.',
+        'Ouvrez l’onglet Canvas, éditez directement, puis exportez ou laissez l’agent relire vos modifications.',
+      ],
+    },
+    'deepseek-harness-genui': {
+      tagline: 'La tâche fait pousser une interface React ciblée — et ce que vous y choisissez revient à l’agent.',
+      whatIsIt:
+        'Une couche d’interface à l’exécution pour les tâches d’agent : quand le texte devient un obstacle, l’agent écrit une petite app React + TypeScript — affichée en ligne, dans Canvas, en plein écran ou sur localhost — pour expliquer une relation difficile, recueillir une décision complexe ou piloter un outil connecté après approbation limitée à la tâche.',
+      whyForDesign: [
+        'Les interfaces sont du React code-first : layouts, contrôles et diagrammes sont de vrais composants, pas des captures d’écran.',
+        'Sélections, saisies et brouillons sauvegardés reviennent dans la tâche pour que les tours suivants de l’agent puissent les lire.',
+        'Un système DESIGN.md avec quatre profils visuels garde les apps générées dans un seul langage de design.',
+      ],
+      howWithAgent: [
+        'Exécutez la commande d’installation — elle ajoute le plugin, puis installe le Chromium dont Playwright a besoin.',
+        'Demandez une interface quand l’interaction aide : un sélecteur, un modèle explorable, un explorateur de chemins de code.',
+        'Interagissez, puis enchaînez — l’agent lit ce que vous avez sélectionné au lieu de vous demander de le répéter.',
+      ],
+    },
+    'dsh-annotate': {
+      tagline: 'Pointez des éléments du navigateur et envoyez à l’agent des faits structurés, pas des descriptions vagues.',
+      whatIsIt:
+        'Du feedback visuel dans le navigateur via une extension Chrome compagnon : /annotate passe en mode sélection, et chaque élément cliqué apporte un sélecteur, des faits DOM, les styles calculés saillants, des données d’accessibilité, votre commentaire et une capture optionnelle du viewport au tour suivant de l’agent.',
+      whyForDesign: [
+        'Le feedback visuel reste attaché à l’élément de la page au lieu de devenir une description vague ou une capture collée.',
+        'Styles calculés et données d’accessibilité arrivent comme des faits structurés sur lesquels l’agent peut agir directement.',
+        'Un pont WebSocket en loopback restreint par hôte, origine et ID d’extension garde le canal local.',
+      ],
+      howWithAgent: [
+        'Clonez le dépôt et ajoutez le projet à un profil du harness, puis chargez son dossier browser-extension comme extension décompressée depuis chrome://extensions.',
+        'Lancez /annotate, cliquez des éléments sur la page et attachez un commentaire à chacun.',
+        'Envoyez — les faits capturés et la capture du viewport arrivent dans le tour suivant de l’agent.',
+      ],
+    },
+    'dsh-hyperframes': {
+      tagline: 'HyperFrames by HeyGen, porté : cinq skills officiels qui transforment le HTML en vidéo finie.',
+      whatIsIt:
+        'Une seule installation enregistre dans le harness les cinq skills officiels HyperFrames by HeyGen : composition vidéo HTML avec styles visuels, palettes, sous-titres et transitions audio-réactives, la CLI hyperframes, le registre de composants, un pipeline site-vers-vidéo et une référence d’animation GSAP.',
+      whyForDesign: [
+        'Le motion design dans le médium où vous travaillez déjà : HTML et CSS deviennent de la vidéo rendue.',
+        'Un pipeline site-vers-vidéo en sept étapes transforme une URL en clip produit.',
+        'Les skills utilisent le format ouvert SKILL.md : le même jeu se transporte vers Claude Code, Cursor et Codex.',
+      ],
+      howWithAgent: [
+        'Ajoutez le plugin à votre profil web et redémarrez.',
+        'Dites « transforme cette URL en vidéo HyperFrames » pour déclencher le pipeline.',
+        'Rendez via la CLI hyperframes ; Node 22+ et FFmpeg sont les seules dépendances.',
+      ],
+    },
+    'dsh-web-preview': {
+      tagline: 'Un panneau latéral effet verre qui prévisualise le workspace, exécute le projet et annote les éléments.',
+      whatIsIt:
+        'Un panneau latéral d’aperçu web pour l’UI web du harness : les fichiers du workspace sont servis pour l’aperçu — Markdown rendu, code avec numéros de ligne, images et HTML tels quels — les projets détectent leur type automatiquement (Cargo, package.json, go.mod, Python) et s’exécutent avec des logs en direct, et un mode marquage renvoie les annotations d’éléments dans la conversation.',
+      whyForDesign: [
+        'Le prototype que l’agent vient d’écrire s’ouvre à côté du chat, barre d’adresse synchronisée et largeur de panneau réglable à la souris.',
+        'Le mode marquage surligne les éléments au survol, capture un sélecteur et un instantané HTML, et envoie votre note dans la conversation.',
+        'Liens, chemins de fichiers et fichiers déposés s’ouvrent tous dans le panneau : la revue ne quitte jamais la session.',
+      ],
+      howWithAgent: [
+        'Installez le package dans le dossier de votre profil web, puis montez-le en ajoutant une entrée insert nommée dsh-web-preview-panel dans le cordis.patch.yml de ce profil.',
+        'Redémarrez dsh web et ouvrez le bouton d’aperçu ▶ en haut à droite de la conversation.',
+        'Exécutez le projet depuis le panneau, annotez des éléments et envoyez logs ou notes directement à l’agent.',
+      ],
+    },
   },
 };

apps/landing-page/app/_lib/deepseek-i18n/it.ts

@@ -10,8 +10,8 @@ export const it: DeepseekCopyOverride = {
   collectionLede:
     'Una raccolta curata di plugin dsh per il design: bridge di visione che leggono screenshot, canvas e UI generativa su cui l’agente può disegnare, strumenti di design review e workbench che fanno l’anteprima di tutto. DeepSeek Harness legge lo stesso formato SKILL.md di Claude Code e Codex, così la tua libreria di skill di design ti segue.',
   collectionStats: [
-    { value: '13', label: 'plugin dsh selezionati' },
-    { value: '13', label: 'repo di origine' },
+    { value: '19', label: 'plugin dsh selezionati' },
+    { value: '19', label: 'repo di origine' },
     { value: 'SKILL.md', label: 'condiviso con Claude Code e Codex' },
   ],
   collectionIntro:
@@ -284,5 +284,101 @@ export const it: DeepseekCopyOverride = {
         'Rivedi sul posto ciò che l’agente ha costruito: anteprime, diff, terminale e tab del browser.',
       ],
     },
+    'dsh-vision-router': {
+      tagline:
+        'Occhi gratuiti e senza chiave per agenti solo testuali: una catena di visione integrata più undici strumenti a livello di pixel.',
+      whatIsIt:
+        'Un vision router che tiene i pixel originali dal lato del modello di visione e DeepSeek dal lato del ragionamento. Scegli un gruppo di modelli «+ Auto Vision», incolla un’immagine, e l’agente guida undici strumenti a livello di pixel — grounding, ritaglio, pixel diff, palette, OCR, tracciamento SVG, scontorno, screenshot HTML — su una catena di fallback di visione anonima e gratuita, senza account e senza chiave.',
+      whyForDesign: [
+        'Un ciclo pixel verificabile per il ripristino di UI: riferimento → screenshot → pixel diff con heatmap rossa → correzione → ripeti finché lo scarto non converge.',
+        'Grounding e detection restituiscono box in pixel dell’immagine originale, e il suo README documenta una ricostruzione verificata fino a un diff finale del 2,54%.',
+        'Estrazione della palette, vettorializzazione SVG delle icone e scontorno dello sfondo coprono le piccole incombenze di design attorno a una ricostruzione.',
+      ],
+      howWithAgent: [
+        'Aggiungi il plugin al tuo profilo web; la sua patch di composizione collega tutto senza modifiche manuali ai file.',
+        'Apri il selettore dei modelli e scegli un gruppo marcato «+ Auto Vision» prima di inviare immagini.',
+        'Incolla uno screenshot e lascia che l’agente concateni vision_ground, vision_crop, vision_describe e vision_pixel_diff.',
+      ],
+    },
+    'dsh-diagram': {
+      tagline:
+        'Trasforma qualsiasi articolo della sessione in una tela Excalidraw modificabile, non in un’immagine usa e getta.',
+      whatIsIt:
+        'Una tela Excalidraw dentro l’harness: l’agente chiama diagram_create per costruire un flowchart, un diagramma di architettura, una timeline, una gerarchia o un confronto da una spec semantica compatta, e una tab Canvas apre l’editor completo così raffini testo, nodi e connessioni direttamente nella sessione.',
+      whyForDesign: [
+        'Modificabile, non usa e getta: continui a lavorare in una vera tela vettoriale invece di accettare un’immagine statica generata.',
+        'Il salvataggio automatico compare-and-set basato su revisioni impedisce che un editor obsoleto sovrascriva in silenzio lavoro più recente.',
+        'Esporta .excalidraw, SVG o PNG, e le modifiche manuali raggiungono l’agente solo quando gli chiedi di chiamare diagram_read.',
+      ],
+      howWithAgent: [
+        'Aggiungi il plugin al tuo profilo web e riavvia dsh web.',
+        'Chiedi un diagramma chiaro dell’articolo nella sessione; l’agente chiama diagram_create.',
+        'Apri la tab Canvas, modifica direttamente, poi esporta o lascia che l’agente rilegga le tue modifiche.',
+      ],
+    },
+    'deepseek-harness-genui': {
+      tagline:
+        'Il task fa crescere un’interfaccia React mirata — e ciò che scegli al suo interno torna all’agente.',
+      whatIsIt:
+        'Un livello di interfaccia a runtime per i task dell’agente: quando il testo intralcia, l’agente scrive una piccola app React + TypeScript — mostrata inline, in Canvas, a schermo intero o su localhost — per spiegare una relazione difficile, raccogliere una decisione complessa o azionare uno strumento connesso dopo un’approvazione limitata al task.',
+      whyForDesign: [
+        'Le interfacce sono React code-first, quindi layout, controlli e diagrammi sono componenti reali, non screenshot.',
+        'Selezioni salvate, input e bozze tornano al task perché i turni successivi dell’agente possano leggerli.',
+        'Un sistema DESIGN.md con quattro profili visivi mantiene le app generate su un unico linguaggio di design.',
+      ],
+      howWithAgent: [
+        'Esegui il comando di installazione: aggiunge il plugin e poi installa il Chromium di cui Playwright ha bisogno.',
+        'Chiedi un’interfaccia quando l’interazione aiuta: un picker, un modello esplorabile, un esploratore di percorsi di codice.',
+        'Interagisci, poi prosegui — l’agente legge ciò che hai selezionato invece di chiederti di ripeterlo.',
+      ],
+    },
+    'dsh-annotate': {
+      tagline:
+        'Punta gli elementi del browser e invia all’agente fatti strutturati, non descrizioni vaghe.',
+      whatIsIt:
+        'Feedback visivo del browser tramite un’estensione Chrome di accompagnamento: /annotate entra in modalità selezione, e ogni elemento su cui clicchi contribuisce al turno successivo dell’agente con un selettore, fatti sul DOM, evidenze degli stili calcolati, dati di accessibilità, il tuo commento e uno screenshot opzionale della viewport.',
+      whyForDesign: [
+        'Il feedback visivo resta ancorato all’elemento della pagina invece di diventare una descrizione vaga o uno screenshot incollato.',
+        'Stili calcolati e dati di accessibilità arrivano come fatti strutturati su cui l’agente può agire direttamente.',
+        'Un bridge WebSocket in loopback, ristretto per host, origin e ID dell’estensione, mantiene il canale locale.',
+      ],
+      howWithAgent: [
+        'Clona il repo e aggiungi il progetto a un profilo dell’harness, poi carica la sua cartella browser-extension come estensione non pacchettizzata da chrome://extensions.',
+        'Esegui /annotate, clicca gli elementi sulla pagina e allega un commento a ciascuno.',
+        'Invia — i fatti catturati e lo screenshot della viewport arrivano nel turno successivo dell’agente.',
+      ],
+    },
+    'dsh-hyperframes': {
+      tagline:
+        'HyperFrames di HeyGen, portato sull’harness: cinque skill ufficiali che trasformano l’HTML in video finito.',
+      whatIsIt:
+        'Una sola installazione registra nell’harness le cinque skill ufficiali di HyperFrames by HeyGen: composizione video in HTML con stili visivi, palette, sottotitoli e transizioni audio-reattive, la CLI hyperframes, il registro dei componenti, una pipeline da sito web a video e una guida di riferimento alle animazioni GSAP.',
+      whyForDesign: [
+        'Motion design nel medium in cui già lavori: HTML e CSS diventano video renderizzato.',
+        'Una pipeline in sette passaggi da sito web a video trasforma un URL in una clip prodotta.',
+        'Le skill usano il formato aperto SKILL.md, così lo stesso set si porta su Claude Code, Cursor e Codex.',
+      ],
+      howWithAgent: [
+        'Aggiungi il plugin al tuo profilo web e riavvia.',
+        'Di’ «trasforma questo URL in un video HyperFrames» per attivare la pipeline.',
+        'Renderizza tramite la CLI hyperframes; Node 22+ e FFmpeg sono le uniche dipendenze.',
+      ],
+    },
+    'dsh-web-preview': {
+      tagline:
+        'Un pannello laterale in vetro che fa l’anteprima del workspace, esegue il progetto e annota gli elementi.',
+      whatIsIt:
+        'Un pannello laterale di anteprima web per la web UI dell’harness: i file del workspace vengono serviti per l’anteprima — Markdown renderizzato, codice con numeri di riga, immagini e HTML così com’è — i progetti rilevano da soli il proprio tipo (Cargo, package.json, go.mod, Python) e girano con log in tempo reale, e una modalità di marcatura riporta le annotazioni sugli elementi dentro la conversazione.',
+      whyForDesign: [
+        'Il prototipo che l’agente ha appena scritto si apre accanto alla chat, con la barra degli indirizzi sincronizzata e la larghezza del pannello trascinabile.',
+        'La modalità di marcatura evidenzia gli elementi al passaggio, cattura un selettore e uno snapshot HTML, e invia la tua nota alla conversazione.',
+        'Link, percorsi di file e file trascinati si aprono tutti nel pannello, così la review non lascia mai la sessione.',
+      ],
+      howWithAgent: [
+        'Installa il pacchetto nella directory del tuo profilo web, poi montalo aggiungendo una voce insert chiamata dsh-web-preview-panel nel cordis.patch.yml di quel profilo.',
+        'Riavvia dsh web e apri il bottone di anteprima ▶ in alto a destra della conversazione.',
+        'Esegui il progetto dal pannello, annota gli elementi e invia log o note direttamente all’agente.',
+      ],
+    },
   },
 };

apps/landing-page/app/_lib/deepseek-i18n/ja.ts

@@ -10,8 +10,8 @@ export const ja: DeepseekCopyOverride = {
   collectionLede:
     'デザイン作業のための dsh プラグイン厳選集。スクリーンショットを読むビジョンブリッジ、エージェントが描けるキャンバスと生成 UI、デザインレビューのツール、そしてすべてをプレビューするワークベンチ。DeepSeek Harness は Claude Code や Codex と同じ SKILL.md 形式を読み込むため、手持ちのデザインスキルもそのまま使えます。',
   collectionStats: [
-    { value: '13', label: '厳選 dsh プラグイン' },
-    { value: '13', label: '提供元リポジトリ' },
+    { value: '19', label: '厳選 dsh プラグイン' },
+    { value: '19', label: '提供元リポジトリ' },
     { value: 'SKILL.md', label: 'Claude Code・Codex と共通' },
   ],
   collectionIntro:
@@ -282,5 +282,101 @@ export const ja: DeepseekCopyOverride = {
         'エージェントが作ったものをその場でレビューする。プレビュー、差分、ターミナル、ブラウザタブ。',
       ],
     },
+    'dsh-vision-router': {
+      tagline:
+        'テキスト専用エージェントに、無料でキー不要の目を。組み込みのビジョンチェーンと 11 個のピクセルレベルツール。',
+      whatIsIt:
+        '元のピクセルはビジョンモデル側に、推論は DeepSeek 側に保つビジョンルーター。「+ Auto Vision」付きのモデルグループを選んで画像を貼れば、エージェントが 11 個のピクセルレベルツール、つまりグラウンディング、切り抜き、ピクセル差分、パレット、OCR、SVG トレース、背景除去、HTML スクリーンショットを駆動する。アカウントもキーも不要な無料の匿名ビジョンフォールバックチェーンで動く。',
+      whyForDesign: [
+        'UI 復元のための検証可能なピクセルループ。参照 → スクリーンショット → 赤いヒートマップ付きピクセル差分 → 修正、を不一致が収束するまで繰り返す。',
+        'グラウンディングと検出は元画像のピクセルボックスを返し、README には最終差分 2.54% まで検証された再構築が記録されている。',
+        'パレット抽出、アイコンの SVG ベクター化、背景の切り抜きが、再構築まわりの細かなデザイン作業をカバーする。',
+      ],
+      howWithAgent: [
+        'web プロファイルにプラグインを追加する。コンポジションパッチがすべてを配線するので、手動のファイル編集はゼロ。',
+        '画像を送る前に、モデルセレクタを開いて「+ Auto Vision」の付いたグループを選ぶ。',
+        'スクリーンショットを貼れば、エージェントが vision_ground、vision_crop、vision_describe、vision_pixel_diff を連鎖させる。',
+      ],
+    },
+    'dsh-diagram': {
+      tagline:
+        'セッション内のどんな記事も、使い捨ての画像ではなく編集可能な Excalidraw キャンバスに変える。',
+      whatIsIt:
+        'ハーネスの中の Excalidraw キャンバス。エージェントが diagram_create を呼び、コンパクトなセマンティック仕様からフローチャート、アーキテクチャ図、タイムライン、階層図、比較図を組み立てる。Canvas タブでフルエディタが開くので、テキスト、ノード、接続をセッションの中で直接磨き込める。',
+      whyForDesign: [
+        '使い捨てではなく編集可能。静的な生成画像を受け取る代わりに、本物のベクターキャンバスで作業を続けられる。',
+        'リビジョンベースの compare-and-set 自動保存が、古いエディタが新しい作業を静かに上書きするのを防ぐ。',
+        '.excalidraw、SVG、PNG にエクスポートでき、手動の編集は diagram_read を頼んだときにだけエージェントに届く。',
+      ],
+      howWithAgent: [
+        'web プロファイルにプラグインを追加し、dsh web を再起動する。',
+        'セッション内の記事を 1 枚のわかりやすい図にするよう頼むと、エージェントが diagram_create を呼ぶ。',
+        'Canvas タブを開いて直接編集し、エクスポートするか、変更をエージェントに読み戻させる。',
+      ],
+    },
+    'deepseek-harness-genui': {
+      tagline:
+        'タスクが目的特化の React インターフェースを生やし、そこで選んだ内容がエージェントに還流する。',
+      whatIsIt:
+        'エージェントタスクのためのランタイムインターフェース層。テキストでは伝わりにくいとき、エージェントが小さな React + TypeScript アプリを書き、インライン、Canvas、フルスクリーン、または localhost で表示する。難しい関係を説明し、複雑な意思決定を収集し、タスクスコープの承認を経て接続ツールを操作するために。',
+      whyForDesign: [
+        'インターフェースはコードファーストの React。レイアウト、コントロール、ダイアグラムはスクリーンショットではなく本物のコンポーネントになる。',
+        '保存された選択、入力、下書きはタスクに戻り、後のエージェントのターンが読み取れる。',
+        '4 つのビジュアルプロファイルを持つ DESIGN.md システムが、生成されるアプリを 1 つのデザイン言語に保つ。',
+      ],
+      howWithAgent: [
+        'インストールコマンドを実行する——プラグインが追加され、続いて Playwright に必要な Chromium がインストールされる。',
+        'インタラクションが役立つ場面でインターフェースを頼む。ピッカー、探索できるモデル、コードパスエクスプローラー。',
+        '操作してからフォローアップする。エージェントは繰り返しを求める代わりに、あなたが選んだ内容を読み取る。',
+      ],
+    },
+    'dsh-annotate': {
+      tagline:
+        'ブラウザの要素を指し示し、曖昧な説明ではなく構造化された事実をエージェントに送る。',
+      whatIsIt:
+        'コンパニオン Chrome 拡張によるビジュアルなブラウザフィードバック。/annotate で選択モードに入り、クリックした各要素がセレクタ、DOM の事実、computed style のハイライト、アクセシビリティデータ、あなたのコメント、任意のビューポートスクリーンショットを、エージェントの次のターンに届ける。',
+      whyForDesign: [
+        'ビジュアルフィードバックは、曖昧な説明や貼り付けたスクリーンショットにならず、ページ上の要素に結び付いたまま残る。',
+        'computed style とアクセシビリティデータが、エージェントが直接行動に移せる構造化された事実として届く。',
+        'ホスト、オリジン、拡張 ID で制限されたループバック WebSocket ブリッジが、チャネルをローカルに保つ。',
+      ],
+      howWithAgent: [
+        'リポジトリをクローンしてプロジェクトをハーネスのプロファイルに追加し、その browser-extension フォルダを chrome://extensions からアンパックド拡張として読み込む。',
+        '/annotate を実行し、ページ上の要素をクリックして、それぞれにコメントを添える。',
+        '送信すると、キャプチャされた事実とビューポートスクリーンショットがエージェントの次のターンに着地する。',
+      ],
+    },
+    'dsh-hyperframes': {
+      tagline:
+        'HeyGen の HyperFrames を移植。HTML を完成した動画に変える公式スキル 5 本。',
+      whatIsIt:
+        '1 回のインストールで、HeyGen の公式 HyperFrames スキル 5 本をハーネスに登録する。ビジュアルスタイル、パレット、字幕、オーディオリアクティブなトランジションを備えた HTML 動画合成、hyperframes CLI、コンポーネントレジストリ、ウェブサイトから動画へのパイプライン、そして GSAP アニメーションリファレンス。',
+      whyForDesign: [
+        '慣れた媒体でのモーションデザイン。HTML と CSS がレンダリングされた動画になる。',
+        '7 ステップのウェブサイト動画化パイプラインが、URL を仕上がったクリップに変える。',
+        'スキルはオープンな SKILL.md 形式なので、同じセットが Claude Code、Cursor、Codex でも使える。',
+      ],
+      howWithAgent: [
+        'web プロファイルにプラグインを追加し、再起動する。',
+        '「この URL を HyperFrames の動画にして」と言えば、パイプラインが起動する。',
+        'hyperframes CLI でレンダリングする。依存は Node 22+ と FFmpeg だけ。',
+      ],
+    },
+    'dsh-web-preview': {
+      tagline:
+        'ワークスペースをプレビューし、プロジェクトを実行し、要素に注釈を付けるガラスのサイドパネル。',
+      whatIsIt:
+        'ハーネスの web UI のためのサイド web プレビューパネル。ワークスペースのファイルをプレビュー用に配信し、Markdown はレンダリング、コードは行番号付き、画像と HTML はそのまま表示する。プロジェクトは種類（Cargo、package.json、go.mod、Python）を自動検出してライブログ付きで実行され、マーキングモードは要素への注釈を会話に取り込む。',
+      whyForDesign: [
+        'エージェントが書いたばかりのプロトタイプがチャットの隣で開く。アドレスバーは同期し、パネル幅はドラッグで調整できる。',
+        'マーキングモードは要素をホバーでハイライトし、セレクタと HTML スナップショットをキャプチャして、メモを会話に送る。',
+        'リンク、ファイルパス、ドロップしたファイルはすべてパネル内で開くので、レビューがセッションを離れることはない。',
+      ],
+      howWithAgent: [
+        'パッケージを web プロファイルのディレクトリにインストールし、そのプロファイルの cordis.patch.yml に dsh-web-preview-panel という名前の insert エントリを追加してマウントする。',
+        'dsh web を再起動し、会話右上の ▶ プレビューボタンを開く。',
+        'パネルからプロジェクトを実行し、要素に注釈を付け、ログやメモをそのままエージェントに送る。',
+      ],
+    },
   },
 };

apps/landing-page/app/_lib/deepseek-i18n/ko.ts

@@ -10,8 +10,8 @@ export const ko: DeepseekCopyOverride = {
   collectionLede:
     '디자인 작업을 위한 dsh 플러그인 큐레이션. 스크린샷을 읽는 비전 브리지, 에이전트가 그릴 수 있는 캔버스와 생성형 UI, 디자인 리뷰 도구, 그리고 그 모든 것을 미리 보여 주는 워크벤치까지. DeepSeek Harness는 Claude Code·Codex와 같은 SKILL.md 형식을 읽으므로 기존 디자인 스킬 라이브러리를 그대로 가져올 수 있습니다.',
   collectionStats: [
-    { value: '13', label: '엄선한 dsh 플러그인' },
-    { value: '13', label: '출처 저장소' },
+    { value: '19', label: '엄선한 dsh 플러그인' },
+    { value: '19', label: '출처 저장소' },
     { value: 'SKILL.md', label: 'Claude Code & Codex와 공유' },
   ],
   collectionIntro:
@@ -271,5 +271,95 @@ export const ko: DeepseekCopyOverride = {
         '에이전트가 만든 결과를 그 자리에서 검토하세요. 프리뷰, diff, 터미널, 브라우저 탭으로.',
       ],
     },
+    'dsh-vision-router': {
+      tagline: '텍스트 전용 에이전트를 위한 무료·키 없는 눈. 내장 비전 체인에 열한 가지 픽셀 단위 도구까지.',
+      whatIsIt:
+        '원본 픽셀은 비전 모델 쪽에, 추론은 DeepSeek 쪽에 두는 비전 라우터. "+ Auto Vision" 모델 그룹을 고르고 이미지를 붙여 넣으면, 에이전트가 그라운딩, 크롭, 픽셀 비교, 팔레트, OCR, SVG 트레이스, 배경 제거, HTML 스크린샷 등 열한 가지 픽셀 단위 도구를 계정도 키도 필요 없는 무료 익명 비전 폴백 체인 위에서 몰아갑니다.',
+      whyForDesign: [
+        'UI 복원을 위한 검증 가능한 픽셀 루프. 레퍼런스 → 스크린샷 → 붉은 히트맵의 픽셀 비교 → 수정, 오차가 수렴할 때까지 반복합니다.',
+        '그라운딩과 검출이 원본 이미지 기준 픽셀 박스를 돌려주며, README에는 최종 픽셀 차이 2.54%까지 검증한 재구현 사례가 기록되어 있습니다.',
+        '팔레트 추출, 아이콘 SVG 벡터화, 배경 제거까지, 재구현을 둘러싼 자잘한 디자인 작업을 함께 처리합니다.',
+      ],
+      howWithAgent: [
+        '웹 프로필에 플러그인을 추가하세요. 컴포지션 패치가 파일 하나 손대지 않고 전부 알아서 연결합니다.',
+        '이미지를 보내기 전에 모델 선택기에서 "+ Auto Vision"이 붙은 그룹을 고르세요.',
+        '스크린샷을 붙여 넣고 에이전트가 vision_ground, vision_crop, vision_describe, vision_pixel_diff를 이어 가게 두세요.',
+      ],
+    },
+    'dsh-diagram': {
+      tagline: '세션 안의 어떤 글이든 일회용 이미지가 아니라 편집 가능한 Excalidraw 캔버스로 바꿉니다.',
+      whatIsIt:
+        '하네스 안의 Excalidraw 캔버스. 에이전트가 diagram_create를 호출해 간결한 의미론적 스펙에서 플로차트, 아키텍처 다이어그램, 타임라인, 계층도, 비교도를 만들고, Canvas 탭에서 전체 에디터가 열려 세션 안에서 텍스트, 노드, 연결선을 직접 다듬을 수 있습니다.',
+      whyForDesign: [
+        '일회용이 아니라 편집 가능. 정적으로 생성된 이미지를 받아들이는 대신 진짜 벡터 캔버스에서 계속 작업합니다.',
+        '리비전 기반 compare-and-set 자동 저장이, 오래된 에디터가 더 새로운 작업을 조용히 덮어쓰는 일을 막습니다.',
+        '.excalidraw, SVG, PNG로 내보낼 수 있고, 손으로 고친 내용은 에이전트에게 diagram_read를 요청할 때만 전달됩니다.',
+      ],
+      howWithAgent: [
+        '웹 프로필에 플러그인을 추가하고 dsh web을 다시 시작하세요.',
+        '세션 안의 글을 명확한 다이어그램 하나로 그려 달라고 하면 에이전트가 diagram_create를 호출합니다.',
+        'Canvas 탭을 열어 직접 편집한 뒤 내보내거나, 에이전트가 변경 내용을 읽어 가게 하세요.',
+      ],
+    },
+    'deepseek-harness-genui': {
+      tagline: '작업이 필요할 때 맞춤 React 인터페이스를 틔워 내고, 그 안에서 고른 것이 에이전트로 되돌아갑니다.',
+      whatIsIt:
+        '에이전트 작업을 위한 런타임 인터페이스 레이어. 텍스트가 걸림돌이 될 때 에이전트가 작은 React + TypeScript 앱을 작성해 인라인, Canvas, 전체 화면, localhost로 띄우고, 어려운 관계를 설명하거나 복잡한 결정을 수집하거나 작업 범위 승인을 거쳐 연결된 도구를 조작합니다.',
+      whyForDesign: [
+        '인터페이스가 코드 우선 React라서 레이아웃, 컨트롤, 다이어그램이 스크린샷이 아니라 진짜 컴포넌트입니다.',
+        '저장된 선택, 입력, 초안이 작업으로 돌아가 이후의 에이전트 턴이 읽을 수 있습니다.',
+        '네 가지 비주얼 프로필을 갖춘 DESIGN.md 체계가 생성된 앱을 하나의 디자인 언어로 묶어 줍니다.',
+      ],
+      howWithAgent: [
+        '설치 명령을 실행하세요. 플러그인이 추가된 뒤 Playwright에 필요한 Chromium이 설치됩니다.',
+        '상호작용이 도움이 될 때 인터페이스를 요청하세요. 선택기, 탐색 가능한 모델, 코드 경로 탐색기까지.',
+        '조작한 뒤 이어서 물어보세요. 에이전트가 다시 말해 달라는 대신 여러분이 선택한 내용을 읽어 옵니다.',
+      ],
+    },
+    'dsh-annotate': {
+      tagline: '브라우저 요소를 짚으면 막연한 설명 대신 구조화된 사실이 에이전트에게 전달됩니다.',
+      whatIsIt:
+        '동반 Chrome 확장을 통한 시각적 브라우저 피드백. /annotate로 선택 모드에 들어가면, 클릭하는 요소마다 셀렉터, DOM 사실, 계산된 스타일 하이라이트, 접근성 데이터, 여러분의 메모, 선택적인 뷰포트 스크린샷이 에이전트의 다음 턴에 실립니다.',
+      whyForDesign: [
+        '시각 피드백이 막연한 설명이나 붙여 넣은 스크린샷이 되는 대신 페이지 요소에 붙어 있습니다.',
+        '계산된 스타일과 접근성 데이터가 에이전트가 곧바로 다룰 수 있는 구조화된 사실로 도착합니다.',
+        '호스트, 오리진, 확장 ID로 제한된 루프백 WebSocket 브리지가 채널을 로컬에 묶어 둡니다.',
+      ],
+      howWithAgent: [
+        '리포지토리를 클론해 프로젝트를 하네스 프로필에 추가한 뒤, chrome://extensions에서 browser-extension 폴더를 압축 해제 방식 확장으로 로드하세요.',
+        '/annotate를 실행해 페이지의 요소를 클릭하고 각각에 메모를 붙이세요.',
+        '전송하면 수집된 사실과 뷰포트 스크린샷이 에이전트의 다음 턴에 도착합니다.',
+      ],
+    },
+    'dsh-hyperframes': {
+      tagline: 'HeyGen의 HyperFrames를 이식했습니다. HTML을 완성된 영상으로 바꾸는 공식 스킬 다섯 가지.',
+      whatIsIt:
+        '설치 한 번으로 HeyGen의 공식 HyperFrames 스킬 다섯 가지가 하네스에 등록됩니다. 비주얼 스타일, 팔레트, 자막, 오디오 반응 트랜지션을 갖춘 HTML 영상 합성, hyperframes CLI, 컴포넌트 레지스트리, 웹사이트를 영상으로 바꾸는 파이프라인, GSAP 애니메이션 레퍼런스까지.',
+      whyForDesign: [
+        '이미 쓰던 매체로 하는 모션 디자인. HTML과 CSS가 렌더링된 영상이 됩니다.',
+        '일곱 단계의 website-to-video 파이프라인이 URL 하나를 완성된 클립으로 바꿉니다.',
+        '스킬이 열린 SKILL.md 형식을 쓰므로 같은 세트가 Claude Code, Cursor, Codex로도 이어집니다.',
+      ],
+      howWithAgent: [
+        '웹 프로필에 플러그인을 추가하고 다시 시작하세요.',
+        '"이 URL을 HyperFrames 영상으로 만들어 줘"라고 말해 파이프라인을 시작하세요.',
+        'hyperframes CLI로 렌더링하세요. 의존성은 Node 22+와 FFmpeg뿐입니다.',
+      ],
+    },
+    'dsh-web-preview': {
+      tagline: '워크스페이스를 미리 보고, 프로젝트를 실행하고, 요소에 주석을 다는 글래스 사이드 패널.',
+      whatIsIt:
+        '하네스 웹 UI를 위한 사이드 웹 프리뷰 패널. 워크스페이스 파일을 프리뷰로 서빙하고(Markdown은 렌더링, 코드는 줄 번호와 함께, 이미지와 HTML은 그대로), 프로젝트는 Cargo, package.json, go.mod, Python을 자동 감지해 라이브 로그와 함께 실행되며, 마킹 모드가 요소 주석을 대화로 되돌려 보냅니다.',
+      whyForDesign: [
+        '에이전트가 방금 작성한 프로토타입이 채팅 옆에서 열립니다. 주소창은 동기화되고 패널 너비는 드래그로 조절됩니다.',
+        '마킹 모드가 요소를 호버로 강조하고, 셀렉터와 HTML 스냅샷을 수집해 메모와 함께 대화로 보냅니다.',
+        '링크, 파일 경로, 드롭한 파일이 모두 패널에서 열려 리뷰가 세션을 떠나지 않습니다.',
+      ],
+      howWithAgent: [
+        '웹 프로필 디렉터리에 패키지를 설치한 뒤, 해당 프로필의 cordis.patch.yml에 dsh-web-preview-panel이라는 이름의 insert 항목을 추가해 마운트하세요.',
+        'dsh web을 다시 시작하고 대화 우측 상단의 ▶ 프리뷰 버튼을 여세요.',
+        '패널에서 프로젝트를 실행하고, 요소에 주석을 달고, 로그와 메모를 곧장 에이전트에게 보내세요.',
+      ],
+    },
   },
 };

apps/landing-page/app/_lib/deepseek-i18n/pt-br.ts

@@ -10,8 +10,8 @@ export const ptBr: DeepseekCopyOverride = {
   collectionLede:
     'Uma coleção curada de plugins dsh para design: pontes de visão que leem screenshots, telas e UI generativa onde o agente pode desenhar, ferramentas de revisão de design e bancadas que mostram o preview de tudo. O DeepSeek Harness lê o mesmo formato SKILL.md do Claude Code e do Codex, então sua biblioteca de skills de design vem junto.',
   collectionStats: [
-    { value: '13', label: 'plugins dsh selecionados' },
-    { value: '13', label: 'repositórios de origem' },
+    { value: '19', label: 'plugins dsh selecionados' },
+    { value: '19', label: 'repositórios de origem' },
     { value: 'SKILL.md', label: 'compartilhado com Claude Code e Codex' },
   ],
   collectionIntro:
@@ -274,5 +274,101 @@ export const ptBr: DeepseekCopyOverride = {
         'Revise o que o agente construiu ali mesmo: previews, diffs, terminal e abas de navegador.',
       ],
     },
+    'dsh-vision-router': {
+      tagline:
+        'Olhos gratuitos e sem chave para agentes só de texto: uma cadeia de visão embutida mais onze ferramentas em nível de pixel.',
+      whatIsIt:
+        'Um roteador de visão que mantém os pixels originais do lado do modelo de visão e o DeepSeek do lado do raciocínio. Escolha um grupo de modelos “+ Auto Vision”, cole uma imagem, e o agente aciona onze ferramentas em nível de pixel — grounding, recorte, pixel diff, paleta, OCR, vetorização SVG, cutout, screenshots de HTML — sobre uma cadeia gratuita de fallback de visão anônima, sem conta e sem chave.',
+      whyForDesign: [
+        'Um ciclo de pixels verificável para restauração de UI: referência → screenshot → pixel diff com heatmap vermelho → correção → repetir até a diferença convergir.',
+        'Grounding e detecção devolvem caixas em pixels da imagem original, e o README documenta uma reconstrução verificada até um diff final de 2,54%.',
+        'Extração de paleta, vetorização SVG de ícones e remoção de fundo cobrem as pequenas tarefas de design em volta de uma reconstrução.',
+      ],
+      howWithAgent: [
+        'Adicione o plugin ao seu perfil web; o patch de composição liga tudo sem nenhuma edição manual de arquivos.',
+        'Abra o seletor de modelos e escolha um grupo marcado com “+ Auto Vision” antes de enviar imagens.',
+        'Cole um screenshot e deixe o agente encadear vision_ground, vision_crop, vision_describe e vision_pixel_diff.',
+      ],
+    },
+    'dsh-diagram': {
+      tagline:
+        'Transforme qualquer artigo da sessão num canvas Excalidraw editável, não numa imagem descartável.',
+      whatIsIt:
+        'Um canvas Excalidraw dentro do harness: o agente chama diagram_create para construir um fluxograma, diagrama de arquitetura, linha do tempo, hierarquia ou comparação a partir de uma spec semântica compacta, e uma aba Canvas abre o editor completo para você refinar textos, nós e conexões direto na sessão.',
+      whyForDesign: [
+        'Editável, não descartável: continue trabalhando num canvas vetorial de verdade em vez de aceitar uma imagem estática gerada.',
+        'O autosave por revisão com compare-and-set impede que um editor desatualizado sobrescreva silenciosamente um trabalho mais novo.',
+        'Exporta .excalidraw, SVG ou PNG, e as edições manuais só chegam ao agente quando você pede para ele chamar diagram_read.',
+      ],
+      howWithAgent: [
+        'Adicione o plugin ao seu perfil web e reinicie o dsh web.',
+        'Peça um diagrama claro do artigo que está na sessão; o agente chama diagram_create.',
+        'Abra a aba Canvas, edite diretamente, e então exporte ou deixe o agente ler suas mudanças de volta.',
+      ],
+    },
+    'deepseek-harness-genui': {
+      tagline:
+        'A tarefa faz crescer uma interface React focada — e o que você escolhe nela volta para o agente.',
+      whatIsIt:
+        'Uma camada de interface em tempo de execução para tarefas do agente: quando o texto atrapalha, o agente escreve um pequeno app React + TypeScript — exibido inline, no Canvas, em tela cheia ou no localhost — para explicar uma relação difícil, coletar uma decisão complexa ou operar uma ferramenta conectada após aprovação com escopo de tarefa.',
+      whyForDesign: [
+        'As interfaces são React code-first, então layouts, controles e diagramas são componentes de verdade, não screenshots.',
+        'Seleções, entradas e rascunhos salvos retornam à tarefa para os turnos seguintes do agente lerem.',
+        'Um sistema DESIGN.md com quatro perfis visuais mantém os apps gerados numa única linguagem de design.',
+      ],
+      howWithAgent: [
+        'Execute o comando de instalação — ele adiciona o plugin e depois instala o Chromium de que o Playwright precisa.',
+        'Peça uma interface quando a interação ajudar: um seletor, um modelo explorável, um explorador de caminhos de código.',
+        'Interaja e depois continue a conversa — o agente lê o que você selecionou em vez de pedir que você repita.',
+      ],
+    },
+    'dsh-annotate': {
+      tagline:
+        'Aponte para elementos no navegador e envie ao agente fatos estruturados, não descrições vagas.',
+      whatIsIt:
+        'Feedback visual do navegador por meio de uma extensão companheira para Chrome: /annotate entra no modo de seleção, e cada elemento que você clica contribui com um seletor, fatos do DOM, destaques de estilos computados, dados de acessibilidade, seu comentário e um screenshot opcional do viewport para o próximo turno do agente.',
+      whyForDesign: [
+        'O feedback visual fica preso ao elemento da página em vez de virar uma descrição vaga ou um screenshot colado.',
+        'Estilos computados e dados de acessibilidade chegam como fatos estruturados sobre os quais o agente consegue agir diretamente.',
+        'Uma ponte WebSocket de loopback restrita por host, origem e ID de extensão mantém o canal local.',
+      ],
+      howWithAgent: [
+        'Clone o repositório e adicione o projeto a um perfil do harness; depois carregue a pasta browser-extension como extensão descompactada em chrome://extensions.',
+        'Rode /annotate, clique nos elementos da página e anexe um comentário a cada um.',
+        'Envie — os fatos capturados e o screenshot do viewport chegam no próximo turno do agente.',
+      ],
+    },
+    'dsh-hyperframes': {
+      tagline:
+        'HyperFrames da HeyGen, portado: cinco skills oficiais que transformam HTML em vídeo finalizado.',
+      whatIsIt:
+        'Uma única instalação registra no harness as cinco skills oficiais do HyperFrames da HeyGen: composição de vídeo em HTML com estilos visuais, paletas, legendas e transições reativas ao áudio, a CLI do hyperframes, o registro de componentes, um pipeline de site para vídeo e uma referência de animação GSAP.',
+      whyForDesign: [
+        'Motion design no meio em que você já trabalha: HTML e CSS viram vídeo renderizado.',
+        'Um pipeline de site para vídeo em sete etapas transforma uma URL num clipe produzido.',
+        'As skills usam o formato aberto SKILL.md, então o mesmo conjunto vale para Claude Code, Cursor e Codex.',
+      ],
+      howWithAgent: [
+        'Adicione o plugin ao seu perfil web e reinicie.',
+        'Diga “transforme esta URL num vídeo HyperFrames” para acionar o pipeline.',
+        'Renderize pela CLI do hyperframes; Node 22+ e FFmpeg são as únicas dependências.',
+      ],
+    },
+    'dsh-web-preview': {
+      tagline:
+        'Um painel lateral de vidro que mostra o preview do workspace, roda o projeto e anota elementos.',
+      whatIsIt:
+        'Um painel lateral de preview web para a interface web do harness: os arquivos do workspace são servidos para preview — Markdown renderizado, código com números de linha, imagens e HTML como estão —, os projetos detectam seu tipo automaticamente (Cargo, package.json, go.mod, Python) e rodam com logs ao vivo, e um modo de marcação captura anotações de elementos de volta para a conversa.',
+      whyForDesign: [
+        'O protótipo que o agente acabou de escrever abre ao lado do chat, com a barra de endereço sincronizada e a largura do painel arrastável.',
+        'O modo de marcação destaca elementos no hover, captura um seletor e um snapshot do HTML, e envia sua nota para a conversa.',
+        'Links, caminhos de arquivo e arquivos arrastados abrem no painel, então a revisão nunca sai da sessão.',
+      ],
+      howWithAgent: [
+        'Instale o pacote no diretório do seu perfil web e depois monte-o adicionando uma entrada insert chamada dsh-web-preview-panel ao cordis.patch.yml desse perfil.',
+        'Reinicie o dsh web e abra o botão de preview ▶ no canto superior direito da conversa.',
+        'Rode o projeto pelo painel, anote elementos e envie logs ou notas direto para o agente.',
+      ],
+    },
   },
 };

apps/landing-page/app/_lib/deepseek-i18n/ru.ts

@@ -10,8 +10,8 @@ export const ru: DeepseekCopyOverride = {
   collectionLede:
     'Подборка dsh-плагинов для дизайна: зрительные мосты, читающие скриншоты, холсты и генеративный UI, на которых агент может рисовать, инструменты дизайн-ревью и рабочие пространства с превью всего этого. DeepSeek Harness читает тот же формат SKILL.md, что Claude Code и Codex, — ваша библиотека дизайн-скиллов переносится как есть.',
   collectionStats: [
-    { value: '13', label: 'отобранных dsh-плагинов' },
-    { value: '13', label: 'репозиториев-источников' },
+    { value: '19', label: 'отобранных dsh-плагинов' },
+    { value: '19', label: 'репозиториев-источников' },
     { value: 'SKILL.md', label: 'общий с Claude Code и Codex' },
   ],
   collectionIntro:
@@ -274,5 +274,101 @@ export const ru: DeepseekCopyOverride = {
         'Проверяйте сделанное агентом на месте: превью, диффы, терминал и вкладки браузера.',
       ],
     },
+    'dsh-vision-router': {
+      tagline:
+        'Бесплатные глаза без ключей для текстовых агентов: встроенная зрительная цепочка и одиннадцать пиксельных инструментов.',
+      whatIsIt:
+        'Зрительный маршрутизатор, который оставляет исходные пиксели на стороне зрительной модели, а рассуждения — на стороне DeepSeek. Выберите группу моделей с пометкой «+ Auto Vision», вставьте изображение — и агент управляет одиннадцатью пиксельными инструментами: граундинг, кадрирование, пиксельный дифф, палитра, OCR, трассировка в SVG, вырезание фона, HTML-скриншоты — поверх бесплатной анонимной резервной цепочки зрительных моделей, без аккаунта и без ключа.',
+      whyForDesign: [
+        'Проверяемый пиксельный цикл для восстановления UI: референс → скриншот → пиксельный дифф с красной тепловой картой → правка → повтор, пока расхождение не сойдётся.',
+        'Граундинг и детекция возвращают пиксельные рамки в координатах исходного изображения, а README документирует пересборку, проверенную до финального диффа 2.54%.',
+        'Извлечение палитры, векторизация иконок в SVG и вырезание фона закрывают мелкие дизайн-задачи вокруг пересборки.',
+      ],
+      howWithAgent: [
+        'Добавьте плагин в свой профиль web; его композиционный патч подключает всё без единой ручной правки файлов.',
+        'Откройте выбор моделей и перед отправкой изображений выберите группу с пометкой «+ Auto Vision».',
+        'Вставьте скриншот — агент выстроит цепочку из vision_ground, vision_crop, vision_describe и vision_pixel_diff.',
+      ],
+    },
+    'dsh-diagram': {
+      tagline:
+        'Превращает любую статью в сессии в редактируемый холст Excalidraw, а не в одноразовую картинку.',
+      whatIsIt:
+        'Холст Excalidraw внутри харнесса: агент вызывает diagram_create и строит блок-схему, диаграмму архитектуры, таймлайн, иерархию или сравнение из компактной семантической спецификации, а вкладка Canvas открывает полноценный редактор, где вы правите текст, узлы и связи прямо в сессии.',
+      whyForDesign: [
+        'Редактируемо, а не одноразово: продолжайте работать на настоящем векторном холсте вместо того, чтобы принять статичную сгенерированную картинку.',
+        'Автосохранение по схеме compare-and-set с ревизиями не даёт устаревшему редактору незаметно перезаписать более свежую работу.',
+        'Экспортирует .excalidraw, SVG или PNG, а ручные правки доходят до агента, только когда вы попросите его вызвать diagram_read.',
+      ],
+      howWithAgent: [
+        'Добавьте плагин в свой профиль web и перезапустите dsh web.',
+        'Попросите одну ясную диаграмму по статье из сессии; агент вызовет diagram_create.',
+        'Откройте вкладку Canvas, правьте напрямую, затем экспортируйте или дайте агенту считать ваши изменения обратно.',
+      ],
+    },
+    'deepseek-harness-genui': {
+      tagline:
+        'Задача отращивает сфокусированный React-интерфейс — и ваш выбор в нём возвращается агенту.',
+      whatIsIt:
+        'Слой интерфейсов времени выполнения для агентских задач: когда текст мешает, агент пишет небольшое приложение на React + TypeScript — встроенное в ответ, в Canvas, на весь экран или на localhost — чтобы объяснить сложную взаимосвязь, собрать непростое решение или управлять подключённым инструментом после одобрения в рамках задачи.',
+      whyForDesign: [
+        'Интерфейсы — это code-first React: раскладки, элементы управления и диаграммы — настоящие компоненты, а не скриншоты.',
+        'Сохранённые выборы, вводы и черновики возвращаются в задачу, и агент читает их в следующих ходах.',
+        'Система DESIGN.md с четырьмя визуальными профилями держит сгенерированные приложения в едином дизайн-языке.',
+      ],
+      howWithAgent: [
+        'Запустите команду установки — она добавит плагин, а затем установит Chromium, который нужен Playwright.',
+        'Просите интерфейс там, где помогает интерактив: пикер, исследуемую модель, обозреватель путей в коде.',
+        'Взаимодействуйте и продолжайте разговор — агент прочитает, что вы выбрали, вместо того чтобы просить повторить.',
+      ],
+    },
+    'dsh-annotate': {
+      tagline:
+        'Указывайте на элементы в браузере и отправляйте агенту структурированные факты, а не расплывчатые описания.',
+      whatIsIt:
+        'Визуальная обратная связь из браузера через сопутствующее расширение Chrome: /annotate включает режим выделения, и каждый элемент, по которому вы кликаете, добавляет в следующий ход агента селектор, факты о DOM, ключевые вычисленные стили, данные доступности, ваш комментарий и опциональный скриншот вьюпорта.',
+      whyForDesign: [
+        'Визуальная обратная связь остаётся привязанной к элементу страницы, а не превращается в расплывчатое описание или вставленный скриншот.',
+        'Вычисленные стили и данные доступности приходят структурированными фактами, с которыми агент может работать напрямую.',
+        'Loopback-мост WebSocket, ограниченный по хосту, origin и ID расширения, держит канал локальным.',
+      ],
+      howWithAgent: [
+        'Склонируйте репозиторий и добавьте проект в профиль харнесса, затем загрузите его папку browser-extension как распакованное расширение через chrome://extensions.',
+        'Запустите /annotate, кликайте по элементам страницы и прикрепляйте к каждому комментарий.',
+        'Отправьте — собранные факты и скриншот вьюпорта попадут в следующий ход агента.',
+      ],
+    },
+    'dsh-hyperframes': {
+      tagline:
+        'Портированный HyperFrames by HeyGen: пять официальных скиллов, превращающих HTML в готовое видео.',
+      whatIsIt:
+        'Одна установка регистрирует в харнессе пять официальных скиллов HyperFrames by HeyGen: композиция HTML-видео с визуальными стилями, палитрами, субтитрами и аудиореактивными переходами, CLI hyperframes, реестр компонентов, конвейер «сайт → видео» и справочник по анимации GSAP.',
+      whyForDesign: [
+        'Моушен-дизайн в среде, в которой вы уже работаете: HTML и CSS становятся отрендеренным видео.',
+        'Семишаговый конвейер «сайт → видео» превращает URL в готовый ролик.',
+        'Скиллы используют открытый формат SKILL.md, поэтому тот же набор переносится в Claude Code, Cursor и Codex.',
+      ],
+      howWithAgent: [
+        'Добавьте плагин в свой профиль web и перезапустите.',
+        'Скажите «сделай из этого URL видео HyperFrames», чтобы запустить конвейер.',
+        'Рендерьте через CLI hyperframes; из зависимостей только Node 22+ и FFmpeg.',
+      ],
+    },
+    'dsh-web-preview': {
+      tagline:
+        'Стеклянная боковая панель, которая показывает превью рабочей области, запускает проект и аннотирует элементы.',
+      whatIsIt:
+        'Боковая панель веб-превью для веб-интерфейса харнесса: файлы рабочей области подаются для просмотра — Markdown рендерится, код показывается с номерами строк, изображения и HTML как есть; проекты сами определяют свой тип (Cargo, package.json, go.mod, Python) и запускаются с живыми логами, а режим разметки собирает аннотации элементов обратно в разговор.',
+      whyForDesign: [
+        'Прототип, который агент только что написал, открывается рядом с чатом; адресная строка синхронизирована, ширина панели перетаскивается.',
+        'Режим разметки подсвечивает элементы при наведении, захватывает селектор и HTML-снимок и отправляет вашу заметку в разговор.',
+        'Ссылки, пути к файлам и перетащенные файлы открываются в панели, поэтому ревью не покидает сессию.',
+      ],
+      howWithAgent: [
+        'Установите пакет в каталог профиля web, затем подключите его, добавив запись insert с именем dsh-web-preview-panel в cordis.patch.yml этого профиля.',
+        'Перезапустите dsh web и откройте кнопку превью ▶ в правом верхнем углу разговора.',
+        'Запускайте проект из панели, аннотируйте элементы и отправляйте логи и заметки прямо агенту.',
+      ],
+    },
   },
 };

apps/landing-page/app/_lib/deepseek-i18n/tr.ts

@@ -10,8 +10,8 @@ export const tr: DeepseekCopyOverride = {
   collectionLede:
     'Tasarım işi için seçilmiş dsh eklentileri: ekran görüntülerini okuyan görü köprüleri, ajanın üzerine çizebileceği tuvaller ve üretken arayüzler, tasarım inceleme araçları ve hepsini önizleyen çalışma tezgâhları. DeepSeek Harness, Claude Code ve Codex ile aynı SKILL.md biçimini okur; tasarım skill kitaplığın olduğu gibi taşınır.',
   collectionStats: [
-    { value: '13', label: 'seçilmiş dsh eklentisi' },
-    { value: '13', label: 'kaynak repo' },
+    { value: '19', label: 'seçilmiş dsh eklentisi' },
+    { value: '19', label: 'kaynak repo' },
     { value: 'SKILL.md', label: 'Claude Code & Codex ile ortak' },
   ],
   collectionIntro:
@@ -284,5 +284,101 @@ export const tr: DeepseekCopyOverride = {
         'Ajanın kurduğunu yerinde inceleyin: önizlemeler, diff’ler, terminal ve tarayıcı sekmeleri.',
       ],
     },
+    'dsh-vision-router': {
+      tagline:
+        'Yalnızca metin çalışan ajanlara ücretsiz, anahtarsız gözler: yerleşik bir görüş zinciri artı on bir piksel düzeyinde araç.',
+      whatIsIt:
+        'Orijinal pikselleri görüş modelinin tarafında, akıl yürütmeyi DeepSeek tarafında tutan bir görüş yönlendiricisi. “+ Auto Vision” işaretli bir model grubu seçin, bir görsel yapıştırın; ajan on bir piksel düzeyinde aracı — grounding, kırpma, piksel farkı, palet, OCR, SVG vektörizasyonu, arka plan ayıklama, HTML ekran görüntüleri — hesap ve anahtar gerektirmeyen ücretsiz, anonim bir görüş yedek zinciri üzerinden sürer.',
+      whyForDesign: [
+        'Arayüz restorasyonu için doğrulanabilir bir piksel döngüsü: referans → ekran görüntüsü → kırmızı ısı haritalı piksel farkı → düzeltme → uyuşmazlık yakınsayana kadar tekrar.',
+        'Grounding ve tespit, orijinal görüntünün piksel kutularını döndürür; README’si %2,54 nihai farka kadar doğrulanmış bir yeniden yapımı belgeler.',
+        'Palet çıkarma, ikonların SVG vektörizasyonu ve arka plan ayıklama, bir yeniden yapımın etrafındaki küçük tasarım işlerini karşılar.',
+      ],
+      howWithAgent: [
+        'Eklentiyi web profilinize ekleyin; composition patch’i her şeyi elle tek dosya düzenlemeden bağlar.',
+        'Görsel göndermeden önce model seçiciyi açın ve “+ Auto Vision” işaretli bir grup seçin.',
+        'Bir ekran görüntüsü yapıştırın ve ajanın vision_ground, vision_crop, vision_describe ve vision_pixel_diff’i zincirlemesine izin verin.',
+      ],
+    },
+    'dsh-diagram': {
+      tagline:
+        'Oturumdaki herhangi bir makaleyi tek kullanımlık bir görsel yerine düzenlenebilir bir Excalidraw canvas’ına dönüştürür.',
+      whatIsIt:
+        'Harness’in içinde bir Excalidraw canvas’ı: ajan, kompakt bir semantik spesifikasyondan akış şeması, mimari diyagram, zaman çizelgesi, hiyerarşi ya da karşılaştırma kurmak için diagram_create’i çağırır; bir Canvas sekmesi tam editörü açar, metni, düğümleri ve bağlantıları doğrudan oturumun içinde inceltirsiniz.',
+      whyForDesign: [
+        'Tek kullanımlık değil, düzenlenebilir: statik üretilmiş bir görseli kabul etmek yerine gerçek bir vektör canvas’ında çalışmaya devam edin.',
+        'Revizyon tabanlı compare-and-set otomatik kaydetme, bayat bir editörün daha yeni işin üzerine sessizce yazmasını önler.',
+        '.excalidraw, SVG ya da PNG dışa aktarır; elle yapılan düzenlemeler ajana yalnızca diagram_read’i çağırmasını istediğinizde ulaşır.',
+      ],
+      howWithAgent: [
+        'Eklentiyi web profilinize ekleyin ve dsh web’i yeniden başlatın.',
+        'Oturumdaki makalenin tek ve net bir diyagramını isteyin; ajan diagram_create’i çağırır.',
+        'Canvas sekmesini açın, doğrudan düzenleyin, sonra dışa aktarın ya da ajanın değişikliklerinizi geri okumasına izin verin.',
+      ],
+    },
+    'deepseek-harness-genui': {
+      tagline:
+        'Görev, odaklı bir React arayüzü büyütür — içinde seçtikleriniz ajana geri akar.',
+      whatIsIt:
+        'Ajan görevleri için bir çalışma zamanı arayüz katmanı: metin işi zorlaştırdığında ajan küçük bir React + TypeScript uygulaması yazar — satır içi, Canvas’ta, tam ekran ya da localhost’ta gösterilir — zor bir ilişkiyi açıklamak, karmaşık bir kararı toplamak ya da göreve özel onay sonrasında bağlı bir aracı çalıştırmak için.',
+      whyForDesign: [
+        'Arayüzler önce kod gelen React’tir; düzenler, kontroller ve diyagramlar ekran görüntüsü değil, gerçek bileşenlerdir.',
+        'Kaydedilen seçimler, girdiler ve taslaklar göreve geri döner; sonraki ajan turları bunları okur.',
+        'Dört görsel profilli bir DESIGN.md sistemi, üretilen uygulamaları tek bir tasarım dilinde tutar.',
+      ],
+      howWithAgent: [
+        'Kurulum komutunu çalıştırın — eklentiyi ekler, ardından Playwright için gereken Chromium’u kurar.',
+        'Etkileşimin işe yaradığı yerde bir arayüz isteyin: bir seçici, keşfedilebilir bir model, bir kod yolu gezgini.',
+        'Etkileşin, sonra devam edin — ajan tekrarlamanızı istemek yerine seçtiklerinizi okur.',
+      ],
+    },
+    'dsh-annotate': {
+      tagline:
+        'Tarayıcı öğelerini işaret edin ve ajana belirsiz tarifler değil, yapılandırılmış gerçekler gönderin.',
+      whatIsIt:
+        'Eşlik eden bir Chrome uzantısı üzerinden görsel tarayıcı geri bildirimi: /annotate seçim moduna girer; tıkladığınız her öğe, bir seçiciyi, DOM gerçeklerini, hesaplanmış stil vurgularını, erişilebilirlik verisini, yorumunuzu ve isteğe bağlı bir viewport ekran görüntüsünü ajanın bir sonraki turuna katar.',
+      whyForDesign: [
+        'Görsel geri bildirim, belirsiz bir tarife ya da yapıştırılmış bir ekran görüntüsüne dönüşmek yerine sayfadaki öğeye bağlı kalır.',
+        'Hesaplanmış stiller ve erişilebilirlik verisi, ajanın doğrudan üzerinde işlem yapabileceği yapılandırılmış gerçekler olarak gelir.',
+        'Host, origin ve uzantı kimliğiyle sınırlanan bir loopback WebSocket köprüsü kanalı yerel tutar.',
+      ],
+      howWithAgent: [
+        'Depoyu klonlayıp projeyi bir harness profiline ekleyin, ardından browser-extension klasörünü chrome://extensions üzerinden paketlenmemiş uzantı olarak yükleyin.',
+        '/annotate’i çalıştırın, sayfadaki öğelere tıklayın ve her birine bir yorum iliştirin.',
+        'Gönderin — yakalanan gerçekler ve viewport ekran görüntüsü ajanın bir sonraki turuna düşer.',
+      ],
+    },
+    'dsh-hyperframes': {
+      tagline:
+        'HeyGen’in HyperFrames’i, taşınmış hâliyle: HTML’i bitmiş videoya dönüştüren beş resmî skill.',
+      whatIsIt:
+        'Tek kurulum, beş resmî HyperFrames by HeyGen skill’ini harness’e kaydeder: görsel stiller, paletler, altyazılar ve sese tepkili geçişlerle HTML video kompozisyonu, hyperframes CLI’ı, bileşen kayıt defteri, web sitesinden videoya bir boru hattı ve bir GSAP animasyon referansı.',
+      whyForDesign: [
+        'Zaten içinde çalıştığınız ortamda hareket tasarımı: HTML ve CSS, render edilmiş videoya dönüşür.',
+        'Yedi adımlı web sitesinden videoya boru hattı, bir URL’yi üretilmiş bir klibe çevirir.',
+        'Skill’ler açık SKILL.md biçimini kullanır; aynı set Claude Code, Cursor ve Codex’e taşınır.',
+      ],
+      howWithAgent: [
+        'Eklentiyi web profilinize ekleyin ve yeniden başlatın.',
+        'Boru hattını tetiklemek için “bu URL’yi bir HyperFrames videosuna dönüştür” deyin.',
+        'hyperframes CLI ile render edin; tek bağımlılıklar Node 22+ ve FFmpeg.',
+      ],
+    },
+    'dsh-web-preview': {
+      tagline:
+        'Çalışma alanını önizleyen, projeyi çalıştıran ve öğeleri notlayan cam görünümlü bir yan panel.',
+      whatIsIt:
+        'Harness web arayüzü için bir yan web önizleme paneli: çalışma alanı dosyaları önizleme için sunulur — Markdown render edilmiş, kod satır numaralı, görseller ve HTML olduğu gibi — projeler türünü otomatik algılar (Cargo, package.json, go.mod, Python) ve canlı loglarla çalışır; bir işaretleme modu, öğe notlarını konuşmaya geri yakalar.',
+      whyForDesign: [
+        'Ajanın az önce yazdığı prototip sohbetin yanında açılır; adres çubuğu eşitlenir, panel genişliği sürüklenebilir.',
+        'İşaretleme modu, öğeleri üzerine gelerek vurgular, bir seçici ve HTML anlık görüntüsü yakalar ve notunuzu konuşmaya gönderir.',
+        'Bağlantılar, dosya yolları ve bırakılan dosyaların tümü panelde açılır; inceleme oturumdan hiç ayrılmaz.',
+      ],
+      howWithAgent: [
+        'Paketi web profil dizininize kurun, ardından o profilin cordis.patch.yml dosyasına dsh-web-preview-panel adlı bir insert girdisi ekleyerek monte edin.',
+        'dsh web’i yeniden başlatın ve konuşmanın sağ üstündeki ▶ önizleme düğmesini açın.',
+        'Projeyi panelden çalıştırın, öğeleri notlayın ve logları ya da notları doğrudan ajana gönderin.',
+      ],
+    },
   },
 };

apps/landing-page/app/_lib/deepseek-i18n/zh.ts

@@ -10,8 +10,8 @@ export const zh: DeepseekCopyOverride = {
   collectionLede:
     '一个精选的 dsh 设计插件合集：能读截图的视觉桥、Agent 可以落笔的画布和生成式 UI、设计评审工具，以及把这一切预览出来的工作台。DeepSeek Harness 读取跟 Claude Code 和 Codex 相同的 SKILL.md 格式，你的设计 Skill 库可以直接带过来。',
   collectionStats: [
-    { value: '13', label: '个精选 dsh 插件' },
-    { value: '13', label: '个来源仓库' },
+    { value: '19', label: '个精选 dsh 插件' },
+    { value: '19', label: '个来源仓库' },
     { value: 'SKILL.md', label: '与 Claude Code、Codex 通用' },
   ],
   collectionIntro:
@@ -270,5 +270,95 @@ export const zh: DeepseekCopyOverride = {
         '原地检阅 Agent 做出来的东西：预览、diff、终端和浏览器标签页。',
       ],
     },
+    'dsh-vision-router': {
+      tagline: '给纯文本 Agent 的免费视觉，不要 API Key：内置视觉链路加十一个像素级工具。',
+      whatIsIt:
+        '一个视觉路由器：原始像素留在视觉模型一侧，推理交给 DeepSeek。选一个标着「+ Auto Vision」的模型组，粘贴一张图，Agent 就能驱动十一个像素级工具——grounding、裁剪、像素 diff、取色、OCR、SVG 描摹、抠图、HTML 截图——底下是一条免费的匿名视觉回退链路，不用注册账号，也不用 API Key。',
+      whyForDesign: [
+        'UI 还原有了可验证的像素闭环：参考稿 → 截图 → 带红色热力图的像素 diff → 修改 → 反复迭代直到差异收敛。',
+        'grounding 和检测返回原图上的像素框，README 里还记录了一次验证到最终差异只剩 2.54% 的重建。',
+        '取色、图标 SVG 矢量化和背景抠图，把重建周边的设计杂活也一并包了。',
+      ],
+      howWithAgent: [
+        '把插件加进你的 web profile；它的组合补丁会把一切接好，一个文件都不用手动改。',
+        '发图之前，先在模型选择器里选一个标着「+ Auto Vision」的模型组。',
+        '粘贴一张截图，让 Agent 串起 vision_ground、vision_crop、vision_describe 和 vision_pixel_diff。',
+      ],
+    },
+    'dsh-diagram': {
+      tagline: '把会话里的任何文章变成可编辑的 Excalidraw 画布，而不是一张用完即弃的图。',
+      whatIsIt:
+        '把 Excalidraw 画布装进 harness：Agent 调用 diagram_create，从一份紧凑的语义规格生成流程图、架构图、时间线、层级图或对比图，Canvas 标签页会打开完整编辑器，让你在会话里直接改文字、节点和连线。',
+      whyForDesign: [
+        '可编辑，不是一次性的：在真实的矢量画布上继续工作，而不是勉强接受一张生成的静态图。',
+        '基于版本号的 compare-and-set 自动保存，防止过期的编辑器悄悄覆盖更新的成果。',
+        '可以导出 .excalidraw、SVG 或 PNG；你手动改过的内容，只有在让 Agent 调用 diagram_read 时才会回到它那边。',
+      ],
+      howWithAgent: [
+        '把插件加进你的 web profile，重启 dsh web。',
+        '让它把会话里的文章画成一张清晰的图，Agent 会调用 diagram_create。',
+        '打开 Canvas 标签页直接编辑，然后导出，或让 Agent 把你的修改读回去。',
+      ],
+    },
+    'deepseek-harness-genui': {
+      tagline: '任务自己长出一个专注的 React 界面——你在里面做的选择会回流给 Agent。',
+      whatIsIt:
+        '一层给 Agent 任务用的运行时界面：当文字开始碍事，Agent 会写一个小型 React + TypeScript 应用——内联展示、放进 Canvas、全屏或跑在 localhost——用来讲清一段复杂关系、收集一个复杂决策，或在任务级授权后操作接入的工具。',
+      whyForDesign: [
+        '界面是代码优先的 React：布局、控件和图表都是真实组件，不是截图。',
+        '保存下来的选择、输入和草稿会回到任务里，供 Agent 后续轮次读取。',
+        '一套带四种视觉 profile 的 DESIGN.md 体系，让生成的应用保持同一种设计语言。',
+      ],
+      howWithAgent: [
+        '运行安装命令——它会添加插件，然后装好 Playwright 所需的 Chromium。',
+        '在交互更高效的时候要一个界面：一个选择器、一个可探索的模型、一个代码路径浏览器。',
+        '操作完接着聊——Agent 会直接读到你的选择，不用你再复述一遍。',
+      ],
+    },
+    'dsh-annotate': {
+      tagline: '指着浏览器里的元素，发给 Agent 的是结构化事实，不是含糊的描述。',
+      whatIsIt:
+        '通过配套 Chrome 扩展做可视化浏览器反馈：/annotate 进入选择模式，你点选的每个元素都会带上选择器、DOM 事实、计算样式要点、无障碍数据、你的批注和可选的视口截图，一起进入 Agent 的下一轮。',
+      whyForDesign: [
+        '视觉反馈始终挂在页面元素上，而不是退化成一段含糊描述或一张贴进来的截图。',
+        '计算样式和无障碍数据以结构化事实的形式到达，Agent 可以直接照着行动。',
+        '按主机、来源和扩展 ID 限制的本地回环 WebSocket 桥，让整条通道不出本机。',
+      ],
+      howWithAgent: [
+        '克隆仓库并把项目加进一个 harness profile，然后在 chrome://extensions 里以解包扩展方式加载它的 browser-extension 文件夹。',
+        '运行 /annotate，在页面上点选元素，逐个附上批注。',
+        '提交——采集到的事实和视口截图会落进 Agent 的下一轮。',
+      ],
+    },
+    'dsh-hyperframes': {
+      tagline: 'HeyGen 出品的 HyperFrames 移植版：五个官方 Skill，把 HTML 变成成片视频。',
+      whatIsIt:
+        '一次安装，把 HyperFrames by HeyGen 的五个官方 Skill 注册进 harness：带视觉风格、配色、字幕和音频响应转场的 HTML 视频合成、hyperframes CLI、组件仓库、网站转视频流水线，还有一份 GSAP 动画参考。',
+      whyForDesign: [
+        '在你本来就熟的介质里做动效：HTML 和 CSS 直接变成渲染出的视频。',
+        '一条七步的网站转视频流水线，把一个 URL 变成一支成片。',
+        'Skill 用的是开放的 SKILL.md 格式，同一套还能带去 Claude Code、Cursor 和 Codex。',
+      ],
+      howWithAgent: [
+        '把插件加进你的 web profile，重启。',
+        '说一句「把这个 URL 做成 HyperFrames 视频」，就能触发流水线。',
+        '用 hyperframes CLI 渲染；依赖只有 Node 22+ 和 FFmpeg。',
+      ],
+    },
+    'dsh-web-preview': {
+      tagline: '一块玻璃质感的侧边面板：预览工作区、运行项目、标注元素。',
+      whatIsIt:
+        '一个给 harness web UI 用的侧边网页预览面板：工作区文件直接托管出来预览——Markdown 渲染、代码带行号、图片和 HTML 原样呈现——项目自动识别类型（Cargo、package.json、go.mod、Python）并带实时日志运行，标记模式还能把元素批注采集回对话。',
+      whyForDesign: [
+        'Agent 刚写好的原型就开在对话旁边，地址栏保持同步，面板宽度可以拖拽。',
+        '标记模式悬停高亮元素，采集选择器和 HTML 快照，把你的批注发进对话。',
+        '链接、文件路径和拖进来的文件都在面板里打开，评审全程不用离开会话。',
+      ],
+      howWithAgent: [
+        '把包装进你的 web profile 目录，然后在该 profile 的 cordis.patch.yml 里添加一条名为 dsh-web-preview-panel 的 insert 条目来挂载它。',
+        '重启 dsh web，点开对话右上角的 ▶ 预览按钮。',
+        '在面板里运行项目、标注元素，把日志或批注直接发给 Agent。',
+      ],
+    },
   },
 };