前言¶
AI 写前端代码最常见的问题是“能跑，但丑”，通常表现为默认字体、紫色渐变、全居中布局、使用 emoji 作为图标等。dsh-web-artifact-designer 是 DeepSeek Harness (DSH) 的一个 skill，它将 Anthropic 官方的 canvas-design / web-artifacts-builder 设计方法论适配到 DSH。它提供了一套可重复的流程和硬性质量门槛，将视觉设计需求转化为可直接双击打开、视觉上真正像样的自包含 HTML / SVG 设计稿。
核心能力¶
- 零依赖，即装即用：纯提示词 skill，无需 Playwright 或构建链。
- 设计方法论：强调字体排印、配色系统、留白和细节完成度。
- 反模式清单：列出 9 个常见的“AI 味”问题，帮助模型避坑。
- 自包含 HTML 交付：生成可双击离线打开、可分享、可迭代的 HTML。
- 硬性质量清单：交付前逐条自检，确保质量达标。
- DSH 原生工作流：整合
write、edit、read、open、web_search等原生能力。 - 附赠示例：提供设计标杆示例。
安装与依赖¶
该插件依赖 yaml (^2.4.2)。安装方式如下：
dsh plugin --profile web add github:xulelenlp/dsh-web-artifact-designer#main
安装完成后，skill 以 provider 形式随 profile 挂载，重启会话即生效。
使用方式¶
输入示例：“帮我做一张 Q3 销售数据的信息图，风格简洁专业。”
模型加载该 skill 后的行为流程如下：
- 澄清 brief：确认受众、核心信息、尺寸及风格（如有必要）。
- 定概念与骨架：确定设计概念、字体、配色及布局骨架。
- 输出设计稿：使用
write命令输出单个自包含 HTML（数据图表通常使用内联 SVG 手绘）。 - 自查与修正：逐条对照质量清单自查并修正。
- 交付：告知文件路径，提示
open xxx.html，并邀请迭代。
适用场景与区别¶
该插件适用于海报、信息图、落地页、数据图表、Banner、UI 组件稿等网页视觉设计需求。
与 DSH 社区的 DSH-Office / PPT / 可视化插件不同，本插件专注于网页/视觉设计稿（HTML/SVG），产出自包含文件；Office 插件则面向办公文档（PPTX/DOCX/XLSX/PDF）与图表库。两者互补不重叠。
生态背景¶
DeepSeek Harness (DSH) 理念是“一切皆插件”。该插件由 xulelenlp 维护，开源协议为 MIT。社区目录与 DeepSeek / 幻方无官方从属关系。
