前言¶

DeepSeek Harness（dsh）把模型、工具、會話、沙箱和界面都做成插件，官方說法是「一切皆插件」。社區裏已經有不少界面增強插件，多數是改 Harness 自己怎麼看、怎麼點。前端項目裏還有另一類問題：刪除前要不要二次確認、提交按鈕在請求發出後有沒有禁用、表單中途退出會不會丟進度。axe、Lighthouse 這類工具能覈對對比度、缺失 alt 這類絕對規則，但體驗問題往往是相對的——同一套二次確認，對偶爾操作的用戶是保護，對每天處理上百條記錄的操作員可能是損耗。

dsh-user-experience 把目標用戶畫像當成走查前提：沒有明確「給誰用」，就不下體驗結論。它掃描 React / Vue 源碼定位問題，能打開頁面時再補瀏覽器證據，確認後給出可複製給編碼 Agent 的任務 Prompt。本文按插件目錄頁、GitHub 倉庫 README / package.json 覈對後整理。

這是什麼¶

dsh-user-experience 是一款面向 DeepSeek Harness 的 UX 走查插件，由 DietCokewithSugar 維護，許可證爲 MIT。社區插件目錄把它歸在「界面增強」，當前 GitHub 星標爲 18。倉庫 package.json 版本爲 0.4.1，插件配置 id 爲 ux-experience。

它解決的不是給 Harness 換皮膚，而是在開發階段提前發現前端體驗問題。倉庫 README 把它定位成流水線，而不是要記斜槓命令的 CLI：直接說話，或者改完前端文件即可。走查結論帶文件位置和規則編號，但不自動改代碼。

能力邊界以倉庫 README 爲準：

支持 React + TypeScript（.ts / .tsx）、React + JavaScript（.js / .jsx）、Vue 3（.vue SFC）
支持 CSS / SCSS / Sass / Less / PostCSS 的保守候選提取；視覺結論仍要真實頁面證據
當前 Harness 會話能打開項目時，可進一步取截圖、DOM 測量，並按畫像執行關鍵任務
明確不支持 Svelte、Vue 2、小程序（.wxml）等；檢出時如實告知，不給低質量猜測

社區目錄 deepseek-harness-plugin.com 是獨立站點，與 DeepSeek / 幻方沒有官方從屬關係，不能當成官方應用商店。官方倉庫在 deepseek-ai/deepseek-harness，插件發現方式之一是 GitHub 的 dsh-plugin topic。

核心功能¶

人設驅動，沒有畫像就先起草再問¶

每條結論都錨定到明確的目標用戶。項目裏還沒有畫像時，插件會從 README 和路由猜 1–3 個草稿，用短卡片問一句「按這些用戶來看？」，確認後再走查。之後畫像寫進 .ux/personas.yml，可隨 git 共享，隊友不必重複這一步。

走查還會從項目文檔和本次業務流程判斷產品類型（consumer、enterprise、ecommerce、content、finance、healthcare、developer-tool、internal-tool 或 other），再套對應的體驗重點。

27 條規則，按證據等級說話¶

規則以 Nielsen 可用性啓發式爲基礎，共 27 條。模型判斷爲主，AST / CSS 求證爲輔。每條結論標記爲 static（源碼/CSS）、rendered（真實截圖/DOM/尺寸）或 interactive（記錄過 Persona 任務步驟）。沒有瀏覽器能力時繼續靜態走查，不會假裝看過頁面。

佈局密度、視覺語言、主要操作是否清晰，至少要有 rendered 證據；流程冗餘、導航過深、表單校驗過晚這類問題，至少要有 interactive 任務記錄。CSS 只能提供檢查線索，沒有真實路由截圖時，不會斷言留白、層級或視覺質量有問題。

高頻檢查順序是：反饋與系統狀態 → 表單與流程恢復 → 信息架構、導航和主要操作 → 認知負荷、一致性、邊緣狀態、基礎可用性與性能。最終報告仍按嚴重度排序。界面上用一級到四級問題，P0–P3 只作內部標識。

下面幾條能說明規則怎麼和工作方式掛鉤：

R-04 不可逆操作缺二次確認、R-07 提交中按鈕未禁用：模型加 AST
R-09 深淺色模式適配缺失：純 AST，不消耗 token
R-10 佈局擁擠、R-13 頁面用途或主要操作不清：必須有 rendered 證據
R-14 關鍵任務冗餘交互、R-20 中途退出丟失表單進度：必須有 interactive 記錄

改完前端文件會自己跑一次¶

改完前端文件（包括 CSS），回合收尾時自動對該文件所屬的完整組件 / 頁面做一次靜態走查，不問畫像、不問範圍。沒有畫像就先寫成草稿再查。只有一級 / 二級問題纔會出聲，避免打斷寫代碼。自動走查默認開啓，可用 .ux/rules.local.yml 或插件配置關掉。

用戶用自然語言主動發起的走查，會在工具可用時升級到截圖和 Persona 任務。

報告卡片與確認閉環¶

報告首屏只講用戶能看懂的信息：哪個頁面、出了什麼事、嚴不嚴重。文件路徑、規則 ID、內部編號折在「技術細節」裏，展開後可複製成結構化 YAML。判定不用記編號：點「確認存在 / 不是問題」，或者說「第 2 條不成立」「三級以下全部忽略」。

確認某條問題後，卡片提供「複製給 AI 的任務 Prompt」。Prompt 只描述觀察現象、發生場景、用戶影響和驗收目標，不預設代碼改法，並寫明插件只讀到部分代碼、要求補齊完整上下文。文案問題允許直接改文案。

下次走查時若某條問題消失、且該位置確實被重新掃描，插件把它記成隱式確認——用戶改掉了，這條成立。位置本次沒掃到或代碼整塊刪除，記爲 stale，不計入「掃了沒發現」。

運行模式按場景選擇：改動觸發的走查用 auto（出報告、不打斷）；用戶主動走查用 review（批量確認）；精細調規則時可改成 interactive（逐條確認）。判定順序是 .ux/rules.local.yml 的 mode → 插件配置 → 自動探測。

安裝與啓用¶

社區目錄頁給出的安裝命令是：

dsh plugin add github:DietCokewithSugar/dsh-user-experience

倉庫 README 針對 Web 客戶端，寫成指定 web profile（本插件在 package.json 裏聲明瞭 dsh.client.platform 爲 web）：

dsh plugin --profile web add github:DietCokewithSugar/dsh-user-experience

需要可復現安裝時，目錄頁和倉庫都建議固定 commit 哈希。倉庫 README 的寫法如下（哈希請到 main 提交記錄複製最新 40 位 SHA；下面這一枚來自 README 原文，用於繞過部分 Windows + pnpm 11 上的 getRepoRefs / resolveGit 失敗）：

dsh plugin --profile web add github:DietCokewithSugar/dsh-user-experience#57fe06eb8bc1313a931bfb50eb2416c52bb1fdea

若上次失敗已經把 dsh-user-experience 寫進了 profile 的 package.json，先刪掉那一行再裝。安裝成功後刷新頁面即可，一般不必重啓。倉庫已提交預構建 lib/，從 GitHub 安裝時不執行 prepare / preinstall / postinstall。僅當提示無法熱加載時，再重啓或重新加載 web profile。

本地構建與測試使用 @deepseek-ai/dsh-*@0.1.0-rc.6 和 @deepseek-ai/cordis@4.0.1；運行時由 profile 通過 peer 提供，DSH 範圍爲 >=0.1.0-rc.6 <0.2.0。Harness、Cordis、React 都是宿主 profile 的 peer dependency，本插件不往 profile 裏再裝一份私有副本。

安裝後可用配置（在 profile 的 cordis.patch.yml 或 --patch 層按 id 覆蓋；用戶的 .ux/rules.local.yml 優先級更高）：

- id: ux-experience
  config:
    maxScanFiles: 300
    maxCandidatesPerRule: 5
    maxCandidatesPerFile: 25
    maxFindings: 30
    excludePatterns: ['test', 'stories']
    mode: detect
    autoScan: true
    autoScanEditTools: ['write', 'edit']
    autoScanMaxFiles: 20
    autoScanDebounceTurns: 1
    outputLanguage: auto

outputLanguage 爲 auto 時，先跟隨當前用戶語言，再回退到項目主 README；也可顯式設爲 zh-CN 或 en。報告卡片和 AI 任務 Prompt 支持中英文。

典型用法¶

倉庫 README 強調：直接說話，不用學 /ux。

第一次走查可以這樣說：

看看下單流程從選品到支付好不好用
我們主要給運營用

項目裏還沒有畫像時，會先出一張短卡片確認目標用戶。說「就這些」或改一句，走查接着跑。

報告出來之後，繼續說話或點卡片按鈕：

第 2 條不成立
這幾條都對
三級以下全部忽略
刪除那條我確認

確認某條問題後，點「複製給 AI 的任務 Prompt」，粘貼給編碼 Agent。改完前端文件則不必再發指令：回合收尾會自動跑靜態走查，只有一級 / 二級問題才提示一句。

倉庫文件約定如下：

文件	是否提交 git	說明
`.ux/personas.yml`	提交	項目級用戶畫像，團隊共享；CI 模式依賴它
`.ux/glossary.yml`	提交	術語表與判定，後續只做增量比對
`.ux/rules.local.yml`	不提交	個人走查偏好，支持 `mode` 與 `autoScan`
`.ux/history.jsonl`	不提交	指紋歷史賬本，用於長期指標，不是判定結果

建議在項目 .gitignore 中加入：

.ux/rules.local.yml
.ux/history.jsonl

個人偏好示例：

# .ux/rules.local.yml
mode: review
autoScan:
  enabled: true
  debounceTurns: 1

適用場景與注意事項¶

適合這些情況：

正在用 DeepSeek Harness 寫 React（TypeScript / JavaScript）或 Vue 3 前端，希望在合入前看到可定位的體驗問題
團隊能對「給誰用」達成共識，願意把 .ux/personas.yml 放進倉庫
需要把走查結果交給另一個編碼 Agent 去改，而不是讓走查插件自己改代碼

使用時注意：

插件以當前 dsh 進程的權限運行，安裝時可能執行代碼。安裝前應檢查源代碼倉庫和許可證；生產環境建議鎖定可信 commit。
沒有瀏覽器 / 截圖工具、或項目當前跑不起來時，只能做靜態走查。佈局、視覺、觸控熱區、流程冗餘等結論會被降級或不出。
不支持 Svelte、Vue 2、小程序。把這類項目交給它，不會得到可靠的體驗結論。
插件不自動改代碼。確認問題後的 Prompt 也只描述現象，具體改法要由編碼 Agent 結合完整倉庫決定。
自動走查掃的是組件 / 頁面，不是 diff 行；改了一處樣式，報告可能覆蓋整頁。可用 autoScanDebounceTurns 控制頻率。
目錄頁收錄日期爲 2026-08-15，倉庫仍在快速迭代。安裝命令、配置項和規則集合以當時打開的目錄頁與 GitHub README 爲準。

小結¶

dsh-user-experience 把「給誰用」寫成走查前提，用 27 條規則掃 React / Vue 源碼，能打開頁面時再補截圖和任務記錄。它不改你的代碼，只給出可定位、可確認、可轉給編碼 Agent 的體驗問題。

目錄頁：https://deepseek-harness-plugin.com/zh-CN/plugins/dsh-user-experience/

GitHub：https://github.com/DietCokewithSugar/dsh-user-experience

用 dsh-user-experience 在開發階段按用戶畫像走查前端體驗

前言¶

這是什麼¶

核心功能¶

人設驅動，沒有畫像就先起草再問¶

27 條規則，按證據等級說話¶

改完前端文件會自己跑一次¶

報告卡片與確認閉環¶

安裝與啓用¶

典型用法¶

適用場景與注意事項¶

小結¶

精选优惠券

用 dsh-user-experience 在開發階段按用戶畫像走查前端體驗

前言¶

這是什麼¶

核心功能¶

人設驅動，沒有畫像就先起草再問¶

27 條規則，按證據等級說話¶

改完前端文件會自己跑一次¶

報告卡片與確認閉環¶

安裝與啓用¶

典型用法¶

適用場景與注意事項¶

小結¶

精选优惠券

相關文章