AI 前端标准

给 AI 编码助手使用的前端工程标准包。

它解决的不是“让 AI 多写代码”，而是让 AI 在前端项目里更像一个靠谱队友：先理解项目，再克制实现，写自然可维护的代码，最后按真实行为验收。

安装后，你不需要记很多内部名词。日常只要对 AI 说：

按前端标准处理

快速开始

在你的项目根目录执行：

npm install -D ai-frontend-standards
npx ai-frontend-standards init

然后在 Codex、Claude Code、Cursor、GitHub Copilot、Gemini CLI 等工具里正常提需求：

按前端标准开发这个页面
按前端标准优化这段代码
按前端标准验收这次改动

它是什么

这是一个通过 npm 分发的前端 AI 协作标准包，里面包含三类内容：

• 项目规则模板：写入 AGENTS.md、CLAUDE.md、Cursor 规则、Copilot 指令、GEMINI.md 等文件。
• Codex Skills：给 Codex 全局或按需安装的前端能力。
• 验收清单：帮助人工团队或 AI 按产品、工程、UI、测试、安全视角检查前端改动。

它不是只给某一个工具用。支持当前项目落地，也支持 Codex 全局使用。

推荐用法

多数项目用这一组就够：

npm install -D ai-frontend-standards
npx ai-frontend-standards init

如果你希望一次安装所有常见 AI 工具规则：

npx ai-frontend-standards init --preset all

如果只给 Codex 当前项目使用：

npx ai-frontend-standards init --codex

已有文件默认不会覆盖。需要覆盖时加：

--force

最短使用话术

默认入口：

按前端标准处理

更明确一点：

按前端标准开发
按前端标准优化
按前端标准验收
按前端标准重构

建议对外只传播“前端标准”这个词。senior-frontend、code-standards、frontend-review 这些是内部能力名，不需要普通使用者记住。

Codex 全局使用

如果你希望 Codex 在任何项目里都能使用这些 Skills：

npm install -g ai-frontend-standards

全局安装会把 Codex Skills 安装到：

~/.codex/skills

安装后重启 Codex。

也可以按需安装：

npx ai-frontend-standards install-skills
npx ai-frontend-standards install-skills --agent senior-frontend
npx ai-frontend-standards install-skills --agent code-standards
npx ai-frontend-standards install-skills --agent frontend-review

多工具文件位置

npx ai-frontend-standards init --preset all 会安装：

• AGENTS.md：Codex / 通用 Agent 规则。
• CLAUDE.md：Claude Code 规则。
• .cursor/rules/frontend.mdc：Cursor 规则。
• .github/copilot-instructions.md：GitHub Copilot 指令。
• GEMINI.md：Gemini CLI 规则。
• docs/frontend-review-checklist.md：前端验收清单。

自动初始化

项目内安装默认只提示，不自动写文件。这样更安全，也更适合已有项目。

如果你确实希望安装时自动初始化：

$env:AI_FRONTEND_STANDARDS_AUTO_SETUP="all"
npm install -D ai-frontend-standards

只安装部分工具规则：

$env:AI_FRONTEND_STANDARDS_AUTO_SETUP="codex,claude,cursor"
npm install -D ai-frontend-standards

跳过安装后提示：

$env:AI_FRONTEND_STANDARDS_SKIP_POSTINSTALL="1"
npm install -D ai-frontend-standards

指定 Codex Skills 目录：

$env:AI_FRONTEND_STANDARDS_CODEX_SKILLS_PATH="D:\custom-codex-skills"
npm install -g ai-frontend-standards

核心约束

• AI 生成的代码不是交付物；经过验收、审查和验证的行为才是交付物。
• 写实用、精简、可读、低 AI 味，并且在项目里自然的代码。
• 先读项目上下文，不盲目发明新模式。
• 已有代码是上下文，不自动等于标准；要能识别并避免复制低质量历史问题。
• 每一行改动都要能追溯到用户请求、必要清理、验证或小范围安全修复。
• 前端改动必须关注真实 UI 状态、响应式、交互反馈和浏览器验证。
• 不隐藏不确定性，不静默选择会改变行为的解释。

包内目录

• skills/ai-code-standards/：AI 写代码准则。
• skills/senior-frontend/：资深前端工作流。
• skills/frontend-role-review/：前端分角色验收。
• templates/：多工具项目规则模板。
• bin/install.js：npm / npx 命令入口。
• bin/postinstall.js：安装后提示与可选自动初始化。
• scripts/install-ai-frontend-standards.ps1：PowerShell 安装脚本。

查看帮助

npx ai-frontend-standards --help