内容
FE器 MCP
**用于端质量检测。**
hallmark 检查美 检测器性 + 无障碍性式 + 交互性好的用户界面不仅要漂亮，还要好用。
## 现比较
我们拿一个典型的的 SaaS 登陆紫色渐变色，堆叠的卡片，缺少替代视口元标签，死链接 — 这是 Claude Code 或 Cursor生成的常见结果）来工具。
| | hallmark 检测器 |
|---|---| **检测到的问题** | **16** |
覆盖 | 仅性 | 美观性 +性 + 响应式 +性 |
**hallmark到：**
- 密集
- 堆叠片布局检测
**FE器检测到所有这些缺少替代文本 🚨
- 4 个可点击的 div 没有角色 🚨
- 缺少视口元标签 🚨
- 没有 CSS 媒体查询（不响应式）
- 多列网格没有移动设备断点
- 交互元素上没有悬停/焦点视觉反馈
- 2 个链接没有目标（死链接）
按钮上缺少指针光标页面 →/sample-ai-page.html) | [自己运行installation)
hallmark 是一个优秀检查工具。FE 检测器是一个 **完整的前端控**。
## 为什么存在hallmark](https://utlope/hallmark证明了开发者关心 AI 生成质量。但是 hallmark 只视觉模式**（渐、间距、字体）。您的用户还关心：
- 能否浏览此页面？
在手机上是否可用？
按钮点击时是否真正
FE 检测器弥补。
## 检查内容 条规则）
### 美5 条规则）
- 紫色-蓝色渐变色- 过度的边框半径
- 低对比度文本
间隔的密集内容
-叠的卡片布局检测障碍性（5）
- 缺少图片替代- 交互元素没有- 表单输入没有关联
- 积极的 tabindex 值
- 可点击的 div角色
### 响应式（5 条规则）
- 像素宽度
- 缺少视口元标签
- 媒体查询
- 刚性网格列没有移动设备备用方案
- 触摸目标
### （5 条规则）
- 交互元素上缺少指针光 没有悬停/焦点视觉反馈
- 表单没有- 空链接或仅哈希链接
- 禁用元素
## 安装
```bash 通过 npm 全局安装 fe-inscp
# 或使用 n
npx fe-inspector-mcp
```
## MCP将以下内容添加到您的客户端配置中（例如，codex/config.toml Cursor MCP 设置）：
``` "mcp {
"fe-inspector "command": "",
"args": ["pector-mcp"]
}
}
```
或用于：
```json
{
mcpServers": {
-inspector": {
"command": "node",
"args": ["/path/to/fe-inscp/dist/index.js }
}
}
```
用工具
### `inspect对 HTML 字符串运行所有。
**参数：**
`（必填）：要检查的 HTML 内容
- `url`（可选）：用于上下文的 URL
- `categories`（可选）：要检查的特定类别（`美观性`、`无障碍性`、`响应式`、`交互性`）
- `format`（可选）：`text`（默认）或 `json`
**示例输出：**
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
FE — 前端
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
生成：20207-21T0700Z
元素 187
摘要：发现 2 个3 个警告，15。
── 美观性（2） ──
] ae-001: 避免紫色-蓝色渐变背景
元素 <section> 使用紫色-蓝色渐变背景
修复：中性或品牌特定的方案 ── 无障碍性 ──
] a11y-001: 缺少 <img> 的 图片 "/hero.jpg" 没有替代文本
修复：添加描述性替代属性
── 响应式（1） ──
[X] rp-002: 缺少视口 <meta> 标签
没有视口元标签，移动浏览器可能会错误缩放
修复：添加 <meta name="viewport" content="width=device-width, initial-scale=1">
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
质量评分/100
15 通过 | 3 警告 |
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
```
### `inspect_html_fix`
与 `inspect_html` 相同，但返回结构化的 Markdown 修复建议，编码代理可以自动应用这些建议。
_categories`
列出和规则数量。
review_design` ✨（ 无法做到这一点）
设计审查。**即将构建的内容，并在编写获取常见前端陷阱的检查清单。
**参数 `description`（您正在规划的，“一个带有电子密码的登录表单，一个带有的导航栏，一个定价卡）
**示例：**
```
代理：review="一个带有英雄部分卡、 testimonial 和页脚表单的"
结果：
[!]性] 必须：所有替代文本
每个 <img> 都需要装饰性图片使用 alt=""。
[!] [响应 必须：视口 每个页面都需要 <meta name="viewport">~] [响应式] 应该：响应式网格断点
使用 grid-template-columns with auto-fit/auto-fill 或添加 @media 断点。
[~] [交互性] 应该：加载状态
在数据获取期间显示骨架屏幕或加载动画。
[~] [语义化] 应该：语义化 HTML 结构
使用 <header>、<main>、<section> 代替通用 <div>。
---
3 必须修复 应该修复，总共 7 个要点需要**为什么这很重要：** hallmark 只在代码检查代码。`review 在您编写任何代码您的意图 — 在设计问题，此时修复问题的成本## 与代理一起使用
**Claude Code:**
```
> 检查我刚刚
```
**Codex```
codex
> 在页面运行 fe-ins```
**Cursor:**
在 Cursor 设置 MCP 服务器 → MCP → 添加服务器。
## 与 hallmark 比较
| | hallmark | FE 检测器 |
|---|---|---|
| **现实世界捕获率**（SaaS 登陆页面） | 2 个问题 | **16 个问题**（8 倍更多） |
| **美观性检查 57 条规则 | 条聚焦规则 |
|障碍性（a11 | ❌ | 条规则 |
| **移动设备）**❌ | 5 条| **交互逻辑**❌ | 5 条 **总规则** | 57（所有美观性） | **20（）** |
| **** | 被动技能（代理文本） | MCP + JSON + 修复建议） |
| ** | 仅 SKILL.md | MCP 服务器 + SK## 许可证
MIT
