Front-End-Checklist
thedaviddias/Front-End-Checklist加载项目详情…
本应用为开源项目，仅供学习研究，请遵守其开源协议。
微信扫码咨询客服
POMOAI — 让开源 AI 即刻运行
加载项目详情…
本应用为开源项目，仅供学习研究，请遵守其开源协议。
2024 年底，一款国内知名 SaaS 产品的 PM 在 Reddit 发帖诉苦：他们的产品功能业界领先，但用户留存率就是上不去。评论区一句话戳中要害——"你们的网站 Lighthouse 分数低于 30，打开要 8 秒，移动端根本没法用"。功能再强，网站体验差，用户用脚投票。这不是个例。根据 Google 的研究，网站加载时间每增加 1 秒，转化率下降约 20%。前端质量，往往是产品被低估的最后 10%。
Front-End Checklist 正是为解决这一问题而生——它将前端开发的全部最佳实践，浓缩成一份可执行、可审核、可自动化的清单系统。截至 2026 年，该项目在 GitHub 拥有超过 73,000 颗星，被翻译成 20+ 语言，成为前端质量领域的事实标准。
这个项目的故事始于 2017 年。作者 David Dias 在多次团队 Code Review 中发现同一个问题：前端开发者对 HTML 语义化、性能优化、安全头配置等基础知识掌握程度参差不齐，每次都要从零解释同一套标准。他决定把这些知识整理成一份清单，挂在 GitHub 上供自己和团队参考。
最初的形态极为简单——一个 README.md 文件，列出一系列检查项。出乎意料的是，这份清单迅速在社区传播，单周星标突破 1 万。2018 年开始支持多语言，2019 年增加交互式网站，2023 年加入 AI Agent 支持（MCP 协议），2024 年上线 MCP Server 让 AI 能够真正「执行」这些检查项。
八年时间，它从一张便签纸，演变成了一套覆盖 385 条规则、11 个维度 的完整前端质量体系。
项目将前端质量检查分为 11 个核心维度：
| 维度 | 规则数 | 典型检查项 |
|---|---|---|
| Accessibility | 95 | ARIA 标签、键盘导航、颜色对比度 |
| SEO | 94 | meta 标签、结构化数据、canonical URL |
| HTML | 25 | 语义化标签、charset 声明、meta viewport |
| CSS | 32 | 关键 CSS、响应式断点、CSS 变量使用 |
| JavaScript | 26 | 错误处理、依赖安全、代码分割 |
| Performance | 43 | LCP、CLS、FCP 指标、预加载策略 |
| Images | 25 | alt 文本、图片格式、WebP/AVIF 支持 |
| Security | 22 | CSP 头、HTTPS、HSTS、安全 Cookie |
| Testing | 13 | E2E 测试、单元测试覆盖率 |
| Privacy | 5 | Cookie 声明、数据追踪配置 |
| I18n | 5 | lang 属性、多语言配置 |
每条规则都有 priority（Critical/High/Medium/Low）、prompt（供 AI 执行的检查提示）、verification（验证步骤）和 examples（修复示例）。
直接访问 frontendchecklist.io，可以按维度浏览所有规则，也可以使用预设的快捷清单（如"发布前必检"、"无障碍专项"）。每个规则页包含检查说明、修复方案、验证步骤和 AI 提示词，点击即查，无需 clone 代码。
这是该项目最具前瞻性的设计。通过 MCP（Model Context Protocol）协议，AI Agent 可以直接连接到 Front-End Checklist 的规则库，对代码或 URL 进行自动化审查：
// 示例：让 AI Agent 审查一个 React 组件
// 提示词：Use the Front-End Checklist MCP to review this React component
// and report the highest-confidence findings first.
// 示例：让 AI Agent 审查一个公开页面
// 提示词：Use the Front-End Checklist MCP to audit https://example.com
// for accessibility, performance, and SEO issues.
MCP Server 提供 11 个工具：review_code（代码审查）、audit_url（页面审查）、search_rules（规则搜索）、get_workflow（获取工作流）等。官方托管地址：mcp.frontendchecklist.io，也支持本地部署。
# 安装到 Hermes Agent
npx skills add frontendchecklist/skills
npx skills add frontendchecklist/skills --skill https
安装后可以在本地开发环境中通过 Agent 直接调用规则集，适合开发流程中的即时代码审查。
项目采用现代 Monorepo 架构，核心依赖：
.mdx 文件packages 目录下包含 23 个子包，职责分离清晰：packages/rules（规则数据）、packages/content（内容处理）、packages/mcp（MCP Server）、packages/cli（命令行工具）、packages/analytics（数据统计）等。
git clone https://github.com/thedaviddias/Front-End-Checklist
cd Front-End-Checklist
pnpm install
pnpm dev
# 打开 http://localhost:3000
本地开发环境需要 Node.js（.nvmrc 指定了版本），无 Docker 支持，不支持 Vercel 以外的平台一键部署。
# 方式一：使用官方托管端点（零配置）
# 在 Claude Desktop / Cursor 等 MCP 客户端中添加：
# Name: Front-End Checklist
# URL: https://mcp.frontendchecklist.io
# 方式二：本地部署
cd packages/mcp
pnpm build
node packages/mcp/dist/cli.js
规则存放在 packages/rules 目录下的 MDX 文件。每条规则遵循 SPEC.md 中定义的 frontmatter schema，提交前需通过结构验证：
pnpm validate:rule-structure # 验证规则结构
pnpm score:rules # 评分规则完整性
pnpm generate:readme # 重新生成 README 中的规则目录
1. 规则数量庞大带来的认知负担
385 条规则对于大型项目是保障，但对于小型项目或 MVP 阶段可能过于繁重。作者的解决方案是提供预设清单（如"发布前必检"约 50 条），但爱好者社区仍反馈"不知从何开始"。好在网站支持按维度过滤，这一问题正在改善。
2. 非 AI 原生设计
虽然新增了 MCP 支持，但大量规则仍然面向人类读者设计。AI Agent 在执行这些规则时，需要将自然语言描述转换为代码审查动作，转换质量依赖于 Agent 的推理能力，并非开箱即用的深度集成。
3. 许可问题
值得注意的是，该项目在 GitHub 上没有设置明确的开源许可证（license 字段为 null）。网站和 MCP 服务虽然是免费的，但代码本身的法律状态存在不确定性，社区曾多次在 Issue 中询问此事但未得到明确回应。
前端领域从来不缺工具，但缺的是共识。
React 生态有 eslint-config-airbnb 作为代码风格共识，而前端质量领域，Front-End Checklist 就是那个共识。它将 W3C 规范、Google Web Vitals、OWASP 安全标准等分散的技术文档，转化成了可操作的检查项。这让团队可以跳过「为什么这个重要」的基础讨论，直接进入「我们是否做到了」的实践层面。
更重要的是，它的 MCP 支持代表了前端工具的未来方向：当 AI Agent 能够理解并执行这些检查项时，前端 Code Review 不再依赖人工逐行审查，而是变成人机协作的闭环——Agent 做初筛，人类做终审。这对于开源项目维护者、indie hacker 和小型团队尤为价值。
如果你正在做前端项目，无论是自用还是商用，Front-End Checklist 都是一个值得加入书签栏的参考站点。