本文来自网易云社区

作者：马宝

看了很多插件，比如“sketch一步导出html文档”，sketch-measure 导出设计标注，都是基于正向模式下设计的插件，所谓从“视觉”到“技术实现”， 你肯定会遇到这样或哪样的重新设计需求，在反向模式下，我思考可不可以在将两者翻转，将现有网页还原成设计稿。

这是一个已经完成的实验，仅限于试验学习～

常见的网页也就是HTML是一种结构化标准标记语言，搭配CSS 、JS使用 常见的设计文档，有个特性图层分层的、群组，某种程度是也是结构化的，.sketch 、.psd 、.ai 其中sketch 的开放性是最好的。所以 HTML to sketch也是最合适的。

考虑到现实的情况不可能有html to sketch 现在的应用达到我的目的，所以我把公式转化成

• 思路一 html 保存pdf ，sketch 打开；这个方法比较适合单页很小，不复杂的网页。设置麻烦，不适合多屏网页
• 思路二 html to svg to sketch；sketch同时支持 pdf 和svg 格式的文档的。效果上svg 优于pdf 格式，矢量路径效果更好；

所以html to svg 一步就可以让sketch 还原网页设计。

顺着思路二往下看【正式实验】

1. 打开，在线版转化网址 http://www.hiqpdf.com/demo/ConvertHtmlToSvg.aspx
2. 输入你想要转化的网址
3. 设置参数 Browser Width（页面宽度）:1440 Timeout（网站延时）：200
4. convert to svg （保存SVG）
5. sketch 打开下载的HtmltoSvg.svg
6. 微调图层 默认转化时，图片会加黑边影响美观

配几张截图

实验中遇到的问题

1. 视察滚动很复杂的网页很难转化
2. 转化有错位
3. 绝对／相对／悬停 定位图层 逻辑可能会错

有什么好处?

试过便知 快速复位原始设计档

联带思考的一些问题

1. sketch 和 PSD 格式可以相互转化么？
2. ai 和sketch 哪个更适合做 icons？

本文来自网易云社区，经作者钱烽授权发布

网易云免费体验馆，0成本体验20+款云产品！

更多网易研发、产品、运营经验分享请访问网易云社区。