· 资源 · 17 分钟阅读
做专业网站时用得上的工具和资源
2026 年做网站时用得上的免费工具和资源。灵感、UI 套件、图标、插画、照片、配色、字体、样机，还有更多。
一个专业的网站是上百个小决定：用哪套图标、哪一对字体、首屏照片从哪来、对比度怎么查、社交预览怎样才好看。每个决定都有一个让它变容易的工具，而找到这些工具本身就占了一半的工作。这是我会反复翻出来的那份清单。
这里的东西都可以免费使用，或者有足够大方的免费额度，还在持续维护，而且不注册账号也能浏览。某份资源的许可值得知道时，会在旁边提一句。清单按工作阶段分组，从第一张草图到上线后的第二天。
目录
- 灵感：好网站长什么样
- 设计工具
- UI 套件和组件库
- 图标集
- 插画
- 免费图库和视频
- 颜色、色板和渐变
- 背景、图案和形状
- 字体和排版
- 样机和截图
- 图片优化、Favicon 和社交图
- 动画
- 无障碍检查
- 性能和测试
- SEO 工具
- 注重隐私的统计
- 表单、内容管理和托管
- 指南和学习
- 周末做站的一套起步组合
灵感：好网站长什么样
先看，再动手做。打开编辑器之前在这些画廊里花十分钟，后面能省下好几个小时。
- Land-book：一个很大、标签也清楚的落地页画廊。可以按行业、风格或颜色筛选。
- Lapa Ninja：落地页附有整页截图，而且常常把首屏文案抽出来，适合研究标题。
- Landingfolio：落地页示例被拆成一块一块（首屏、价格、客户评价），方便拿同一块去比较很多站点。
- SaaS Landing Page：顾名思义，按区块和行业整理。
- Godly：更实验的那一头：动效、不常见的布局、很强的美术方向。
- Mobbin：真实产品的界面和流程，手机和网页都有。免费额度有限，但够用来研究常见模式。
- Refero：来自线上产品的真实界面，可以按组件搜索，比如空状态和价格表（站里的英文检索词是 empty state、pricing table）。
- Awwwards：获奖站点。手艺多于转化，适合抬高视觉上的野心。
- Dribbble 和 Behance：设计师的作品集。记住，很多图只是概念，从未被做出来。
设计工具
- Figma：界面设计和原型的标准工具。免费方案够一个人做一个项目。Figma Community 里有成千上万套免费的套件和模板。
- Penpot：Figma 的开源替代，可以自己托管，设计 token 是内建的。
- Excalidraw：手绘风格的白板，用来画线框和示意图。很快，不需要账号。
- Photopea：浏览器里的一个像 Photoshop 的编辑器，能打开 PSD、XD 和 Sketch 文件。
- Canva：需要快速做社交图、演示文稿和简单图形，而完整的设计工具又太重的时候用它。
UI 套件和组件库
如果你用 Tailwind CSS 来做，这些能给你可以直接拿去组合或拷贝的、能上线的区块和组件。
- shadcn/ui：无障碍的组件，拷进你的项目，归你所有。它几乎是 React 项目的事实标准，也是现在很多模板跟着走的那套 token。
- Tailwind Plus：Tailwind 团队官方的组件和模板目录。要付费，但免费预览本身就是一份设计课。
- Flowbite：基于 Tailwind 的大型开源组件库，带交互元素。
- daisyUI：Tailwind 插件，加上语义化的 class 名（
btn、card）和主题。 - Preline：开源的 Tailwind 组件，营销区块很全。
- Headless UI 和 Radix Primitives：不带样式、做好无障碍的积木（菜单、对话框、标签页）。你想要自己的样子，又希望无障碍已经做对时用它们。
- HeroUI：给 React 和 Tailwind 的一套完整的、带样式的组件库。
图标集
选定一套就坚持用下去。混用不同风格的图标，是「这站是拼出来的」最常见的破绽。
- Tabler Icons：五千多个风格一致的线框图标，MIT 许可。AstroWind 用的就是这套。
- Lucide：干净、一致、维护得很好。它是 Feather 的社区分支。
- Heroicons：Tailwind 团队做的，有线框、实心和小号几种。
- Phosphor：同一枚图标有六种字重，从细线到双色，表情可以更丰富。
- Iconify 和 Icônes：一次搜几乎所有开放图标集，然后拷贝 SVG 或组件。
- Simple Icons：品牌 logo 的 SVG（GitHub、Stripe、Slack……），用来做集成网格和页脚。
- Remix Icon：一套很大的中性图标，有线框和填充两种。
- SVG Repo：五十万个 SVG 图标和矢量图，每件的许可单独标出。
插画
- unDraw：开源插画，在浏览器里就能重新染成你的品牌色。
- Storyset：可以定制的插画，有些带动画，有好几种视觉风格。
- Humaaans：可以混搭的人物插画，适合团队页和上手引导页。
- Open Doodles：免费的手绘人物，草图的感觉。
- Blush：不同画师的插画合集，可以定制。基础用法有免费额度。
- ManyPixels：免费插画画廊，风格不多，但每种内部是一致的。
免费图库和视频
- Unsplash：最大的免费图库。Unsplash 许可允许商用，不要求署名。很多模板（包括 AstroWind 的演示）加载的图片 CDN 就是他们的。
- Pexels：照片，以及一个很不错的视频库，许可同样宽松。
- Pixabay：照片、矢量、视频和音乐。
- Lummi：AI 生成的图库图片。某个概念根本没有照片时用得上。
- Reshot：人工挑选的照片和图标，没有大图库那种用滥了的感觉。
- Coverr 和 Mixkit：给首屏用的免费背景视频。保持短、静音，并且放在一张封面图后面。
对它们都适用的一条规矩：核对具体那个文件的许可，对方要求署名时就署名，绝不要把一个认得出的人的脸用成他并没有给出的客户评价。
颜色、色板和渐变
- Realtime Colors：在一套像样的页面布局上试色板，浅色和深色都试，再决定用不用。
- Coolors：很快的色板生成器，能查对比度，也能导出成 CSS。
- UI Colors：把一支品牌色展开成一整套 Tailwind 式的色阶，从 50 到 950。
- Color Hunt 和 Huemint：人工挑选的和机器生成的色板，用来找灵感。
- Palette Maker 和 ColorSpace：从一种颜色出发做色板，带预览。
- Hypercolor：可以直接抄的 Tailwind 渐变 class。
- uiGradients 和 WebGradients：经典的双色渐变，附带 CSS。
- CSS Gradient 和 Gradient Magic：线性、径向和更复杂 CSS 渐变的编辑器。
- Mesh gradients：很多 2026 年首屏背后那种柔和的多色背景，以图片形式提供。
背景、图案和形状
- Haikei：SVG 波浪、色块、分层形状和网格背景，导出成 SVG 或 PNG。
- Hero Patterns：可平铺的 SVG 图案，写成 CSS，能调颜色和透明度。
- fffuel：一小套生成器，做渐变、色块、噪点、形状和分隔。
- Get Waves：用 SVG 波浪做的区块分隔。
- CSS Pattern 和 Pattern Monster：纯 CSS 和 SVG 图案。
- BGJar：会动的和静止的 SVG 背景。
- Transparent Textures：可以铺在颜色上的细纹理。
- Glassmorphism CSS、Neumorphism 和 Smooth Shadows：这些效果手写很难一次写对，这里有生成器。
- Clippy：可视化地做
clip-path形状。
字体和排版
- Google Fonts：最大的免费字体库。可以按可变字体和语言支持来筛选。
- Fontsource：同一批开放字体，做成 npm 包，方便自行托管（Astro 的 Fonts API 把它当作一个提供方）。
- Fontshare：Indian Type Foundry 的免费高质量字体，味道和 Google Fonts 不太一样。
- Fontpair：已经试过的 Google Fonts 搭配，标题和正文各一款。
- Typewolf：真实站点在用什么字体，附推荐和替代。
- Typescale：选一个基准字号和一个比例，得到一套一致的字号阶梯，输出成 CSS。
- Modern Font Stacks：在每个平台上都好看、而且立刻就能显示的系统字体组合。
样机和截图
- Shots：把截图放进设备框，或放上渐变背景，带阴影和旋转。
- Screely 和 Cleanmock：很快的浏览器窗口样机。
- Mockuphone：给应用截图用的手机和平板框。
- Previewed 和 Smartmockups：三维的设备样机和场景。
- Carbon 和 ray.so：好看的代码截图，用来发文章和做社交卡片。
图片优化、Favicon 和社交图
- Squoosh：在浏览器里压缩和转换图片，几种格式并排比较。想搞清 WebP 和 AVIF 到底做了什么，用这个。
- TinyPNG：批量压缩 PNG、JPEG 和 WebP。
- SVGOMG：优化 SVG，每个选项拿掉了什么都有实时预览。
- remove.bg：给产品和人像去掉背景。
- RealFaviconGenerator 和 favicon.io：从一张图或几个字母，生成每一种 favicon 尺寸和格式。
- OpenGraph.xyz 和 Meta Tags：预览一个页面被分享到社交网络和聊天软件时的样子，并生成对应的标签。
动画
- Motion：一个现代的网页动画库，体积不大。
- LottieFiles：任意尺寸都能播的矢量动画，有成千上万个是免费的。
- Rive：会跟着状态变化的交互动画，编辑器可以免费用。
- Animate.css 和 Animista：现成的 CSS 动画，抄走就行。
- Lordicon：会动的图标，有一套免费的。
不管用哪一个，都要尊重 prefers-reduced-motion，首屏动画控制在一秒以内，而且绝不要去动访客正在读的那块内容。
无障碍检查
- WebAIM Contrast Checker：查 4.5:1 这条规矩时的参考工具。
- Who Can Use：把一对颜色显示成不同视力状况的人看见的样子。
- Color.review：按每种字号，直观地挑出能通过对比度的颜色。
- WAVE：整页的无障碍评估，问题标在原处。
- Accessibility Checker：对照 WCAG 做一次检查，解释用的是白话。
- WCAG 2.2 快速参考：指南本身，可以按等级筛选。
性能和测试
- PageSpeed Insights：对任何公开 URL 给出 Lighthouse，以及真实用户的 Core Web Vitals。
- Responsively：开发时同时看一个页面在很多屏幕尺寸上的样子。
- BrowserStack Responsive：在真实设备尺寸上快速看一眼。
- Can I use：在依赖某个 CSS 或 JavaScript 特性之前，先看浏览器支不支持。
SEO 工具
- Google Search Console：Google 怎么看这个站点：索引、查询、Core Web Vitals、富媒体结果。第一天就接上。
- Ahrefs Webmaster Tools：给你自己拥有的站点做免费的站点审计和外链报告。
- Schema Markup Validator：在指望富媒体结果之前，先检查结构化数据（
Article、FAQPage、Product）。 - Meta Tags：标题和描述的长度，并预览搜索结果。
注重隐私的统计
- Plausible：简单、不用 Cookie 的统计。开源，可以自己托管，托管方案要付费。
- Umami：开源、自己托管，只有一小段脚本。
- Fathom：隐私优先的统计，仪表盘很干净。
- PostHog：产品分析、会话回放和功能开关。当你需要的不只是页面浏览时，免费额度相当大方。
不用 Cookie 的工具，在很多地区可以避开同意条，落地页也因此更干净。
表单、内容管理和托管
- Formspree 和 Tally：没有后端的表单。把表单的
action指过去，或者嵌一个进去。 - Decap CMS：开源的、基于 Git 的 Markdown 内容编辑，很适合静态博客。
- Keystatic：基于 Git 的 CMS，编辑器比较现代，给 Astro 和 Next.js 项目用。
- Sanity：托管的结构化内容后端。站点大到 Markdown 文件不够用时再上。
- Vercel、Netlify 和 Cloudflare Pages：静态站点的免费托管，推送即部署，带预览和全球 CDN。
指南和学习
- Astro 文档 和 Tailwind CSS 文档：两份都异常地好。先读它们，再去搜索。
- MDN Web Docs：HTML、CSS 和 JavaScript 的参考。
- web.dev Learn：关于 CSS、无障碍、性能、表单和图片的系统课程。
- Refactoring UI：给开发者的设计，作者也是 Tailwind 的创建者。书要付费，免费文章把要点讲完了。
- Laws of UX：界面决定背后的心理学，一页一条。
- Checklist Design：一个页面、一个表单或一个空状态应该包含什么，写成检查清单。
- Growth.Design：用漫画写的真实产品案例。这是认识转化心理学最好的入门。
- Lorem Ipsum 和 Mockaroo：真正的内容还没到的时候，用的占位文字和像样的假数据。
周末做站的一套起步组合
如果每一类只想要一个答案，下面这一组能配合着干活，而且不花钱：
- 看。 在 Land-book 和 Landingfolio 上花一小时，存下五个参照。
- 画。 在 Excalidraw 里把页面勾出来，一块一屏。
- 做。 用一套已经有这些区块的模板（Astro 和 Tailwind 的话就是 AstroWind），配 Tabler 图标，以及 Inter 或一组 Fontshare 的搭配。
- 上色。 用 Realtime Colors 定下调子，再用 UI Colors 展开色阶。每一对颜色都在 WebAIM 里查过。
- 配图。 用染成你的 primary 的 unDraw，Unsplash 的照片，首屏截图放进 Shots 的框里。
- 优化。 每张图过一遍 Squoosh，用 RealFaviconGenerator 生成 favicon，在 OpenGraph.xyz 里看社交卡片。
- 发布。 放到 Vercel、Netlify 或 Cloudflare Pages。表单接到 Formspree。加上 Plausible 或 Umami。
- 检查。 用 PageSpeed Insights、WAVE 和 Schema 校验器。把站点加进 Search Console。
