10 个“哇塞”的 Web 资源，收藏等于学会~

1. responsively[1]

responsively 是干嘛吃的？一张图你就懂了：

你可以在上面输入你的 web 网站，一次性查看它在各个设备下的响应式布局表现~

并且支持自定义选择设备、导出为图片等；响应式布局，一个界面尽收眼底！ 👀 再也不用在搁控制台那儿拉来拉去了~~

UI 妹纸看到了都直呼 🐂🍺 ！！github star 13k+

2. figlet[2]

想在控制台上玩点花样，figlet 就不容错过了~~

在项目中 npm install figlet （分清环境：node/Vue/Browser）；

还有更多配置项可以去探究；

该库的周下载量稳定在 800k 左右😍，太猛了！还不快点在你的项目中用起来，产品经理忍不住夸一句：“细节！”

3. readme.so[3]

顾名思义，readme.so 这个用来快捷生成标准 README 的~

在左侧编辑，在右侧预览，README 必备的各个要素一应俱全；规范！标准！好看！

还支持下载到本地；有了这个，还有人不会写 README 嘛？

4. smalldev[4]

这类开发辅助工具还算是挺常见的，不过 smalldev 的优势就是 功能全、颜值高、没广告😎；

代码分享床、JSON 格式化、base64 加解密、HTML/JS/CSS 格式化、压缩 SQL、生成占位图、生成测试数据等等；

5. smartmockups[5]

据说 smartmockups 是：最好的产品模板生成工具，能创建令人惊艳的产品模板！

除了放置图片，还可以放置网页（自动捕获内容）；

把我的主页放上去，嗯，效果不错，应该是这样用的！（妈妈，我上电视了~）😄

6. pfpmaker[6]

头像处理神器！效果可百变！

本瓜给好基友阿詹做做头像：

实际产生的处理结果比截图上的多得多，还支持自定义，全凭你的奇葩色彩搭配喜好~~ (❤ ω ❤)

7. storytale[7]

高级插图，百看不厌；

各种画风，妙趣横生；

就不再一一截图了，open the link 试一试便知；

不过就是下载要收费。。。。。。但是也可以 alt+A 或者 PrtSc 啊🐶

8. type-scale[8]

type-scale 这个网站用于把不同字体大小，rem 和 em 值的差异进行可视化展现，支持实时预览；

适合细扣像素级的前端仔们，或者适合想和 UI 妹纸一起看字体效果的前端仔们；

9. remove-bg[9]

本瓜的第一条沸点就是推荐这个网站，此去已经 2 年；😶

网站都已经改版了，但是效果是依旧的好！👍

扣背景图，认准 remove-bg ！

10. metatags[10]

你可以在这个网站上预览自己的站点在其它平台的展示效果；

虽然它目前支持的都是国外的社交 App，但是也为我们提供了一个好的思路：“可以把它抄过来呀！”🐶🐶🐶

绝对是一个很好的工具，把开发者的链接在其它平台的表现进行预览展示，妥妥的 刚需！

好啦，以上便是本次分享，针不戳~ 希望你也能用这些工具用的开心 o(*￣▽￣*)ブ