前言¶
用 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 。
