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 后）：

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

---

English

A zero-dependency, prompt-only skill for DeepSeek Harness that teaches the model to produce polished, self-contained HTML/SVG design artifacts (posters, infographics, landing pages, charts, component mockups). Adapted from Anthropic's official canvas-design and web-artifacts-builder skills, with a DSH-native workflow (write/edit/read/open/web_search), a hard quality checklist, and an anti-pattern list targeting the generic "AI look".

Install: copy skills/web-artifact-designer into ~/.dsh/skills/ (global) or .dsh/skills/ (project), then start a new session.