做专业网站用得上的工具和资源

一个专业网站是上百个小决定：用哪套图标、哪组字体搭配、主视觉照片从哪来、怎么检查对比度、怎么让社交预览看起来对。每个决定都有工具能让它变简单，而找到这些工具占了一半工作。这是我们会反复回来看的那份清单。

这里的每一项都可以免费使用，或有足够大方的免费额度，仍在维护，并且不用注册账号就能浏览。某项资源的许可值得知道时，会写出来。清单按工作阶段分组，从第一张草图到上线后的第二天。

目录

1. 好网站长什么样
2. 设计工具
3. UI 套件和组件库
4. 图标集
5. 插画
6. 免费图库和视频
7. 颜色色板和渐变
8. 背景图案和形状
9. 字体和排版
10. 样机和截图
11. 图片优化网站图标和社交图
12. 动画
13. 无障碍检查
14. 性能和测试
15. SEO 工具
16. 注重隐私的分析
17. 表单内容管理和托管
18. 指南和学习
19. 周末就能搭好的起步组合

好网站长什么样

先看，再做。打开编辑器之前在这些图库里花十分钟，后面能省下几小时。

• Land-book：一个很大、标签清楚的落地页图库。可按行业、风格或颜色筛选。
• Lapa Ninja：落地页带整页截图，而且常常把主视觉文案抽出来，适合研究标题。
• Landingfolio：落地页示例被拆成区块（主视觉、定价、评价），方便在很多站点之间比较同一类区块。
• SaaS Landing Page：顾名思义，按区块和行业分类。
• Godly：更实验的一端：动效、不寻常的布局、强烈的美术方向。
• Mobbin：真实产品的界面和流程，移动端和 Web 都有。免费额度有限，但够用来研究模式。
• Refero：来自线上产品的真实界面，可按组件搜索（「空状态」「定价表」）。
• Awwwards：获奖站点；工艺多于转化，适合看视觉野心。
• Dribbble 和 Behance：设计师作品集。记住，很多图是从未被做出来的概念。

设计工具

• Figma：界面设计和原型的标准工具；免费方案够一个人做一个项目。Figma Community 有成千上万的免费套件和模板。
• Penpot：Figma 的开源替代，可以自己托管，内建设计令牌。
• Excalidraw：手绘风格的白板，用来画线框和示意图。很快，不需要账号。
• Photopea：浏览器里的类 Photoshop 编辑器，能打开 PSD、XD 和 Sketch 文件。
• Canva：完整设计工具显得过重时，用来快速做社交图、演示文稿和简单图形。

UI 套件和组件库

如果用 Tailwind CSS 来做，这些给你可以直接上线的区块和组件，用来组合或复制。

• shadcn/ui：你复制进项目并自己拥有的无障碍组件；事实上的 React 项目标准，也是现在很多模板遵循的令牌模型。
• Tailwind Plus：Tailwind 团队的官方组件和模板目录。付费，但免费预览本身就是一堂设计课。
• Flowbite：基于 Tailwind 的大型开源组件库，带交互元素。
• daisyUI：Tailwind 插件，加上语义化类名（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 渐变类。
• 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：3D 设备样机和场景。
• Carbon 和 ray.so：给文章和社交卡片用的好看代码截图。

图片优化网站图标和社交图

• Squoosh：在浏览器里压缩和转换图片，并排比较格式。用来弄清 WebP 和 AVIF 到底做了什么。
• TinyPNG：批量压缩 PNG、JPEG 和 WebP。
• SVGOMG：优化 SVG，每个选项去掉了什么都有实时预览。
• remove.bg：给产品和人像照片去背景。
• RealFaviconGenerator 和 favicon.io：从一张图或几个字母生成各种尺寸和格式的网站图标。
• OpenGraph.xyz 和 Meta Tags：预览页面在社交网络和聊天应用里分享时长什么样，并生成标签。

动画

• Motion：现代的 Web 动画库，体积小。
• 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：真实内容还没到时用的占位文字和像样的假数据。

周末就能搭好的起步组合

如果每一类只要一个答案，下面这组能配合在一起，而且不花钱：

1. 看 Land-book 和 Landingfolio 一个小时；存下五个参考。
2. 画 在 Excalidraw 里画页面，一个区块一屏。
3. 做 用一个已经有这些区块的模板（Astro 和 Tailwind 用 AstroWind）、Tabler 图标，以及 Inter 或一组 Fontshare 搭配。
4. 上色 用 Realtime Colors，再用 UI Colors 做出色阶；每一对颜色都在 WebAIM 里检查。
5. 配图 用 unDraw，重着色成你的主色；照片来自 Unsplash；主视觉截图放进 Shots。
6. 优化 每张图过一遍 Squoosh，用 RealFaviconGenerator 生成网站图标，在 OpenGraph.xyz 里检查社交卡片。
7. 发布 到 Vercel、Netlify 或 Cloudflare Pages；表单接到 Formspree；加上 Plausible 或 Umami。
8. 检查 用 PageSpeed Insights、WAVE 和 Schema 校验器；把站点加进 Search Console。

然后在写首页之前读落地页指南；如果基于 AstroWind 来做，再读入门指南。