老鼠做淘宝设计也好久好久了，他们说这叫做“狼狼二狗”？不管了，反正日常工作中总有些繁琐的东西让人处理起来不胜其烦，于是就写了些小工具来做这些事情，这不最近的空把他们整理在一起了，现在拿出来分享给大家。@Appinn
![淘宝设计师小工具合集[Web] 1](https://static2.appinn.com/images/201412/tools-zji.jpg "淘宝设计师小工具合集[Web] 1")
也没啥很大型或者很正经的功能，都是一些取代很繁琐的小工作的工具，比如换链接啊什么的，反正做淘宝设计的都懂的，动不动换几十个链接是家常便饭，在代码里找倒也不是很难，就是很烦。当然了，更可怕的是有一些代码小白的设计童鞋要操作这些繁琐的代码“工程”，更是欲哭无泪。所以这时候我就会写个小工具解救我和身边的小白们，他不痛苦了，我也不用一遍遍的重复着琐碎的教程了。
因为是自用的东西，所以很多体验上的东西我会省略掉，比如填写的数据我都没有进行验证，但是因此也产生了一些有趣的副功能，这一切都需要你的探索。
然后简单的介绍一下各个工具：
1. 弹出层代码生成：这个本来有很多参数的，不过我只做了一部分的自定义设置，默认左上角对齐（兼容最好），无偏移。什么，听不懂？那你当作鼠标滑过图片翻转的效果用就行了，这种情况保持两张图片大小一致效果比较好；
2. 宽屏海报代码生成：就是大通栏，反正就是突破淘宝的默认宽度限制，首页有效。默认宽度 1920px ，反正我只用这个宽度；
3. 宽屏轮播代码：跟上边的功能差不多，但是是轮播形式；
4. 商品格子代码生成器：这是给那些连建立表格都头疼的小白用的，其实蛮简单，N 张图片往里一填写就出来表格，嗯嗯，该注意什么你自己猜。反正图片做的规范真的挺好用；
5. 布局计算器：其实不是计算器，就是很直观的把一些常用辅助线尺寸整理了一下，默认 1920px 宽度布局；
6 链接地址提取工具：有的时候拿到别人的代码，想知道那几十张图片链接到了哪里，然后要把他们放到自己的设计中，难道要一个个复制粘贴？这个可以把代码中所有链接的地址提取出来。当然要是对方代码不规范也可能挺坑的，记得校对一下好了；
7. 链接地址批量添加工具： 往自己的代码中批量添加链接，对于切片代码挺好用的，但是要注意顺序，否则效果就很呵呵了。
8. 淘宝图片空间图片地址提取器：这个功能……你在淘宝图片空间后台用 Chrome 浏览器的“审核元素”查看代码，然后把代码复制出来（全部代码，或者只是在 <body…… 节点上右键 COPY ，或者……你要是看得懂代码就不用我说了），然后粘到工具里，自动提取本页所有图片（我是只本页显示的淘宝图片空间里的图片，不是指所有网页图片）的图片地址就都被提取出来了，做什么都很方便哦。
9. 切片图片批量替换工具：跟上边的工具联合用效果超群，可以把上面的图片地址自动替换进 Photoshop 切片后生成的代码中。
10. 汉字转拼音工具：顾名思义你也知道是做什么的了，支持多音字选择，另外带一个心口不一的小工具，就是这样：小（huān）众（yíng）软（dà）件（jiā）。
11. 台历图片生成器：生成一张日历图片（日期可选），并写上自己的随笔，用来珍藏，用来分享都是极好的！（这跟设计师有什么关系……额，我也不知道，不过可以拿来解闷……）
12. 对联图片生成器：生成一张古旧木门上粘贴崭新春联的图片，用作分享，上下联最多为每联 12 字
就说这么多吧，希望能对有代码恐惧症的朋友有所帮助吧。有其他问题可以根据网站中的联系方式找到老鼠反馈，但是觉得太坑来质问的就算了，也算是自己吃饭的工具，拿出来已经是很诚意了。
![印记云笔记 - 清新文艺范的笔记应用[Web/Android] 5](https://www.appinn.com/wp-content/uploads/yjybj.jpgo_-115x115.jpg "印记云笔记 - 清新文艺范的笔记应用[Web/Android] 5")
狼狼二狗好强大，二狗中的战斗机了吧？
确实方便很多，不过我的店刚准备关了，哈哈哈，真是不凑巧。
菜鸟福音！！！！感谢啊~~~~~~~~~~~~
感谢分享私货！
想起一句话：没有最牛逼的职业，只有最牛逼的玩家！
@who 不，科技不是动力，必须被满足的小白才是程序员认真思考的原因。比如……奇葩的甲方。……还好我不是程序员
我能说留下源码吗?
因为 不知道什么时候;网页就会失效………
神器啊！！！
谢谢分享,同问,可留下源码吗,在线的始终没有安全感哦
呵呵，哥也不是设计师
哥表示在线工具不错
但是哥现在连导航设计都没搞定。。。。。
入门者可能更需要更入门的设计工具
好像淘百变美工装修助手还不错，有个公测版的是免费的。