dsh-taste-skill

dsh-taste-skill

给 DSH 装一个前端设计技能：先定方向，再用真浏览器量，最后看着自己的截图返工。

这是 tasteskill v2（技能名 design-taste-frontend）的 DeepSeek Harness 原生封装。装进 profile 后，DSH 的技能目录里多出一项 design-taste-frontend：模型按描述自动加载，也可以输入 /design-taste-frontend 强制调用。

English summary — A DeepSeek Harness plugin that registers one native skill, design-taste-frontend (MIT port of tasteskill v2). Directions are dealt from a researched library instead of the model's taste, the page is measured in a real browser at 1440/768/390, photos are openly licensed with title/author/licence recorded, and the agent iterates on its own screenshots against a juror's rubric.

---

它是什么

形态	一个 DSH bundle 插件，只注册 1 个原生技能 design-taste-frontend
用来做	落地页、营销站、作品集、产品页、活动页；仪表盘 / 后台 / 设置 / 收件箱这类应用界面
能做	从零设计、重设计、评审（只给意见、不动代码）
不做	不提供模板、不改 DSH 自己的界面、不装任何依赖、不需要 API key
运行时	Node 22+；Chrome / Edge / Chromium 仅视觉检查需要，缺了会降级

它解决什么问题

模型默认做出来的页面是「见过的页面的平均值」：居中标语、三行副标题、上方一个小标签、一排图标卡片、柔和渐变、几根细分割线、等宽字体注释。单看每条都没错，合起来没有任何一个决定是为这个客户做的。

这个技能用四件事把那套平均值换掉：

1. 方向由脚本发牌，不让模型拍脑袋。 20 个从真实获奖站点研究出来的方向，每次随机发 3 个，模型只能从中挑一个能承载客户自身材料的，而不是选最眼熟的那个。
2. 想法必须来自主体。 页面的概念句从客户的盘点清单里长出来（名字的意思、所在的街道、那个限制条件、它产出的东西），再用「最近的竞争者」测试：如果这句话换成隔壁那家也成立，它就属于品类，不属于这个客户。
3. 规范靠测量，而不是靠自觉。 标题两行以内、不要 eyebrow 小标签、不要等宽字体、不要 01/02/03 编号、不要发丝线、不要渐变、静止元素不要阴影、图标卡片和玻璃拟态一律不要——这些由真浏览器逐条量，不是写在提示词里求模型遵守。
4. 看自己的截图返工。 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. 应用界面也管（v2.1）。 仪表盘、后台、设置、收件箱这类「人在里面干活」的界面走 references/app-screens.md 的独立流程：自己的抽卡（draw.mjs --app）、自己的规则（安静的边框、对齐的数字、颜色只花在数据上、手机上导航折叠）、自己的检查（inspect.mjs --app）。共 7 类风格 / 5 个壳 / 25 个屏式。

快速开始

安装

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）。其余全部离线可用，不装任何依赖、不需要 API key。

一次构建怎么走

步	做什么
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，大头是找图 / 画图和返工。

内容清单

内容	数量	说明
设计方向	20	每个方向含想法引擎、构图习惯、适合的行业与语气
Hero 构图	58
版面蓝图	185	按 section 角色索引
字体系统	44	真实可免费商用的字体 + 尺度与排版参数
配色	56	每套含角色与比例，不只是色值
研究站点	202	从 247 个精选站点（One Page Love、Awwwards Sites of the Day）蒸馏
动效配方	18
应用界面	7 类风格 / 5 个壳 / 25 个屏式	仪表盘、后台、设置、收件箱…
摄影集	19 组	关键词 + 可直接取用的氛围图（picsum / Unsplash）
参考文档	11 篇	copy、type、colour、layout、imagery、motion、scenes、critique、tells、research、app-screens
脚本	6 个	draw、assets、lint、inspect、scenes、browser-check（另有零依赖 lib/）
评估集	evals/evals.json	对照测试用的 brief

目录结构

dsh-taste-skill/
├── package.json                 # dsh.bundle.patch → cordis.patch.yml
├── cordis.patch.yml             # insert: taste-skill
├── index.js                     # ctx.skills.register + 把宿主事实写进技能正文
├── skills/design-taste-frontend/ # 技能本体（与上游同构）
│   ├── SKILL.md                 # 10 步流程、house rules、laws、special cases
│   ├── references/              # 11 篇参考
│   ├── scripts/                 # 6 个脚本 + 零依赖 lib/
│   ├── library/                 # 设计库 JSON
│   ├── assets/                  # base.css / base.js / app.css / charts.js / scenes
│   └── evals/
├── scripts/install-local.sh     # 带备份的本地安装
├── scripts/uninstall-local.sh
└── test/smoke.mjs               # 24 项契约与载荷断言

与上游的关系

技能内容与上游同构：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/ 即可。

版本

插件	上游技能	说明
2.1.6	2.1.5	当前版本

开发与验证

npm test              # 24 项断言：导出、注册契约、描述长度、载荷完整性、加载期校验
npm run doctor        # 打印 Node / 浏览器探测结果
npm pack --dry-run    # 检查发布内容
npm pack && ./scripts/install-local.sh desktop   # 装到本机（会先卸旧版再装）

test/smoke.mjs 里有一条针对 DSH 契约的回归断言值得注意：ctx.skills.register() 必须显式带 source 字段。少了它，技能仍然会出现在会话技能目录里，但真正 skill(name) 加载时会抛 loaded skill "…" source must be a string——因为 dsh-skill 只在加载时校验。

跟进上游

rm -rf skills/design-taste-frontend
cp -R /path/to/taste-skill/skills/taste-skill skills/design-taste-frontend
# 重做两处适配：draw.mjs / lib/app-draw.mjs 的抽取历史路径；inspect.mjs / scenes.mjs 的无浏览器退出
# 更新 package.json 的 version / tasteSkill.upstreamVersion，然后 npm test && npm pack

卸载

./scripts/uninstall-local.sh desktop

从 dsh.profile.bundles 摘掉、pnpm remove，并用最近一次 *.bak-<时间戳> 恢复 profile 的三个文件。之后重启 DSH。

许可与署名

• 封装层：MIT。
• 技能本体来自 Leonxlnx/taste-skill，MIT，Copyright (c) 2026 Leonxlnx，原样收录于 skills/design-taste-frontend/；LICENSE 为上游原文。
• 库里的占位照片来自 Unsplash（经 picsum.photos），仅作氛围；assets.mjs 找到的图片保留各自许可，必须按 --credits 在页面署名。