体系价值谁被改变，改变了什么
VALUE BY ROLE
Product Manager
产品经理
在原型阶段完成常规页面设计，页面交付路径变短。需求表达从「描述需求」变成 「直接给出符合规范的页面」，减少设计往返与口头沟通的失真。
Designer
设计师
从大量重复的常规页面中解放，把时间投入到重点页面的 UI UX 打磨，以及需要更多设计量的页面与物料；同时通过设计需求库承接产品经理无法完成的设计。
核心流程图一条主线，四类高频问题的旁挂处理
MAIN FLOW
从 AI 建原型到交付前端：主线共五步；产品经理在复核阶段遇到的具体问题走下方旁挂支线处理。
STEP 01
AI 建立原型
由产品经理用 AI 工具生成页面原型，常规简单页面在原型阶段成型。
STEP 02
按设计规范校验
提供设计规范链接 + 提示词 3 要点，让 AI 检查并修改所有页面。
STEP 03
产品经理复核与分流
确认页面清单；无法完成设计的页面导入「设计需求库」交设计师。
STEP 04
导出到 Figma
按 6 条硬性要求，将确认清单内的页面像素级导出到目标页。
STEP 05
核对、修复与交付
视觉核对 → 描述问题让 AI 修复 → 交付前端开发使用。
旁挂支线 · 产品经理用 AI 修改页面时的高频问题
问题 01
图标错误 / 品质过低
借助 Figma，在已有设计稿中找到适合的图标，复制它在 Figma 中的地址给 AI；同时告知需要替换的目标位置，并要求适配尺寸、字重与颜色。
问题 02
字体的视觉效果不对
找到已有的 Figma 设计稿，查看其中字体的字体名、字重、行高、字距、字色等参数，进行比对后，把需要的参数告诉 AI。
问题 03
跨平台字体不统一
苹果电脑与 Windows 电脑的原型，一律要求全局字体统一使用思源黑体 SC（Source Han Sans SC），两个平台不再区分字体。
问题 04
两个组件贴在一起没有间距
查阅现有的 Figma 设计稿，找到适配的间距数值，把这个数字给到 AI 去调整。
产品经理使用 Figma 的要点取参数、取图标、取间距的前提
FIGMA FOR PRODUCT MANAGER
01
必须使用教育版
Figma 必须是教育版，才能正常使用必要功能。
02
复制到自己的 design 文件
建议自己新建 design 文件，把需要查看、编辑的设计稿复制进自己的 design 文件内，防止毁坏参照用的设计稿文件。
03
参数取不到时，进入开发模式查看
查看距离与尺寸
想查看的距离和尺寸参数无法获取时，可进入开发模式，点击或悬停鼠标在目标组件上查看。
可执行 SOP照此执行的标准动作
STANDARD OPERATION
SOP 01
用 AI 修改原型
提示词 3 要点
把设计规范链接提供给 AI，提示词需要包含以下 3 个要点。
- 1检查并修改原型的所有页面，使它们符合该设计规范。
- 2不要改变原型页面的 UI 结构和文案。
- 3让 AI 列出所有页面，将不适用于设计规范的页面剔除出修改清单。
SOP 02
设计需求库
设计师建库 · 产品经理提需求
设计师新建一个 Figma 的 design 文件，并开放编辑权限给产品经理，作为设计需求的库。
- 1产品经理将自己无法完成设计的页面导入这个库。
- 2在库中标出页面描述和具体要求，交由设计师补齐设计。
SOP 03
让 AI 工具把原型页面导出到 Figma
6 条硬性要求
- 1告知 AI 工具哪些页面需要导出，先确认清单。
- 2要求将这些页面导出到 Figma（design 文件链接地址 + 页名称），地址在 Figma 的「分享」中可复制。
- 3要求页面必须视觉上百分之百还原原型页面，像素级还原。
- 4页面画布宽度锁定 390、高度最少 844；内容区需要完整显示，画布高度可向下延伸；底部 bar 在画布底部贴边。
- 5所有图标资源必须是 SVG 资源；原型中如有位图，要切图导出并保证清晰。
- 6若使用的是图形图像能力偏弱的大模型（比如 DeepSeek），可使用「run-to-figma」skill 进行页面导出。
SOP 04
交付前端前的视觉核对
核对 → 修复 → 必要时求助设计师
前端开发需要 Figma 设计稿，产品经理需要将自己负责的页面导入 Figma 内，方法与上一条一致，并在导出后进行以下动作。
- 1导出后进行视觉核对。
- 2描述问题让 AI 修复。
- 3若遇到无法搞定的还原问题，可以求助设计师进行处理（需开放编辑权限给设计师）。
前提与工具开始之前先准备好这几样
PREREQUISITE
Figma 教育版
产品经理侧取图标、取字体参数、取间距的工具前提，也是设计需求库与前端设计稿的承载平台。
run-to-figma skill
面向图形图像能力偏弱的大模型（比如 DeepSeek），用于把原型页面稳定导出到 Figma 的 skill。
github.com/XDean-Designer/Run-to-figma剑琅联盟 · AI 原型与设计工作的流程体系
Prototype & Design Workflow