Cutterman

一、核心功能 & 亮点

1. 多设计软件适配（核心优势）

• 支持主流设计工具：
  • Photoshop（PS）：兼容 CS6 及以上版本，是设计师最常用的切图插件；
  • Sketch：适配 Mac 端 Sketch 全版本，满足 UI 设计切图需求；
  • Figma：通过插件市场安装，支持在线设计文件切图导出，适配协同设计场景；
  • Adobe XD：兼容 XD 全版本，覆盖多端设计工具生态；
• 无缝集成体验：插件直接嵌入设计软件界面，无需切换第三方工具，切图标记与导出在设计流程内完成，不打断创作节奏。

2. 高效切图导出功能

（1）灵活标记与批量导出

• 「手动标记切图」：选中设计元素（图标、按钮、图片等），通过插件一键标记为切图，支持自定义切图名称、存储路径；
• 「自动识别切图」：部分版本支持智能识别设计文件中的可切元素（如独立图层、组），批量标记，节省手动操作时间；
• 「批量导出」：一次性导出所有标记的切图，支持按文件夹分类存储（如按 “图标”“按钮”“背景” 分组），避免文件混乱；
• 「导出进度可视化」：显示导出进度、成功 / 失败状态，便于快速排查问题（如路径错误、图层锁定导致导出失败）。

（2）全格式与多倍图支持

• 「图片格式全覆盖」：支持 PNG（默认无损格式）、JPG（可调整压缩质量）、SVG（矢量格式，无限放大无失真）、WEBP（高效压缩格式），适配前端开发、移动端适配等不同需求；
• 「多倍图导出」：一键导出 1x（基础倍图）、2x（Retina 屏适配）、3x（高清屏适配）多倍图，自动命名（如 “icon_home@2x.png”），无需手动复制修改，满足 iOS/Android/Web 多端适配；
• 「透明背景保留」：PNG/SVG 格式自动保留设计元素的透明背景，无需额外处理，适配图标、按钮等场景。

（3）自定义导出设置

• 「存储路径自定义」：可设置默认导出文件夹，支持按 “项目名称 / 版本号” 自动创建文件夹，便于项目管理；
• 「命名规则设置」：支持自定义切图命名格式（如 “模块_元素_状态”），统一命名规范，方便前端开发查找使用；
• 「压缩质量调整」：JPG/WEBP 格式可调整压缩比例，平衡图片质量与体积，适配网页加载、APP 安装包大小优化需求；
• 「浏览器前缀自动添加」：部分高级功能支持为切图关联 CSS 样式，自动添加浏览器兼容前缀，提升前端开发效率。

3. 协作与适配优势

（1）前端开发友好适配

• 「切图信息同步」：导出的切图文件夹可直接交付前端开发，命名规范、分类清晰，减少沟通成本；
• 「支持导出 JSON 配置」：部分版本支持导出切图配置文件（JSON 格式），包含切图名称、路径、尺寸等信息，便于前端自动化构建；
• 「多端适配兼容」：导出的多倍图、矢量图完美适配 iOS、Android、Web 等不同平台的显示需求，避免适配偏差。

（2）效率优化与扩展功能

• 「切图历史记录」：记录过往导出记录，支持重新导出、修改导出设置，便于迭代更新；
• 「快捷键支持」：可自定义切图标记、导出的快捷键，提升操作效率（如设置 “Ctrl+Alt+E” 为批量导出快捷键）；
• 「团队配置同步」：企业版支持团队共享切图命名规则、导出设置，确保团队切图交付规范统一。

4. 轻量化与稳定性

• 「体积小巧无冗余」：插件安装包体积小，不占用过多软件内存，运行流畅，不影响设计软件响应速度；
• 「兼容稳定性强」：适配设计软件新版本更新，极少出现崩溃、卡顿问题，保障切图交付效率；
• 「免费核心功能」：基础切图导出功能（PNG/JPG 导出、多倍图、批量导出）完全免费，满足个人设计师与小团队需求；
• 「付费增值功能」：企业版支持团队协作、高级配置同步、定制化功能，适配中大型团队规范管理需求。

二、突出优势

1. 「效率极高」：核心优势是 “批量切图 + 多倍图一键导出”，大幅减少设计师手动切图、命名、分类的时间，尤其适合 UI 设计、图标设计等切图密集型场景；
2. 「兼容性强」：覆盖主流设计工具，适配 Windows/Mac 双系统，满足不同设计师的工具使用习惯；
3. 「前端友好」：切图格式、命名、分类完全贴合前端开发需求，减少协作沟通误差，提升交付效率；
4. 「上手简单」：操作逻辑简洁，标记 – 设置 – 导出三步完成，无需复杂学习，设计师快速上手；
5. 「轻量化无干扰」：嵌入设计软件内使用，不占用额外桌面空间，不打断设计流程，体验流畅。

三、适用人群 & 场景

1. 核心适用人群

• UI/UX 设计师：移动端 APP、网页、小程序等界面设计的切图交付，需批量导出多倍图、适配多端；
• 平面设计师：海报、宣传册中的图标、独立元素切图，用于二次设计或前端开发；
• 前端开发协作人员：与设计师配合，获取规范命名、分类清晰的切图，提升开发效率；
• 设计团队：需要统一切图交付规范，确保团队输出一致性。

2. 典型应用场景

• UI 设计交付：APP 界面图标、按钮、导航栏等元素切图，导出多倍图交付前端开发；
• 图标设计批量导出：设计一套图标库后，批量导出不同格式、多倍图，用于项目复用或对外输出；
• 网页设计切图：网页界面中的 banner、图标、按钮等元素切图，适配不同浏览器与屏幕尺寸；
• 团队协作交付：设计团队统一切图命名规则、导出设置，确保所有成员交付的切图规范一致，降低前端对接成本。

四、使用小贴士 & 避坑提醒

1. 「切图标记技巧」：
   • 标记切图前确保图层 / 组未锁定、未隐藏，否则可能导致导出失败；
   • 复杂元素建议合并为组后再标记切图，避免导出不完整（如按钮包含文字 + 背景，需整体选中组标记）；
   • 切图名称建议简洁规范（如 “icon_search”“btn_submit_normal”），避免特殊字符（如空格、中文符号），便于前端调用。
2. 「导出设置避坑」：
   • 提前确认存储路径是否有写入权限（如桌面、项目文件夹，避免系统盘只读路径）；
   • 多倍图导出时，确保设计元素尺寸为 “1x 基础尺寸”（如 24x24px），避免导出后多倍图尺寸异常；
   • 导出 SVG 格式时，确保设计元素为矢量路径（如 AI 绘制的图标），避免位图转 SVG 导致文件过大。
3. 「协作沟通建议」：
   • 与前端开发提前确认切图格式、多倍图需求（如仅需 2x 倍图），避免导出无用文件；
   • 导出后按 “项目 / 模块” 整理切图文件夹，附上简单说明（如 “SVG 格式用于图标，PNG 用于背景”），提升协作效率；
   • 迭代更新切图时，建议覆盖旧文件或按版本号创建新文件夹，避免前端使用旧版本切图。
4. 「插件安装与更新」：
   • 从官网（https://www.cutterman.cn/）下载对应设计软件的插件版本，避免第三方渠道安装导致安全风险；
   • 设计软件更新后，及时更新 Cutterman 插件，确保兼容性（如 PS 新版本可能导致旧插件失效）。

五、访问 & 使用方式

• 官网地址：https://www.cutterman.cn/（可下载各设计软件对应的插件安装包、查看使用教程）；
• 安装流程：
  1. 访问官网，选择对应设计工具（如 “PS 版”“Sketch 版”）；
  2. 下载安装包，按教程完成插件安装（如 PS 需复制插件文件到 “Plug-ins” 文件夹）；
  3. 重启设计软件，在 “窗口 – 扩展功能” 中找到 Cutterman，启用即可；
• 核心操作：打开设计文件→选中元素标记切图→设置导出格式 / 多倍图 / 路径→一键批量导出。

总结