切图网

切图网（Qietu.com）产品功能说明

切图网是国内知名的UI设计协作与前端开发辅助平台，主要服务于设计师、前端工程师及产品团队，提供高效的设计稿切图、标注、代码生成等工具，帮助团队实现从设计到开发的无缝衔接。

1. 核心功能

（1）智能切图（自动导出设计资源）

✅ 支持多种设计文件格式：

• PSD、Sketch、Figma、Adobe XD 等主流设计工具文件解析。

• 自动识别图层、组、切片，一键导出切图资源。

✅ 多格式导出：

• 支持 PNG、JPG、SVG、WebP 等格式，可自定义压缩质量。

• 适配多倍图（1x、2x、3x），满足Retina屏需求。

✅ 智能切图优化：

• 自动合并相似图层，减少冗余文件。

• 支持 去除背景色（透明化处理）。

（2）设计稿标注（精准获取样式参数）

✅ 自动标注尺寸、间距、颜色：

• 显示元素的 宽高、边距、字体大小、行高、色值（HEX/RGBA）。

• 支持 百分比标注，方便响应式开发。

✅ CSS/SCSS代码生成：

• 自动生成 CSS、Sass、Less 样式代码，减少手写工作量。

• 可自定义代码风格（如BEM命名规范）。

✅ 多端适配标注：

• 支持 PC、移动端、Pad 等不同设备的尺寸标注切换。

（3）协作与交付（团队高效协同）

✅ 云端存储 & 版本管理：

• 设计稿上传至云端，团队成员可实时查看历史版本。

• 支持 在线评论，方便设计师与开发人员沟通。

✅ 一键生成开发文档：

• 自动生成 HTML+CSS 静态页面模板，加速前端开发。

• 提供 API 接口模拟数据，方便前后端联调。

✅ 多角色权限管理：

• 支持 设计师、前端、产品经理 等不同角色的查看/编辑权限控制。

（4）插件 & 集成（无缝对接工作流）

✅ 设计工具插件：

• 提供 Sketch、Figma、Photoshop 插件，直接从设计软件上传至切图网。

✅ 开发工具集成：

• 支持 VS Code 插件，前端工程师可直接获取标注信息。

• 与 GitLab、Jenkins 等DevOps工具集成，实现自动化构建。

2. 产品优势