Zeplin工具：

Zeplin是一款标注工具 ，用于设计师和前端开发的桥梁，设计稿在工具上可以自动换算，提高效率

1.自动生成styleguide

2.支持MAC的Sketch和PS，以及PC的PS

3.数据必须上传到网络上，可以用客户端查看也可以网页查看，必须是注册用户

4.带有一部分协作办公的功能（留言和更新状况）

官网：https://zeplin.io/

据说有一个类似的中文版，没有尝试，可以试试：https://lanhuapp.com/web/#!/user/login

作为设计师：

PS

1.是一款设计软件，可以设计和绘图，没有更多用于开发上的利用，但是可以结合手绘

2.需要Photoshop CC 2015或是最新的版本

3.利用教程，在ps上添加Zeplin入口

https://support.zeplin.io/photoshop-integration/installing-photoshop-plugin-on-mac

sketch（优选）

1本身是一个轻量级的UI软件，提供给设计师的矢量绘图应用，主要为图标设计和界面设计，但不能手绘制图

2.styleguide需要引入插件，设计师自行标注，影响视觉使用

3.能替代 Adobe Photoshop，Illustrator 和 Fireworks。

4.生成的图片利用zeplin可以自动标注，提高效率

学习教程：

http://www.sketchs.cn/manual.html

http://www.sketchcn.com/

作为前端：

1.需要会使用标注，包括click以及hover上的浮动标注

2.利用软件切图

补充：

1.Style Guide 大概要包含的是字体信息、色彩信息、icon 样例、常用间距等内容

2.sketch＋zeplin的开发模式

3.教程：http://www.ui.cn/detail/151088.html