Introduction

The most common problem with AI-generated frontend code is “works, but ugly,” typically manifesting as default fonts, purple gradients, fully centered layouts, or emoji used as icons. dsh-web-artifact-designer is a skill for DeepSeek Harness (DSH) that adapts Anthropic’s official canvas-design / web-artifacts-builder design methodology to DSH. It provides a repeatable workflow and hard quality gates, turning visual design requirements into self-contained HTML / SVG design drafts that can be opened by double-clicking and actually look visually polished.

Core Capabilities

  • Zero dependencies, ready out of the box: A pure prompt-based skill with no need for Playwright or a build chain.
  • Design methodology: Emphasizes typography, color systems, whitespace, and detail polish.
  • Anti-pattern checklist: Lists 9 common “AI-ish” problems to help the model avoid pitfalls.
  • Self-contained HTML delivery: Generates HTML that can be opened offline by double-clicking, shared, and iteratively improved.
  • Hard quality checklist: Self-checks item by item before delivery to ensure the quality bar is met.
  • DSH-native workflow: Integrates native capabilities such as write, edit, read, open, and web_search.
  • Bonus examples: Provides design benchmark examples.

Installation and Dependencies

This plugin depends on yaml (^2.4.2). Install it as follows:

dsh plugin --profile web add github:xulelenlp/dsh-web-artifact-designer#main

After installation, the skill is mounted as a provider with the profile and takes effect after restarting the session.

Usage

Input example: “Make me a Q3 sales data infographic with a clean, professional style.”

After loading this skill, the model follows this workflow:

  1. Clarify the brief: Confirm the audience, key message, dimensions, and style (if needed).
  2. Define the concept and skeleton: Determine the design concept, typography, color palette, and layout skeleton.
  3. Output the design draft: Use the write command to output a single self-contained HTML file (data charts are usually hand-drawn with inline SVG).
  4. Self-check and revise: Review and fix issues against the quality checklist item by item.
  5. Deliver: Report the file path, suggest open xxx.html, and invite iteration.

Applicable Scenarios and Differences

This plugin is suitable for web visual design needs such as posters, infographics, landing pages, data charts, banners, and UI component drafts.

Unlike the DSH-Office / PPT / visualization plugins in the DSH community, this plugin focuses on web/visual design drafts (HTML/SVG) and produces self-contained files; Office plugins are oriented toward office documents (PPTX/DOCX/XLSX/PDF) and chart libraries. The two are complementary and do not overlap.

Ecosystem Background

The philosophy of DeepSeek Harness (DSH) is “everything is a plugin.” This plugin is maintained by xulelenlp under the MIT open source license. The community catalog has no official affiliation with DeepSeek / High-Flyer.