企业官网建设流程全解析

1. 为什么你的 Cursor 写 React 组件总差点意思

如果你正在用 Cursor 写 React 项目，大概率遇到过这种场景：让 AI 生成一个UserCard组件，结果它给你一个函数组件，样式用内联style，Props 直接写any，文件还平铺在components根目录下。你每次都得在 Prompt 里补一句“用 CSS Modules”“加 interface”“放文件夹里”，补完这次，下次开新会话它又忘了。

这不是模型不行，而是你缺一份“项目规范说明书”。Cursor 的 Agent Skills 就是干这个的：把团队里那些“每次都要重复交代”的组件规范、目录约定、样式方案，固化成一个可被 AI 按需加载的技能文件。它和.cursorrules的区别在于，.cursorrules是全局常驻的“员工手册”，而 Agent Skills 是“特定任务的 SOP”，只在写组件、做重构这类具体场景下才被加载，省 Token 也更专注。

这篇就聚焦前端 React 项目的落地：从SKILL.md骨架怎么写，到settings.json里怎么配，再到怎么验证 AI 真的按你的规范生成了组件。全程可复制，跟着做就能搭出一个专属前端 AI 助手。

2. 前置准备：TaoToken 接入与 Cursor 环境确认

在写 Skill 之前，先把模型通道理顺。Cursor 本身支持自定义 API 接入，如果你希望用更稳定的模型服务来驱动 Agent，可以走 TaoToken 的 API 通道。官网入口在 https://taotoken.net/?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content= ，API 地址是 https://taotoken.net/api ，注意这个地址不带 UTM 参数，配置时直接填。

具体操作分两步。第一步，去控制台创建一个 API Key，地址是 https://taotoken.net/console?utm_source=taotoken_aicg_blog_end&utm_content=console&utm_campaign=rewrite ，创建后复制那串sk-开头的密钥。第二步，在 Cursor 里打开设置，找到 Models 或 API Keys 区域，把 TaoToken 的 API 地址和 Key 填进去。如果你用的是 Claude Code 这类编码 Agent，接入文档在 https://taotoken.net/doc?utm_source=taotoken_aicg_blog_end&utm_content=doc&utm_campaign=rewrite ，里面有对应的配置说明。

环境确认这块，Cursor 版本建议用较新的稳定版，Agent Skills 相关开关在 Settings 的 Rules 或 Features 里，确保是打开状态。项目侧你需要一个 React + TypeScript 工程，样式方案按你团队实际来，本文以 CSS Modules 为例。目录结构上，Skill 文件放在项目根目录的.cursor/skills/下，这样能跟着 Git 走，新同事git pull下来就自动拥有同一套规范。

3. 可复制配置：SKILL.md 骨架与 settings.json 片段

3.1 创建 Skill 目录

在项目根目录执行：

mkdir -p .cursor/skills/react-component-gen

这个react-component-gen就是技能名，后面在 Cursor 里触发时用的也是它。目录建好后，核心文件是SKILL.md，它由两部分组成：顶部的 Frontmatter 元数据，和下面的 Markdown 指令正文。

3.2 编写 SKILL.md

把下面这段完整写入.cursor/skills/react-component-gen/SKILL.md：

--- name: react-component-gen description: Generate a new React functional component with CSS Modules and TypeScript interfaces following team standards. disable-model-invocation: false --- # React Component Generator Use this skill when the user asks to create a new UI component, page, or widget. ## Instructions 1. Analyze the Request: Identify the component name and props required. 2. Directory Structure: - Create a folder named exactly as the component (PascalCase). - Inside, create `index.tsx` and `styles.module.scss`. 3. Code Standards: - index.tsx: - Use `FC` type from 'react'. - Import styles as `import styles from './styles.module.scss'`. - Define an interface `[ComponentName]Props`. - Export the component as default. - styles.module.scss: - Create a root class `.container`. - Use BEM naming convention for inner elements if needed. ## Template Example If the user asks for a "Button", generate: ```tsx // Button/index.tsx import React, { FC } from 'react'; import styles from './styles.module.scss'; export interface ButtonProps { label: string; onClick: () => void; } const Button: FC<ButtonProps> = ({ label, onClick }) => { return ( <button className={styles.container} onClick={onClick}> {label} </button> ); }; export default Button;

Frontmatter 里的 `name` 是技能标识，`description` 是给模型看的触发说明，写得越具体，AI 越容易在合适的时候加载它。`disable-model-invocation: false` 表示允许模型自动调用，如果你只想手动触发，改成 `true`。 ### 3.3 settings.json 配置片段 Cursor 的 Skill 加载行为可以在项目级 `settings.json` 里做补充配置。在 `.cursor/settings.json` 中加入： ```json { "cursor.skills.enabled": true, "cursor.skills.paths": [".cursor/skills"], "cursor.skills.autoInvoke": true, "cursor.rules.globs": ["**/*.tsx", "**/*.ts"] }

这里skills.paths指定技能目录，autoInvoke控制是否允许自动触发，rules.globs限定规则生效的文件范围，避免在写配置文件时也去加载组件规范。如果你团队有多个技能，比如还有测试规范、API 请求规范，就在skills目录下并列建多个文件夹，每个里面放各自的SKILL.md。

4. 验证请求：让 AI 真的按规范生成组件

配置写完了，得验证它是否生效。打开 Cursor 的 Agent 聊天框，输入：

帮我写一个 UserCard 组件，包含头像和名字。

如果 Skill 被正确加载，你会看到 Agent 在生成前有一个“加载技能”的动作提示，然后输出的代码应该满足：文件放在UserCard/文件夹下，有index.tsx和styles.module.scss，index.tsx里用了FC类型、定义了UserCardProps接口、样式通过styles.container引用。

手动触发的方式是输入/，在命令列表里应该能看到react-component-gen。选中它再描述需求，效果一样。

验证时重点看三个点：目录结构对不对、Props 有没有 interface、样式是不是 CSS Modules。如果这三点都符合，说明 Skill 生效了。你可以再试一个ProductList组件，看它是否稳定复现同一套规范，而不是这次对了下次又飘。

5. 本篇常见错排查

Skill 不触发：先确认.cursor/skills/react-component-gen/SKILL.md路径没写错，Frontmatter 的---是独立行且没有多余空格。再看 Cursor 设置里 Skills 开关是否打开，版本是否支持。如果disable-model-invocation设成了true，自动触发就不会生效，只能手动/调用。

生成了组件但没建文件夹：检查SKILL.md里 Instructions 的目录结构描述是否足够明确。模型有时会偷懒，把“Create a folder named exactly as the component”写成一句带过。你可以把模板示例补得更完整，甚至加一句“Do not create the component file at the root level”。

样式引用报错：如果生成的是styles.module.scss但项目实际用.module.css，改SKILL.md里的文件名即可。TypeScript 对 CSS Modules 的类型声明需要项目里有declarations.d.ts或对应的类型包，否则import styles会飘红，这属于项目配置问题，不是 Skill 的问题。

API 请求失败：如果你在 Cursor 里接了 TaoToken 的 API，报 401 就检查 Key 是否复制完整、有没有多余空格；报 404 就确认 API 地址填的是https://taotoken.net/api而不是带路径的地址。模型对话调试可以在 https://taotoken.net/models?utm_source=taotoken_aicg_blog_end&utm_content=models&utm_campaign=rewrite 里先验证通道是否通。

Skill 之间互相干扰：如果你同时装了多个技能，比如组件生成和颜色重构，触发时可能加载了不该加载的那个。解决办法是把每个技能的description写得更聚焦，组件生成就写“create new component”，重构就写“refactor existing colors”，别用模糊词。

6. 把规范变成可复用的团队资产

Skill 写好后，把.cursor文件夹提交到 Git 仓库。新同事拉下代码，他的 Cursor 会自动读取这套技能，AI 助手立刻学会你们团队的组件规范，不用再手把手教。这比在群里发一份 Word 规范文档管用得多，因为规范直接作用在生成环节，而不是靠人自觉遵守。

如果你想让 AI 在长期编码任务里更稳定地调用这些技能，可以了解下 Coding Plan 的用法，地址是 https://taotoken.net/coding-plan?utm_source=taotoken_aicg_blog_end&utm_content=coding-plan&utm_campaign=rewrite ，它更适合持续性的 Agent 编码场景。API Key 的管理入口在 https://taotoken.net/api-keys?utm_source=taotoken_aicg_blog_end&utm_content=api-keys&utm_campaign=rewrite ，需要新建或轮换密钥时从这里进。

最后留一个我踩过的坑：别把.cursorrules和 Agent Skills 混着用同一套内容。.cursorrules放那些“永远成立”的原则，比如“禁止使用 any”；Agent Skills 放“特定任务才需要”的流程，比如“生成组件时建文件夹”。两者分工清楚，AI 的上下文才不会被无关规则塞满，生成质量也更稳。