@dev-workflow/skill 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (74) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +80 -0
  3. package/bin/cli.mjs +9 -0
  4. package/package.json +39 -0
  5. package/skills/artifact/README.md +23 -0
  6. package/skills/execution/devFlow/SKILL.md +341 -0
  7. package/skills/execution/devFlow/agents/openai.yaml +7 -0
  8. package/skills/execution/devFlow/domains/backend/references/api-tech.md +173 -0
  9. package/skills/execution/devFlow/domains/backend/scripts/check_api_tech_doc.mjs +170 -0
  10. package/skills/execution/devFlow/domains/backend/scripts/check_api_tech_doc.test.mjs +89 -0
  11. package/skills/execution/devFlow/domains/backend/templates/api-tech.md +164 -0
  12. package/skills/execution/devFlow/domains/frontend/references/contract-check.md +270 -0
  13. package/skills/execution/devFlow/domains/frontend/references/foundation-freeze.md +92 -0
  14. package/skills/execution/devFlow/domains/frontend/references/lightweight-flow.md +55 -0
  15. package/skills/execution/devFlow/domains/frontend/references/page-build.md +268 -0
  16. package/skills/execution/devFlow/domains/frontend/references/page-tech.md +414 -0
  17. package/skills/execution/devFlow/domains/frontend/references/product-design-specs/field-common.md +69 -0
  18. package/skills/execution/devFlow/domains/frontend/references/product-design-specs/fields-complex.md +105 -0
  19. package/skills/execution/devFlow/domains/frontend/references/product-design-specs/fields-id-code.md +44 -0
  20. package/skills/execution/devFlow/domains/frontend/references/product-design-specs/fields-number-date.md +106 -0
  21. package/skills/execution/devFlow/domains/frontend/references/product-design-specs/fields-relation.md +144 -0
  22. package/skills/execution/devFlow/domains/frontend/references/product-design-specs/fields-selectors.md +102 -0
  23. package/skills/execution/devFlow/domains/frontend/references/product-design-specs/fields-text.md +130 -0
  24. package/skills/execution/devFlow/domains/frontend/references/product-design-specs/index.md +42 -0
  25. package/skills/execution/devFlow/domains/frontend/references/product-design-specs/interaction.md +61 -0
  26. package/skills/execution/devFlow/domains/frontend/scripts/check_page_tech_doc.mjs +82 -0
  27. package/skills/execution/devFlow/domains/frontend/scripts/contract_check_static.mjs +145 -0
  28. package/skills/execution/devFlow/domains/frontend/scripts/generate_foundation_summary.mjs +224 -0
  29. package/skills/execution/devFlow/domains/frontend/templates/contract-report.md +66 -0
  30. package/skills/execution/devFlow/domains/frontend/templates/mini-plan-l0.md +7 -0
  31. package/skills/execution/devFlow/domains/frontend/templates/mini-plan-l1.md +9 -0
  32. package/skills/execution/devFlow/domains/frontend/templates/page-build/component.tsx.tpl +8 -0
  33. package/skills/execution/devFlow/domains/frontend/templates/page-build/constants.ts.tpl +5 -0
  34. package/skills/execution/devFlow/domains/frontend/templates/page-build/index.ts.tpl +1 -0
  35. package/skills/execution/devFlow/domains/frontend/templates/page-build/route.tsx.tpl +11 -0
  36. package/skills/execution/devFlow/domains/frontend/templates/page-build/service.ts.tpl +17 -0
  37. package/skills/execution/devFlow/domains/frontend/templates/page-build/types.ts.tpl +11 -0
  38. package/skills/execution/devFlow/domains/frontend/templates/page-tech.md +103 -0
  39. package/skills/execution/devFlow/domains/requirement/references/prd-review.md +129 -0
  40. package/skills/execution/devFlow/domains/requirement/templates/prd-review.md +57 -0
  41. package/skills/execution/figmaSync/SKILL.md +349 -0
  42. package/skills/execution/figmaSync/chapters/apply.md +177 -0
  43. package/skills/execution/figmaSync/chapters/plan.md +359 -0
  44. package/skills/execution/figmaSync/chapters/prepare.md +47 -0
  45. package/skills/execution/figmaSync/examples/native-css.md +129 -0
  46. package/skills/execution/figmaSync/examples/plan-doc-sample.md +39 -0
  47. package/skills/execution/figmaSync/scripts/_shared/session-log.mjs +82 -0
  48. package/skills/execution/figmaSync/scripts/_shared/token-resolver.mjs +132 -0
  49. package/skills/execution/figmaSync/scripts/_shared/token-source.mjs +145 -0
  50. package/skills/execution/figmaSync/scripts/figma-sync-report.mjs +448 -0
  51. package/skills/execution/figmaSync/scripts/icon-inventory.mjs +165 -0
  52. package/skills/execution/figmaSync/scripts/lookup-var.mjs +184 -0
  53. package/skills/execution/figmaSync/scripts/match-token.mjs +210 -0
  54. package/skills/execution/figmaSync/scripts/prepare-check.mjs +290 -0
  55. package/skills/execution/figmaSync/scripts/verify-plan.mjs +458 -0
  56. package/skills/execution/figmaSync/snapshots/README.md +13 -0
  57. package/skills/execution/figmaSync/snapshots/last-sync.md +1538 -0
  58. package/skills/execution/figmaSync/templates/PLAN.md.tpl +227 -0
  59. package/skills/review/consistency-checker/SKILL.md +112 -0
  60. package/skills/review/consistency-checker/rules/README.md +16 -0
  61. package/src/cli/agents.mjs +16 -0
  62. package/src/cli/copy.mjs +95 -0
  63. package/src/cli/install.mjs +131 -0
  64. package/src/cli/prompts.mjs +66 -0
  65. package/tools/lark/README.md +78 -0
  66. package/tools/lark/references/lark-doc.md +156 -0
  67. package/tools/lark/references/lark-read.md +235 -0
  68. package/tools/lark/references/prepare.md +147 -0
  69. package/tools/lark/scripts/lark_api.mjs +404 -0
  70. package/tools/lark/scripts/lark_api.test.mjs +63 -0
  71. package/tools/lark/scripts/lark_check_permissions.mjs +52 -0
  72. package/tools/lark/scripts/lark_publish_doc.mjs +299 -0
  73. package/tools/lark/scripts/lark_read_docx.mjs +328 -0
  74. package/tools/lark/scripts/markdown_to_lark_blocks.mjs +397 -0
@@ -0,0 +1,129 @@
1
+ # prd-review 子命令
2
+
3
+ `prd-review` 用于在需求进入 `page-tech` / `api-tech` 之前,按固定 checklist 审查一份 PRD,找出缺失、风险和技术冲突,产出可决策的问题清单。它不是需求整理、不是方案设计、不是视觉一致性检查,也不产出业务判断。
4
+
5
+ ## 边界
6
+
7
+ - 不改 PRD:只输出问题清单,让人决策。
8
+ - 不推方案:具体解法留给 `page-tech` / `api-tech`。
9
+ - 不做视觉一致性:属于 `consistency-checker` skill 的对齐边。
10
+ - 不做业务价值评估:只从技术侧给判断,产品价值由 PM 或用户拍板。
11
+ - 不做 L0 / L1 的快速审查:那种档位走不到本子命令。
12
+
13
+ ## 输入规则
14
+
15
+ 支持三种输入来源,处理方式不同:
16
+
17
+ 1. 本地 Markdown 文件:直接读取,路径必须相对仓库根目录。
18
+ 2. 飞书文档链接:必须先执行 `lark-read`,读取并结构化后再作为输入,不得只凭链接标题或用户转述猜测。
19
+ 3. 其他形式(Word、PDF、图片、聊天记录):必须先转成 Markdown 或粘贴到本地 md 文件后再进入本子命令。
20
+
21
+ 读取失败时停止审查并说明原因,不得基于空上下文生成问题清单。
22
+
23
+ ## 审查维度 checklist
24
+
25
+ 审查维度分三类,每次审查按顺序过一遍。PRD 未涉及的维度写入「本次未审查的项」段,不得静默跳过。
26
+
27
+ ### 缺失维度(M-Missing)
28
+
29
+ 产品口径本应写清但未写清。
30
+
31
+ | 码 | 维度 | 要点 |
32
+ | --- | --- | --- |
33
+ | M1 | 需求列表完整性 | 编号连续或跳号明确;优先级、功能模块归属、飞书追溯链接齐全 |
34
+ | M2 | 权限口径 | 谁能看、谁能改;前端 route guard 还是后端 API 校验;超级管理员豁免规则 |
35
+ | M3 | 数据口径 | 数据范围(ALL / DEPT / GROUP / SELF);计算原则;离职、停用、复职的联动 |
36
+ | M4 | 字段格式 | 命名规则、长度上限、是否可重复、大小写敏感、变量插值占位符标注 |
37
+ | M5 | 状态机 | 所有状态节点、允许的流转、每次流转的触发者和触发时机 |
38
+ | M6 | 边界与异常 | 空数据、失败、无权限、重复提交、并发冲突、部分数据缺失 |
39
+ | M7 | 操作日志覆盖率 | 每个新增、编辑、删除、状态变更、批量操作是否在日志范围内 |
40
+ | M8 | 兼容策略 | 历史数据迁移、旧版本用户和角色的映射、废弃能力的收敛路径 |
41
+ | M9 | 文案与 i18n | 变量插值占位符是否标明、中英文覆盖、错误提示是否统一 |
42
+ | M10 | 交互细节 | 溢出、loading、空态、未保存离开、失败重试、批量确认 |
43
+
44
+ ### 风险维度(R-Risk)
45
+
46
+ 技术能做但代价大或依赖多,需要主动指出让人决策。
47
+
48
+ | 码 | 维度 | 要点 |
49
+ | --- | --- | --- |
50
+ | R1 | 高成本 / 低价值 | 实现成本高但业务价值不明显的功能点 |
51
+ | R2 | 依赖上下游未定 | 依赖尚未确定或尚未开发的上下游系统 |
52
+ | R3 | 跨团队协作未明责 | 涉及多方协作但未明确谁负责哪部分 |
53
+ | R4 | 数据迁移无回滚 | 涉及数据迁移但未定义回滚策略 |
54
+ | R5 | 权限重构无灰度 | 涉及权限重构但未定义灰度或降级方案 |
55
+
56
+ ### 冲突维度(C-Conflict)
57
+
58
+ 技术做不了、成本远超收益、或与现有系统 / 规范 / PRD 内部矛盾。
59
+
60
+ | 码 | 维度 | 要点 |
61
+ | --- | --- | --- |
62
+ | C1 | 技术无法实现 | 例:依赖飞书 Open API 不支持的能力;依赖浏览器不允许的 API |
63
+ | C2 | 与代码 / 组件契约冲突 | 与仓库中现有 route、service、组件 props、状态模式冲突 |
64
+ | C3 | 与产品设计规范冲突 | 与 `domains/frontend/references/product-design-specs/` 中已确定的字段、交互、反馈规范冲突 |
65
+ | C4 | 需求内部矛盾 | A 章节说 X,B 章节说非 X;表格与正文表述不一致 |
66
+ | C5 | 与接口能力冲突 | 需求依赖某接口能力但接口文档或仓库代码显示不支持 |
67
+
68
+ ## 严重度分级
69
+
70
+ 只用三档,不用 P0 / P1 / P2,因为产品评审语境下三档更直观。
71
+
72
+ | 档 | 判定口径 | 处理时机 |
73
+ | --- | --- | --- |
74
+ | 🔴 阻塞 | 不解决无法进入 `page-tech` / `api-tech`;缺失该项会直接影响方案主结构;技术无法实现 | 必须在进入下游子命令前解决 |
75
+ | 🟡 严重 | 可以启动方案生成,但必须在 `page-build` 或后端联调前解决;影响接口契约、数据结构、状态机 | 必须在下游落地前解决 |
76
+ | 🟢 商榷 | 不影响主链路,但评审会需要同步;影响交互细节、文案、边界体验 | 评审会同步即可 |
77
+
78
+ 分档硬规则:
79
+
80
+ - 冲突维度中的 C1(技术无法实现)、C4(需求内部矛盾)默认 🔴。
81
+ - 缺失维度中的 M2、M3、M5 默认至少 🟡;影响入口可见性或核心状态流转时升 🔴。
82
+ - 风险维度中的 R4(数据迁移无回滚)、R5(权限重构无灰度)默认 🟡。
83
+ - 其他条目根据具体影响判定,判定理由必须写进条目的「影响」字段。
84
+
85
+ ## 工作流程
86
+
87
+ 1. 读入 PRD 上下文(本地 md 或 `lark-read` 输出)。
88
+ 2. 按 M1-M10、R1-R5、C1-C5 顺序逐维度扫一遍;每条命中都要锚到 `文件:行号` 或章节标题。
89
+ 3. 分档:按上面的分档硬规则和判定口径给每条问题标 🔴 / 🟡 / 🟢。
90
+ 4. 分组输出:阻塞、严重、商榷三段;同段内按维度码升序排列。
91
+ 5. 补写「通过的检查项」和「本次未审查的项」两段,让人能看出覆盖范围。
92
+ 6. 按档位决定产物形态:
93
+ - L0 / L1:不跑本子命令。
94
+ - L2:允许对话内出结论,也允许落 md,由用户选择。
95
+ - L3:必须落 `prd-review.md`。
96
+
97
+ ## 产物路径规则
98
+
99
+ - 默认落到 PRD 所在目录,命名 `prd-review.md`。
100
+ - 如同目录已存在 `prd-review.md`,追加时间戳后缀,例如 `prd-review-20260713.md`;不覆盖已有报告。
101
+ - L0 / L1 不强制落 md,对话内给结论即可。
102
+
103
+ ## 与下游的衔接
104
+
105
+ - 🔴 阻塞项未消除,不得进入 `page-tech` / `api-tech`;如用户强行推进,必须在下游产物的「风险与待确认项」中把阻塞项原样带过去。
106
+ - 🟡 严重项可以进入 `page-tech` / `api-tech`,但必须在下游文档的「风险与待确认项」中出现。
107
+ - 🟢 商榷项不阻塞任何下游动作,但必须保留在 `prd-review.md` 中作为评审留痕。
108
+
109
+ ## 飞书上下文规则
110
+
111
+ 如果 PRD 是飞书链接,必须先 `lark-read`,再进入本子命令;不得只根据链接标题猜测。读取失败时停止审查,说明失败原因,不得基于空上下文出问题清单。
112
+
113
+ ## 写作原则
114
+
115
+ - 每条问题都要锚到 `文件:行号` 或明确的章节标题。
116
+ - 每条问题的「建议」字段必须具体到能直接问 PM、后端或前端负责人,例如:「入口可见性判断口径是前端 route guard 还是后端 API 校验?」。
117
+ - 不臆想需求、接口字段、组件、权限、指标。
118
+ - 冲突项不得自行取舍,必须列出冲突双方,由用户或对应负责人决策。
119
+ - 通过的检查项也要列出来,让人能看出覆盖范围,避免只看到问题不看到扫过的面。
120
+
121
+ ## 交付前自检
122
+
123
+ 生成问题清单后,人工自检以下项:
124
+
125
+ - 每条问题都有位置锚点(文件:行号或章节标题)。
126
+ - 每条问题都有明确的档位(🔴 / 🟡 / 🟢)。
127
+ - 每条问题的「建议」字段具体、可直接提问。
128
+ - 「通过的检查项」和「本次未审查的项」两段都存在。
129
+ - 未把 PM 决策范围的问题(业务价值、优先级)当成技术问题输出。
@@ -0,0 +1,57 @@
1
+ <!-- prd-review 模板。生成正式文档时删除所有 HTML 注释。 -->
2
+ <!-- 分档标记:🔴 阻塞(不解决无法进入 page-tech / api-tech)|🟡 严重(必须在 page-build 或联调前解决)|🟢 商榷(评审会同步即可)。 -->
3
+
4
+ # PRD 审查报告:<PRD 相对路径>
5
+
6
+ ## 审查范围
7
+
8
+ - 文档:`<PRD 相对路径>`
9
+ - 审查时间:`<YYYY-MM-DD>`
10
+ - 审查维度:M1-M10、R1-R5、C1-C5
11
+ - 输入来源:<本地 md / 飞书链接(已 lark-read)>
12
+
13
+ ## 🔴 阻塞
14
+
15
+ <!-- 空则写「本轮审查未发现阻塞项」。 -->
16
+
17
+ ### #1 [维度码] <一句话摘要>
18
+
19
+ - 位置:`<file:line 或 章节标题>`
20
+ - 现状:<PRD 中是怎么写的>
21
+ - 影响:<不解决会导致什么,为什么定为阻塞>
22
+ - 建议:<可直接问 PM / 后端 / 前端的问题,或建议方向>
23
+
24
+ ## 🟡 严重
25
+
26
+ <!-- 空则写「本轮审查未发现严重项」。 -->
27
+
28
+ ### #1 [维度码] <一句话摘要>
29
+
30
+ - 位置:`<file:line 或 章节标题>`
31
+ - 现状:<PRD 中是怎么写的>
32
+ - 影响:<不解决会导致什么>
33
+ - 建议:<可直接提问或建议方向>
34
+
35
+ ## 🟢 商榷
36
+
37
+ <!-- 空则写「本轮审查未发现商榷项」。 -->
38
+
39
+ ### #1 [维度码] <一句话摘要>
40
+
41
+ - 位置:`<file:line 或 章节标题>`
42
+ - 现状:<PRD 中是怎么写的>
43
+ - 影响:<不解决会导致什么>
44
+ - 建议:<可直接提问或建议方向>
45
+
46
+ ## 通过的检查项
47
+
48
+ <!-- 按维度码升序列出扫过并通过的项,让审阅者看到覆盖范围。 -->
49
+
50
+ - ✅ <维度码> <被检查项摘要>
51
+ - ✅ <维度码> <被检查项摘要>
52
+
53
+ ## 本次未审查的项
54
+
55
+ <!-- PRD 完全未涉及该维度时,写在这里,避免静默跳过。 -->
56
+
57
+ - ⏭ <维度码> <被检查项>:<跳过原因,如「本期不做」「PRD 未提及且不属于本次范围」>
@@ -0,0 +1,349 @@
1
+ ---
2
+ name: figmaSync
3
+ description:
4
+ Figma → 原生 CSS 落地规划工作流。命令路由:`figmaSync prepare`
5
+ 检查环境;`figmaSync plan <figma-url>` 先读取真实页面基建和
6
+ foundation-summary,再分析设计稿,匹配 /theme CSS 变量、 Apex UI、common
7
+ component 与 assets,并落地 PLAN.md + figma-plan.css 草案; `figmaSync apply
8
+ [path]` 根据已审核 PLAN.md 和 CSS 草案实施编码。
9
+ ---
10
+
11
+ # Figma to Native CSS (`/figmaSync`)
12
+
13
+ ## 对齐边诊断
14
+
15
+ | 项 | 值 |
16
+ |---|---|
17
+ | 服务对齐边 | UI↔前端 |
18
+ | 现状分级 | 结构性不健康 |
19
+ | AI 形态 | 兜底 + 校准 |
20
+ | 主战场 | 开发中 |
21
+
22
+ ## 这个 skill 解决什么问题
23
+
24
+ 把 Figma 视觉稿落成可审核的原生 CSS 方案,避免"UI 稿细节 → 前端实现"这条边只靠 UI 评审兜底导致的漏还原。
25
+
26
+ ## 什么时候用
27
+
28
+ - 用户显式输入 `figmaSync prepare / plan / apply`
29
+ - 用户提供 Figma URL 并要求"还原视觉 / 生成页面样式"
30
+ - 页面基建就绪,进入视觉落地阶段
31
+
32
+ ## 前置产物
33
+
34
+ | 产物 | 来源 | 是否必需 |
35
+ |---|---|---|
36
+ | Figma URL | 人工提供 | 必需 |
37
+ | `foundation-summary.md` | `devFlow foundation-freeze` | plan 必需 |
38
+ | 已存在的页面 route / components / service | admin-fe 仓库 | 必需 |
39
+
40
+ ## 输出产物
41
+
42
+ | 产物 | 位置 | 下游消费者 |
43
+ |---|---|---|
44
+ | `PLAN.md` | 项目文档目录 | 人工评审 → apply |
45
+ | `figma-plan.css` | 项目文档目录 | 人工评审(不直接接入业务) |
46
+ | 页面 CSS 与组件代码 | admin-fe 仓库 | 前端开发 |
47
+
48
+ ## 下一步
49
+
50
+ - `prepare` 通过 → `figmaSync plan <figma-url>`
51
+ - `plan` 输出 `PLAN.md` 人工评审后 → `figmaSync apply`
52
+ - `apply` 完成 → 自测 / 联调
53
+
54
+ ## 明确不做
55
+
56
+ - 不重新规划路由、不重写 service 契约、不改核心状态模型 —— 归属 `devFlow`
57
+ - 不生成 API 契约文档 —— 归属 `devFlow api-tech`
58
+ - 不做 PM↔UI 一致性检查 —— 归属 `consistency-checker`
59
+ - 不因为 Figma 图层结构重拆业务组件 —— 只补视觉、布局、Apex UI 选型、CSS
60
+
61
+ ---
62
+
63
+ ## 详细规则
64
+
65
+ 此技能用于把 Figma 业务设计稿转换为可审核、可落地的 React + 原生 CSS 方案。
66
+
67
+ 核心原则:
68
+
69
+ - 执行 admin-fe 任务时必须遵守项目根目录 `ADMIN_FE_WORKFLOW.md`。
70
+ - L0/L1 小需求不强制进入 figmaSync;只有 Figma 视觉落地、新页面或页面级视觉重构才进入 plan/apply。
71
+ - 代码事实优先于设计稿推断;plan 阶段必须读取目标页面 route、components、service、types、constants 和最新
72
+ `foundation-summary.md`。
73
+ - 样式优先复用 `/theme` 中已有 CSS variables。
74
+ - 能用 Apex UI props 解决的视觉,不写 CSS 覆盖。
75
+ - 能复用 common component、业务组件、icons/assets 的,不重新造。
76
+ - `figmaSync` 只补视觉、布局、Apex
77
+ UI 选型、CSS 和局部展示细节;不能重新规划路由、重写 service 契约、改变核心状态模型或因为 Figma 图层结构重拆业务组件。
78
+ - `plan` 阶段必须同时产出 `PLAN.md` 和
79
+ `figma-plan.css`,便于用户在编码前审核样式结构。
80
+ - `plan` 阶段产出的 `figma-plan.css` 是审核草案,不直接接入业务代码。
81
+
82
+ ## 命令路由
83
+
84
+ | 用户输入 | 跳到 | 用途 |
85
+ | ----------------------------------- | -------------------------------------------- | ---------------------------------------- |
86
+ | `figmaSync prepare` | [chapters/prepare.md](./chapters/prepare.md) | 检查技术栈、/theme、Apex UI 与资产可用性 |
87
+ | `figmaSync plan <figma-url>` | [chapters/plan.md](./chapters/plan.md) | 分析设计稿,落地 PLAN.md + CSS 审核草案 |
88
+ | `figmaSync apply [path/to/PLAN.md]` | [chapters/apply.md](./chapters/apply.md) | 根据已审核 PLAN.md 和 CSS 草案实施页面 |
89
+ | 未指明命令,仅给 Figma 链接 | 询问用户是 `plan` 还是 `apply` | — |
90
+
91
+ 第一次使用必须先跑 `figmaSync prepare`。
92
+
93
+ ## 0. CSS 变量体系一览
94
+
95
+ 项目的标准变量源是 `/theme`,当前重点读取:
96
+
97
+ - `theme/dark/primitives.css`
98
+ - `theme/dark/aliases.css`
99
+
100
+ 变量层级按语义分为:
101
+
102
+ | 层级 | Set | 用途 | 示例 |
103
+ | ------ | ------------ | ---------------------------------------------- | ---------------------------------- |
104
+ | 调色板 | `palette` | 原始颜色色卡,业务 CSS 不直接优先引用 | `palette.grey.3` |
105
+ | 语义 | `foundation` | 中性、品牌、状态等语义色 | `foundation.fill.neutral.tertiary` |
106
+ | 基础 | `baseValue` | spacing、radius、border、size、fontSize 等数值 | `baseValue.spacing.8` |
107
+
108
+ 推荐顺序:
109
+
110
+ - 颜色:优先 `foundation`,只有没有语义变量时才考虑 `palette`。
111
+ - 数字:优先 `baseValue`。
112
+ - 未命中:写入 `figma-plan.css`
113
+ 注释,等待用户确认是否新增变量或接受一次性 CSS 值。
114
+
115
+ ## 1. 上下文准备
116
+
117
+ 通过 Figma MCP 获取目标节点的结构、截图、variables 与 design context:
118
+
119
+ - `get_metadata`
120
+ - `get_screenshot`
121
+ - `get_variable_defs`
122
+ - `get_design_context`
123
+
124
+ ## 2. 匹配流程
125
+
126
+ 对每个节点按以下顺序处理,命中即停。
127
+
128
+ ### Fast Path 0 — Apex UI 组件复用
129
+
130
+ 阅读 `node_modules/@frontend/apex-ui--react/dist/llms.txt` 或单组件
131
+ `dist/llm/<component>.txt`,判断当前 Figma 节点是否能映射到已有组件:
132
+
133
+ - Button / Input / Select / Table / Modal / Drawer / Card / Tag / Tabs / Tooltip
134
+ / Menu / Pagination …
135
+ - 命中后直接使用 Apex UI 组件。
136
+ - 视觉差异优先走组件 props,例如 `type`、`size`、`variant`。
137
+ - 能通过 props 表达的样式,不写入 `figma-plan.css`。
138
+
139
+ 不走 Apex UI 的场景:节点明显是自定义容器、业务卡片、特殊布局、复杂组合模块。
140
+
141
+ ### Fast Path 1 — Figma variables 直连 /theme
142
+
143
+ 如果 `get_variable_defs` 返回变量名或变量路径,先在 `/theme` 变量记录中查找。
144
+
145
+ 命中后在 PLAN.md 记录:
146
+
147
+ - `cssVariable`:真实 CSS variable,例如 `--fill-neutral-primary`
148
+ - `themePath`:变量路径,例如 `foundation.fill.neutral.primary`
149
+ - `cssValue`:原始值或 alias 表达式
150
+ - `usage`:建议用在哪些 CSS 属性上
151
+
152
+ 在 `figma-plan.css` 中使用真实 CSS variable:
153
+
154
+ ```css
155
+ .client-page {
156
+ background: var(--fill-neutral-primary);
157
+ }
158
+ ```
159
+
160
+ ### Fast Path 2 — CSS `var(--xxx)` 查表
161
+
162
+ 如果 Figma CSS 含 `var(--xxx, fallback)`,运行:
163
+
164
+ ```bash
165
+ node .agent/skills/figmaSync/scripts/lookup-var.mjs "var(--fill-neutral-primary, #090A0B)"
166
+ ```
167
+
168
+ 成功输出示例:
169
+
170
+ ```json
171
+ {
172
+ "success": true,
173
+ "cssVariable": "--fill-neutral-primary",
174
+ "themePath": "foundation.fill.neutral.primary",
175
+ "cssValue": "{grey.14}",
176
+ "usage": ["color"],
177
+ "layer": "foundation",
178
+ "shortRef": "fill.neutral.primary"
179
+ }
180
+ ```
181
+
182
+ 必须把 `cssVariable` 写入 CSS,把 `themePath` 写入 PLAN.md 便于审核。
183
+
184
+ ### Slow Path — 反向值匹配
185
+
186
+ 仅当设计师把值写死为裸 `#hex`、`rgb()` 或 `Npx` 时运行:
187
+
188
+ ```bash
189
+ node .agent/skills/figmaSync/scripts/match-token.mjs "<value>"
190
+ ```
191
+
192
+ 成功输出推荐的 CSS variable 与 `/theme` 路径。命中后仍然在 `figma-plan.css`
193
+ 中使用 CSS variable,不直接写死值。
194
+
195
+ ### Reuse Path — common component 与 assets
196
+
197
+ 在进入自定义 CSS 前,必须扫描并记录复用机会:
198
+
199
+ - `src/common/**`
200
+ - 目标业务目录附近已有组件
201
+ - `assets/`
202
+ - `public/`
203
+ - `src/**/assets/`
204
+ - `src/**/icons/`
205
+
206
+ 判断标准:
207
+
208
+ - 组件语义一致且 props 能覆盖当前需求 → 复用。
209
+ - icon/assets 文件名或组件名能和 Figma 节点语义匹配 → 复用。
210
+ - 仅视觉相似但语义不同 → 不确认命中,写入待确认清单。
211
+
212
+ ### 样式归属判定
213
+
214
+ 生成 CSS 草案前,必须先判断每条 Figma 样式属于谁控制。不能因为
215
+ `get_design_context` 返回了颜色、边框、圆角或字号,就机械写入 `figma-plan.css`。
216
+
217
+ 按以下顺序判定:
218
+
219
+ 1. **Apex UI 组件自管样式**
220
+ - 由 Apex UI 组件 props、内置状态、组件内部 token 控制。
221
+ - 只写入 PLAN.md 的组件映射决策,不写入 `figma-plan.css`。
222
+ - 典型例子:
223
+ - `Button`:`type`、`size`、`disabled`、`loading`、`icon`。
224
+ - `Tag`:`color`、`variant`、`size`、`icon`。
225
+ - `Tabs`:`type`、`activeKey`、`disabled`。
226
+ - `Input`、`Select`、`DatePicker`:`size`、`status`、`disabled`。
227
+ - `Table`:`size`、`loading`、`pagination`、`scroll`、列宽、固定列。
228
+ - `Pagination`:`showSizeChanger`、`disabled`、`pageSizeOptions`。
229
+ - `Drawer`、`Modal`:`size`、`mask`、按钮 props。
230
+ - 若 Figma 中出现的是组件状态色,例如 primary、success、warning、error、active、disabled、hover、selected,应优先映射为对应组件 prop 或状态,不写 CSS 色值。
231
+ 2. **业务组件自管样式**
232
+ - 由业务组件内部状态映射或已有 class 控制,例如业务状态 tag、业务卡片、业务列单元格。
233
+ - 可写 CSS,但必须限定在业务组件私有 class 下。
234
+ - 如果业务组件内部最终使用 Apex UI 组件,颜色、尺寸、状态仍优先交给 Apex UI
235
+ props。
236
+ 3. **页面布局样式**
237
+ - 页面容器、grid、flex、gap、padding、position、overflow、responsive、局部尺寸约束等。
238
+ - 可以写入 `figma-plan.css`,并优先使用 `/theme` CSS variables。
239
+ 4. **未命中或无法归属样式**
240
+ - 写入 PLAN.md 待确认。
241
+ - `figma-plan.css` 只写 TODO 注释,不直接写死裸值。
242
+
243
+ PLAN.md 的组件映射决策必须说明样式归属:`Apex UI props`、`业务组件 CSS`、
244
+ `页面 CSS` 或 `待确认`。`figma-plan.css` 只允许出现 `业务组件 CSS` 和 `页面 CSS`
245
+ 需要承载的样式。
246
+
247
+ ## 3. 原生 CSS 落地策略
248
+
249
+ ### Level 1 — 组件局部 CSS
250
+
251
+ 适用:页面或业务组件私有布局、容器、间距、无法由 Apex UI props 表达的简单状态。
252
+
253
+ 动作:
254
+
255
+ - plan 阶段写入 `figma-plan.css`。
256
+ - apply 阶段按项目结构迁移为正式 CSS 文件,例如 `route.css`、`styles.css`
257
+ 或组件旁 CSS。
258
+ - class 使用 kebab-case。
259
+
260
+ ### Level 2 — 已有 common component 扩展
261
+
262
+ 适用:设计稿对应的能力已在 common component 中存在,但缺少少量状态或 class
263
+ slot。
264
+
265
+ 动作:
266
+
267
+ - PLAN.md 中列出扩展点和影响面。
268
+ - apply 前必须让用户确认是否改公共组件。
269
+
270
+ ### Level 3 — 新增 /theme 变量
271
+
272
+ 适用:明确跨页面复用、且现有 `/theme` 找不到合适变量。
273
+
274
+ 动作:
275
+
276
+ - PLAN.md 记录建议新增变量名、来源值、用途和影响面。
277
+ - plan 阶段不直接修改 `/theme`。
278
+ - apply 阶段只有在用户明确确认后才修改 `/theme`。
279
+
280
+ ## 4. CSS 草案规则
281
+
282
+ `figmaSync plan` 必须在 PLAN.md 同目录生成:
283
+
284
+ ```text
285
+ figma-plan.css
286
+ ```
287
+
288
+ 该文件必须包含:
289
+
290
+ - 页面根 class。
291
+ - 主要区块 class。
292
+ - 关键状态 class。
293
+ - 真实 CSS variable 引用。
294
+ - 只属于页面或业务组件的样式。
295
+ - 未命中变量的注释,格式为:
296
+
297
+ ```css
298
+ /* TODO(figmaSync): unmatched color #123456 from node 1:2; needs user confirmation */
299
+ ```
300
+
301
+ 该文件禁止包含:
302
+
303
+ - 能通过 Apex UI props 表达的样式覆盖。
304
+ - Apex UI 组件自管状态色、状态背景、状态边框、内置圆角、内置字号等。
305
+ - 从 Figma 组件实例中抄出的 Apex UI 内部 token 覆盖。
306
+
307
+ ## 5. 任务边界
308
+
309
+ ### 任务开始
310
+
311
+ 每次 figmaSync 任务启动前必须清空旧 session 记录:
312
+
313
+ ```bash
314
+ pnpm figma:report --reset
315
+ ```
316
+
317
+ ### plan 收尾
318
+
319
+ 必须运行:
320
+
321
+ ```bash
322
+ pnpm figma:verify-plan <path/to/PLAN.md>
323
+ pnpm figma:report --command=plan --plan=<PLAN.md 路径> --target-dir=<PLAN.md 所在目录>
324
+ ```
325
+
326
+ ### apply 收尾
327
+
328
+ 必须运行:
329
+
330
+ ```bash
331
+ pnpm figma:report --command=apply --plan=<PLAN.md 路径> --target-dir=<PLAN.md 所在目录>
332
+ pnpm typecheck
333
+ pnpm format:check
334
+ pnpm lint
335
+ ```
336
+
337
+ 若格式检查失败,运行 `pnpm format` 后重新检查。
338
+
339
+ ## 6. 速查命令
340
+
341
+ | 命令 | 用途 |
342
+ | ------------------------------------------------------------- | ------------------------------------------ |
343
+ | `pnpm figma:prepare` | 检查 /theme、Apex UI、common/assets 可用性 |
344
+ | `pnpm figma:report --reset` | 清空本次 session 记录 |
345
+ | `node .agent/skills/figmaSync/scripts/lookup-var.mjs "--xxx"` | CSS variable → /theme 路径 |
346
+ | `node .agent/skills/figmaSync/scripts/match-token.mjs "#xxx"` | 裸值 → 推荐 CSS variable |
347
+ | `node .agent/skills/figmaSync/scripts/icon-inventory.mjs` | 扫描 icon/assets |
348
+ | `pnpm figma:verify-plan <PLAN.md>` | 校验 PLAN.md 与 figma-plan.css |
349
+ | `pnpm figma:report --command=plan ...` | 生成 plan session report |