从交稿到甩锅预防：AI 前端流水线

我的刀盾
0 阅读8分钟

配合你的需求文档，食用更佳——PRD、接口说明、验收口径跟设计稿一起对照；光看画容易漏业务，光写文档又不知道长啥样，两口吃齐活。

在 Cursor 里用 Vue + Element UI / Element Plus 做前端时，.cursor/rules 管约束，.cursor/skills 管操作步骤；下面把流程、和磁盘上文件的对应关系捋一遍。页面里的 .vue 一般在业务代码的 src/，以你实际工程为准。

一、三层结构

层次做什么在哪
Rules什么时候必须写分析、必须用 Element、主题色怎么来.cursor/rules/
Skills产出哪些文件、Browser 怎么对照、路由/组件/API 怎么拆.cursor/skills/
写出来的文档设计规格、验收记录docs/样式还原/ 等

新需求可先翻 create-proposal-vue；想看整条线看 frontend-workflow-master。带界面的大改动，跟规则 09-enforced-ui-page-workflow 走。

二、主流程三阶段（frontend-workflow-master）

阶段目标产出 / 要点
UI / 需求对齐写代码前弄清视觉、交互、边界和数据从哪来页面/组件拆分思路、状态与接口清单、待确认项；栈与现有工程一致
开发实现按约定栈把页面和数据流落地路由、组件、请求、样式；接口未就绪可 mock；自测主路径与关键边界
验收区分「看起来像」和「能提测」有设计则 Browser 对照 + 功能 QA；变更说明、已知问题、回归范围

1. UI / 需求对齐

动手前先对齐：界面长什么样、有哪些状态、数据从哪来。

  • 设计源：Figma/蓝湖，或工作区里的 PNG/JPG/WebP/PDF（和 Figma 一样能当视觉依据）。
  • 交付物：路由/组件怎么拆、接口与状态清单、和设计对不上的地方列出来一次问清。
  • 栈：Vue2 还是 3、element-ui 还是 element-plus、路由和状态方案——跟现有工程一致即可。

需要把交互落到 Element 上时，配合 vue-ui-design-handoff；只有导出图时，把「用图代替 Figma」写清楚。

参考：.cursor/skills/frontend-workflow-master/SKILL.md、.cursor/skills/vue-ui-design-handoff/SKILL.md、.cursor/rules/00-workflow-ui-dev-accept/RULE.md

2. 开发实现

按栈把页面和数据流做出来：路由见 create-route-vue，组件见 create-component-vue（交互控件用 Element，细则在 01-vue-element-stack），接口见 create-api-vue / 05-api-and-data，样式用 theme-variables 和 06-element-theme-styles。接口没好可以先 mock。自测覆盖主路径和关键边界；lint、类型检查按工程配置来。

3. 验收

有设计稿的页面：先做 ui-verification-vue（Browser 对照），再做 frontend-acceptance-qa。修了 bug 做最小回归。交付时带上变更说明、已知问题；有 UI 还原时附上分析清单和验收记录放哪。

三、强制流程（规则 09）：有设计的新页 / 整页改版

顺序是：分析清单 → 写代码 → Browser 对照 → 功能 QA。中间几步一般是硬门槛，不能随便跳过。

阶段名称作用关键产出 / 动作
A设计稿分析（实现前）把设计拆成可开发的结构、样式与验收点docs/样式还原/<slug>-UI分析清单.md；技能 design-analysis-vue
B开发实现严格对照分析清单与栈规则实现业务项目 src/ 等
CUI 还原验收（交付前）用真实运行页面对照设计ui-verification-vue + Browser；有差异时 docs/样式还原/<slug>-UI问题清单.md
D功能与回归与 UI 验收互补frontend-acceptance-qa

例外：纯逻辑、无视觉改动、小修补；或者你在同一条消息里写死「跳过分析清单」「只要快速原型」——后果自己担。细节在 .cursor/rules/09-enforced-ui-page-workflow/RULE.md。

四、Skills 索引（用途简述）

和 .cursor/skills/README.md 一致；具体步骤见各目录下的 SKILL.md。

交付闸门与全流程

Skill 目录用途
create-proposal-vue需求闸门：是否有设计/接口/页面，是否先 design-analysis、实现后 ui-verification
frontend-workflow-master三阶段总览与技能引用

设计 → 规格 → 还原

Skill 目录用途
design-analysis-vue产出 docs/样式还原/<名>-UI分析清单.md（实现前阻断）
vue-ui-design-handoff组件树、状态、token、验收点；Element 映射；静态图代替 Figma
ui-verification-vueBrowser 对照实现页与设计参考，产出问题清单
browser-figma-sessionFigma MCP、静态稿、Browser、Playwright MCP（登录/会话）

工程实现（按需）

Skill 目录用途
create-route-vue路由、懒加载、布局
create-component-vue新建/拆分 .vue
create-api-vueHTTP 封装与错误处理
create-store-vuePinia / Vuex 等
theme-variablesElement 主题与 CSS 变量
vue2-vue3-implementationVue2/Vue3 + Element 实现与审查要点

质量与生态

Skill 目录用途
frontend-acceptance-qa提测前功能、兼容、无障碍等
web-design-guidelines对照 Web Interface Guidelines 做 UX/A11y 审查
find-skills用 npx skills 等发现开源技能
skill-creator在 .cursor/skills 下新建或改版 SKILL.md 的约定
external-react-stack-note勿用 React 向开源技能实现此处 Vue 页面（跨栈讨论除外）

推荐顺序（有设计的新页面）：create-proposal-vue → design-analysis-vue →（可选）vue-ui-design-handoff → create-route-vue / create-component-vue / create-api-vue / create-store-vue → theme-variables → ui-verification-vue + frontend-acceptance-qa。

五、Rules 和 Skills

Rules 写必须/禁止、以及「以哪份文件为准」。Skills 写步骤和文件名。打架时以 RULE.md 为准。总索引：.cursor/rules/README.md。

六、Figma MCP 与浏览器

示例 JSON 在根目录 cursor-mcp.example.json，可拷进 Cursor 的 MCP 配置。有 Figma 链接就解析 file key、node-id，用 MCP 拉截图或上下文再对页面；没有 Figma 就用工作区静态图 + vue-ui-design-handoff。验收永远是：跑起来的页面 和 设计参考 放一起看。

密钥别进 Git：本地常用 .cursor/mcp.json，已在 .cursorignore 里排除。操作说明见 browser-figma-session、08-browser-figma-session。

打开 Cursor → Settings → MCP（或 Features → MCP，视版本而定）→ 添加服务器，URL：https://mcp.figma.com/mcp，保存后按提示在浏览器里登录 Figma 授权。

Image_20260330150757.png

cursor-mcp.example.json 当前内容如下（Cursor 以后改配置格式的话，以官方说明和你本机为准）：

{
  "mcpServers": {
    "Figma": {
      "url": "https://mcp.figma.com/mcp",
      "headers": {}
    },
    "Playwright": {
      "command": "npx",
      "args": ["-y", "@playwright/mcp@latest"]
    }
  }
}

七、.cursorignore

放在工作区根目录，写法和 .gitignore 一样。用来让 Cursor 少索引 .env、node_modules、构建产物、.cursor/mcp.json 之类，既减噪音也避免把密钥喂进上下文。

下面是当前 .cursorignore 全文（你本地改过的话以根目录那份为准）：

# Cursor 索引/上下文排除（隐私与体积）。语法同 .gitignore。
# 说明：https://docs.cursor.com/context/ignore-files

# ---------- 环境变量与密钥（勿让 AI 读取）----------
.env
.env.*
!.env.example
!.env.sample
!.env*.example
*.pem
*.p12
*.pfx
*.key
id_rsa
id_ed25519
*_rsa
*_ed25519
**/credentials.json
**/serviceAccount*.json
**/google-services.json
**/GoogleService-Info.plist

# 本地 MCP 常含 Token；示例文件请用 cursor-mcp.example.json 等可提交名
.cursor/mcp.json

# npm/私有源认证（若存在）
.npmrc
.yarnrc.yml

# ---------- 个人/团队私密目录（按需增删）----------
private/
**/secrets/
**/.secrets/

# ---------- 依赖与构建产物（减索引量，部分产物含路径信息）----------
node_modules/
**/node_modules/
dist/
**/dist/
build/
**/build/
.next/
.nuxt/
.output/
coverage/
**/.vite/

# ---------- 日志与缓存（可能含路径、账号痕迹）----------
*.log
logs/
**/.cache/

# ---------- 系统与编辑器本地 ----------
.DS_Store
Thumbs.db
.history/

八、流程和文件对照

8.1 入口与总览

流程相关 Markdown
需求闸门、任务拆分.cursor/skills/create-proposal-vue/SKILL.md
三阶段总览.cursor/skills/frontend-workflow-master/SKILL.md
工作流总规则（始终应用）.cursor/rules/00-workflow-ui-dev-accept/RULE.md
技能索引.cursor/skills/README.md
Rules 索引.cursor/rules/README.md

8.2 强制 UI 页面（规则 09）

阶段规则技能产出 / 参考
A 设计分析.cursor/rules/09-enforced-ui-page-workflow/RULE.md.cursor/skills/design-analysis-vue/SKILL.mddocs/样式还原/<名称>-UI分析清单.md；可选细项 .cursor/skills/design-analysis-vue/REFERENCE.md
B 开发实现09 + 01～06 等见 8.3业务代码：各项目 src/
C UI 验收.cursor/rules/09-enforced-ui-page-workflow/RULE.md.cursor/skills/ui-verification-vue/SKILL.md有差异时 docs/样式还原/<名称>-UI问题清单.md；.cursor/skills/ui-verification-vue/REFERENCE.md
D 功能与回归.cursor/rules/07-testing-and-acceptance/RULE.md.cursor/skills/frontend-acceptance-qa/SKILL.md依团队约定

8.3 三阶段配套规则与技能

子主题规则技能
浏览器、Figma、静态图.cursor/rules/08-browser-figma-session/RULE.md.cursor/skills/browser-figma-session/SKILL.md
栈与 Element.cursor/rules/01-vue-element-stack/RULE.md.cursor/skills/vue2-vue3-implementation/SKILL.md
编码风格.cursor/rules/02-code-style-vue/RULE.md—
SFC / Element.cursor/rules/03-element-vue-sfc/RULE.md.cursor/skills/create-component-vue/SKILL.md
路由与状态.cursor/rules/04-vue-router-state/RULE.md.cursor/skills/create-route-vue/SKILL.md、.cursor/skills/create-store-vue/SKILL.md
接口与数据.cursor/rules/05-api-and-data/RULE.md.cursor/skills/create-api-vue/SKILL.md
主题与样式.cursor/rules/06-element-theme-styles/RULE.md.cursor/skills/theme-variables/SKILL.md
注释与 JSDoc.cursor/rules/10-documentation-comments/RULE.md—
React 技能勿用于 Vue 实现—.cursor/skills/external-react-stack-note/SKILL.md

8.4 配置类文件

说明路径
MCP 示例（Figma、Playwright）cursor-mcp.example.json
上下文排除.cursorignore
本地 MCP（若存在，一般不提交）.cursor/mcp.json

8.5 流程产出物（执行流程时创建）

产出路径约定
UI 分析清单docs/样式还原/<名称>-UI分析清单.md
UI 问题清单docs/样式还原/<名称>-UI问题清单.md

<名称> 用 kebab-case，和页面或需求对上，别和别的文档撞名。参考图可以扔 docs/设计稿/、assets/，按你们习惯来。

九、业务代码大概在哪

内容常见位置
路由、页面src/router、src/views
组件src/components
接口src/api
Storesrc/store 或 Pinia 目录

十、以后怎么改

加新场景就新建技能目录 + SKILL.md，顺手改 .cursor/skills/README.md。规则以各 RULE.md 为准；这份说明只是指路，和规则不一致时听规则。

avatar
文章
阅读
粉丝