thedaviddias/Front-End-Checklist · 上手攻略
- 仓库：thedaviddias/Front-End-Checklist
- 链接：https://github.com/thedaviddias/Front-End-Checklist
- 分类：ai
- 作者：Jay
- 更新：2026-07-13
这是什么
Front-End Checklist（前端清单）是一个开源的前端质量体系，面向人类开发者和 AI 智能体。它将前端最佳实践转化为一套可浏览、可执行、可验证的审查工作流。与传统 Checklist 不同的是，它深度集成 MCP（Model Context Protocol），让 AI 编码助手（如 Claude Code、Cursor）可以直接调用同一套规则库进行代码审查、规则查找和修复建议。
核心定位：AI 时代的前端质量基础设施，让 AI 智能体和人类开发者使用同一套标准。
解决什么问题
前端开发中常见的问题： - 不知道哪些检查项真正重要，容易遗漏关键项（性能、安全、可访问性） - 代码审查时标准不统一，review 质量参差不齐 - AI 编码助手生成的前端代码质量不可控，缺乏系统性验证手段 - 规则散落在各处，团队成员对"好前端"的理解不一致
Front-End Checklist 将 385 条规则（覆盖 11 个分类）集中管理，提供 Web 浏览、MCP 调用、Skill 集成三种使用方式，让前端质量检查可重复、可审计、可对接 AI 工作流。
快速安装
直接使用（Web）
无需安装，访问 https://frontendchecklist.io 即可浏览全部规则、查看优先级、开始清单工作流。
MCP Server（AI 智能体集成）
# 方式一：使用公共 MCP 端点（推荐快速体验）
# 在 Claude Code / Cursor 等 MCP 客户端中配置：
# MCP 服务器地址：https://mcp.frontendchecklist.io
# 方式二：本地安装 CLI（需要 Node.js）
git clone https://github.com/thedaviddias/Front-End-Checklist.git
cd Front-End-Checklist
pnpm install
# 本地启动 MCP 服务器
pnpm mcp:start
⚠️ 本地 MCP 启动命令以仓库最新 README 为准，上方仅供参考。
Skill 安装（Claude Code 等支持 Skill 的工具）
px skills add frontendchecklist/skills
# 安装 HTTPS 专项规则
px skills add frontendchecklist/skills --skill https
核心用法
1. Web 交互式审查
访问 https://frontendchecklist.io ， - 选择"Curated Checklists"（策划清单）可按场景快速定位（Launch、Accessibility、SEO、Performance 等） - 选择"Browse by Category"可探索 11 个分类下的全部规则 - 每条规则有详细说明、修复建议和验证步骤
2. MCP 工具调用（AI 工作流）
MCP Server 暴露 11 个工具，AI 智能体可直接调用：
| 工具名 | 用途 |
|---|---|
review_code |
对粘贴的 HTML/CSS/JS/React/Next.js 代码进行清单审查 |
audit_url |
对公开 HTTPS 页面进行无障碍、性能、SEO 审查 |
get_rule |
获取特定规则的详细说明与修复代码示例 |
search_rules |
按关键词、分类、优先级搜索规则 |
get_workflow |
获取特定场景的工作流（如 Launch、Accessibility 审查） |
get_checklist_rules |
获取策划清单中的规则集 |
示例提示词：
Use the Front-End Checklist MCP to review this React component and report the highest-confidence findings first.
Use the Front-End Checklist MCP to audit https://example.com for accessibility, performance, and SEO issues.
Use the Front-End Checklist MCP to explain the canonical URL rule and suggest a fix with code examples.
3. 按分类规则概览
| 分类 | 规则数 | 主要内容 |
|---|---|---|
| Accessibility | 95 | WCAG 合规，屏幕阅读器兼容，键盘导航 |
| SEO | 94 | Meta 标签、结构化数据、爬虫可访问性 |
| Performance | 43 | Core Web Vitals、资源加载、渲染优化 |
| CSS | 32 | 响应式设计、CSS 最佳实践 |
| JavaScript | 26 | 现代模式、代码组织、安全实践 |
| Images | 25 | 图片优化、响应式图片、WebP/AVIF |
| HTML | 25 | 语义化标签、表单、文档结构 |
| Security | 22 | CSP、CORS、HTTPS、子资源完整性 |
| Testing | 13 | 测试策略、QA 方法 |
| Privacy | 5 | Cookie 同意、用户数据权利 |
| I18n | 5 | 本地化、语言声明、翻译工作流 |
典型适用场景
- AI 智能体代码审查：在 Claude Code / Cursor 中，让 AI 直接调用 MCP 工具审查自己生成的前端代码，修复安全、可访问性、性能问题
- PR 审查工作流：reviewer 在合并前用 MCP 工具快速扫描，输出结构化报告
- 项目启动检查：新项目上线前，按"Launch Checklist"跑一遍 16 条关键规则
- 无障碍审计：Accessibility 分类 95 条规则，专项审查 WCAG 合规
- 团队标准对齐：所有成员使用同一套规则库，消除"我觉得重要"的主观差异
坑与注意
- 规则数量多，不要一次性全部执行：385 条规则按优先级分为 Critical / High / Medium / Low，建议从 Critical 开始
- MCP 公共端点依赖网络：使用
mcp.frontendchecklist.io需要网络通畅，本地安装更适合离线场景 - Skill 安装方式依赖
pxCLI：部分 AI 工具（如 Goose）需要确认是否支持px skills add命令 - 规则偏向 SPA / 现代 Web：传统多页应用的部分规则可能不完全适用，按需选取
- 仅覆盖前端规则：不涉及后端 API、数据库、基础设施层面
与同类对比
| 工具 | 定位 | AI 集成 | 规则数 | 适用场景 |
|---|---|---|---|---|
| Front-End Checklist | 前端质量标准 | MCP + Skill | 385 | AI 编码助手代码审查、PR 检查 |
| Lighthouse | Google 官方性能审计 | CI/CD 插件 | ~100 | 自动化性能测试 |
| axe DevTools | 无障碍专项 | 浏览器插件 + CLI | ~100 | WCAG 合规检测 |
| checklist.ws | 通用清单工具 | 无 | 自定义 | 通用工作流管理 |
核心差异：Front-End Checklist 是唯一一个将 AI 智能体作为一等公民的工具，MCP 深度集成让 AI 可以主动调用规则库；Lighthouse 更偏性能专项，axe 更西安无障碍，Front-End Checklist 则覆盖前端全维度。
一句话推荐结论
如果你用 AI 编码助手写前端代码，Front-End Checklist 是目前最值得接入的"AI + 前端质量"工具——让 AI 帮你写代码，也帮 AI 审查代码。
来源：GitHub README、frontendchecklist.io、MCP 文档页