# Web to Pixso 使用说明

Web to Pixso 可以将网页采集为可导入 Pixso 的高保真设计稿，适合网页参考稿采集、运营页转设计稿、竞品页面还原、开发页面转 Pixso 资产等场景。

插件包：`web-to-pixso-v1.1.1.zip`

使用说明在线文档：[Web to Pixso 使用说明](https://z8qrcvi3n5.feishu.cn/wiki/RV8TwlhFyiGsEekQXk8cX5SHn6f)

反馈邮箱：`270310136@qq.com`。给我发邮件哦，我光速改。

## 一、安装 Chrome 浏览器扩展

1. 解压 `web-to-pixso-v1.1.1.zip`。
2. 打开 Chrome 浏览器，进入 `chrome://extensions/`。
3. 打开右上角「开发者模式」。
4. 点击「加载已解压的扩展程序」。
5. 选择解压后的 `web-to-pixso` 文件夹。
6. 安装成功后，浏览器右上角会出现 Web to Pixso 扩展图标。

## 二、安装 Pixso 插件

1. 打开 Pixso。
2. 进入插件开发/导入插件入口。
3. 选择 `web-to-pixso/pixso-plugin` 目录中的插件文件。
4. 导入成功后，在 Pixso 插件面板中可以看到 Web to Pixso。

## 三、采集网页

1. 在 Chrome 中打开需要采集的目标网页。
2. 点击浏览器右上角 Web to Pixso 扩展图标。
3. 选择采集模式：
   - 混合高保真：优先保留关键模块截图兜底，同时尽量保留文字可编辑。
   - 可编辑优先：优先转换为 Pixso 原生文本、图片、形状和组件图层。
4. 可按需要设置：
   - 跨域图片代理模式：用于减少图片丢失。
   - 页面采集宽度：用于按指定视口宽度触发响应式页面布局。
   - 图片采集并发：用于控制图片下载并发数量。
5. 点击「开始采集」。
6. 采集完成后，会下载一个 `.json` 文件。

## 四、导入 Pixso

1. 在 Pixso 中打开 Web to Pixso 插件。
2. 将 Chrome 扩展下载的 `.json` 文件拖拽到插件面板，或点击选择文件。
3. 插件会自动识别页面宽度和页面高度。
4. 点击「导入到 Pixso」。
5. 导入完成后，会创建一个以网页标题命名的画板。

## 五、导入后的图层结构

导入后的设计稿会按用途分层，方便设计师编辑和对比：

1. 对比底图层
   - 放置完整页面截图或模块截图。
   - 用于和上层可编辑元素进行还原度对比。
   - 可隐藏或锁定。

2. 可编辑元素层
   - 包含按钮、卡片、输入框、背景、图片、Logo、图标等。
   - 尽量保留尺寸、位置、圆角、边框、阴影、透明度和背景样式。

3. 文字编辑层
   - 包含网页中的可见文字。
   - 尽量保留字体、字号、颜色、行高、字重、对齐方式等样式。
   - 文字可在 Pixso 中直接编辑。

## 六、常见问题

### 1. 为什么有些区域是截图？

部分网页使用复杂动画、轮播、视频、Canvas、伪元素、复杂背景或特殊渲染方式。为了保证视觉效果不丢失，插件会为这些区域生成截图兜底，同时尽量保留文字和主要元素可编辑。

### 2. 为什么有些图片没有显示？

可能是目标网站启用了跨域限制、懒加载、防盗链或动态鉴权。可以尝试开启「跨域图片代理模式」后重新采集。

### 3. 为什么 Header 或 Hero 区域有时不可编辑？

部分网站的导航栏、轮播图或首屏区域可能由复杂脚本、Shadow DOM、Canvas、视频或异步渲染生成。插件会优先转换为可编辑图层，并使用兜底截图保证视觉可对比。

### 4. 页面采集宽度有什么用？

页面采集宽度用于模拟不同视口下的响应式布局。例如输入 `1920` 可以采集桌面宽屏布局，输入 `375` 可以采集移动端布局。

### 5. 导入后如何检查还原度？

可以先显示「对比底图层」，再查看上方的可编辑元素层和文字编辑层是否与底图对齐。对比完成后，可以隐藏或锁定底图。

## 七、适用场景

- 网页转 Pixso 设计稿
- 竞品页面采集
- 运营活动页还原
- 开发页面转设计资产
- 设计走查和页面对比
- 旧页面重构前的视觉备份

## 八、版本说明

当前版本：V1.1.1

支持从 Web to Pixso Chrome 扩展导出的 JSON 文件导入 Pixso，生成包含可编辑文本、图片、背景、按钮、卡片和对比底图的高保真网页设计稿。

本版重点：

- Chrome 扩展和 Pixso 插件版本号统一为 `1.1.1`。
- 插件面板显示版本号，避免用户混淆安装包。
- Chrome 扩展和 Pixso 插件均新增「使用说明」入口，点击后打开飞书文档。
- 两端插件底部均新增反馈邮箱：`270310136@qq.com`。
- 采集 JSON 协议版本同步为 `1.1.1`，方便问题排查。
- 保留页面采集宽度、混合高保真、可编辑优先、跨域图片代理和图片采集并发能力。
- 继续强化三层结构：对比底图层、可编辑元素层、文字编辑层。

已知边界：

- 复杂动画、Canvas、视频、动态轮播和强跨域资源可能仍需要兜底截图或人工微调。
- 真实网页还原质量会受目标网站资源加载、登录态、懒加载和浏览器环境影响。
- 对外使用时建议先用对比底图层检查还原度，再进行设计稿编辑。