简介：这款标注插件面向需要经常在Photoshop中对设计稿进行尺寸、距离、区域标注的UI设计师与前端工程师，支持在PS CC及以上版本中免费使用。资源共73个文件，压缩包仅207KB，包含37个PNG图标、12个JS脚本、8个JSX扩展程序及CSS样式文件等，分别负责标注控件外观、插件交互逻辑与面板展示，解压后复制到CEP扩展目录即可完成安装，包内附带说明文档与部署配置，方便查看安装要求。已有2731人学习下载。插件内置完整标注工具集，支持水平与垂直距离测量、坐标位置标注、颜色拾取、矩形区域标注等多种常用功能，并提供浅色与深色两套主题及多种箭头样式，可显著提升设计稿评审与开发切图时的沟通效率。需注意安装后不要升级，早期版本可长期免费使用，适合追求轻量高效标注流程的个人设计师与小团队。

1. parker是给谁用的标注插件：先搞清楚它替代了什么

做 UI 设计或者切图对接的时候，最烦的不是画图，而是把设计稿里的间距、字号、颜色一个个量出来。PS 自带的标尺和信息面板能看，但要手动记、手动标，一次标注几十个图层，眼睛都快看花。parker 这个 PS 标注工具解决的就是这件事：在 Photoshop 里选中图层，直接生成尺寸、间距、颜色、文字属性的标注，还能按倍率导出切图，省掉中间那堆重复劳动。适合 UI 设计师、前端工程师和产品经理，尤其适合那种一周要出几十张标注图、还要跟着版本迭代反复改稿的场景。parker 有免费版，基础标注能力够用。下面我会从安装、实操、踩坑到进阶配置一条线讲完，重点说免费版和付费版的边界，以及最容易翻车的几个细节。

2. 安装与激活：把parker装进PS的CEP扩展目录

2.1 安装前的版本要求与免费版边界

parker 走的是 Photoshop 的 CEP（Common Extensibility Platform）扩展机制，本质是一个基于 HTML/JS 的扩展面板，不是滤镜也不是脚本。所以它能不能装上，取决于你的 PS 支不支持 CEP 扩展。常见做法是先看 PS 版本：parker 免费版一般支持 PS 2018 到 2024 这些主流版本，太老的 CS6 基本没戏，太新的 beta 版偶尔也会因为 PS 自身改动出现兼容问题。

免费版和付费版的边界，我拆过几个同类插件，套路都比较类似：免费版覆盖「单张设计稿标注 + 基础切图」，也就是标注间距、尺寸、颜色、文字，导出 1 倍图；付费版开放「批量标注、多倍率切图、自定义标注样式、团队规范同步」这些进阶功能。parker 免费版我没记错的话，切图倍率通常在 1x/2x/3x 之间选择，但导出带不带平台前缀、能不能改输出命名规则，可能是付费点。建议你先拿免费版跑通“标注-导出-交付”这条链路，确认顺手再决定要不要升级。

2.2 安装步骤与扩展面板加载

安装 paker 之前，先把 Photoshop 完全关闭，不然扩展目录被占用，装完面板也刷不出来。然后在系统层面找到 CEP 扩展目录：

Windows 路径一般是：

C:\Users\<你的用户名>\AppData\Roaming\Adobe\CEP\extensions

macOS 路径一般是：

/Library/Application Support/Adobe/CEP/extensions

把下载好的 parker 插件文件夹（通常是 .zxp 解压后的文件夹，或者直接是包含 CSXS 目录的插件包）整体复制进去。需要注意，复制进去的文件夹名字不要带中文和空格，比如parker-free这种命名最稳，PS 的 CEP 解析对带空格的扩展目录名偶尔会抽风。

复制完成后启动 Photoshop，在菜单栏找到「窗口 → 扩展」看列表里有没有 parker。如果扩展列表里没出现，不要急着重装，先检查是不是 PS 默认禁用了第三方扩展。常见做法是打开「首选项 → 增效工具」面板，把「允许扩展连接到 Internet」和「载入扩展面板」都勾上，重启 PS 再看一次。我遇到过的安装失败案例里，有一半是这一步没勾导致的。

2.3 免费版功能清单与升级判断

为了让你一眼看清免费版能做什么，我把常见的功能边界列个表：

这个表不是 parker 官方的说法，是我按同类插件的普遍策略整理的，具体以你下载的免费版实际面板为准。判断要不要升级，我一般看两个信号：一是团队是否要求输出带 @2x/@3x 前缀的切图包，二是设计稿是否是多画板批量交付。如果两个都没中，免费版能扛住大部分日常标注工作。

3. 标注实操：从图层准备到切图导出的完整流程

3.1 标注前置准备：图层命名与画布规范

parker 虽然能自动标注，但标注质量高度依赖图层的「可读性」。如果图层名是「图层 1 拷贝 3」，标注出来你根本不知道这是按钮还是输入框，前端拿到也看不懂。所以我建议在标注之前，先花十分钟过一遍图层面板。

我一般会用一段小脚本批量清理未重命名的图层，把它改成包含尺寸信息的名字，这样标注图上即便不带引线，前端也能从图层结构里反推层级关系。下面这个脚本是给 PS 的 ExtendScript 用的，把「图层 1」「图层 1 拷贝」这类名字改成layer_序号：

// 批量重命名未修改过的图层 // 用法：文件 → 脚本 → 浏览，选择本脚本运行 var doc = app.activeDocument; var layers = doc.layers; for (var i = 0; i < layers.length; i++) { var name = layers[i].name; // 匹配 "图层 X" 或 "Layer X" 这种默认名 if (/^(图层|Layer)\s?\d+.*$/.test(name)) { layers[i].name = "layer_" + i; } }

这段脚本的逻辑是遍历当前文档的顶层图层，用正则匹配 PS 默认生成的图层名，只要是默认名就统一改成layer_序号。参数说明：/^(图层|Layer)\s?\d+.*$/里的\s?匹配「图层 1」和「图层1」两种格式，.*$把「拷贝 3」这种后缀也吃掉。注意它只处理顶层图层，如果设计稿里分组很深，你需要在脚本里递归遍历子图层，否则内层默认名不会被改到。跑脚本之前先另存一份 PSD，这种批量操作没有后悔药，改错了再撤销很麻烦。

3.2 间距与尺寸标注：点击两下出结果

parker 的间距标注逻辑和我在其他工具里看到的不太一样，它不是让你先画一根线再填数字，而是「选中目标图层，再点一个参考方向」，插件自动测量目标图层到相邻图层的距离。具体操作顺序是：

1. 在图层面板里点击要标注的图层
2. 在 parker 面板里选择「间距标注」
3. 鼠标移动到设计稿上，parker 会实时显示目标图层到四周图层的距离
4. 点击确定，标注线生成

第一次用的时候容易犯一个错误：以为要先选中参考图层再选中目标图层。parker 的做法只认当前选中的图层作为「基准」，然后你移动到其他图层上取距离。所以如果你想标 A 到 B 的距离，先点 A，再移动鼠标到 B 上，看到 B 的边缘出现标尺线再点击。

尺寸标注就简单多了，选中图层直接点「尺寸」，插件会输出宽高和圆角半径（如果检测到圆角矩形）。这里有个细节：parker 读取的是图层的边界框尺寸，不是视觉透视图层尺寸。如果你做了旋转、缩放或者自由变换，标注出来的宽高是变换后的包围盒，不是原始数值。这不算 bug，标的就是当前画布上的实际大小，但是如果你之后又改了变换参数，标注不会自动刷新，需要删掉重新标。

3.3 颜色拾取与样式导出

颜色标注分两种场景：一种是标注纯色填充图层，选中图层面板里的形状图层，parker 自动识别填充色并输出 HEX 值；另一种是标注位图/渐变图层的颜色，这时候需要用取色器手动点选画布区域。

手动取色时，建议把 PS 的「吸管工具」取样大小改成「3×3 平均」而不是「取样点」。原因很简单：设计稿边缘通常有抗锯齿，取样点取到的颜色会和实际视觉颜色差几个色阶，前端按这个值还原页面时会发现边角有色差。这个设置不在 parker 里，在 PS 顶部工具栏的吸管工具选项里。

样式导出方面，parker 免费版一般支持把标注结果导出成 PNG 图带标注引线，或者生成一份文本格式的样式清单。我在实际项目里的习惯是：导出 PNG 标注图给视觉评审用，同时导出一份纯文本样式清单给前端写样式用。文本清单里如果包含字体、字号、行高、字重、颜色，这一个文件基本就够开发还原了。格式类似下面这样：

按钮-主操作 宽度: 120px 高度: 40px 圆角: 4px 字体: PingFang SC 字号: 14px 行高: 20px 颜色: #FFFFFF 背景: #4A90E2

如果 parker 免费版不能导出文本清单，也可以用 PS 自带的「导出一份为 PDF」或者截图插件补上，但那样效率会低一些，而且容易漏标注。

3.4 切图导出：倍率、格式与命名规则

切图导出是 parker 里最省时间的功能。选中图层，点击「切图」按钮，插件会按你预设的倍率输出 PNG 资源。免费版的常见限制是导出倍率固定，或者一次只能导一个图层，但小项目也够用。

切图导出的格式我一般建议：图标类用 PNG，背景类用 JPG，需要动画或透明度渐变的用 PNG/WebP。parker 面板里通常有格式下拉框，但是免费版可能锁住 WebP 选项，这个看你的版本。

命名规则是个大坑。parker 默认按图层名导出资源文件，如果你的图层叫「图层 1」，导出来的就是图层 1.png。前端拿到这种文件名，要么手动改，要么写脚本批量处理。我的习惯是在切图前先跑一遍前面说的图层重命名脚本，把图层名改成英文小写加下划线，比如btn_primary、icon_arrow_right，这样导出的文件直接就能提交。如果设计稿里同一个图标有两处不同颜色，命名时带上颜色后缀，比如icon_close_red.png和icon_close_white.png。

4. 常见问题排查：安装失败、标注失灵、导出翻车

4.1 Windows 下扩展不显示的三种原因

现象：按上面的步骤把 parker 装进 CEP 扩展目录，重启 PS 后在「窗口 → 扩展」里看不到 parker 面板。

原因一：PS 版本不支持 CEP 扩展。CS6 之前的版本根本不加载 CEP 扩展，你需要确认自己的 PS 版本是否在 parker 支持范围内。解决办法是换用支持 CEP 的 PS 版本，或者用 parker 提供的独立版标注工具（如果有）。原因二：CEP 扩展目录放错了。常见做法是把插件文件夹解压后直接扔进去，但是某些版本要求文件夹内必须包含CSXS/manifest.xml才能被识别。检查一下你放进 extensions 目录的文件夹里有没有 CSXS 文件夹，没有的话需要把插件包里的真实内容上移一层。原因三：缺少.debug配置。如果你的 PS 是精简版或者绿色版，可能默认关闭了第三方扩展的调试开关。在 CEP 扩展目录下新建一个mjs-vip.json文件（文件夹不存在就创建），写入{"enabled": true}，再重启 PS。

解决后检查顺序是：先确认 PS 版本，再确认目录结构，最后加调试开关。不要一上来就重新下载安装包，浪费时间的可能性很大。

4.2 标注数字与设计稿视觉偏差

现象：parker 标注出来的图层宽度是 118px，但是用 PS 标尺手动量出来是 120px，差了两个像素。

原因：parker 读取的是图层的「变换边界」，如果你对图层做过旋转或者斜切，标注结果会比视觉边界小。尤其是带投影的图层，投影视觉上占了空间，但变换边界不包含投影。解决办法是：在标注之前，先把图层栅格化或合并投影到图层内容里。最常见的情况是「投影」图层样式导致的尺寸偏差，我的做法是把投影的「图层样式 → 投影 → 全局光」关掉，让阴影不参与边界计算，等标注完成再改回来。

如果你用的是免费版，没有手动调整标注线的功能，那标注位置一旦生成，跟实际偏差就只能删掉重标。免费版的精度的确比付费版粗，但它不会把尺寸量错，最多是引线和文字位置不如付费版灵活。

4.3 切图导出尺寸不对、格式错乱

现象：选了 2x 倍率导出，结果 PNG 文件的实际尺寸还是 1x；或者导出后文件是空的，打开只有透明背景。

原因一：源图层是智能对象且引用了外部链接图源，parker 基于图层边界计算切图时，智能对象没有实时栅格化，导致输出异常。解决方法是先「栅格化图层」再切图，或者使用「图层 → 智能对象 → 导出内容」这个 PS 原生功能先处理。原因二：画布上有隐藏图层，你把可见性和锁定搞混了。parker 的切图如果按「可见图层」导出，隐藏的辅助图层不会进切图；如果按「选中图层」导出，隐藏图层也可能被包含进去，这取决于你装的版本的实现。

表格里列一下常见标注符号的含义，方便对照排查：

4.4 parker 面板显示空白、按钮全部置灰

现象：扩展能打开，但面板内容空白，或者所有按钮都是灰色的点不动。

原因：parker 面板依赖本地服务端口通信，如果系统防火墙拦了本地回环地址（127.0.0.1），面板就收不到 PS 的图层数据。解决方法是检查防火墙设置，把 Photoshop 和扩展进程加入允许列表。另外，如果你同时开了多个 PS 文档，parker 面板通常会绑定当前活动文档，需要点一下画布把文档激活，面板的按钮才会亮起来。这个坑很隐蔽，我头一次遇到时以为是插件坏了，重装了两遍才发现只是文档没激活。

还有一种是 PS 的语言版本问题。parker 的免费版有时对中文版 PS 的图层类型识别不全，导致无法标注文字图层。解决办法是在 PS 里临时切换界面语言为英文，标注完再换回来，或者手动把文字图层转为形状图层再标注。

5. 进阶技巧：用parker的输出统一团队标注规范

parker 这类标注插件，最大的价值不在标注本身，而在于输出格式的统一。团队里三个人用三种标注方式，前端就要读三种注释，效率必然低。所以我把 parker 的标注输出和团队的样式规范绑定在一起，让插件成为规范的一环。

先说标注样式。免费版如果支持自定义标注线颜色和字体，建议在插件面板里统一设置成品牌色或指定色（比如 #1890FF 这种标准蓝），不要用默认的红色。原因很简单：设计稿里如果正好有红色元素，标注线和设计元素会糊在一起，评审时眼睛很累。字体用「PingFang SC」或者「Helvetica Neue」，字号统一 12px 或 14px，行距 1.4 倍。这套设置在插件面板里保存一次，之后每次标注都会沿用。

再说切图命名。我习惯在 parker 之外配一个辅助的 PS 脚本，用来批量重命名图层，让切图输出自动符合命名规范。常用命名规则是「模块_元素_状态_尺寸」，例如btn_primary_pressed_2x.png。脚本写法示意：

// 示例：给选中的图层批量加前缀 // 用法：选中多个图层后运行，弹出输入框加前缀 var doc = app.activeDocument; var layers = doc.layers; var prefix = prompt("输入前缀，例如 app_", "app_"); if (!prefix) exit(); for (var i = 0; i < layers.length; i++) { var name = layers[i].name; if (name.indexOf("layer_") === 0) { layers[i].name = prefix + name; } }

参数说明：prompt会弹出一个输入框，让运行的时候填写前缀，这样不用每次改脚本。indexOf("layer_") === 0判断图层名是不是以layer_开头，只有这些自动生成的默认图层会被加前缀，手工命名的关键图层不会被误改。运行完后，去 parker 面板里「刷新图层列表」，新名字会立即生效。

最后是验证方法。每次标注完成后，我会把标注图放大到 100% 检查一遍引线位置、数字是否压到关键元素、颜色值是否带 # 前缀、是否有中文空格等格式问题。特别是团队规范要求 HEX 值小写、字号用整数不带小数，插件里如果有取整选项就打开。如果发现输出格式不统一，不要靠嘴传达一句「下次注意」，直接改插件面板配置，让所有人用同一套默认值。从那以后我每次接新项目，第一件事就是先统一 parker 的标注配置，再开始画界面，后面基本没为标注格式返过工。希望这个习惯也能帮到你。

本文还有配套的精品资源，点击获取