1. BundlePhobia
BundlePhobia用于分析npm package的依賴、bundle后的大小、下載速度預(yù)估等等，幫助你在引用一個package之前了解引入該package的代價：
你也可以將項目的package.json文件上傳，BundlePhobia會幫你評估項目中所有包的大小和加載速度：
2. CloudCraft
如果你用AWS，那CloudCraft將會極大程度的幫助你，CloudCraft提供可視化的操作界面，通過拖拽設(shè)計你的云服務(wù)架構(gòu)
CloudCraft提供云服務(wù)價格的統(tǒng)計功能，幫你精打細(xì)算
3. Figma
Figma是這張清單里面比較有名的了，對于習(xí)慣使用illustrator和sketch的設(shè)計師，figma也絕對值得嘗試。Figma提供web和desktop兩個版本，web版本使用WebAssembly編寫從而獲得不輸desktop的性能，因此在不同的操作系統(tǒng)上都可以快速使用。Figma可以模擬各種用戶輸入事件，可以直接將設(shè)計稿導(dǎo)出成CSS、IOS樣式、Android樣式。
4. Fontflipper
在設(shè)計或者開發(fā)時還在為使用字體發(fā)愁的同學(xué)，可以試試Fontflipper。Fontflipper只有一個目的，就是讓你選到最適合你的設(shè)計的字體，上傳你的設(shè)計圖，添加你的文字，切換不同的字體，收藏你喜歡的，就這么簡單。缺點是沒有中文字體。。
5. VisBug
VisBug是一款Google Chrome的插件，不久之前才推出。VisBug可以幫你更快的檢查元素、移動元素、改變css屬性、查找元素。。極大的增加前端開發(fā)效率！
6. Insomnia
Insomnia是一款調(diào)試API工具，支持調(diào)試Rest Api和GraphQL Api。在寫graphQL query的時候有很好的智能提示。
7. Flare
Flare用于設(shè)計2D的動態(tài)圖，使用體驗與Figma相似。
與codepen類似，你也可以看到其他設(shè)計師的公開作品
