使用前端检查清单规范AI代码审查与实现质量

通过结构化的前端检查清单和MCP工具，帮助AI代理和人类开发者在编写React、Next.js、HTML和CSS等前端代码时，进行无障碍、性能、SEO、安全及代码规范审查。

GitHubthedaviddias7.5万

CursorClaude Codev0BoltFront-End Checklist MCP

收录于 2026-11-01 · 原文发布于 2026-10-31

要点

在决定实现界面之前，先使用UX Patterns选择正确的UI模式，比较常见UI模式的折衷方案。
将MCP兼容的AI代理连接到Front-End Checklist，用于前端代码审查、结构化规则查找和审计。
针对粘贴的代码、组件或文件，优先使用 review_code 进行审查并报告最高置信度的问题。
在提出无障碍、性能、SEO、安全或图片相关建议前，先使用 search_rules 检索规则。
对于公开的 https:// 页面，使用 audit_url 进行直接审计。

坑点

未经验证盲目编写前端代码，导致出现影响用户体验、无障碍、性能、SEO或安全的问题。

.cursorrules

- Always consult the Front-End Checklist rules when making recommendations for HTML, CSS, JavaScript, accessibility, performance, SEO, security, images, privacy, i18n, and testing.
- Use MCP-compatible tools or `review_code` to audit components and code before finalizing implementations.

可复制提示词

Use the Front-End Checklist MCP to review this [React component / page / code] and report the highest-confidence findings first based on rules for HTML, CSS, JavaScript, accessibility, performance, SEO, security, images, privacy, i18n, and testing.

查看原帖

#AI前端开发#代码审查#前端规范#MCP

使用专治“AI味前端”的开源 Skill 避坑方法

GitHub周榜显示前12名中扎堆出现了4个专治“AI味前端”的Skill。通过引入这些工具和方法，可以有效解决AI生成前端页面时不够美观的问题。

AI 前端界面美化与避坑方法卡片

针对 AI 生成的前端界面容易显得廉价、细节粗糙的问题，本文梳理了多位设计师的实战建议，从圆角、颜色、字体和边框等方面提供具体的改进方法与可执行提示词。

提升AI前端界面品味的设计技巧与规范

参考多位设计大佬的经验，通过规范圆角、颜色、字体和边框等细节，避免AI生成的界面显得廉价或土气。合理利用现成设计组件库和提示词，能显著提升Vibe Coding的界面质感。

觉得有用？订阅 TG 频道或在 X 关注获取每日更新

订阅 TG 频道关注 @CaiXiang23766

内容由 AI 依据原文翻译整理，细节以原帖为准；版权归原作者。

要点

坑点

相关方法