一行命令，让 AI 编程助手「秒懂」你的前端项目

你有没有这种感觉？

用 AI 写代码，结果怎么改都不对味。

• 它给你内联样式，你们团队用 CSS Modules
• 它给你 useState 层层传递，你们有全局状态
• 它给你裸写 fetch，你们 API 都封装好了
• 它给你 any，你们严禁 any

AI 不是不够聪明，是它不知道你的规矩。

今天教你一个方法：

一行命令，5 秒，让它懂。

先看效果

执行一行命令之前，你的项目长这样：

my-project/├── src/├── package.json└── ...

执行之后：

my-project/├── .agents/                  ← AI 配置目录│   ├── skills/xxx-fe-skill/  ← 项目专属技能包│   ├── generation-spec.md    ← 代码生成模板│   └── ...├── AGENTS.md                 ← AI 行为规范├── DESIGN.md                 ← 视觉设计规范└── CLAUDE.md                 ← Claude 配置

从此以后，AI 在你的项目里写代码——

风格对了，规范对了，目录对了，类型对了。

像团队里的老人写的，不像实习生第一天写的。

怎么做

三步。

第一步：安装（一次性）

git clonehttps://github.com/ma1833577561/SkillForge.git ~/.agents/skills/

第二步：进入你的项目

cd your-project

第三步：执行

bash ~/.agents/skills/fe-base-skill/bin/project-init.sh

结束。

它做了什么

脚本很聪明，它会自动扫描你的 package.json：

• 检测到 react → 知道你是 React 项目
• 检测到 antd → 知道你用 antd，主色 #1677FF
• 检测到 less → 知道你用 Less + CSS Modules
• 检测到 .yarnrc → 知道你用 yarn

然后根据这些信息，自动生成 9 个配置文件。

全程 5 秒。

看个对比

没配置时，AI 写的代码：

export default function CopyBtn({ text }: any) {  return (    <button style={{color: 'blue'}}       onClick={() => navigator.clipboard.writeText(text)}>      Copy    </button>  )}

• ❌ any 类型
• ❌ 内联样式
• ❌ 命名不规范
• ❌ 没用组件库

配置后，AI 写的代码：

import React, { useCallback } from 'react'import { message } from 'antd'import styles from './index.less'interface CopyButtonProps {  text: string  onSuccess?: () => void}const CopyButton: React.FC<CopyButtonProps> = ({ text, onSuccess }) => {  const handleCopy = useCallback(async () => {    await navigator.clipboard.writeText(text)    message.success('已复制')    onSuccess?.()  }, [text, onSuccess])  return (    <button className={styles['copy-button']} onClick={handleCopy}>      复制    </button>  )}export default CopyButton

• ✅ 明确的 interface
• ✅ CSS Modules
• ✅ 用了 antd 的 message
• ✅ PascalCase 命名
• ✅ 正确的文件位置

这不是调了 prompt，是 AI 真的知道你项目的规范了。

团队怎么用

管理员（你）：

bash ~/.agents/skills/fe-base-skill/bin/project-init.shgit add .agents/ AGENTS.md DESIGN.mdgit commit -m "chore: 初始化 AI 配置"git push

团队成员：

git pull# 完事了

学习成本 = 0。

还能更进一步

初始化完，你可以说一句：

“分析项目规范”

AI 会读你的源码，发现那些”没人写文档但大家都在遵守”的隐性规范。

比如：

• “你们的 localStorage 用用户 ID 隔离”
• “你们的 Model 用 Chat.index 这种嵌套命名”
• “你们的 SSE 用 MessageAccumulator 模式”

然后生成一份 500 行的最佳实践文档。

从此 AI 连潜规则都懂。

一些数据

最后

这套工具我开源了：

👉 https://github.com/ma1833577561/SkillForge.git

现在支持：React / Vue / Next.js / HTML，antd / Arco / Element，Less / Sass / Tailwind。

如果你也觉得”AI 写的代码总是不对味”，试试这一行命令。

5 秒，改变你和 AI 的协作方式。

觉得有用？转发给你的前端朋友。

有问题？评论区见。