xulelenlp/dsh-web-artifact-designer

README 摘要

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 即可装 目录结构 安装 方式一：bundle 一键安装（推荐，进插件市场/awesome 清单走这条） 装完重启会话即生效。skill 以 provider 形式随 profile 挂载，无需手动复制文件。 方式二：复制到用户级 skill 目录（全局生效，纯 markdown） 方式三：项目级（仅当前项目生效） 验证是否生效 新会话里问一句：「你有哪些 skill？」或直接「帮我做一个咖啡品牌的落地页」，观察模型是否产出自包含 HTML 设计稿、并主动对照质量清单自查。 使用示例 输入 ：「帮我做一张 Q3 销售数据的信息图，风格简洁专业。」 模型行为（加载本 skill 后） ： 1. 澄清 brief（受众/核心信息/尺寸/风…

分类