CSS可视化生成工具(拖拽自动出代码,前端提效神器)
CSS Grid Generator:https://cssgrid-generator.netlify.app/
Flexplorer:https://bennettfeely.com/flexplorer/
Grid Garden:https://cssgridgarden.com/
Clippy路径生成器:https://bennettfeely.com/clippy/
CSS Gradient:https://cssgradient.io/
CSSKit:https://csskit.site/
Box Shadow生成器:https://www.joshwcomeau.com/shadow-palette/
原型与线框工具(产品草图、界面框架)
Figma:https://www.figma.com/
Penpot(开源Figma):https://penpot.app/
Balsamiq:https://balsamiq.com/
墨刀:https://modao.cc/
Wireframe.cc:https://wireframe.cc/
3D图标与立体素材(现代网页UI)
Icons8:https://icons8.com/
Streamline Icons:https://streamlinehq.com/
Lottie Animated Icons:https://lottiefiles.com/icons
Flaticon:https://www.flaticon.com/
高质量矢量插画(免费商用)
Storyset:https://storyset.com/
Humaaans:https://www.humaaans.com/
Open Peeps:https://www.openpeeps.com/
Pablo图片排版:https://pablo.buffer.com/
网页模板 & 成品页面(直接扒结构参考)
Designmodo:https://designmodo.com/
Cruip:https://cruip.com/
Tailwind Components:https://tailwindui.com/components
Made with Tailwind:https://madewithtailwind.com/
代码学习与灵感站
CodePen:https://codepen.io/
CodeSandbox:https://codesandbox.io/
Frontend Masters:https://frontendmasters.com/
Dev.to:https://dev.to/
网页测速、检测工具(上线自查用)
PageSpeed Insights:https://pagespeed.web.dev/
GTmetrix:https://gtmetrix.com/
Can I Use:https://caniuse.com/
特殊占位素材
Placeholder图片:https://placeholder.com/
SVG占位色块:https://placehold.co/