开发者实用工具免费
ray.so
把代码片段生成好看的图片，用于分享到社交媒体或文档。
把代码片段做成小红书或推特的配图
为技术文章生成统一风格的代码图
#code#screenshot#sharing#social
Frontend Tools Collection
A curated set of tools that are genuinely useful for frontend work. Every entry explains the problem it solves, when to use it, and how to get started — not just another pile of links.
9
Tools
6
Categories
Low-hype · practical
Curation bar
9 tools
开发者实用工具免费
Tabler Icons
一套超过 4000 个风格统一的开源 SVG 图标，可免费商用。
为界面统一选一套风格一致的图标
按需复制 SVG 或用 React 组件引入
#icons#svg#open-source#react
组件与动效免费 + 付费
Magic UI
一套可复制的动效组件，基于 React、Tailwind 和 Framer Motion。
给营销页加上入场动画和交互细节
寻找 marquee、渐显、粒子等常见动效实现
#react#tailwind#framer-motion#animation
开发者实用工具免费
Squoosh
在浏览器里压缩图片，并实时对比压缩前后的画质和体积。
把设计给的大图压到适合上线的体积
把 PNG/JPG 转成 WebP 或 AVIF
#image#compression#webp#avif
工程效率免费
Transform
在各种格式之间互相转换，例如 JSON 转 TypeScript、HTML 转 JSX。
把接口返回的 JSON 转成 TypeScript 类型
把一段 HTML 快速转成 JSX 贴进 React
#converter#json#typescript#jsx
调试与性能免费
Bundlephobia
查询一个 npm 包被打包后的体积和对加载性能的影响。
在选型时比较几个功能相似的库的体积
评估某个依赖是否值得为它的体积买单
#npm#bundle-size#performance#dependencies
调试与性能免费
React Scan
自动高亮页面上发生重渲染的 React 组件，帮你定位性能问题。
排查页面卡顿时找出反复重渲染的组件
验证 memo / useMemo 的优化是否真的生效
#react#performance#rerender#devtools
UI / 设计灵感免费
Realtime Colors
在一个真实的示例页面上实时预览配色和字体的效果。
为新项目快速确定一套主色和中性色
验证深色/浅色模式下的对比度是否够用
#color#palette#typography#ui-inspiration
AI 编程免费 + 付费
v0
通过自然语言描述生成可用的 React + Tailwind 组件代码。
快速搭出落地页或后台的初版界面
把设计稿的想法先生成一版可运行代码再调整
#ai#react#tailwind#component-generator