前言¶
用 DSH 做前端页面时，模型默认产出的是「见过的页面的平均值」：居中标语、三行副标题、上方一个小标签、一排图标卡片、柔和渐变、几根细分割线、等宽字体注释。单看每条都没错，合起来没有一个决定是为客户做的。
stevenwang15/dsh-taste-skill 是一个 DSH 原生 bundle 插件，把 tasteskill v2（技能名 design-taste-frontend）封装成 DSH 技能。装进 profile 后，DSH 的技能目录里多出一项 design-taste-frontend：模型按描述自动加载，也可以输入 /design-taste-frontend 强制调用。它的思路是：方向由脚本发牌、规范由真浏览器逐条量、返工依据是自己看的截图，而不是把规则写进提示词求模型自觉遵守。
这是什么¶
| 插件名 | dsh-taste-skill |
| 维护者 | stevenwang15 |
| 分类 | 工作流 |
| 许可 | 封装层 MIT；技能本体来自 Leonxlnx/taste-skill，MIT |
| 当前版本 | 插件 2.1.6 / 上游技能 2.1.5 |
| 形态 | 只注册 1 个原生技能 design-taste-frontend |
| 运行时 | Node 22+；Chrome / Edge / Chromium 仅视觉检查需要 |
| 依赖 | 不装任何依赖、不需要 API key |
用于落地页、营销站、作品集、产品页、活动页，也覆盖仪表盘、后台、设置、收件箱这类应用界面。它只做三件事：从零设计、重设计、评审（只给意见、不动代码）。明确不做的是：不提供模板、不改 DSH 自己的界面、不自动下载浏览器。
它解决什么问题¶
模型自己挑方向时，倾向于选最眼熟的那个。这个插件用四件事替代那套平均值：
- 方向由脚本发牌。20 个从真实获奖站点研究出来的方向，每次随机发 3 个，模型只能从中挑一个能承载客户自身材料的。
- 想法必须来自主体。页面的概念句从客户的盘点清单里长出来（名字的意思、所在的街道、那个限制条件、它产出的东西），再用「最近的竞争者」测试：如果这句话换成隔壁那家也成立，它就属于品类，不属于这个客户。
- 规范靠测量，而不是靠自觉。标题两行以内、不要 eyebrow 小标签、不要等宽字体、不要 01/02/03 编号、不要发丝线、不要渐变、静止元素不要阴影、图标卡片和玻璃拟态一律不要——这些由真浏览器逐条量。
- 看自己的截图返工。1440 / 768 / 390 三档量测加截图，按评委式评分表挑出最差的三个问题，改完再看，最多三轮。
核心能力¶
1. 发研究过的方向，不是模型的品味¶
scripts/draw.mjs 先发 3 个方向让你选，选定后把该方向配套的 Hero 构图（58）、版面蓝图（185）、字体系统（44）、配色（56）、摄影参考（19 组）、动效配方（18）、同类研究站点（202）一次性发下来。抽取会记住最近用过的，连续几个项目不会长得一样。
2. 版面蓝图按「这一节要证明什么」分发¶
不是模板套到底：先写论证（每节一条主张加证据，没有主张的节直接删掉），再按 section 角色（intro / about / features / list / stats / faq / cta / footer 等）分发布局，相邻两节的构图不会重复。
3. 真实照片，带授权与署名¶
scripts/assets.mjs 去 Openverse、Wikimedia Commons、芝加哥艺术博物馆、大都会博物馆搜主体世界的真实照片（老照片、地图、材质特写、版画、同类馆藏），默认只返回可商用许可（CC0 / 公有领域 / CC BY / CC BY-SA）。--get 下载并把标题、作者、许可、来源记进 assets/credits.json，--credits 打印页脚要用的署名行。视频同理（--video，取 720p 以内、附 poster 帧）。找不到诚实照片的东西用代码画：主体的物件、它的界面、它的瓷砖。页面至少 4 张真照片，这是硬性下限。
4. 反套路清单：既是规范，也是可测量的闸门¶
scripts/lint.mjs 静态扫描源码里的禁用模式和套话；scripts/inspect.mjs 在真浏览器里量标题行数、字号、实际加载的字体、颜色、分割线、阴影、渐变、对比度、溢出，以及「框」：左右外边距是否相等、有没有整节挤在一边、有没有超过半屏的空白、首屏有没有标题、每节有没有小标题。有 FAIL 就必须改；WARN 除非能一句话向设计师解释清楚，否则当错处理。
5. 滚动场景与「可以上手的一件事」¶
有滚动叙事的页面，scripts/scenes.mjs 把每个场景在 0 / 10 … 100% 进度上逐帧拍下来（桌面、手机、减弱动效三套），确认它真的跑起来了，而不是停在第一帧。每个页面还要求有访客能上手的东西（不是装饰性动效）：选一种木料看椅子、输入名字看字体、调贷款参数看真实月供。用主体的真实内容做，手机拇指可用，没有脚本时有普通降级。
6. 应用界面也管¶
仪表盘、后台、设置、收件箱这类「人在里面干活」的界面走 references/app-screens.md 的独立流程：自己的抽卡（draw.mjs --app）、自己的规则（安静的边框、对齐的数字、颜色只花在数据上、手机上导航折叠）、自己的检查（inspect.mjs --app）。共 7 类风格 / 5 个壳 / 25 个屏式。
安装与启用¶
安装命令来自 README 原文：
dsh plugin --profile desktop add https://github.com/stevenwang15/dsh-taste-skill.git
桌面端也可以在 设置 → 插件 里粘贴同一个仓库地址。装完重启 DSH（开了 HMR 的 profile 会热加载），新会话的技能目录里会出现 design-taste-frontend。
也可以装 Release 里的 tarball，或从本地目录装：
dsh plugin --profile desktop add https://github.com/stevenwang15/dsh-taste-skill/releases/download/v2.1.6/dsh-taste-skill-2.1.6.tgz
dsh plugin --profile desktop add ./dsh-taste-skill # 本地目录
装好后不用记命令，模型会按描述自己加载，例如：
- 「做一个精品咖啡烘焙的工作室官网，单页，要有真实照片」
- 「这个落地页太像 AI 做的了，看看问题在哪，然后重做视觉」
- 「给我一个 SaaS 后台的仪表盘界面，顺便评审现在这版」
想强制加载就输入 /design-taste-frontend。
构建产物落在工作区的 .taste-skill/：direction.json（方向表）、history.json（抽取历史，跨会话避免重复）、inspect/（截图与 report.json）。
环境要求¶
- Node 22+。DSH 内置的 runtime 是 24.x；插件加载时会把可用的 Node 绝对路径写进技能正文，所以宿主 PATH 上是 Node 20 也不影响。
- Chrome / Edge / Chromium 可选。缺失时
scripts/browser-check.mjs会明确报出来，inspect.mjs/scenes.mjs以退出码 2 干净退出，技能走降级路径：只跑lint.mjs静态检查，并在报告里说明「没有跑视觉检查」。插件不会自动下载浏览器。 - 网络只在找图时需要（
assets.mjs）。其余全部离线可用。
一次构建怎么走¶
README 给的完整流程：
| 步 | 做什么 |
|---|---|
| 1 | 盘点：8–12 个只属于这个客户的东西 |
| 2 | 写论证：每节一条主张加证据 |
| 3 | 抽方向：draw.mjs 发 3 个方向，选一个能承载盘点项的 |
| 4 | 找想法：写下「〈客户的某样东西〉变成〈方向要求的装置〉」，并用竞争者测试 |
| 5 | 写文案：先文案后版式，标题两行以内，每节内容写满 |
| 6 | 建站：tokens → 首屏 → 各节蓝图 → 图片 → 上手的东西 → 滚动场景 → 满度 → 框 → 状态与语义 |
| 7 | 过闸：lint.mjs + inspect.mjs，有场景再加 scenes.mjs，改到 0 FAIL |
| 8 | 看图：打开每张截图，按评分表逐条打分，改最差的三个问题，最多三轮 |
| 9 | 动效：签名动作 + 每节入场 + 控件反馈 + 一张会动的照片，只动 transform / opacity，并带 prefers-reduced-motion 降级 |
| 10 | 汇报：方向与种子、概念句、最终评分、每张图的出处、哪些是占位素材 |
一次完整构建大约 30–45 分钟、几十万 token，大头是找图 / 画图和返工。
内容清单¶
README 里列的库规模：设计方向 20、Hero 构图 58、版面蓝图 185、字体系统 44、配色 56、研究站点 202（从 247 个精选站点蒸馏）、动效配方 18、应用界面 7 类风格 / 5 个壳 / 25 个屏式、摄影集 19 组、参考文档 11 篇、脚本 6 个（draw、assets、lint、inspect、scenes、browser-check，另有零依赖 lib/）、评估集 evals/evals.json。
与上游的关系¶
技能内容与上游同构：SKILL.md、references/、library/、scripts/、assets/ 原样收录（上游 2.1.5，commit 12af471），只做三处 DSH 侧适配：
| 上游 | 本插件 |
|---|---|
靠拷贝到 ~/.claude/skills/ 被发现 |
bundle 注册：ctx.skills.register()，resourceBase 指向包内技能目录 |
抽取历史写 ~/.taste-skill/history.json |
写到工作区 .taste-skill/history.json，按项目隔离 |
| 假定 PATH 上有 Node 22 和 Chrome | 加载时探测 Node 与浏览器，把绝对路径和探测结果写进技能正文；没浏览器时干净退出并降级 |
因此上游更新时替换 skills/design-taste-frontend/ 即可，不需要改规则、库和流程。
适用场景与注意¶
适合在 DSH 里批量生产或重做前端页面、又希望规范不是靠提示词自觉遵守的人。插件以当前 dsh 进程权限运行，安装前应先读源码与许可证（封装层 MIT，技能本体为上游 MIT 原文），确认 cordis.patch.yml 与 index.js 的注册行为符合预期。
两个工程细节值得留意：一是 ctx.skills.register() 必须显式带 source 字段，少了它技能仍会出现在会话目录里，但真正 skill(name) 加载时会抛 loaded skill "…" source must be a string；二是没有浏览器时视觉闸门会降级，报告里必须如实说明「没有跑视觉检查」。
验证命令：
npm test # 24 项断言：导出、注册契约、描述长度、载荷完整性、加载期校验
npm run doctor # 打印 Node / 浏览器探测结果
npm pack --dry-run # 检查发布内容
卸载：
./scripts/uninstall-local.sh desktop
结尾¶
这个插件的价值不在给模型更多 prompt，而在把「方向、规范、返工」三件事做成可执行的脚本闸门：方向从研究库里发牌，规范由真浏览器逐条量，返工依据是自己看的截图。目录页在 https://www.skillhub.cn/plugins/stevenwang15/dsh-taste-skill，源码在 https://github.com/stevenwang15/dsh-taste-skill，技能本体来自 https://github.com/Leonxlnx/taste-skill 。
