Picasso
A tool automatically convert sketch to code.
简介
Picasso是58同城推出的一款sketch设计稿智能解析工具,可将sketch设计稿自动解析成还原精准,可用度高的前端代码。
前提
- Mac >= 10.15.1
- Sketch >= 60 下载Sketch
- Node >= 8.9.3
使用方法
- 注意:仅仅支持Mac环境(由于Sketch软件只支持Mac环境,而解析需要依赖Sketch软件),并且需要安装Sketch软件,下载Sketch
第一步. picassoImg插件安装(辅助解析的sketch插件,必须安装)
下载picassoImg插件 => 解压,双击安装即可
命令行使用
全局安装
npm install -g @wubafe/picasso
使用
picasso --help
picasso --version
picasso -s test/index.sketch
picasso -s test/index.sketch -d test -t 1 -p tt
Options:
-v, --version picasso版本
-s, --src [path] sketch设计稿源文件路径
-d, --dest [string] 解析生成的代码存放路径
-s, --imgScale [number] 图片尺寸(1:1倍图 1.5:1.5倍图 2:2倍图 3:3倍图) (default: 1)
-t, --pageType [number] 解析类型: 1-普通版 2-运营版 (default: 1)
-p, --classPrefix [string] 生成样式className前缀 (default: "")
项目中使用
本地安装
npm install @wubafe/picasso -S
使用
const picasso = require('@wubafe/picasso');
(async () => {
await picasso({
src: 'test/index.sketch',
dest: 'test',
imgScale: 1,
pageType: 1,
classPrefix: '',
});
})()
启动项目
npm install
npm run dev
运行 Sample
- sample/demo.sketch sketch源文件,可用sketch软件打开进行查看
- sample/demo/1_page/* 解析生成代码,用浏览器打开sample/demo/1_page/index.html文件,即可预览生成的页面。
贡献
欢迎参与picasso项目的开发建设和讨论。
提交 pull request 之前请先提 [Issue 讨论].