前言¶
在 DeepSeek Harness（DSH）裏做前端開發，常見的一類問題是：代碼能跑、靜態檢查也能過，但上線後才發現流程彆扭、信息層級不清、關鍵操作藏得太深。axe、Lighthouse 這類工具能查對比度、缺 alt 等「絕對規則」，卻難以判斷「對某類用戶算不算問題」——例如刪除前的確認彈窗，對偶爾操作的用戶是保護，對每天處理上百條記錄的操作員則是負擔。沒有目標用戶上下文，很多「UX 問題」其實無法定義。
下面介紹社區插件 dsh-user-experience（維護者 DietCokewithSugar，GitHub 19 stars，分類：模型推理）。它以目標用戶畫像爲基準，在開發階段掃描 React、Vue 3 等前端源碼，定位體驗問題並給出可複覈的優化建議，而不是等上線後再收用戶反饋。
這是什麼¶
dsh-user-experience 是面向 DeepSeek Harness 的 UX 走查插件。一句話定位：讓 AI 模擬目標用戶走查產品，在開發階段發現體驗問題並給出具體、可定位、可複覈的優化建議。
它與常見 CLI 式檢查工具不同——README 明確將其描述爲 pipeline，而非獨立命令行工具。沒有 /ux 這類固定指令；用自然語言發起走查，或在前端文件改動後自動觸發複查即可。
若項目尚未定義用戶畫像，插件會依據 README 和路由推斷 1–3 個草稿畫像，經你確認後繼續走查，無需額外配置命令。
核心功能¶
畫像驅動的走查邏輯¶
每條發現都綁定活躍的目標用戶畫像。走查報告以自然語言開頭：哪一頁、發生了什麼、影響多大；文件路徑、規則 ID 等技術細節摺疊在「技術詳情」區塊，可一鍵複製給其他 AI 繼續處理。裁決同樣支持自然語言，例如「第二條不是問題」或「忽略三級以下」。
支持的輸入與證據等級¶
| 支持範圍 | 解析方式 |
|---|---|
React + TypeScript（.ts / .tsx） |
TypeScript 編譯器 API |
React + JavaScript（.js / .jsx） |
同上，按 TSX 解析 |
Vue 3（.vue SFC） |
@vue/compiler-sfc 分塊 + @vue/compiler-dom 模板 AST |
| CSS / SCSS / Sass / Less / PostCSS | 保守的間距、緊湊佈局、裝飾性內容候選檢測 |
| 渲染頁面（可選） | 當前 Harness 會話能打開應用時，檢查相關路由與視口 |
| 畫像任務模擬（可選） | 可在瀏覽器執行任務時，記錄步驟並評估流程冗餘 |
每條發現標註證據等級：static（靜態）、rendered（渲染）、interactive（交互）。無瀏覽器能力時，走查繼續基於靜態證據，不會假裝「看過頁面」。佈局密度、視覺語言、主操作等結論需要渲染證據；冗餘流程類發現需要交互式畫像走查。
明確不支持、且不會低質量猜測的棧包括 Svelte、Vue 2、小程序（.wxml）等。
自然語言入口與自動複查¶
用自然語言即可發起，例如「檢查結賬流程」或「這頁好用嗎」。畫像缺失時會先起草並詢問確認，之後立即開始走查。
編輯前端代碼後，走查會自動運行：不再重複詢問畫像，僅在發現一級或二級問題時打斷你。確認某條發現屬實後，插件生成面向編碼 AI 的任務 Prompt，描述觀察到的現象而非直接 prescribing 代碼改動，並允許文案層面的修改。
與通用無障礙工具的差異¶
axe、Lighthouse 驗證的是可客觀判定的規則。本插件把「對誰而言算問題」作爲前提，側重開發期的相對性體驗判斷，兩者互補而非替代。
安裝與啓用¶
在 DeepSeek Harness 中執行以下命令（SkillHub 目錄頁與 GitHub README 一致，當前版本 0.4.2）：
dsh plugin --profile web add dsh-user-experience@0.4.2
建議固定版本號，不要用 @latest：README 說明 pnpm 11 會暫緩 24 小時內發佈的版本，新 profile 下 @latest 可能解析不到包。更新版本可查閱 npm 版本列表。
安裝成功後刷新頁面即可，通常無需重啓；僅當市場提示無法熱加載時，再重啓或重載 web profile。
從 github: 安裝方式遷移¶
dsh plugin add github:DietCokewithSugar/dsh-user-experience 已不再可用：倉庫不再提交 lib/ 構建產物，pnpm 默認阻止構建步驟。應改用包名安裝，無 github: 前綴：
dsh plugin --profile web add dsh-user-experience@0.4.2
若市場仍解析到 Git 引用，需從 profile 的 package.json 刪除舊的 github: 依賴行，並刪除該 profile 下的 node_modules 與 pnpm-lock.yaml，再重新執行安裝命令。
典型用法¶
1. 自然語言發起走查¶
在 Harness 對話中直接說明意圖，例如檢查某個頁面或流程是否可用。若尚無畫像，插件會展示 1–3 個推斷出的目標用戶，確認後按這些視角走查。
2. 審閱報告並裁決¶
報告卡片先給出頁面、現象與影響描述。需要深入時展開技術詳情，查看靜態、渲染或交互證據。認爲某條不成立時，點擊按鈕或用自然語言說明即可。
3. 確認後交給編碼 AI¶
對確認的問題，複製插件生成的任務 Prompt 到另一會話或工具，由 AI 結合完整項目上下文提出修改方案。插件本身不自動改代碼。
4. 改代碼後的自動走查¶
保存前端文件後，走查在後臺重新運行，僅對高優先級（一級、二級）問題提示，不打斷常規編碼節奏。
適用場景與注意¶
適合誰： 在 DSH web profile 下開發 React（TypeScript/JavaScript）或 Vue 3 前端的團隊，希望在合併或發佈前用畫像視角發現流程、佈局、主操作等方面的體驗風險；當前 Harness 會話能啓動應用時，還可結合瀏覽器證據做渲染與交互層驗證。
權限與安全： 插件以當前 DSH 進程權限運行，可訪問工作區內的源碼與會話上下文。安裝前應閱讀倉庫源碼與 LICENSE，README 也在安裝章節附有安全說明（#installation）。
生態說明： DSH 奉行「一切皆插件」；SkillHub（skillhub.cn）是面向中國用戶的社區目錄，與 DeepSeek、幻方無官方從屬關係，本文安裝命令以目錄頁與 GitHub 倉庫爲準。
能力邊界： CSS 分析可提供檢查線索，但留白、層級、視覺質量等結論在無真實渲染路由時不會斷言。不支持的技術棧會如實標註，不做低質量猜測。
結尾¶
dsh-user-experience 把目標用戶畫像、源碼靜態分析與可選的瀏覽器證據串成一條開發期 UX 走查鏈路：自然語言或改碼觸發，報告可讀可裁決，確認後可導出任務 Prompt 繼續迭代。若你在 Harness 裏做前端並關心「對真實用戶是否好用」，可以按固定版本安裝試用。
- SkillHub 目錄頁：https://www.skillhub.cn/plugins/DietCokewithSugar/dsh-user-experience
- GitHub 倉庫：https://github.com/DietCokewithSugar/dsh-user-experience
