作为前端开发，你应该知道的这十几个在线免费工具

小灰灰 2024-02-20 09:15 52阅读 0赞

![2248c659b33cdbb8b54b8c66130bffd8.gif][]

偶然刷到知乎一位前端大佬 @表歌 多篇优秀实用的文章，真的发现宝藏了

![13738e353f9e0de82c194a0ffe51723e.png][]

以下内容就是他在知乎分享的十几个在线免费工具

![dd3209d4f61944494595390b13e312e6.jpeg][]

1. 页面设计检查清单：*https://www.checklist.design/*

![3e0340f1e4100d5548c7671a90cbf791.png][]

页面设计检查清单

通过清单可以检查一些常用容易忽略的设计要素。

2. 背景色生成：*https://webgradients.com/?ref=usniemvuilaptrinh*ref=usniemvuilaptrinh

![edc1648e00256d68547852b27014ee4a.png][]

背景色生成工具

3. 渐变背景色生成：*https://cssgradient.io/*

![79e6e28752b6be0b8169448c03eab7a0.png][]

渐变背景色生成工具

4. 在线去除背景：https://www.remove.bg/zh/upload

![04af44a09f1c84db299e0736984288d5.png][]

在线去除背景

5. logo，封面设计：*https://www.canva.cn/en/?display-com-option=true*

![66dc1a5a255551268434d8caf114a117.png][]

封面设计

6. 生成浪花：*https://getwaves.io/*

![9a146b11cff52776f7ba5809da009fc3.png][]

7. 生成水滴：*https://www.blobmaker.app/*

![7f5bd0bed3a535bc57a1c88e3cfde3af.png][]

8. 生成形状：*https://www.shapedivider.app/*

![9bbf989c1a4ca82083302cd553138d81.png][]

9. 动效生成：*https://animista.net/*

![8bb0fb0574ae124b31fc69c9aff807ec.png][]

10. 投影生成：*https://shadows.brumm.af/*

![1e0a7f5f06e183b8c18dc836364e9982.png][]

11. css 剪辑路径：*https://bennettfeely.com/clippy/*

![d8bb5aaf852c5b8499784856c6145502.jpeg][]

12. 圆角生成：*https://9elements.github.io/fancy-border-radius/*

![f4849ad0456c663a6dc61f459424e362.png][]

13. 图片无损压缩：*https://tinypng.com/*

![8c9d91247fa0e61e7a6f4c010bc332ad.png][]

14. nginx 在线配置：*https://www.digitalocean.com/community/tools/nginx?global.app.lang=zhCN*

![d66fe144a01eb68636622c17f80a9b74.png][]

15. 形状各种生成：*https://app.haikei.app/*

![d7922e30646c7b1adc8d5ac336c2254c.png][]

16. 表歌的16条前端UI设计原则：*https://zhuanlan.zhihu.com/p/648041457*

![a8716041a9e57ee273c44ec573acac2c.jpeg][]

这是表歌整理国外上万点赞的UI设计原则，面对一个UI的好坏，有时候你看不出所以然来，可能是少了一些方法论，值得推荐。

17. Json 格式化：*https://jsonformatter.curiousconcept.com/\#*

![2b75828ef163fcc7d995756f3d1eb443.png][]

有时候拿到的数据是js类型的数据对象，你又想粘贴到json格式里面，可以使用工具快速修复格式化。

18. TodoMVC：*https://todomvc.com/*

![94034ff90bba497fbbadb5282db83321.png][]

TodoMVC 做了一件事情，一样的TODO清单的需求，不同的前端框架去实现，可以让你快速对比了解不同框架之间对应实现同一个需求的区别，有时候你想不起来了，可以看看。

![35ad9c4d93af9d4c3ad40708bc7ef59b.png][]

**Drupal 自习室**

内推职位及分享 Drupal 优秀的数字创新体验

公众号

以上都是经常使用的工具箱，表歌开源的Angular前端UI框架：

> 信使 UI 是基于 Material 的 Angular 前端框架， 丰富的组件库可提供优秀的数字创新体验，使用 Web Builder 可以通过拖拽快速构建响应式、多主题的 Web 页面。

大部分都用这些工具来生成图片、形状，欢迎Star:

**信使 UI****https://github.com/biaogebusy/xinshi-ui**

![50594888dc3257733b3e58ff0dd63bf0.png][]

在线体验：*https://www.zhaobg.com/home*

![04c1a2e653ffe061e4cab74b327fcf8e.png][]

信使 web builder

![ea6653eaeac9b6d1bf431d930c376405.gif][]

[2248c659b33cdbb8b54b8c66130bffd8.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/fa9f81f2e5e34c6d84a04a4bb2fe92d8.png
[13738e353f9e0de82c194a0ffe51723e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/bad0a5d53fe54fb7b0e73748bd87545e.png
[dd3209d4f61944494595390b13e312e6.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/44319e7fdc33404385c944b75f9e382c.png
[3e0340f1e4100d5548c7671a90cbf791.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/686d0fcd0b124ac183fdea9b1cc54313.png
[edc1648e00256d68547852b27014ee4a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/45f35f45ef6b45218bb1869d220665fb.png
[79e6e28752b6be0b8169448c03eab7a0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/c6f83b5d8c2c48829cbad16542ef5729.png
[04af44a09f1c84db299e0736984288d5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/81857d960c6e44ac8a2cb95e4d564ab2.png
[66dc1a5a255551268434d8caf114a117.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/98c78135da4e450988ded4cf967b2278.png
[9a146b11cff52776f7ba5809da009fc3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/26d61076b27843778b7fa31298ebc87b.png
[7f5bd0bed3a535bc57a1c88e3cfde3af.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/0461ff5c3e0040af80cef34ebd6dc628.png
[9bbf989c1a4ca82083302cd553138d81.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/7e275e5172514527b77e16d0c4e8e9e2.png
[8bb0fb0574ae124b31fc69c9aff807ec.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/9e06469c3e034b0fbaa69ccf354c21b7.png
[1e0a7f5f06e183b8c18dc836364e9982.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/f085cec151b4418b8e0408cda1024d29.png
[d8bb5aaf852c5b8499784856c6145502.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/c82e188a68b746bdbc308bc1a45a52c8.png
[f4849ad0456c663a6dc61f459424e362.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/ca9fa47f36c844e59f2a1b3a5c1a64d9.png
[8c9d91247fa0e61e7a6f4c010bc332ad.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/d397fb5d34714401b5c4cd796cf8607c.png
[d66fe144a01eb68636622c17f80a9b74.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/b88ed2e271a1465fa1c5aa02e513c256.png
[d7922e30646c7b1adc8d5ac336c2254c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/17776992b782459fb6fa31b3004e2371.png
[a8716041a9e57ee273c44ec573acac2c.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/aa5a44eb96d14e4b922781bc84ea4053.png
[2b75828ef163fcc7d995756f3d1eb443.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/5ad3a69aa4044776b7d0c422fb55717b.png
[94034ff90bba497fbbadb5282db83321.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/103deb692fa346c980881191fa232c46.png
[35ad9c4d93af9d4c3ad40708bc7ef59b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/ffabb0b9d8064aa3a103a101f19c2099.png
[50594888dc3257733b3e58ff0dd63bf0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/1f2e665fbf5947249e0d7bc249b32936.png
[04c1a2e653ffe061e4cab74b327fcf8e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/21b85b607dd7401987e085459d319260.png
[ea6653eaeac9b6d1bf431d930c376405.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/588a00d0f87d496fbe10d044f9533106.png