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。
设计原则速览
- 先定概念，再写代码——「给谁看、传达什么、什么情绪」比 CSS 技巧值钱。
- 字体排印占 90%——标题有性格 + 正文求舒适 + 清晰层级。
- 刻意约束——一个焦点、一套配色、一套间距节奏，约束出风格。
- 避开「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.
