如何从 UI 截图中提取图标？4 步得到可交付 PNGHow to extract icons from a UI screenshot: 4 steps to clean PNGs
上传、识别、校对、导出：把截图里的视觉资产整理成开发可用的透明 PNG。Upload, review, correct, and export a screenshot into developer-ready transparent PNGs.
切图大师
图片仅在浏览器本地处理
LOCAL-FIRST ASSET EXTRACTION
让 UI 切图，如此简单。
1上传截图2校对切片3导出所选
自动发现 UI 中的独立视觉元素。手动框选可补充结果，多选后只导出开发真正需要的切图。
累计访问Total visits—今日访问Today—
源图与切片区域
PNG · JPG · WEBP放入一张 UI 截图
拖放图片到这里，或从设备中选择。文件不会离开当前浏览器。
建议使用原始分辨率的界面截图切图大师是什么？
切图大师是面向设计师与前端开发者的 UI 资产提取工具。上传设计截图后，它会优先识别独立的图标和插图；你可以查看置信度、校对风险、精确调整裁剪框，再导出透明 PNG 或 WebP，并附带 manifest.json 交付清单。
- 识别对象
- UI 图标、插图、按钮图形和其他独立视觉资产。
- 本地处理
- 图片、候选评分、透明化和导出只在当前浏览器处理，不会上传到服务器。
- 开发交付
- 支持置信度筛选、PNG/WebP、多选导出、分类文件夹和 manifest.json。
常见问题
切图大师适合哪些设计图？
适合包含清晰图标、插图或控件图形的 UI 截图。对于文字、复杂照片背景或重叠元素，建议先校对自动识别结果，再通过拖动或数值精确调整。
导出的图片可以直接用于页面开发吗？
可以。导出的是透明背景 PNG 或 WebP，适合以图片资源方式接入 Web、App 或小程序。manifest.json 会记录尺寸、坐标、类型和风险；它不等同于可编辑的 SVG 矢量文件。
上传的设计图会被保存吗？
不会。图片识别、背景透明化和导出都在本地浏览器完成，刷新或关闭页面后不会保留在本站服务器。
What is Slice Master?
Slice Master is a UI asset extraction tool for designers and frontend developers. Upload a design screenshot, review confidence and risks, fine-tune each crop, and export transparent PNG or WebP assets with a manifest.json handoff list.
- What it finds
- UI icons, illustrations, button graphics, and other independent visual assets.
- Local-first
- Detection, scoring, transparency, and export run in the current browser; images are never uploaded.
- Developer-ready
- Filter confidence, export PNG or WebP, organise folders, and include manifest.json in the ZIP.
Frequently asked questions
Which designs work best?
UI screenshots with clear icons, illustrations, and isolated graphics work best. Review the results, then drag or enter pixel values for precise crops.
Can the exported assets be used in development?
Yes. Exports are transparent PNG or WebP files for web, app, and mini-program projects. The manifest records the crop metadata. They are bitmap assets, not editable SVG vectors.
Is my design image stored?
No. Detection, background transparency, and export all happen locally in your browser. Closing or refreshing the page does not save the image to this site.
SLICE MASTER JOURNAL
文章动态
使用指南、设计交付技巧与产品更新，持续记录让 UI 切图更简单的方法。
SLICE MASTER JOURNAL
查看全部文章View all articles
Journal
Guides, design handoff notes, and product updates for simpler UI asset slicing.
设计稿交付开发前，哪些元素需要切图？清单与判断规则Which design elements should be exported? A handoff checklist
用判断表区分文字、图标、插画与组件，减少交付返工和资源误用。Use a decision table to separate text, icons, illustrations, and reusable components.
PNG、SVG 与 WebP 怎么选？前端图标资源判断表PNG, SVG, or WebP? A practical format guide for UI assets
按透明度、缩放方式、视觉复杂度与开发场景选择合适格式。Choose a format by transparency, scaling, visual complexity, and implementation context.
KEEP SLICE MASTER HANDY
分享给正在做设计交付的伙伴Share it with your design handoff team
帮助更多开发与设计同事，快速提取真正需要的 UI 图标与插图。Help more developers and designers extract the UI icons and illustrations they actually need.
SUPPORT SLICE MASTER
觉得有帮助？支持切图大师持续成长。
赞赏将用于切图大师的维护与功能优化。完全自愿，不影响全部功能使用。
SUPPORT SLICE MASTER
Enjoying Slice Master? Help us keep improving.
Your support helps maintain and improve Slice Master. It is completely optional and never affects access to features.