dsh-web-artifact-designer 怎么安装？

在已安装 dsh CLI 引擎的环境中，进入插件页复制安装命令一键执行即可；自动检查通过：npm 包已发布且 engines 声明满足基线；该结论来自程序自动检查，未经人工实机验证。

dsh-web-artifact-designer 兼容性怎么样？

自动检查通过：npm 包已发布且 engines 声明满足基线；该结论来自程序自动检查，未经人工实机验证。

dsh-web-artifact-designer 有中文文档吗？

已提供中文翻译 README（由 DeepSeek 最新模型翻译生成），本站可切换中英文对照阅读。

dsh-web-artifact-designer 还在维护吗？

GitHub 3 星。最近一次上游提交在 2026/8/16。

网页设计稿生成 xulelenlp/dsh-web-artifact-designer

DeepSeek Harnessv1.0.0

xulelenlp79 天前有提交已提供中文文档扫描：含敏感能力

在 GitHub 查看 ↗

把设计需求变成可直接打开的精美 HTML 稿

32.9/100

综合分

GitHub 星标

691

npm 周下载

—/5

用户评分

数据截至 2026/9/19 · 周下载取自 npm 全网（含 CI / 镜像），非本站安装数；综合分由星标、活跃度与兼容性检查合成。

安装命令 · 需先装 dsh CLI 引擎

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

npm 源 · dsh-web-artifact-designer 的发布者账号已校验与本仓库一致

状态速览

判定依据：实装验证 · 静态安装检查 · 自动扫描 · 仓库维护状态

信任档位：已验证

是什么

dsh 原生插件 · vision

装得上吗

本站已在 dsh 0.2.1-rc.2 下真实安装成功

非静态推断

L5 · 运行时冒烟等级说明 →

安全吗

本站尚未对该插件做风险分级

暂未覆盖，不等同于无风险

还在维护吗

更新放缓：最近一次提交在 79 天前

档位由哪些信号合成

本站实装验证（真实安装 L4 覆盖全站；L5 为运行时冒烟或实机截图，覆盖范围小于 L4） · 验证所用 dsh 版本 · 静态安装检查 · 风险分级 · 仓库维护状态。下方各区块是它的证据明细。

验证判据与等级说明 →

社区实装还没有人打卡 · 装过的第一个就是你

安装兼容性检查✓ 自动检查通过

展开查看检查明细 ↓

以下结论由程序自动检查 npm 包、engines 声明与入口文件得出，未做人工实机验证——能装不等于用着没问题。

✓npm 包dsh-web-artifact-designer @ 1.0.0

✓Node 引擎未声明 engines.node

✓dsh CLI 依赖未声明 dsh 版本约束

✓入口文件main/exports/bin 已声明

验证方式：npm registry 存在性 + package.json 静态校验 · 最后检查 2026/10/17 12:41:57

安全扫描自动 · 静态分析源码

v2.7.0

🔵 扫描：含敏感能力尚无人工评估

展开查看扫描说明与证据 ↓

静态扫描发现插件具备触达本地系统的能力：执行外部命令、读写/删除本地文件、读取剪贴板或密钥类环境变量（至少其一）。这是能力清单，不是危险判定——具体能力项与证据见下方，安装前请自行判断是否需要。

读写/删除本地文件

查看扫描证据（共 4 处，展示前 4 条）

读取本地文件
index.js:65
const entries = await readdir(SKILLS_ROOT, { withFileTypes: true })
读取本地文件
index.js:72
skills.push(parseSkill(await readFile(skillFile, 'utf8'), directory, skillFile))
读取本地文件
index.js:78
const entries = readdirSync(SKILLS_ROOT, { withFileTypes: true })
读取本地文件
index.js:84
skills.push(parseSkill(readFileSync(skillFile, 'utf8'), directory, skillFile))

扫描于 2026/11/3（0 天前） · 范围入口闭包 + 全包扫描 · 来源 npm 发布包

静态扫描只反映源码中出现的调用，不构成安全背书；人工评估与自动扫描相互独立、互不覆盖。

给这个插件打分还没有人投票↓

用户评分

还没有人投票，来当第一个

广告精选好物

飞利浦 TAH6519 主动降噪耳机 ¥299

头戴式无线 anc 主动降噪，蓝牙连接，久戴舒适向。

·anc 主动降噪 · 头戴式无线
·价格与库存以商品页实时为准

去淘宝看看→

广告MCP 兼容手册

装完插件，给 AI 接上 MCP

Cursor、Claude Code、VS Code 逐个核对：能不能装、配置怎么写、装不上是什么原因。

·按客户端逐格核对
·结论标注依据与风险等级

查 MCP 兼容性→

功能亮点

生成自包含HTML设计稿
输出SVG设计稿
生成海报与信息图

展开完整介绍（173 字）↓

dsh-web-artifact-designer 把「帮我做个海报 / 网页 / 信息图 / 图表」变成一份可直接双击打开、视觉上真正像样的自包含 HTML / SVG 设计稿。它是 DeepSeek Harness（DSH）的一项技能，把视觉或前端设计需求做成精致、自包含的 HTML / SVG 成品，而不是那种一眼就是 AI 生成的页面。

README

由 DeepSeek 最新模型翻译生成

web-artifact-designer · DSH 前端设计生成 Skill 把「帮我做个海报 / 网页 / 信息图 / 图表」变成一份可直接双击打开、视觉上真正像样的自包含 HTML / SVG 设计稿。一个 DeepSeek Harness (DSH) skill，将视觉/前端设计请求转化为精致、自包含的 HTML/SVG 产物——而不是千篇一律的 AI 味页面。 English · 中文这个 skill 解决什么问题 AI 写前端最大的痛点是：「能跑，但丑」——紫色渐变、全居中、默认字体、emoji 当图标、没有层级。这个 skill 把 Anthropic 官方 canvas-design / web-artifacts-builder 的设计方法论适配到 DSH，给模型一套可重复的流程 + 硬性质量门槛，让设计产出从「AI 味」变成「敢署名」的作品。它解决的是真实高频问题：海报、信息图、落地页、数据图表、banner、UI 组件稿、单页应用原型——这些是运营、市场、产品、开发者每天都在要的东西。

展开完整文档（README 剩余 1 节）

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

把「帮我做个海报 / 网页 / 信息图 / 图表」变成一份可直接双击打开、视觉上真正像样的自包含 HTML / SVG 设计稿。
一个 DeepSeek Harness (DSH) skill，将视觉/前端设计请求转化为精致、自包含的 HTML/SVG 产物——而不是千篇一律的 AI 味页面。

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

输出：q3-sales-infographic.html，双击即可在浏览器打开。

与其他 DSH 社区项目的区别

| 项目 | 定位 |
| DSH-Office / PPT / 可视化插件 | 面向办公文档（PPTX/DOCX/XLSX/PDF）与图表库 |
| 本 skill | 面向网页/视觉设计稿（海报、落地页、信息图、组件稿），产出自包含 HTML/SVG |

两者互补不重叠：要 PPT 用 Office 插件，要「一张好看的网页/海报」用本 skill。

设计原则速览

1. 先定概念，再写代码——「给谁看、传达什么、什么情绪」比 CSS 技巧值钱。
2. 字体排印占 90%——标题有性格 + 正文求舒适 + 清晰层级。
3. 刻意约束——一个焦点、一套配色、一套间距节奏，约束出风格。
4. 避开「AI 味」——默认渐变、全居中、emoji 图标、随机间距统统不要。

完整内容见 references/design-principles.md。

贡献

欢迎 PR / Issue：

- 补充更多设计风格配方（如「酸性设计」「新粗野主义」等）
- 增加更多质量标杆示例
- 修正中英文表述
- 报告实际使用中模型「不听话」的场景

License

MIT © 2026

一个零依赖、仅提示词的 DeepSeek Harness 技能，教会模型产出精致、自包含的 HTML/SVG 设计作品（海报、信息图、落地页、图表、组件原型）。改编自 Anthropic 官方 canvas-design 和 web-artifacts-builder 技能，采用 DSH 原生工作流（write/edit/read/open/web_search）、一份硬性质量检查清单，以及一份针对泛化“AI 感”的反模式清单。

安装：将 skills/web-artifact-designer 复制到 ~/.dsh/skills/（全局）或 .dsh/skills/（项目），然后启动新会话。