简体中文
EnglishWhat is Addy's Web Dev Toolkit?
Updated
Addy's Web Dev Toolkit is a curated directory of 755 hand-picked tools and resources for web designers and developers. It is aimed at people who build websites and want a pre-filtered, no-fluff selection rather than a search engine's worth of options. Each listing links out to an external site, and many are marked "Free." Use it when you want to discover a tool for a specific task — compressing images, generating Open Graph previews, choosing animation easing, or testing a regex — without wading through low-quality results.
What you'll find inside
The toolkit is organized around the kinds of tasks that come up when building a site. From the page evidence, the visible categories include:
- Newest additions — the latest hand-picked tools and resources
- Get inspired — galleries, showcases, and creative sparks (73 items in this section alone)
- Level up — learning resources
- Design tools
- Icons galore
Each entry follows a consistent pattern: a name, a short description of what it does, a "Free" tag where applicable, and an external link. There are no long reviews or tutorials on the site itself — it is a jumping-off point, not a manual.
Examples of what's listed
The "Newest additions" section gives a concrete sense of the range:
| Tool | What it does |
|---|---|
| Free Faces Gallery | Curated typefaces under various free licences, organized by style |
| Archify | Open-source agent skill that generates validated HTML architecture, workflow, sequence, data-flow, and lifecycle diagrams |
| TinyPNG | Image compression and conversion for AVIF, WebP, PNG, and JPEG without visible quality loss |
| CSS Zen Garden | Long-running demonstration of CSS design using the same HTML with different stylesheets |
| Dirtyline Studio Freebies | Free display and handwritten fonts |
| My OG Image | Free Open Graph image generator with editable templates and PNG/JPEG/WebP export |
| VS Code Themes | Browse and preview VS Code themes by language, variant, popularity, and install count |
| VectorAI | AI-powered vector graphics creation |
| Easing Functions Cheat Sheet | Interactive comparison of easing functions for animations |
| Debuggex | Visual regular expression tester and debugger with match visualization and unit tests |
Who it's for
The toolkit suits two broad groups:
- Designers looking for typefaces, icons, inspiration galleries, and visual asset generators
- Developers looking for utilities like image compression, regex debugging, theme browsing, and diagram generation
It is less useful if you already know exactly which tool you need, or if you want in-depth documentation and comparisons. The value here is discovery and filtering, not depth.
How to use it
- Open the toolkit and scan the category that matches your task (design, icons, inspiration, learning).
- Read the one-line description to judge fit.
- Check the "Free" tag if cost matters to you — note that the tag reflects the listing's own label, and you should confirm licensing and limits on the destination site.
- Follow the external link to the actual tool.
Because every entry points off-site, treat the toolkit as an index. Verify current pricing, licence terms, and account requirements on the tool's own page before committing to it in a project.