前言¶
在 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
