dsh-web-artifact-designer-english · a DSH frontend design generation skill

Turns "make me a poster / a web page / an infographic / a chart" into a self-contained HTML / SVG artifact you can open by double-clicking — one that actually looks designed. A DeepSeek Harness (DSH) skill that turns visual/frontend design requests into polished, self-contained HTML/SVG artifacts — instead of generic AI-looking pages.

What this skill solves

The biggest pain in AI-written frontend is "it runs, but it's ugly" — purple gradients, everything centered, default fonts, emoji as icons, no hierarchy. This skill adapts Anthropic's official canvas-design / web-artifacts-builder methodology to DSH and gives the model a repeatable process plus a hard quality gate, so the output goes from "AI-generated" to "I'd put my name on this".

It solves a genuinely high-frequency need: posters, infographics, landing pages, data charts, banners, UI component mockups, single-page app prototypes — the things operations, marketing, product, and developers ask for every single day.

Features

• ✅ Prompt-only skill, zero dependencies, works the moment it is installed (no Playwright, no build chain)
• ✅ A design-not-decoration methodology: typography, color systems, whitespace, finish
• ✅ An anti-pattern list: nine habits that scream "AI", taught before the model can repeat them
• ✅ Self-contained HTML delivery rules: opens offline with a double-click, shareable, iterable
• ✅ A hard quality checklist: audited line by line before delivery; it does not ship until it passes
• ✅ DSH-native workflow guidance: how to use write/edit/read/open/web_search in practice
• ✅ A worked example: a retro-editorial coffee brand landing page that sets the quality bar
• ✅ One-command bundle install: packaged as a DSH Cordis plugin, so dsh plugin add is enough

Repository layout

├── index.js                                # Cordis plugin entry: registers skills/**/SKILL.md as a skill provider
├── cordis.patch.yml                        # bundle manifest: mounts this package into a profile
├── package.json                            # dsh.bundle metadata (what `dsh plugin add` reads)
├── skills/web-artifact-designer-english/
│   ├── SKILL.md                            # the skill itself (methodology + workflow + quality checklist)
│   ├── references/
│   │   ├── design-principles.md            # design principles: anti-patterns / type / color / layout / detail
│   │   └── self-contained-html.md          # how to build a self-contained HTML artifact
│   └── assets/
│       ├── template.html                   # ready-to-use starter template
│       └── example-landing.html            # quality-bar example (coffee brand landing page)
└── demo/q3-sales-infographic.html          # a real output demo (infographic)

Installation

Option 1: bundle install, one command (recommended)

dsh plugin --profile web add dsh-web-artifact-designer-english

Restart the session afterwards and it is live. The skill mounts with the profile as a provider — no copying files by hand.

Option 2: install straight from Git (before npm publication)

dsh plugin --profile web add "github:My-DSH-plugins/dsh-web-artifact-designer#english"

Option 3: copy into the user-level skill directory (global, pure Markdown)

mkdir -p ~/.dsh/skills
cp -r skills/web-artifact-designer-english ~/.dsh/skills/

Option 4: project-level (this project only)

mkdir -p .dsh/skills
cp -r skills/web-artifact-designer-english .dsh/skills/

Checking that it loaded

In a new session, ask "what skills do you have?" — or simply "make me a landing page for a coffee brand" — and watch whether the model produces a self-contained HTML design and audits it against the quality checklist unprompted.

Usage example

Input: "Make me an infographic for our Q3 sales data — clean and professional."

Model behavior (with this skill loaded):

1. Clarifies the brief (audience / core message / size / style; 1-2 questions if genuinely needed)
2. Fixes a concept + type + color + layout skeleton
3. write emits one self-contained HTML file (charts hand-drawn as inline SVG)
4. Audits against the quality checklist line by line and fixes what fails
5. Delivers: states the path, suggests open xxx.html, invites iteration

Output: q3-sales-infographic.html — double-click it and it opens in the browser.

How it differs from other DSH community projects

Project	Focus
DSH-Office / PPT / visualization plugins	Office documents (PPTX/DOCX/XLSX/PDF) and chart libraries
This skill	Web / visual design artifacts (posters, landing pages, infographics, component mockups), delivered as self-contained HTML/SVG

The two complement each other rather than overlap: reach for an Office plugin when you need a PPTX, and for this skill when you need "a good-looking page or poster".

Design principles at a glance

1. Settle the concept before writing code — "who sees it, what it says, what it feels like" is worth more than any CSS trick.
2. Typography is 90% of it — a headline with personality + a comfortable body face + a clear hierarchy.
3. Deliberate constraint — one focal point, one palette, one spacing rhythm; constraint is what creates style.
4. Avoid the "AI look" — no default gradients, no everything-centered, no emoji icons, no random spacing.

The full version lives in references/design-principles.md.

Contributing

PRs and issues are welcome:

• Add more design style recipes (acid design, neo-brutalism, and so on)
• Add more quality-bar examples
• Fix wording in the docs
• Report the situations where the model still ignores the skill in practice

License

MIT © 2026

About this variant

dsh-web-artifact-designer-english is the English version of dsh-web-artifact-designer: the package name, the bundled skill id (web-artifact-designer-english), and every piece of content — docs, references, templates, examples, and demo — are in English. Install this one and remove the original so the two variants don't both register a skill:

dsh plugin --profile web remove dsh-web-artifact-designer