关于AI前端工作流的推导Harness 前端工作流轻量化应用，项目级 rules、skills 制定，从输入到输出、循环

如我们所知，我们正在经历一个AI大浪潮。他的到来有好有坏，好在于改写了我们都开发方式，坏在一定的时间跨度上会淘汰一些开发者。有的人积极拥抱，有的人消极抗拒。不管我们做出什么选择，这个浪潮必将扑在我们身上，与其被拖着前进，不如我们主动走在前列，占得先机。即使真到了要被选择的那一天，我们也有足够的资本去挑战诸多同行竞争者。往远了说，若是能在这个风口上，运用得当，一朝平步青云也未可知。每次危机来临的时候，同时也是我们奋起直追的一个机会。正所谓：危机也是转机。

项目级约束

体系架构

通用模板 — 本目录包含 Cursor Rules & Skills 体系，可直接复制到任何 Vue + Element Plus 项目的 .cursor/ 目录下使用。使用前请根据项目实际情况替换组件名称、路径和业务术语。

体系架构

整个体系分为两层，职责严格分离：

层级	位置	职责	文件数
Layer 1: Static Rules	`.cursor/rules/*.mdc`	HOW — 写代码时必须遵守的编码约束	6 个
Layer 2: Workflow Skills	`.cursor/skills/*/SKILL.md`	WHEN & ORDER — 按什么顺序做事，什么时候停下等确认	2 个

Layer 1: Rules（静态编码规则）

1. `development-workflow.mdc`（alwaysApply）

角色：两层之间的桥梁 / 流程入口

将任务分为 完整流程（新页面、新组件、重大重构、Figma 实现）和 轻量流程（bug 修复、小改动）
完整流程 → 加载 development-workflow/SKILL.md
轻量流程 → 仅遵守静态 Rules + 交付前跑 lint
定义五条硬约束：
- Spec（含验收标准）必须在编码前确认
- 豁免短语白名单
- 实现后必须输出四维验收报告，等用户确认后再修复迭代
- MCP 可用性门控：MCP 工具不可用时必须 STOP 并询问用户（等待连接 / 跳过），禁止静默跳过
- 交互验收具体性：Spec 和验收报告中的交互项必须显式指定具体操作、预期结果、实际结果

2. `vue-conventions.mdc`（alwaysApply）

角色：Vue 文件的结构与编码规范

Section	内容
1. File Naming	路由页面 camelCase，组件 PascalCase
2. Script Setup & Colocation	强制 `<script setup>`，按功能聚合而非按类型分组
3. i18n & Resource Keys	禁止动态拼接 key/路径，必须用静态字符串或映射对象
4. Input Hygiene	`el-input` 必须 `v-model.trim` + `maxlength`
5. Enum Ownership	业务枚举必须定义在 `src/types/`，禁止在 `.vue` 中硬编码
6. Component Responsibility	复用组件内聚完整操作流，父页面只做编排

3. `css-styling-conventions.mdc`（alwaysApply）

角色：CSS/SCSS 样式约束

Section	内容
1. Theme Variables First	颜色/字号/圆角等优先用 `var(--xxx)` 变量，禁止硬编码 hex
2. No Arbitrary Nesting	只允许 `&` 开头的嵌套（`&:hover`、`&.is-active`）
3. No Direct Tag Selectors	禁止直接用 `div`/`span` 等标签选择器，除非在 `:deep()` 内

4. `ui-component-usage.mdc`（alwaysApply）

角色：项目组件库选用规范（需根据项目实际组件替换名称）

Section	内容
1. Breadcrumb	一级页面不显示，二级及以上显示 + `:show-back="true"`
2. CustomSelect	优先用项目自定义 Select，禁止直接用 `el-select`
3. Pagination	必须用 `usePagination` composable
4. StatusTag	状态标签必须用项目 StatusTag 组件
5. CustomEmpty	空状态必须用项目 CustomEmpty 组件

5. `pagination-request-response-types.mdc`（globs: `**/*.ts`）

角色：分页 API 类型约束

请求参数必须用 PageRequest<TFilter>
响应类型必须用 PageResponse<TItem>
禁止手写 currentPage、pageSize 等分页字段

6. `rules-and-skills-governance.mdc`（alwaysApply）

角色：元规则 — 管理如何增删改 Rules / Skills

广泛触发词识别（"沉淀"、"总结"、"以后都要"、"规则"、"技能"、"convention" 等）
判断新内容属于 Rule 还是 Skill
判断合并到已有文件还是新建文件
各文件的管辖范围索引表
文件格式要求（frontmatter 模板）
合并操作的 5 步协议
变更后的通知义务 + README 同步（MUST）

Layer 2: Skills（流程工作流）

1. `development-workflow/SKILL.md`（主工作流）

角色：覆盖从设计输入到交付的完整 6 阶段流程

Phase	名称	做什么
Phase 1	Design Input	Figma → 加载 figma Skill 读设计；纯文本 → 分析需求；找参考页面。参考已有组件时必须检查 `<style>` 中的响应式逻辑（`@container` / `@media`）
Phase 2	Code Design & Spec	输出 Spec + 四维验收标准（视觉/交互/逻辑/代码评审），Spec 须包含响应式行为设计，等用户确认
Phase 3	Implementation	按 Spec 编码，引用所有静态 Rules，严格还原设计尺寸/颜色。i18n key 必须在 locale 文件中预先存在或同步新增，禁止用 fallback 替代
Phase 4	Acceptance Report	输出四维验收报告（视觉比对 + 交互自动化测试 + 控制台检查 + 代码评审自动启动 readonly Task subagent 隔离执行，prompt 仅含文件列表 + Rules 路径，零实现上下文），提出修改建议，等用户确认。禁止未调用 MCP 就输出视觉 PASS/FAIL；MCP 不可用时必须 STOP + ASK，禁止静默跳过；交互验收每项须含具体操作/预期/实际
Phase 5	Iteration Loop	用户确认 → 修复 FAIL 项 → 重新出验收报告 → 反复直到全部 PASS 或用户结束
Phase 6	Delivery & Feedback	输出交付摘要，持久化新规范

2. `figma-design-implement/SKILL.md`（Figma 辅助）

角色：Figma MCP 操作 + 浏览器比对的专项辅助，被主工作流在 Phase 1 和 Phase 4 调用

Section	名称	做什么
1. Reading	设计稿读取	MCP 工具调用、URL 解析、失败处理、设计上下文解读
2. Comparison	视觉比对	浏览器 MCP 三级回退链（browsermcp → chrome-devtools → chrome-server）、访问地址优先级、三类证据收集、关键尺寸实测（指定 `evaluate_script` / `chrome_javascript`）。截图必须确认用户可见，不可见则换工具重试

工作流程

完整流程（新页面 / 新组件 / 重大功能）

flowchart TD
    Start([用户发起任务]) --> Classify{development-workflow.mdc<br/>任务分级}
    Classify -->|完整流程| P1

    subgraph Phase1 [Phase 1: Design Input]
        P1{设计来源?}
        P1 -->|Figma URL / 设计稿| FigmaRead["加载 figma-design-implement Skill<br/>读取设计稿 (MCP)"]
        P1 -->|纯文本 / 需求描述| TextAnalyze[分析需求<br/>识别页面结构与交互]
        FigmaRead --> FigmaOk{读取成功?}
        FigmaOk -->|失败| Stop([停止, 报告原因])
        FigmaOk -->|成功| P2
        TextAnalyze --> P2
    end

    subgraph Phase2 ["Phase 2: Spec + 验收标准"]
        P2[输出 Spec]
        P2 --> SpecContent["文件路径 / 模块拆分 / 数据结构<br/>关键尺寸 / 实现步骤"]
        SpecContent --> AcceptCriteria["四维验收标准:<br/>视觉 - 各模块宽高、对齐<br/>交互 - 按钮弹框、条件查询<br/>逻辑 - 控制台无新报错<br/>代码评审 - Rules checklist"]
        AcceptCriteria --> Gate1{GATE: 等待用户确认}
    end

    Gate1 -->|用户确认| P3

    subgraph Phase3 [Phase 3: Implementation]
        P3["按 Spec 编码"]
        P3 --> Rules["强制遵守静态 Rules:<br/>vue-conventions<br/>css-styling-conventions<br/>ui-component-usage<br/>pagination-types"]
        Rules --> Fidelity["设计稿还原:<br/>尺寸 / 颜色 / 字体"]
    end

    Fidelity --> Report

    subgraph Phase4 ["Phase 4: Acceptance Report (验收报告)"]
        Report["开始验收"]
        Report --> SpawnSub["启动隔离式 Task subagent<br/>(readonly, 标准化 prompt, 零上下文)"]
        Report --> Visual["4.1 视觉验收<br/>截图比对 / 尺寸实测 / 对齐检查"]
        Report --> Interact["4.2 交互验收<br/>浏览器 MCP 自动化操作<br/>按钮弹框 / 条件筛选"]
        Report --> Logic["4.3 逻辑验收<br/>控制台检查 (加载后+交互后)<br/>DOM 结构验证"]
        SpawnSub -.->|"并行执行"| SubResult["4.4 隔离代码评审报告<br/>(subagent 返回)"]
        Visual --> Summary
        Interact --> Summary
        Logic --> Summary
        SubResult --> Summary
        Summary["合并四维结果<br/>PASS/FAIL 表 + 修改建议"]
        Summary --> Gate2{GATE: 等待用户确认修改}
    end

    subgraph Phase5 [Phase 5: Iteration Loop]
        Gate2 -->|确认修改| Fix[修复 FAIL 项]
        Fix --> ReReport[重新出验收报告]
        ReReport --> AllPass{全部 PASS?}
        AllPass -->|否| Gate2
    end

    AllPass -->|"是 / 用户结束"| P6

    subgraph Phase6 [Phase 6: Delivery]
        P6[输出最终交付摘要]
        P6 --> Persist{用户提出新规范?}
        Persist -->|是| SaveRule["持久化到 Rule / Skill"]
        Persist -->|否| Done([交付完成])
        SaveRule --> Done
    end

轻量流程（bug 修复 / 小改动）

flowchart TD
    Start([用户发起任务]) --> Classify{development-workflow.mdc<br/>任务分级}
    Classify -->|轻量流程| Code

    Code["直接编码<br/>遵守所有静态 Rules"]
    Code --> Lint["交付前: lint 检查"]
    Lint --> Done([交付完成])

新增规则 / 技能时

flowchart TD
    Start(["用户: 以后都要... / 加个规则... / 沉淀..."]) --> Gov[rules-and-skills-governance.mdc]

    Gov --> TypeDecide{Rule or Skill?}
    TypeDecide -->|编码约束| RuleTarget[Rule]
    TypeDecide -->|流程步骤| SkillTarget[Skill]

    RuleTarget --> FileDecide{合并已有 or 新建?}
    SkillTarget --> FileDecide

    FileDecide -->|已有文件匹配| Merge["合并到对应 section"]
    FileDecide -->|主题正交| NewFile["新建文件"]

    Merge --> Notify["通知用户:<br/>文件 / 内容 / 位置"]
    NewFile --> Notify

强约束清单（Hard Constraints）

以下约束在对应场景下不可跳过，违反即为流程错误。

A. 流程门控类

来源：development-workflow.mdc §2 + development-workflow/SKILL.md Phase 2/4/5

#	约束	出处	说明
A1	任务分级先于编码	`development-workflow.mdc` §1	收到任务后必须先判定完整 / 轻量流程
A2	Spec-Before-Code Gate	`development-workflow.mdc` §2.1	完整流程下 Spec 和实现代码禁止同一轮输出；必须用户确认后才能编码
A3	"implement"/"build" ≠ 确认	`development-workflow.mdc` §2.1	用户说"去实现吧"不构成 Spec 确认
A4	四维验收报告	`development-workflow.mdc` §2.3 / SKILL Phase 4	每轮实现或修复后必须产出：视觉 + 交互 + 逻辑 + 代码评审
A5	验收→确认→修复循环	SKILL Phase 5	FAIL 项必须等用户确认后再修，循环直到全 PASS 或用户终止
A6	MCP 可用性门控	`development-workflow.mdc` §2.4	所有 MCP 依赖环节（Phase 1 Figma MCP + Phase 4 Browser MCP）工具不可用时必须 STOP 并询问用户（等待 / 替代输入 / 跳过），禁止静默跳过或伪造结果
A7	交互验收具体性	`development-workflow.mdc` §2.5	Spec 和验收报告中每条交互项必须包含具体操作、预期结果、实际结果，禁止笼统描述

B. 验收报告内部强约束

来源：development-workflow/SKILL.md §4 + figma-design-implement/SKILL.md §2

#	约束	出处	说明
B1	禁止文本断言	SKILL §4.1 / §4.2 / §4.3	视觉 / 交互 / 逻辑均不可仅靠读代码判 PASS/FAIL，必须实际调用 browser MCP
B2	三类证据全部收集	`figma-design-implement` §2.3	截图 + DOM 结构 + 控制台，缺一不可
B3	截图可见性门	`figma-design-implement` §2.3	截图必须确认用户能看到；不可见则换工具重试，全失败则让用户提供
B4	关键尺寸实测	`figma-design-implement` §2.4	必须用脚本测量（`getBoundingClientRect` + `getComputedStyle`），截图不替代
B5	代码评审隔离执行	SKILL §4.4	必须用 readonly Task subagent，标准化 prompt，零实现上下文，并行启动

C. 编码规则类（Static Rules — 编码时始终生效）

来源：6 个 .mdc 规则文件

#	规则	来源	核心要求
C1	文件命名	`vue-conventions` §1	路由页面 camelCase，组件 PascalCase
C2	强制 `<script setup>`	`vue-conventions` §2	禁止 Options API
C3	按功能聚合	`vue-conventions` §2	禁止按类型分组
C4	禁止动态拼接 i18n key / 资源路径	`vue-conventions` §3	必须静态字符串或映射对象
C5	Input 卫生	`vue-conventions` §4	`el-input` 必须 `v-model.trim` + `maxlength`
C6	枚举归属	`vue-conventions` §5	业务枚举必须定义在 `src/types/`，禁止 `.vue` 硬编码
C7	复用组件内聚	`vue-conventions` §6	共享组件拥有完整操作流，父页面只编排
C8	优先主题变量	`css-styling` §1	禁止硬编码 hex（有对应变量时）
C9	禁止任意嵌套	`css-styling` §2	只允许 `&` 开头嵌套
C10	禁止直接标签选择器	`css-styling` §3	除非在 `:deep()` 内
C11	用项目自定义 Select	`ui-component-usage` §2	禁止直接用 `el-select`（除非用户特别指定）
C12	面包屑层级	`ui-component-usage` §1	一级页面不显示，二级+ 显示且 `:show-back="true"`
C13	用 `usePagination`	`ui-component-usage` §3	分页必须走 composable
C14	用 StatusTag	`ui-component-usage` §4	状态标签不能自己写 HTML
C15	用 CustomEmpty	`ui-component-usage` §5	空状态不能用 el-empty 或自定义
C16	分页 API 类型	`pagination-types`	`PageRequest<T>` / `PageResponse<T>`
C17	i18n key 预检	SKILL §3.1.1	key 必须在所有 locale 文件中存在，禁止 fallback 替代

D. 治理类强约束

来源：rules-and-skills-governance.mdc

#	约束	说明
D1	变更后必须同步 README	任何 Rule / Skill 增删改后
D2	变更后必须通知用户	文件 + 内容 + 位置
D3	两层架构不可混淆	Rule 不放流程步骤，Skill 不重复编码约束

可跳过 / 有条件弱化的环节

以下环节在特定条件下可以被跳过或降级处理。

#	环节	跳过条件	说明
1	完整 6 阶段工作流	任务被分级为"轻量流程"（bug 修复、小改动、文字修改）	轻量流程只需遵守静态 Rules + 交付前 lint，无需 Spec / 验收报告
2	Spec Gate（Phase 2 等待确认）	用户说出白名单短语："跳过 Spec，直接编码" / "无需确认，直接按 Spec 实现" / "按 Spec 直接实现"	只有这几个精确短语有效，其他表述不能绕过
3	Figma 设计读取（Phase 1.1）	用户没有提供 Figma URL / 设计稿	走纯文本需求分析路径（Phase 1.2）。注意：有 Figma URL 但 MCP 失败时不可跳过，必须 STOP + ASK（§2.4）
4	Figma 截图比对	无设计稿时	降级为"浏览器截图 + 目视检查"，不做逐像素对比
5	关键尺寸的设计值 vs 实际值比对	无设计稿时	没有设计值可参照，只检查布局合理性
6	响应式逻辑检查	没有参考已有组件 / 参考组件无 `@container`/`@media`	Phase 1.3 "参考已有组件时必须检查"，不参考则无此检查
7	`pagination-request-response-types.mdc`	当前编辑文件不是 `.ts`	唯一非 `alwaysApply` 的 Rule，通过 `globs: */.ts` 触发
8	Phase 5 迭代循环	用户主动终止："不用改了" / 直接确认	验收报告后用户可以接受剩余 FAIL 项，直接进入 Phase 6
9	Phase 6 规范持久化	迭代过程中没有提出新约定 / 规范	只在用户反馈中包含可沉淀的新规则时触发
10	Browser MCP 工具选择	取决于环境可用性	`browsermcp` → `chrome-devtools` → `chrome-server` 三级回退；至少一种必须成功，否则需用户提供证据

流程约束全景图

完整任务流程中的"门"和"分支"：

  任务进入
    │
    ├─ 轻量流程 ───────────────────────▶ 直接编码(遵守 Rules) → lint → 交付
    │  ⬆ 可跳过完整流程
    │
    ├─ 完整流程
    │   │
    │   ├─ Phase 1: 有 Figma? ── 否 ──▶ 文本分析（跳过 Figma 读取）
    │   │                  └── 是 ──▶ Figma MCP 读取（失败 → STOP + ASK ❓）
    │   │
    │   ├─ Phase 2: Spec ──▶ 🔒 GATE: 等用户确认
    │   │                    └── 白名单短语可跳过 ✅
    │   │
    │   ├─ Phase 3: 编码（所有 Static Rules 强制生效 🔒）
    │   │
    │   ├─ Phase 4: 验收报告 🔒（四维全部执行，不可省略）
    │   │   ├─ 4.1 视觉：必须 MCP 截图 🔒（MCP 不可用 → STOP + ASK ❓）
    │   │   ├─ 4.2 交互：必须 MCP 自动化 🔒（MCP 不可用 → STOP + ASK ❓；每项须含具体操作/预期/实际）
    │   │   ├─ 4.3 逻辑：必须 MCP 控制台 🔒（MCP 不可用 → STOP + ASK ❓）
    │   │   └─ 4.4 代码评审：必须隔离 subagent 🔒
    │   │
    │   ├─ 🔒 GATE: 等用户确认修复
    │   │
    │   ├─ Phase 5: 迭代循环（用户可主动终止 ✅）
    │   │
    │   └─ Phase 6: 交付 + 规范沉淀（有新规范才触发沉淀 ✅）

图例：🔒 = 强约束不可跳过  ✅ = 有条件可跳过  ❌ = 失败时阻断  ❓ = 必须询问用户

快速上手

将 rules/ 和 skills/ 目录复制到项目的 .cursor/ 下
根据项目实际情况替换以下内容：
- ui-component-usage.mdc 中的组件名称和路径（CustomSelect → 你的自定义 Select，StatusTag → 你的状态标签组件，CustomEmpty → 你的空状态组件）
- css-styling-conventions.mdc 中的主题变量文件路径
- pagination-request-response-types.mdc 中的类型定义文件路径
如果项目不使用 Element Plus，将相关组件引用替换为对应 UI 库的组件
README.md 中的组件名称同步更新

文件清单

.cursor/
├── rules/                                          # Layer 1: 静态编码规则
│   ├── development-workflow.mdc                    # 流程入口 (任务分级 + 硬约束)
│   ├── vue-conventions.mdc                         # Vue 结构与编码 (6 sections)
│   ├── css-styling-conventions.mdc                 # CSS/SCSS 样式 (3 sections)
│   ├── ui-component-usage.mdc                      # 项目组件选用 (5 sections)
│   ├── pagination-request-response-types.mdc       # 分页 API 类型
│   ├── rules-and-skills-governance.mdc             # 元规则 (如何增删改规则)
│   └── README.md                                   # ← 本文件
│
└── skills/                                         # Layer 2: 流程工作流
    ├── development-workflow/
    │   └── SKILL.md                                # 主工作流 (6 phases)
    └── figma-design-implement/
        └── SKILL.md                                # Figma MCP 辅助 (2 sections)

Harness-Engineering

项目示例

1.首次输入

输入1.png

2.确认后进入开发环节

代码评审，由 subAgent 执行，并在独立对话中执行，用来隔离上下文，保证评审智能体不受前文影响

subAgent隔离评审1.png

3.首次交付确认

首次验收确认1.png

4.出现偏差时人工干预，并收集规则

规则沉淀1.png

关于AI前端工作流的推导

项目级约束

体系架构

体系架构

Layer 1: Rules（静态编码规则）

1. development-workflow.mdc（alwaysApply）

2. vue-conventions.mdc（alwaysApply）

3. css-styling-conventions.mdc（alwaysApply）

4. ui-component-usage.mdc（alwaysApply）

5. pagination-request-response-types.mdc（globs: **/*.ts）

6. rules-and-skills-governance.mdc（alwaysApply）

Layer 2: Skills（流程工作流）

1. development-workflow/SKILL.md（主工作流）

2. figma-design-implement/SKILL.md（Figma 辅助）

工作流程

完整流程（新页面 / 新组件 / 重大功能）

轻量流程（bug 修复 / 小改动）

新增规则 / 技能时

强约束清单（Hard Constraints）

A. 流程门控类

B. 验收报告内部强约束

C. 编码规则类（Static Rules — 编码时始终生效）

D. 治理类强约束

可跳过 / 有条件弱化的环节

流程约束全景图

快速上手

文件清单

项目示例

1.首次输入

2.确认后进入开发环节

3.首次交付确认

4.出现偏差时人工干预，并收集规则

1. `development-workflow.mdc`（alwaysApply）

2. `vue-conventions.mdc`（alwaysApply）

3. `css-styling-conventions.mdc`（alwaysApply）

4. `ui-component-usage.mdc`（alwaysApply）

5. `pagination-request-response-types.mdc`（globs: `**/*.ts`）

6. `rules-and-skills-governance.mdc`（alwaysApply）

1. `development-workflow/SKILL.md`（主工作流）

2. `figma-design-implement/SKILL.md`（Figma 辅助）