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

像我这样帅的人丶你还2026-03-31 18:02

配合你的需求文档，食用更佳------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/ 等
C UI 还原验收（交付前） 用真实运行页面对照设计 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-vue Browser 对照实现页与设计参考，产出问题清单
browser-figma-session Figma MCP、静态稿、Browser、Playwright MCP（登录/会话）

工程实现（按需）

Skill 目录 用途
create-route-vue 路由、懒加载、布局
create-component-vue 新建/拆分 .vue
create-api-vue HTTP 封装与错误处理
create-store-vue Pinia / Vuex 等
theme-variables Element 主题与 CSS 变量
vue2-vue3-implementation Vue2/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 授权。

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

json 复制代码 
{
  "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 全文（你本地改过的话以根目录那份为准）：

gitignore 复制代码 
# 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.md docs/样式还原/<名称>-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
Store src/store 或 Pinia 目录

十、以后怎么改

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

相关推荐
想想弹幕会怎么做2 小时前
如何构建一颗可交互的ui树？
前端
程序员陆业聪2 小时前
我见过的最反直觉的 Android 架构问题：UseCase 越多，项目越烂
前端
Arya_aa2 小时前
网络:前端向后端发送网络请求渲染在页面上，将EasyMock中的信息用前端vue框架编写代码，最终展示在浏览器
前端·vue.js
量子位2 小时前
2700GB高质量数据，训出空间智能SOTA，背后秘诀全栈开源
llm·ai编程
LlNingyu2 小时前
文艺复兴，什么是CSRF，常见形式（一）
前端·安全·web安全·csrf
晓13132 小时前
React篇——第三章 状态管理之 Redux 篇
前端·javascript·react.js
量子位2 小时前
Claude Code能控制电脑了！开发全程不离终端，全无人值守模式启动
ai编程·claude
子兮曰2 小时前
🚀24k Star 的 Pretext 为何突然爆火：它不是排版库，而是在重写 Web 文本测量
前端·javascript·github
@大迁世界2 小时前
11.在 React.js 中，state 与 props 的差异体现在哪里？
前端·javascript·react.js·前端框架·ecmascript
热门推荐
012026年3月AI领域大事件：DeepSeek引领开源风暴02GitHub 镜像站点03围棋-html版本04纯 HTML/CSS/JS 实现的高颜值登录页，还会眨眼睛！少女心爆棚！05“wsl --install -d Ubuntu-22.04”下载慢，中国地区离线安装 Ubuntu 22.04 WSL方法（亲测2025年5月6日）06OpenClaw 使用和管理 MCP 完全指南07安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）08班级宠物园部署指南09Mac 本地部署 OMLX + 通义千问 Qwen3.5-27B 保姆级教程10UV安装并设置国内源