xulelenlp/dsh-web-artifact-designer

Name: xulelenlp/dsh-web-artifact-designer
Author: xulelenlp

Plugin插件 Native原生 ⭐ 3 MIT Vision & Media视觉与多媒体 Data & Analysis数据与分析 Prompts & Skills提示词与技能

dsh-web-artifact-designer 将「帮我做个海报 / 网页 / 信息图 / 图表」变成一份可直接双击打开、视觉上真正像样的自包含 HTML / SVG 设计稿。一个 DeepSeek Harness（DSH）技能，能把视觉/前端设计需求转化为精致、自包含的 HTML/SVG 工件——而非千篇一律的 AI 风格页面。

Project Overview项目介绍

Edited by Zhiwei Agent (zhiwei)由知微Agent(zhiwei)编辑

dsh-web-artifact-designer is a native skill plugin built exclusively for DeepSeek Harness (DSH). It turns user requests for visual design work into polished, self-contained HTML or SVG files that can be opened directly by double-clicking in any modern browser. It supports generating a wide range of design assets including posters, web pages, infographics, data charts, landing pages, and UI component mockups. It integrates natively with DSH’s core workflow tools like write, edit, and read, and is packaged as a Cordis plugin that supports one-command installation via the DSH CLI.

This plugin addresses a common pain point of AI-generated front-end design: outputs that are functional but generic, full of common "AI design" anti-patterns like overused purple gradients and random spacing. It adapts proven design methodology from Anthropic’s official canvas-design skill, adding a clear anti-pattern list and strict quality check requirements to guide the model to produce professional-grade outputs. It is targeted at professionals like operators, marketers, product managers, and developers who have frequent daily design needs, and it complements other DSH office visualization plugins rather than competing with them.

As a pure prompt-based skill, this plugin has zero external dependencies, and only requires a restart of your DSH session after installation to take effect. There are three supported installation methods: one-click bundle installation via DSH CLI, copying the skill folder to the global user skill directory, or adding it to the project-level skill directory for project-only use. It is released under the permissive MIT open source license, which allows free use, modification, and redistribution. The project welcomes community contributions including new design styles, quality benchmark examples, and bug fixes.

dsh-web-artifact-designer 是一款专为 DeepSeek Harness (DSH) 开发的原生技能插件，核心功能是将用户的视觉设计需求，转化为可直接双击打开、成品质量合格的自包含 HTML 或 SVG 设计文件，支持生成海报、网页、信息图、数据图表、落地页、UI 组件等多种类型的设计产物。它适配了 DSH 原生工作流，整合了 write/edit/read 等原生工具，封装为 Cordis 插件支持一键安装。

针对 AI 生成前端设计普遍存在的「能运行但质感差，充满AI痕迹」的痛点，该插件引入了成熟的设计方法论，包含设计原则反模式清单、硬性质量门槛要求，引导模型产出符合专业标准的设计作品。它面向运营、市场、产品、开发等有日常设计需求的人群，能够解决高频的设计产出需求，和其他DSH办公类可视化插件功能互补。

该插件是纯提示词技能，零额外依赖，安装后重启 DSH 会话即可生效，支持三种安装方式：bundle一键安装、复制到用户级技能目录、项目级技能目录安装。用户可以在新会话中验证插件是否生效，它采用 MIT 开源许可，允许自由使用和修改，目前社区欢迎贡献设计风格、示例和修正。

View on GitHub在 GitHub 查看

Send to your DSH发给你的 DSH 安装

请帮我安装这个 DSH 插件。安装前先完成【兼容性检查 + 安全性检查】，检查通过再动手。

插件：dsh-web-artifact-designer（xulelenlp/dsh-web-artifact-designer）
仓库：https://github.com/xulelenlp/dsh-web-artifact-designer
本站详情页：https://www.yhbd.top/plugins/xulelenlp-dsh-web-artifact-designer/
本站登记：类型 plugin · 归类 原生 DSH 插件 · 许可证 MIT · ⭐ 3 · 最近提交 2026-08-16 · 主语言 HTML

按下面顺序执行，每步先把结论告诉我，再进入下一步：

【1 兼容性检查】
① 我这边：DSH 版本、Node 版本、操作系统、当前 profile（web / desktop）。
② 读它的 README、package.json、插件 manifest，列出它要求的 DSH 版本 / Node 版本 / 操作系统 / 外部依赖 / 需要另外先装的运行时。
③ 逐条比对，结论只写「满足 / 不满足 / 未知」三种；不满足的给出可行替代方案。
④ 检查是否和我已装的插件冲突：命令名重复、skill / tool 重名、端口占用、重复注册的 MCP server。

【2 安全性检查】
① 仓库可信度：和上面「本站登记」是否一致；star / fork 数、创建时间、最近提交，是否归档或长期停更。
② 安装脚本：逐行看 package.json 的 preinstall / install / postinstall，以及 install.sh、setup.ps1 之类脚本。出现 curl|bash、下载后直接执行、混淆代码、访问与插件功能无关的域名，立刻停下来告诉我，不要继续装。
③ 依赖：列出新增依赖，标出无人维护、或与知名包拼写近似的可疑包（typosquatting）。
④ 权限与副作用：它会读写哪些目录、访问哪些域名、需要哪些 DSH 权限（filesystem / network / shell / clipboard 等），以及怎么卸载和回滚。
⑤ 如果它要求 sudo / 管理员权限，或权限明显超出功能所需，先停下来问我。

【3 安装】
上面两步没有「不满足」和「高危项」时才执行；用官方推荐方式安装，不要自行提权。

【4 汇报】
用表格输出：检查项 / 结论 / 依据 / 是否需要我决策。拿不准的一律写「未知」并说明要我怎么确认——不要猜，也不要替我决定。

Send this message to DSH in your current session: it verifies compatibility and security first (answering met / not met / unknown item by item) and only installs once everything checks out — it will stop and ask you if it finds a high-risk item. The box scrolls; the copy is the full prompt. CLI install commands may not be accurate across systems, so DSH is the safer route.把上面这条消息直接发给当前会话里的 DSH：它会先核对兼容性与安全性（逐条给「满足 / 不满足 / 未知」），确认没问题再安装，有高危项会停下来问你。框内可滚动，复制到的是完整提示词；安装命令不一定准确，发给 DSH 更稳。

Pre-install check安装前体检Compatibility · Security兼容性 · 安全性 1 warning1 项注意

Only 3 stars - very few users, little community feedback星标只有 3，几乎没人在用，遇到问题缺少社区反馈

DSH walks through these 9 checksDSH 会逐条核对这 9 项

Compatibility兼容性

DSH, Node, OS and profile requirementsDSH 版本 / Node 版本 / 操作系统 / profile 是否满足要求
External dependencies and runtimes (Electron / Python / Docker, ...)外部依赖与运行时（Electron / Python / Docker 等）是否齐备
Conflicts with installed plugins: command names, skill / tool names, ports, duplicate MCP registration与已装插件是否冲突：命令名、skill / tool 重名、端口占用、重复 MCP 注册

Security安全性

Repo matches the facts registered here; archived or abandoned?仓库是否与页面登记一致，是否归档或长期停更
Safety of preinstall / install / postinstall and install.sh / setup.ps1preinstall / install / postinstall 与 install.sh、setup.ps1 是否安全
curl|bash, download-then-execute, obfuscation, unrelated domains → stop immediatelycurl|bash、下载即执行、混淆代码、无关域名 → 立刻停止
Typosquatting or unmaintained packages among the new dependencies新增依赖里有没有 typosquatting 或无人维护的包
Requested permissions vs. what the feature actually needs申请了哪些权限、是否超出功能所需（filesystem / network / shell / clipboard）
Any sudo / admin requirement, plus uninstall and rollback是否要求 sudo / 管理员权限，以及卸载与回滚方式

Anything uncertain must be marked unknown with a note on how to confirm it. This site's signal screen is a static snapshot, not a security audit.拿不准的必须标「未知」并说明要我怎么确认。本站的信号筛查是静态快照，不能替代安全审计。

Or use CLI install (for developers)或使用命令行安装（适合开发者）

CLI Install命令行安装

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

把 xulelenlp/dsh-web-artifact-designer 加入你的 DSH 配置（web profile）即可启用。

READMEREADME

5.7 KB · 缓存于 2026-08-27 05:41:39 · 5.7 KB

web-artifact-designer · DSH 前端设计生成 Skill

把「帮我做个海报 / 网页 / 信息图 / 图表」变成一份可直接双击打开、视觉上真正像样的自包含 HTML / SVG 设计稿。 A DeepSeek Harness (DSH) skill that turns visual/frontend design requests into polished, self-contained HTML/SVG artifacts — instead of generic AI-looking pages.

English · 中文

这个 skill 解决什么问题

AI 写前端最大的痛点是：「能跑，但丑」——紫色渐变、全居中、默认字体、emoji 当图标、没有层级。这个 skill 把 Anthropic 官方 canvas-design / web-artifacts-builder 的设计方法论适配到 DSH，给模型一套可重复的流程 + 硬性质量门槛，让设计产出从「AI 味」变成「敢署名」的作品。

它解决的是真实高频问题：海报、信息图、落地页、数据图表、banner、UI 组件稿、单页应用原型——这些是运营、市场、产品、开发者每天都在要的东西。

特性

✅ 纯提示词 skill，零依赖、即装即用（无需 Playwright / 构建链）
✅ 设计而非装饰的方法论：字体排印、配色系统、留白、细节完成度
✅ 反模式清单：直击「AI 味」的 9 个通病，先教模型避坑
✅ 自包含 HTML 交付规范：双击离线可开、可分享、可迭代
✅ 硬性质量清单：交付前逐条自检，不达标不许交付
✅ DSH 原生工作流：结合 write/edit/read/open/web_search 的实操指引
✅ 附赠示例：一个能体现质量标杆的「复古编辑风」咖啡品牌落地页
✅ bundle 一键安装：封装为 DSH Cordis 插件，dsh plugin add 即可装

目录结构

├── index.js                         # Cordis 插件入口：把 skills/**/SKILL.md 注册为 skill provider
├── cordis.patch.yml                 # bundle 清单：把本包挂载进 profile
├── package.json                     # dsh.bundle 元数据（dsh plugin add 依赖它）
├── skills/web-artifact-designer/
│   ├── SKILL.md                     # 核心技能（方法论 + 工作流 + 质量清单）
│   ├── references/
│   │   ├── design-principles.md     # 设计原则：反模式 / 字体 / 色彩 / 布局 / 细节
│   │   └── self-contained-html.md   # 自包含 HTML artifact 构建指南
│   └── assets/
│       ├── template.html            # 开箱即用的 starter 模板
│       └── example-landing.html     # 质量标杆示例（咖啡品牌落地页）
└── demo/q3-sales-infographic.html   # 实际产出 demo（信息图）

安装

方式一：bundle 一键安装（推荐，进插件市场/awesome 清单走这条）

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

装完重启会话即生效。skill 以 provider 形式随 profile 挂载，无需手动复制文件。

方式二：复制到用户级 skill 目录（全局生效，纯 markdown）

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

方式三：项目级（仅当前项目生效）

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

验证是否生效

新会话里问一句：「你有哪些 skill？」或直接「帮我做一个咖啡品牌的落地页」，观察模型是否产出自包含 HTML 设计稿、并主动对照质量清单自查。

使用示例

输入：「帮我做一张 Q3 销售数据的信息图，风格简洁专业。」

模型行为（加载本 skill 后）：

澄清 brief（受众/核心信息/尺寸/风格，必要时 1-2 问）
定概念 + 字体 + 配色 + 布局骨架
write 输出单个自包含 HTML（数据图表用内联 SVG 手绘）
逐条对照质量清单自查并修正
交付：告知路径、提示 open xxx.html、邀请迭代

Showing the opening section of the README — the full document lives in the repository以上为 README 开头摘要，完整文档在仓库内 · View the full README on GitHub →在 GitHub 查看完整 README →

渲染基于仓库 xulelenlp/dsh-web-artifact-designer 的 README.md。在 GitHub 查看原文 →