Immerse (沉浸式趣谈)

OpenClaw 到底能干什么？可以看看这 60 个真实用例

Immerse — Thu, 12 Mar 2026 14:52:54 +0800

大家好，我是 Immerse，一名独立开发者、内容创作者、AGI 实践者。

关注公众号：沉浸式 AI，获取最新文章（更多内容只在公众号更新）

个人网站：https://yaolifeng.com 也同步更新。

转载请在文章开头注明出处和版权信息。

我会在这里分享关于编程、独立开发、AI干货、开源、个人思考等内容。

如果本文对您有所帮助，欢迎动动小手指一键三连 (点赞、评论、转发)，给我一些支持和鼓励，谢谢！

OpenClaw 最大的问题是什么，答案不是技术门槛，而是大多数人根本想不到它能用来干什么。能不能赚到钱，但也说实话 Token 消耗是真的快

GitHub 上的 awesome-openclaw-usecases 仓库，里面收集了 60 多个真实运行的用例。这些不是概念验证，而是有人实际跑了至少一天的东西。仓库的规则很简单：必须附上截图或体验描述，拒绝纸上谈兵

社交媒体：让 AI 帮你筛选信息

社交媒体的信息过载是个老问题了。你关注了一堆 subreddit，订阅了几十个 YouTube 频道，但根本没时间看完。

有人用 OpenClaw 做了每日 Reddit 摘要，根据你的偏好自动总结喜欢的 subreddit—这个思路很简单，但真正难得的是坚持每天整理。类似的还有每日 YouTube 摘要，让你不错过关注的创作者更新。

如果你想分析自己的社交媒体表现，X 账号分析可以对你的账号做定性分析。还有人做了多源科技新闻摘要，聚合了 109 个以上来源的科技新闻。

创意与构建：从想法到产品

有人真的用 OpenClaw 做了一夜之间自动生成并完成迷你应用的系统，目标是目标驱动的自主任务执行——说白了，就是睡前给 AI 一个需求，第二天早上起来应用已经跑起来了。

内容创作者也在用。YouTube 内容流水线可以自动挖掘选题、研究、追踪。更夸张的是多智能体内容工厂，在 Discord 里让研究、写作、缩略图智能体协同工作，相当于一个小型内容工作室

还有人用它管理自主游戏开发流水线，全生命周期管理教育游戏开发，甚至搞了个「先修 Bug」政策——每次开发新功能前，先把现有 Bug 修干净。

基础设施与 DevOps：让服务器自己照顾自己

DevOps 场景下，OpenClaw 的价值在于自动化和自愈能力。

n8n 工作流编排让智能体不接触凭证，所有集成可视化——这对安全敏感的人来说很重要。自愈家庭服务器通过 SSH 加自动 cron 实现自愈能力，服务器出问题时自动修复，相当于雇了一个 24 小时值班的运维。

生产力：这个分类用例最多

生产力工具是 OpenClaw 最热门的应用场景。从项目管理到客户服务，从收件箱整理到健康追踪，几乎所有重复性工作都有人在尝试自动化。

自主项目管理可以自动跟踪项目进度。多渠道 AI 客户服务统一处理 WhatsApp、Instagram、邮件、Google 评论，对小团队来说相当于省了一个客服人力的成本。

有人做了基于电话的个人助理，通过手机语音或短信免提操作——想象一下你在开车的时候喊一声就能让 AI 帮你回消息。还有收件箱整理、个人 CRM、健康与症状追踪器也是常见的尝试方向。。

多渠道个人助理、项目状态管理、动态仪表板、Todoist 任务管理器都在这个列表里。

家庭场景也有覆盖。家庭日历与家务助理可以协调家庭成员的日程——这个对有娃的家庭挺实用。多智能体专业团队包含战略、开发、营销、业务四个专精智能体，相当于一个 AI 组成的虚拟团队。

早上起来想知道今天的重点？定制早间简报可以帮你。想要一个第二大脑？有人做了短信记忆加 Next.js 仪表板搜索的系统，等于给记忆装了个检索入口

甚至有人用 OpenClaw 做活动嘉宾确认，让 AI 语音逐一打电话确认——这个用法挺巧妙，省了逐一通知的繁琐。。

研究与学习：信息处理的新方式

研究和学习场景下，OpenClaw 的价值在于信息的聚合和检索。

AI 财报追踪器可以自动追踪公司财报，对投资爱好者来说相当于多了只眼睛。个人知识库 (RAG)让你建立自己的知识检索系统，读过的东西不会看完就忘。

市场研究与产品工厂更进一步，从 Reddit 和 X 挖掘痛点，自动生成 MVP——这个思路很接近硅谷的 MVP 文化，只是用 AI 代替了人工调研。语义记忆搜索让你用自然语言搜索过去的记录，相当于给过去的自己留了个对话窗口。

我的看法

看完这些用例，我最大的感受是：OpenClaw 的价值不在于它能做什么，而在于你能想到用它做什么，能不能赚到钱取决于你怎么用，但 Token 消耗确实也是实实在在的成本。

如果你还在想 OpenClaw 能用来干什么，翻翻这个仓库。也许某个用例会给你启发——不是启发你怎么用，而是启发你思考什么值得自动化。

仓库地址： https://github.com/hesamsheikh/awesome-openclaw-usecases

6247

Immerse — Sat, 14 Feb 2026 14:55:43 +0800

大家好，我是 Immerse，一名独立开发者、内容创作者、AGI 实践者。

关注公众号：沉浸式 AI，获取最新文章（更多内容只在公众号更新）

个人网站：https://yaolifeng.com 也同步更新。

转载请在文章开头注明出处和版权信息。

我会在这里分享关于编程、独立开发、AI干货、开源、个人思考等内容。

如果本文对您有所帮助，欢迎动动小手指一键三连 (点赞、评论、转发)，给我一些支持和鼓励，谢谢！

Boris 又发了一份 Anthropic 内部的 Claude Code 使用心得。

看完觉得挺实用，记录几条：

1. 多开 worktree 同时跑 3-5 个 git worktree，每个开一个独立会话。团队里公认这个最提效。Boris 自己习惯用 git checkout，但大部分人更爱 worktree。

2. 复杂任务先规划 遇到复杂活儿就开 plan mode。可以让一个 Claude 写计划，另一个当幕僚审查。跑偏了就切回去重新规划。验证环节也会专门进计划模式。

3. 错误后更新 CLAUDE.md 每次纠错完都加一句："更新你的 CLAUDE.md，别再犯同样的错。"反复迭代到错误率明显降下来。

4. 自建 Skills 库 把常用操作做成 Skills 提交到 git，各项目复用。一天做两次以上的事就该做成 Skills。

5. 让 Claude 自己修 bug 接入 Slack MCP，把 bug 讨论帖扔给 Claude，说一句"修它"就行。或者直接"去修失败的 CI"，不用管细节。

6. 提高提示词质量 试试"严格审查这些改动，测试不过不准建 PR"，让 Claude 当审查员。或者"证明给我看这能跑通"，让它对比 main 和功能分支的差异。

7. 追求更优方案 碰到平庸的修复就说："基于现在掌握的信息，废掉这个方案，实现更优雅的。"任务前写详细规格，减少歧义。描述越具体，输出越好。

8. 终端配置 团队在用 Ghostty 终端，支持同步渲染、24 位色彩和完整 Unicode。用 /statusline 自定义状态栏显示上下文用量和 git 分支。给标签页做颜色编码和命名，一个任务一个标签页。

9. 语音输入 说话比打字快三倍，提示词也会详细很多。macOS 连按两次 fn 就能开启。

10. 用子代理 想让 Claude 多花点算力就加"use subagents"。把任务分给子代理，主代理的上下文窗口保持干净。

详情：x.com/bcherny/status/2017742741636321619

Vercel 为 AI Agent 专门做了个浏览器自动化工具（附安装方法）

Immerse — Tue, 03 Feb 2026 16:51:42 +0800

大家好，我是 Immerse，一名独立开发者、内容创作者、AGI 实践者。

关注公众号：沉浸式 AI，获取最新文章（更多内容只在公众号更新）

个人网站：https://yaolifeng.com 也同步更新。

转载请在文章开头注明出处和版权信息。

我会在这里分享关于编程、独立开发、AI干货、开源、个人思考等内容。

如果本文对您有所帮助，欢迎动动小手指一键三连 (点赞、评论、转发)，给我一些支持和鼓励，谢谢！

之前让 AI Agent 写自动化脚本，最头疼的就是 CSS 选择器。这玩意儿简直是 Agent 的克星——要么选不准，要么网页改个样式脚本就挂了。

最近被 Vercel 开源的 agent-browser 圈粉了。这工具专门为了解决 AI 操作浏览器的痛点设计的，试了一圈，确实比直接硬写 Playwright 舒服太多。

终于不用猜选择器了

这工具最聪明的地方，就是用 refs 机制替代了传统的 CSS 选择器。

以前我们得告诉 AI "去找那个 class 里带 submit 的按钮"，现在不用了。你运行一下 snapshot 命令，它直接给页面拍个快照，给每个能点击、能输入的元素打上唯一标签（比如 @e1, @e2）。

AI 拿到的视角是这样的：

# - button "Submit" [ref=e2]
# - textbox "Email" [ref=e3]

然后操作就变成了："点击 @e2"，"在 @e3 里填个邮箱"。这逻辑跟人眼操作一模一样，指哪打哪，底层 DOM 结构怎么变都无所谓，稳定性直接上了一个台阶。

Rust 加持，快得飞起

它的 CLI 是用 Rust 写的，背后挂了个 Node.js daemon 管理浏览器实例。

最大的感受就是快。以前跑脚本，初始化浏览器得等半天。现在 daemon 一直在后台挂着，命令发过去几乎是秒响应。对于那种需要连续操作几十步的复杂任务，这种低延迟体验真的回不去。

开箱即用的命令集

文档：https://agent-browser.dev/commands

命令设计没那么多花里胡哨的，全是直觉式操作：

agent-browser open google.com
agent-browser click @e35
agent-browser type "Vercel"
agent-browser wait 500

而且通过 --json 参数还能返回结构化数据，方便 Agent 进一步处理。目前大概有 50 多个命令，日常的截图、Cookie 管理、多 Tab 切换基本都覆盖了。

AI 原生支持

Vercel 毕竟是做开发工具起家的，生态考虑得很周到。它不光是一个工具，还直接提供了适配 Claude Code 的 Skill 文件。

把你下载的 Skill 文件往 .claude/skills 里一扔，AI 立马就学会怎么用这套工具了，连 Prompt 都不用怎么调教。Cursor、Copilot 这些支持 Shell 命令的 Agent 也都能无缝衔接。

链接：SKILL.md：https://github.com/vercel-labs/agent-browser/blob/main/skills/agent-browser/SKILL.md

几个很实用的细节

Session 隔离：想测试 "用户 A 和用户 B 同时在线" 的场景？不用开俩浏览器窗口，直接指定不同 Session 就行，Cookie 互不干扰。
视觉降噪：有些网页乱七八糟元素太多，容易把 AI 绕晕。它有个过滤模式，可以只把交互元素提取出来喂给 AI，省 Token 又提高准确率。
这就是即便 serverless 也能跑：支持自定义 Chromium 路径，哪怕是在 AWS Lambda 这种环境里，挂个精简版 Chromium 也能跑起来。

总结

如果你也在折腾 AI Agent 做 E2E 测试或者爬虫，可以推荐试试 agent-browser。

把这种脏活累活丢给专门的工具，才是 AI 时代的正确姿势。

项目地址：agent-browser：https://github.com/vercel-labs/agent-browser

Vercel 把 10 年 React 经验打包成 Skill 开源了（附安装方法）

Immerse — Thu, 29 Jan 2026 16:35:20 +0800

大家好，我是 Immerse，一名独立开发者、内容创作者、AGI 实践者。

关注公众号：沉浸式 AI，获取最新文章（更多内容只在公众号更新）

个人网站：https://yaolifeng.com 也同步更新。

转载请在文章开头注明出处和版权信息。

我会在这里分享关于编程、独立开发、AI干货、开源、个人思考等内容。

如果本文对您有所帮助，欢迎动动小手指一键三连 (点赞、评论、转发)，给我一些支持和鼓励，谢谢！

Vercel 开源了一个项目，叫 agent-skills。

他们把团队积累的 React、Next.js 开发经验，打包成了 AI 可以直接调用的技能包。

写代码时，AI 会自动检查性能问题、可访问性、最佳实践。相当于自动 Code Review。

3 个技能包

react-best-practices：40 多条规则，分 8 个类别。

包括消除请求瀑布流、优化包体积、服务端性能、客户端数据获取。每条规则标注优先级（Critical、High、Medium）。

web-design-guidelines：100 多条规则。

涵盖可访问性、焦点状态、表单处理、动画、排版、图片、性能、导航、暗黑模式、触控交互、国际化。

vercel-deploy-claimable：在聊天窗口直接部署到 Vercel。

支持 40 多种框架，部署完给预览地址和认领地址。

安装和使用

npx add-skill vercel-labs/agent-skills

装完不需要配置，AI 自动检测使用场景。写 React 组件时自动检查性能，说要部署时自动调用部署功能。

工具支持

这个思路的价值

把经验和最佳实践结构化，让 AI 能理解和执行。

比文档好用，AI 会在写代码时主动提醒你。这些技能遵循 Agent Skills 标准，是开放格式。

项目地址：https://github.com/vercel-labs/agent-skills

CSS 终于能做瀑布流了！三行代码搞定,告别 JavaScript 布局

Immerse — Wed, 14 Jan 2026 16:45:25 +0800

大家好，我是 Immerse，一名独立开发者、内容创作者、AGI 实践者。

关注公众号：沉浸式趣谈，获取最新文章（更多内容只在公众号更新）

个人网站：https://yaolifeng.com 也同步更新。

转载请在文章开头注明出处和版权信息。

我会在这里分享关于编程、独立开发、AI干货、开源、个人思考等内容。

如果本文对您有所帮助，欢迎动动小手指一键三连 (点赞、评论、转发)，给我一些支持和鼓励，谢谢！

之前做瀑布流布局，要么用 Masonry.js 这种库，要么自己写一堆 JavaScript 计算位置。

现在好了，CSS Grid Lanes 来了，三行代码就搞定。

Safari 技术预览版已经支持了，你现在就能试。

三行代码实现瀑布流

看最简单的用法。

.container {
    display: grid-lanes;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 16px;
}

就这样。

第一行设置 display: grid-lanes，告诉浏览器用 Grid Lanes 布局。

第二行定义列，至少 250px 宽，自动填充所有可用空间。浏览器会根据屏幕宽度决定显示几列。

第三行设置间距，列与列之间、卡片与卡片之间都是 16px。

不用写 JavaScript，不用算高度，不用考虑响应式。浏览器全帮你搞定了。

原理是什么？

把它想象成堵车的高速公路。

每辆车都想往前挤，哪条车道空就往哪条钻。每个新卡片也一样，浏览器会把它放在最靠上的位置。

这样布局出来的效果和 Masonry.js 一模一样，但性能好太多了。

如果你要做无限滚动加载更多内容，也不用 JavaScript 控制布局了。滚到底部加载新数据，浏览器自动把新卡片摆好。

列宽可以不一样

因为底层用的是 CSS Grid，你可以做各种花样。

比如奇数列窄，偶数列宽，最后一列始终是窄的：

.container {
    display: grid-lanes;
    grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr) minmax(16rem, 2fr)) minmax(8rem, 1fr);
}

这样布局出来就有节奏感了，不会显得太死板。

卡片可以跨列

既然是 Grid，那肯定能跨列。

article {
    grid-column: span 1;
}

article:nth-child(1) {
    grid-column: span 4;
}

article:nth-child(2),
article:nth-child(3) {
    grid-column: span 2;
}

第一张卡片占 4 列做头图，第 2 到第 3 张占 2 列做次要内容，其他的占 1 列。

这种布局以前只能用 JavaScript 计算，现在纯 CSS 就行。

报纸那种复杂版式也能做出来了。

固定位置也可以

你还能指定某个元素放在特定位置。

比如把 header 固定在最右边的两列：

main {
    display: grid-lanes;
    grid-template-columns: repeat(auto-fill, minmax(24ch, 1fr));
}

header {
    grid-column: -3 / -1;
}

不管屏幕多宽，header 都会出现在右边。其他内容该怎么排怎么排。

横向布局也能做

瀑布流是竖着流，Grid Lanes 也能横着流。

竖着流用 grid-template-columns 定义列：

.container {
    display: grid-lanes;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

横着流就用 grid-template-rows 定义行：

.container {
    display: grid-lanes;
    grid-template-rows: 1fr 1fr 1fr;
}

浏览器会根据你定义的是列还是行，自动判断流的方向。

不用额外设置什么属性，它自己就知道。

容错度控制

有个新概念叫容错度。

假设第一列的卡片高度是 100px，第四列是 99px。下一张卡片应该放哪？

如果追求绝对精确，应该放第四列，因为它矮 1px。

但这 1px 根本看不出来，而且会导致卡片顺序很乱。用户 Tab 切换时会跳来跳去。

所以 Grid Lanes 有个默认容错度 1em。只有高度差超过 1em，浏览器才会认为它们不一样。

小于 1em 的差异会被忽略，卡片会更倾向于从左到右排列。

你可以调整这个值：

.container {
    item-tolerance: 2em;
}

设大一点，布局更规整，但可能浪费空间。设小一点，空间利用率高，但顺序会更乱。

根据你的内容大小和内容差异来调。

注意这个属性名字可能还会改，正式发布前留意一下。

现在就能试

Safari 技术预览版 234 已经支持了。

你可以下载来试试，官方 Demo 网站也更新了新语法。

除了图片瀑布流，还有其他用法。

比如做 Mega Menu 的底部链接区域。每组链接高度不同，用 Grid Lanes 排起来非常整齐：

.container {
    display: grid-lanes;
    grid-template-columns: repeat(auto-fill, minmax(max-content, 24ch));
    column-gap: 4lh;
}

各组链接紧密排列，不会浪费空间。

接下来呢

CSS 工作组还有几个细节在讨论，但整体语法已经确定了。

现在可以学起来，可以做 Demo 玩玩，可以给反馈。

WebKit 团队从 2022 年中开始做这个功能，现在终于能用了。

我估计其他浏览器也会很快跟进，毕竟这需求太常见了。

以后做瀑布流，再也不用引 JavaScript 库了。

参考资料：

发现一个宝藏图片对比工具！速度比 ImageMagick 快 6 倍，还是开源的

Immerse — Wed, 07 Jan 2026 14:57:31 +0800

大家好，我是 Immerse，一名独立开发者、内容创作者、AGI 实践者。

关注公众号：沉浸式趣谈，获取最新文章（更多内容只在公众号更新）

个人网站：https://yaolifeng.com 也同步更新。

转载请在文章开头注明出处和版权信息。

我会在这里分享关于编程、独立开发、AI干货、开源、个人思考等内容。

如果本文对您有所帮助，欢迎动动小手指一键三连 (点赞、评论、转发)，给我一些支持和鼓励，谢谢！

今天给大家分享一个超牛的图片对比工具 — Odiff。

不仅速度快到飞起，还完全开源免费。

速度很快

官网拿它和常用的 ImageMagick、pixelmatch 对比了一下。

完整的网页截图：

ImageMagick 要 8.8 秒，pixelmatch 要 7.7 秒。

Odiff？1.2 秒搞定。

快了 6 倍不止。

更夸张的是 8K 大图对比：

别的工具要 9-10 秒，Odiff 只要 2 秒。

技术方面

Odiff 最早用 OCaml 写的，现在用 Zig 重写了。

支持 SSE2、AVX2、AVX512 和 NEON。

直接榨干 CPU 的并行计算能力，一次处理多个像素。

难怪能这么快。

功能很全

快归快，功能没缩水。

跨格式对比随便玩，jpg 和 png 直接比，不用转格式。

支持的格式也多：png、jpg、jpeg、webp、tiff 全都行。

抗锯齿检测、区域忽略这些高级功能也有。

用的是 YIQ NTSC 算法，判断视觉差异更准确。

不同布局的图片也能对比。

输出结果很详细，差异像素数量、百分比、对比图都给你生成好。

上手超简单

装个 npm 包就能用：

npm install odiff-bin

然后直接用命令行：

odiff base.png compare.png diff.png

第三个参数是输出的对比图，可以不写。

如果你想在 Node.js 代码里用，也很简单：

const { compare } = require('odiff-bin');

const { match, reason } = await compare('path/to/first.png', 'path/to/second.png', 'path/to/diff.png');

console.log(match); // true 或 false
console.log(reason); // 不匹配的原因

返回结果会告诉你图片是否匹配。

如果不匹配，会给出原因：是像素差异，还是布局不同。

还有差异像素数量和差异百分比。

还有个服务器模式

对比大量图片的话，推荐用服务器模式。

Odiff 提供了服务器模式。

它会启动一个常驻进程，多次对比都用同一个进程，省去了启动开销。

Node.js 里用起来也很简单：

const { ODiffServer } = require('odiff-bin');

const server = new ODiffServer();

const result1 = await server.compare('a.png', 'b.png', 'diff1.png');
const result2 = await server.compare('c.png', 'd.png', 'diff2.png');

server.stop();

还可以设置超时时间，防止某个对比卡住：

await server.compare('a.png', 'b.png', 'diff.png', {
    threshold: 0.3,
    timeout: 5000,
});

服务器模式还会自动根据 CPU 核心数并行处理。

多个测试用例同时跑也不会阻塞。

集成也很方便

用 Playwright 的话，有专门的插件：

npm install playwright-odiff

然后在测试文件里：

import 'playwright-odiff/setup';

expect(page).toHaveScreenshotOdiff('screenshot-name');

Cypress 也有对应的插件 cypress-odiff。

还有很多视觉回归测试服务直接集成了 Odiff。

比如 LostPixel、Argos CI、Visual Regression Tracker。

Argos CI 之前发推说，换到 Odiff 之后速度提升了 8 倍。

完全开源免费

Odiff 是 MIT 协议的开源项目。

代码全在 GitHub 上，维护也很活跃。

提供预编译的二进制文件，Windows、Mac、Linux 都支持。

npm 安装的话，会自动下载对应平台的版本，不用操心。

写在最后

做视觉回归测试，或者平时需要对比图片的话。

强烈推荐试试 Odiff。

速度快到飞起，功能还全，开箱即用。

关键还是开源免费的，良心。

项目地址：https://github.com/dmtrKovalenko/odiff

《独立开发者精选工具》第 025 期

Immerse — Fri, 02 Jan 2026 16:56:19 +0800

Indie Tools 是一个收录独立开发、AI 出海领域最新、最实用的免费工具与资源工具站。让你快速找到所需，专注于创造产品。

独立开发者必备网站：https://www.indietools.work

Github: https://github.com/yaolifeng0629/Awesome-independent-tools

如果本文能给你提供启发和帮助，感谢各位小伙伴动动小手指，一键三连 (点赞、评论、转发)，给我一些支持和鼓励，谢谢。

Rapidlaunch

总结

基于 Next.js 的快速启动库，提供 Starter Kits 和组件，加速 Web 开发。

链接: https://www.indietools.work/product/rapidlaunch

特性

提供多种 Starter Kits，快速搭建基础架构。
包含即用型 UI 组件，快速拼装界面。
基于 Next.js，支持服务端渲染。
代码开源，结构清晰，易于定制。

使用场景

快速启动新项目原型。
构建后台或营销页面时寻找 UI 模块。
团队统一项目结构和规范。

缺点

维护依赖社区贡献。
绑定 Next.js，不适用其他框架。

precedent

总结

Next.js 项目的精选组件和工具库，加速现代化应用开发。

链接: https://www.indietools.work/product/precedent

特性

提供模态框等精选 UI 组件。
包含实用自定义 React Hooks。
内置 Next.js App Router 工具函数。
TypeScript 编写，类型安全。

使用场景

快速启动高质量 Next.js 项目。
统一团队 UI 和代码规范。
构建高体验 Web 应用。

缺点

个人维护，设计可能不合众口。
初学者需时间理解其结构。

Next-JS-Landing-Page-Starter-Template

总结

基于 Next.js 14 的开箱即用着陆页模板，集成完整工具链。

链接: https://www.indietools.work/product/next-js-landing-page-starter-template

特性

Next.js 14 + App Router，高性能。
TypeScript + Tailwind CSS 3，类型安全且样式高效。
内置 ESLint、Prettier 等代码质量工具。
预配置 VSCode 和 Netlify 部署。

使用场景

快速启动营销着陆页。
基于高标准模板二次开发。
构建高性能官网或作品集。

缺点

设计基础，需定制品牌风格。
面向开发者，学习成本较高。

Startup is free Next.js template

总结

专为 SaaS 初创公司设计的免费 Next.js 模板，含核心页面与组件。

链接: https://www.indietools.work/product/startup-free-nextjs-saas-template

特性

基于 Next.js，性能与 SEO 优异。
包含主页、定价等 SaaS 必备页面。
提供预构建 UI 组件和布局。
设计现代响应式，适配多端。
开源免费，易于定制。

使用场景

初创公司快速构建官网。
开发者基于高质量模板二次开发。
建立含博客的营销网站。

缺点

通用设计，需定制品牌风格。
仅含前端，需自行集成后端。

next-saas-starter

总结

基于 Next.js 的免费响应式 SaaS 落地页模板，JAMStack 架构。

链接: https://www.indietools.work/product/next-saas-starter

特性

Next.js 构建，支持 SSR，SEO 友好。
JAMStack 架构，安全快速。
完全响应式设计。
集成 Tailwind CSS，易定制。
包含 SaaS 核心组件。

使用场景

快速构建 SaaS 营销网站。
获取高性能 Next.js 项目起点。
构建静态化 Web 应用。

缺点

功能基础，需扩展业务逻辑。
仅含前端，需集成后端。

relivator-nextjs-template

总结

基于 Next.js 15 和 React 19 的全栈电商 SaaS 模板，集成支付与认证。

链接: https://www.indietools.work/product/relivator-nextjs-template

特性

Next.js 15 + React 19，体验现代。
集成 Auth、支付、UI 库和 ORM。
提供完整电商功能模块。
支持深色模式，Tailwind CSS 定制。
TypeScript 编写，类型安全。

使用场景

快速启动全栈电商或 SaaS 项目。
寻求高集成度 React/Next.js 模板。
构建含支付的用户系统。

缺点

技术栈复杂，上手曲线陡峭。
功能繁多，简单项目可能显得臃肿。

free-nextjs-admin-dashboard

总结

基于 Next.js 和 Tailwind CSS 的免费开源后台管理模板。

链接: https://www.indietools.work/product/free-nextjs-admin-dashboard

特性

Next.js + Tailwind CSS，高效开发。
提供仪表盘、图表等预置页面。
完全免费开源，可商用。
响应式设计，适配多端。
结构清晰，易于定制。

使用场景

快速构建后台管理或仪表盘。
学习 Next.js 实战开发。
项目原型快速开发。

缺点

缺乏高级功能或企业支持。
界面基础，复杂项目需定制。

chadnext

总结

功能丰富的 Next.js 15 全栈启动模板，集成 UI、认证、数据库和支付。

链接: https://www.indietools.work/product/chadnext

特性

Next.js 15 App Router，支持 SSR。
集成 Shadcn/ui 组件库。
内置 LuciaAuth 认证。
使用 Prisma ORM。
预配置 Stripe 支付。

使用场景

快速启动全栈 Web 应用。
构建含支付的 SaaS 产品。
寻求开箱即用的基础框架。

缺点

技术栈固定，灵活性受限。
集成功能多，简单项目略显臃肿。

Next.js-Developer-Portfolio-Starter-Code

总结

基于 Next.js、Tailwind CSS 和 Framer Motion 的开发者作品集模板。

链接: https://www.indietools.work/product/nextjs-developer-portfolio-starter-code

特性

Next.js 框架，SEO 与性能优异。
Tailwind CSS 样式，响应式设计。
集成 Framer Motion 动画。
包含作品集核心页面。

使用场景

快速搭建个人展示网站。
学习 Next.js 动画实战。

缺点

功能设计基础，需深度定制。
依赖特定技术栈，需学习成本。

Galaxy

总结

专为工程师设计的现代化 SQL 编辑器，集成 AI 辅助与团队协作。

链接: https://www.indietools.work/product/galaxy

特性

高性能，轻量级内存占用。
内置 AI 助手辅助 SQL 编写。
支持实时协作与权限管理。
企业级安全标准。
优化 SQL 工作流体验。

使用场景

高效编写和调试 SQL。
团队协作分析数据。
企业级安全 SQL 开发。

缺点

聚焦 SQL，数据可视化功能有限。
生态系统尚不如老牌工具完善。

Knip - 一键清理项目无用代码

Immerse — Wed, 24 Dec 2025 14:40:51 +0800

大家好，我是 Immerse，一名独立开发者、内容创作者、AGI 实践者。

关注公众号：沉浸式趣谈，获取最新文章（更多内容只在公众号更新）

个人网站：https://yaolifeng.com 也同步更新。

转载请在文章开头注明出处和版权信息。

我会在这里分享关于编程、独立开发、AI干货、开源、个人思考等内容。

如果本文对您有所帮助，欢迎动动小手指一键三连 (点赞、评论、转发)，给我一些支持和鼓励，谢谢！

什么是 Knip？

Knip 是一个专门用来清理 JavaScript 和 TypeScript 项目的工具。

它能帮你找到什么？

Knip 主要帮你找出三类"垃圾代码"：

未使用的依赖包 - 你安装了但实际没用到的 npm 包
未使用的导出 - 你导出了但没人使用的函数、类、变量等
未使用的文件 - 项目中存在但没被引用的文件

如何使用？

快速开始

使用非常简单！只需要一条命令：

npm init @knip/config

这个命令会：

自动安装 Knip
在你的 package.json 中添加运行脚本

然后运行：

npm run knip

Knip 就会开始分析你的项目，告诉你哪些依赖、导出和文件没有被使用。

系统要求

Knip 需要 Node.js 18.18.0 或更高版本，也支持 Bun。

强大的生态支持

官网：https://knip.dev

Knip 不是一个简单的工具，它内置了 100+ 个插件，支持各种流行的框架和工具，比如：

Astro、Next.js、Remix、Svelte
Jest、Vitest、Cypress
ESLint、Webpack、Vite
GitHub Actions、Nx、Storybook
以及更多...

这意味着 Knip 能够理解这些工具的配置文件，准确分析你的项目结构。

Node.js 原生功能狂飙，15 个热门 npm 包要失业了

Immerse — Mon, 22 Dec 2025 12:01:26 +0800

大家好，我是 Immerse，一名独立开发者、内容创作者、AGI 实践者。

关注公众号：沉浸式趣谈，获取最新文章（更多内容只在公众号更新）

个人网站：https://yaolifeng.com 也同步更新。

转载请在文章开头注明出处和版权信息。

我会在这里分享关于编程、独立开发、AI干货、开源、个人思考等内容。

如果本文对您有所帮助，欢迎动动小手指一键三连 (点赞、评论、转发)，给我一些支持和鼓励，谢谢！

之前装个 Node.js 项目，npm 包能装一大堆。

现在发现很多包其实不用装了，Node.js 自己就支持。

这次整理了 15 个已经被 Node.js 原生功能替代的热门 npm 包。

有些已经稳定了，有些还在实验阶段，但都能用起来了。

fetch 终于成全局函数了

以前在 Node.js 里用 fetch，必须装 node-fetch。

现在 Node.js 18 开始，fetch 已经是全局函数了，和浏览器里的用法完全一样。

const res = await fetch("https://api.github.com/repos/nodejs/node");
const data = await res.json();
console.log(data.full_name);

直接就能用，不用装任何包。

Node.js 17.5 开始实验性支持，到 18 就稳定了。

如果你的项目还在用 Node.js 18 之前的版本，那还是得装 node-fetch。

WebSocket 也原生支持了

之前做 WebSocket 客户端，基本都用 ws 这个包。

现在 Node.js 有了全局的 WebSocket 类。

const ws = new WebSocket("wss://echo.websocket.org");

ws.onopen = () => ws.send("Hello!");
ws.onmessage = (event) => console.log("Received:", event.data);

Node.js 21 加的，不过还是实验性的。

要注意的是，这只是客户端支持。

如果要做 WebSocket 服务端，还是得用 ws 或者其他库。

测试框架不用装了

以前写测试，要装 mocha、jest 这些框架。

现在 Node.js 自带测试模块 node:test。

import test from "node:test";
import assert from "node:assert";

test("addition works", () => {
  assert.strictEqual(2 + 2, 4);
});

Node.js 18 加的实验性功能，到 20 就稳定了。

如果需要快照测试、mock 这些高级功能，第三方框架还是更强。

不过对于模块级别的测试，node:test 完全够用了。

SQLite 也要原生支持了

之前用 SQLite，要装 sqlite3 或 better-sqlite3。

这俩包都需要编译原生模块，升级 Node.js 版本经常出问题。

现在 Node.js 在开发 node:sqlite 模块。

import { open } from "node:sqlite";

const db = await open(":memory:");
await db.exec("CREATE TABLE users (id INTEGER, name TEXT)");

不过还是实验性的，等稳定了就能彻底告别编译问题了。

控制台彩色输出不用装 chalk 了

给控制台输出加颜色，以前都用 chalk 或 kleur。

现在 Node.js 有 util.styleText 函数。

import { styleText } from "node:util";

console.log(styleText("red", "Error!"));
console.log(styleText(["bold", "green"], "Success!"));

Node.js 20.12 加的，到 22.17 就稳定了。

如果需要复杂的主题配置或链式调用，chalk 还是更好用。

但简单的颜色输出，原生的就够了。

清理 ANSI 码也不用装包了

以前要去掉日志里的 ANSI 转义码，得装 strip-ansi。

现在有 util.stripVTControlCharacters 函数。

import { stripVTControlCharacters } from "node:util";

const text = "\u001B[4mUnderlined\u001B[0m";
console.log(stripVTControlCharacters(text));

原生处理，稳定可靠。

基本不需要再装第三方包了。

glob 匹配文件也原生了

匹配文件路径，以前必须用 glob 包。

Node.js 22 开始有 fs.glob 函数了。

import fs from "node:fs/promises";

const files = await fs.glob("**/*.js");
console.log(files);

22 版本就稳定了，可以放心用。

老项目还在用旧版本 Node.js 的话，还是得继续用 glob 包。

递归删除目录不用 rimraf 了

删除整个目录树，以前都用 rimraf。

现在 fs.rm 直接支持递归删除。

import fs from "node:fs/promises";

await fs.rm("dist", { recursive: true, force: true });

Node.js 12.10 就有了，现在所有 LTS 版本都稳定支持。

递归创建目录也不用 mkdir 了

创建多级目录，以前要装 mkdir。

现在 fs.mkdir 原生支持。

await fs.mkdir("logs/app", { recursive: true });

Node.js 10.12 就加了，早就稳定了。

UUID 生成不用装包了

生成 UUID v4，以前要装 uuid 包。

现在 crypto 模块自带 randomUUID 函数。

import { randomUUID } from "node:crypto";

console.log(randomUUID());

Node.js 14.17 就有了，稳定版本。

Base64 编解码也原生支持了

以前要 polyfill atob 和 btoa 函数。

现在这俩已经是全局函数了。

const encoded = btoa("hello");
console.log(encoded);
console.log(atob(encoded));

Buffer 一直都有，现在加上 atob 和 btoa，浏览器和 Node.js 的代码终于统一了。

Node.js 20 左右加的，现在 LTS 版本都有。

URL 路由匹配有了 URLPattern

做路由匹配，以前要装 url-pattern。

现在有全局的 URLPattern API。

const pattern = new URLPattern({ pathname: "/users/:id" });
const match = pattern.exec("/users/42");
console.log(match.pathname.groups.id);

Node.js 20 加的，不过还是实验性的。

但已经能用了，而且和浏览器的 URLPattern 完全一样。

加载 .env 文件不一定要 dotenv 了

之前加载环境变量文件，必须装 dotenv。

现在可以用 --env-file 参数。

node --env-file=.env app.js

Node.js 20.10 加的实验性功能。

如果需要变量展开或多文件支持，dotenv 还是更强。

但简单场景下，原生的就够了。

EventTarget 也是全局的了

以前 Node.js 只有 EventEmitter，要用 Web 标准的 EventTarget 得装 event-target-shim。

现在 EventTarget 已经是全局的了。

const target = new EventTarget();
target.addEventListener("ping", () => console.log("pong"));
target.dispatchEvent(new Event("ping"));

Node.js 15 加的，15.4 就稳定了。

浏览器和 Node.js 终于可以用同样的事件 API 了。

运行 TypeScript 不一定要 tsc 了

以前运行 .ts 文件，要装 TypeScript 编译器或 ts-node。

现在 Node.js 有实验性的 TypeScript 支持。

node --experimental-strip-types app.ts

Node.js 21 加的实验性功能。

不过这只是去掉类型标注，不做类型检查。

生产环境还是得用完整的 TypeScript 工具链。

为啥 Node.js 要把这些功能内置

看这些变化，能发现一个趋势。

以前需要外部依赖的功能，现在越来越多变成了核心功能。

这样做有几个好处。

减少依赖数量，项目更轻量。

降低供应链攻击风险，不用担心某个包被投毒。

代码在浏览器和服务端之间更容易移植。

能用就用起来

这些原生功能，浏览器支持好的就可以直接用了。

实验性的功能可以在开发环境先试试。

《独立开发者精选工具》第 024 期

Immerse — Thu, 18 Dec 2025 10:23:49 +0800

Indie Tools 是一个收录独立开发、AI 出海领域最新、最实用的免费工具与资源工具站。让你快速找到所需，专注于创造产品。

独立开发者必备网站：https://www.indietools.work

Github: https://github.com/yaolifeng0629/Awesome-independent-tools

如果本文能给你提供启发和帮助，感谢各位小伙伴动动小手指，一键三连 (点赞、评论、转发)，给我一些支持和鼓励，谢谢。

Awesome Shadcn UI

总结

一个精心整理的 Shadcn UI 资源大全，汇集了组件库、模板和工具等两百多个资源。

链接: https://www.indietools.work/product/awesome-shadcn-ui

特性

资源分类清晰，涵盖组件库、模板、工具等 13 个不同类别。
收录资源丰富，包含超过 200 个与 Shadcn UI 相关的优质项目。
提供可直接使用的 SaaS 模板，集成了认证、支付等后端功能。
包含大量 Landing Page 和 UI 组件模板，方便快速启动项目。

使用场景

开发者需要快速查找高质量的 Shadcn UI 组件或模板时。
希望基于 Shadcn UI 构建完整 SaaS 应用或落地页的团队。
寻找扩展组件或工具来增强 Shadcn UI 项目功能的场景。

缺点

作为第三方合集，资源质量依赖社区维护，需自行甄别。
内容可能更新不及时，无法保证所有链接长期有效。

mobbin

总结

一个专注于移动端应用界面设计的灵感库，提供海量真实产品截图。

链接: https://www.indietools.work/product/mobbin

特性

提供海量来自真实上架应用的界面截图，非概念设计。
可按应用类别、具体功能或设计元素进行精细筛选。
界面简洁，专注于高效浏览和获取设计参考。

使用场景

设计师需要参考流行应用的具体交互或视觉设计时。
产品经理规划新功能，寻找同类功能的实现参考。

缺点

高级功能（如完整设计流程查看）需要付费订阅。
内容主要为截图，缺乏背后的设计逻辑和用户数据支撑。

https://www.savantlook.com

总结

一款基于 Semrush API 构建的 SEO 数据查询与分析工具，功能聚焦且实用。

链接: https://www.indietools.work/product/savantlook

特性

提供域名概览查询，快速了解网站的核心 SEO 指标与流量概况。
内置关键词魔法工具，可进行关键词拓展与相关词挖掘分析。
工具设计简洁，操作直接，能快速获取关键数据结果。

使用场景

SEO 从业者需要快速查询竞争对手域名或关键词的初步数据。
内容营销人员在策划主题时，用于进行关键词的拓展与筛选。

缺点

功能深度依赖 Semrush 数据源，功能相对基础。
作为第三方工具，其功能与稳定性受限于 Semrush 官方 API。

Free Website Traffic Checker

总结

一款功能全面且免费的网站流量查询工具，支持多种查询模式，适合快速获取网站流量数据。

链接: https://www.indietools.work/product/free-website-traffic-checker

特性

支持单个网站查询，快速获取指定网站的预估流量数据。
提供批量查询功能，可一次性分析多个网站的流量情况。
可按关键词进行查询，寻找特定领域的相关网站流量信息。
移动端友好，方便用户随时随地使用工具进行查询。

使用场景

网站主或营销人员快速了解自身网站的流量表现。
进行竞争对手分析，研究同领域网站的流量规模。
在寻找合作伙伴或投放广告前，评估目标网站的流量价值。

缺点

提供的流量数据为估算值，可能与实际数据存在偏差。
高级功能或更详细的数据报告可能需要付费。

Picir.ai

总结

一款通过自然语言指令精确编辑图片的 AI 工具，采用先进模型，操作直观。

链接: https://www.indietools.work/product/picir-ai

特性

采用 Nano Banana/Gemini 2.5 Flash 等先进模型，实现高质量的图像理解和生成。
核心功能是使用自然语言描述来编辑图片，无需复杂软件操作技能。
支持对图像进行细节调整、内容修改、风格转换等多种编辑操作。

使用场景

快速修改图片中的特定元素，如替换物体、调整颜色或修复瑕疵。
为社交媒体、博客或演示文稿快速创建或优化所需的视觉素材。

缺点

对复杂或高度专业的编辑需求可能处理能力有限。
生成效果完全依赖于输入指令的准确性和模型的当前能力。

shoteasy

一款便捷的在线图片编辑与处理工具

链接: https://www.indietools.work/product/shoteasy

特性

提供基础的图片裁剪、旋转和调整尺寸功能。
内置多种滤镜效果，可快速美化照片。
支持常见图片格式，处理流程简单直接。

使用场景

社交媒体用户快速调整图片尺寸以适应平台要求。
需要为文档或演示文稿快速裁剪和简单美化图片。

缺点

功能相对基础，缺乏高级编辑工具。
可能存在文件大小或处理数量的限制。

Remove Object from Photo

总结

一款基于 AI 的在线图片物体移除工具，操作简单，无需专业技巧即可快速清理图片。

链接: https://www.indietools.work/product/remove-object-from-photo

特性

核心功能是使用 AI 智能识别，一键擦除照片中不需要的物体或人物。
提供画笔工具，让用户可以精确选择需要移除的特定区域。
整个过程在线完成，无需下载或安装任何复杂的桌面软件。

使用场景

快速移除旅游照片中闯入的路人，让画面主体更突出。
清理产品图片或房地产照片中杂乱的背景和多余物体。
轻松去除旧照片上的水印、日期戳或瑕疵，进行简单修复。

缺点

处理复杂背景或精细物体时，AI 效果可能不完美，需手动调整。
作为在线工具，上传和处理大量高清图片可能受网络速度和服务器限制。

Aluo AI

总结

一个为电商卖家设计的 AI 图像编辑平台，旨在快速、低成本地制作专业产品图片。

链接: https://www.indietools.work/product/aluo-ai

特性

提供一键移除图片背景功能，简化产品图处理流程。
支持 AI 生成多样化的产品场景，无需实体拍摄。
宣称能在 30 秒内完成编辑，极大提升工作效率。
强调成本仅为传统方式的 1/50，性价比突出。

使用场景

电商卖家需要为商品快速制作高质量主图与详情页图片。
小型团队或个人创业者缺乏预算进行专业产品摄影时。
需要为同一产品批量生成不同风格或背景的展示图片。

缺点

可能对创意和复杂图像编辑需求的支持有限。
生成结果的风格和质量可能受 AI 模型限制，不够独特。

Nano Banana AI Image Edit

总结

一款基于自然语言指令、能快速进行局部精准编辑的 AI 图片处理工具。

链接: https://www.indietools.work/product/nano-banana-ai-image-edit

特性

核心功能是自然语言局部编辑，用户可用一句话指令精准修改图片特定部分。
处理速度极快，号称达到 10 秒级响应，能大幅提升编辑效率。
编辑算法注重保留原图细节，避免过度处理导致画质损失。

使用场景

快速修图：移除照片中不需要的人物、物体或修复污渍、瑕疵。
创意调整：轻松改变背景效果、人物姿势或为黑白照片上色。

缺点

作为在线 AI 工具，其处理效果可能对复杂指令或图片存在不确定性。
可能需要网络连接，且高级功能可能存在使用次数限制或付费门槛。

image to pixel

一款免费在线工具，可将图片快速转换为复古像素艺术。

链接: https://www.indietools.work/product/image-to-pixel

特性

完全免费且无需注册，支持多种图片格式上传。
提供像素尺寸、颜色数量及经典游戏调色板等自定义选项。
转换过程支持实时预览，确保效果符合预期。

使用场景

为独立游戏或社交媒体内容创作复古像素风格素材。
将照片或设计稿转换为像素画，用于制作个性化周边产品。

缺点

上传文件大小限制为 10MB，可能无法处理极高分辨率原图。
作为在线工具，功能深度可能不及专业像素艺术软件。

2025 年 Safari 和 iOS 版本检测新思路

Immerse — Wed, 10 Dec 2025 15:02:44 +0800

大家好，我是 Immerse，一名独立开发者、内容创作者、AGI 实践者。

关注公众号：沉浸式趣谈，获取最新文章（更多内容只在公众号更新）

个人网站：https://yaolifeng.com 也同步更新。

转载请在文章开头注明出处和版权信息。

我会在这里分享关于编程、独立开发、AI干货、开源、个人思考等内容。

如果本文对您有所帮助，欢迎动动小手指一键三连 (点赞、评论、转发)，给我一些支持和鼓励，谢谢！

最近看到一篇文章，针对于 Safari 和 iOS 版本检测很不错，分享出来给大家。

之前都用 User-Agent 一把嗦，但文章提到检测结果不准确。

两个方式

User-Agent
特性检测

User-Agent 检测

这个方法就是获取浏览器的 User-Agent，从里面提取版本信息。

但是有问题，这个结果不准确。

Safari 的 UA 字符串里有两个版本号，一个是技术版本，一个是市场版本。很多脚本会把这俩搞混。

还有一点，从 macOS 11 开始，Safari 的 UA 里系统版本就不更新了，永远显示 10.15.7。

所以想从 UA 里准确获取版本？基本不可能。

MDN 官方都说了，别依赖 UA 字符串做浏览器检测逻辑，这是个常见 bug 源头。

特性检测

苹果官方推荐: 特性检测。

就是直接检查浏览器支不支持某个 API 或 CSS 特性。

但它没法区分所有版本，因为很多特性在好几个版本里都有。

解决思路

把两种方法结合起来用, 主要靠特性检测，UA 检测作为补充。

第一步：检测 WebKit 引擎

在 iOS 上，所有浏览器都必须用 WebKit，包括 Chrome、Firefox 这些。

所以检测 WebKit 能帮我们缩小范围：

// 桌面 Safari 和所有 iOS 浏览器
function isWebkit() {
    return 'GestureEvent' in window;
}

// 所有移动端 WebKit 浏览器
function isMobileWebKit() {
    return 'ongesturechange' in window;
}

// 只检测桌面 Safari
function isDesktopWebKit() {
    return typeof window !== 'undefined' && 'safari' in window && 'pushNotification' in window.safari;
}

第二步：检测特定 iOS 版本

去查 Safari 发布说明或 WebKit 的更新日志，找到某个版本新增的特性。

比如我想检测 iOS 17.0，发现这个版本加入了 contain-intrinsic-size 支持。

那就检测这个特性：

// iOS 17.0+ 返回 true
const isAtLeastiOS17 = CSS.supports('contain-intrinsic-size', '100px');

如果要检测具体的小版本，可以配合下一个版本的特性来排除。

比如 ManagedMediaSource 是在 iOS 17.1 才有的：

const supportsManagedMediaSource = 'ManagedMediaSource' in window;

// 只匹配 iOS 17.0
function isOnlyiOS170() {
    return isAtLeastiOS17 && !supportsManagedMediaSource;
}

if (isMobileWebKit()) {
    if (isOnlyiOS170()) {
        // 这是 iOS 17.0
    }
}

第三步：真机测试

理论归理论，实际测试才是王道。

踩坑：

iOS 17.6 的发布说明里说支持 CSS 的 safe 关键字，用 @supports 检测也返回 true。

结果真机上一跑，根本不生效。

这种情况下，只能换个思路，检测实际的渲染效果：

const isSafeKeywordSupported = () => {
    const container = document.createElement('div');
    const child = document.createElement('span');

    child.textContent = 'Evil Martians';

    container.style.display = 'flex';
    container.style.justifyContent = 'safe center';
    container.style.width = '5%';
    container.style.position = 'absolute';
    container.style.top = '-9999px';
    container.style.left = '-9999px';

    container.appendChild(child);
    document.body.appendChild(container);

    const containerRect = container.getBoundingClientRect();
    const childRect = child.getBoundingClientRect();
    const isCroppedOnLeft = childRect.left < containerRect.left;

    document.body.removeChild(container);
    return !isCroppedOnLeft;
};

通过检查元素的实际渲染位置，判断特性是不是真的生效了。

第四步：配合 UA 检测

有时候特性检测也不够用。

比如要区分 iPad 和其他设备。

iPad 的 UA 字符串跟 macOS 上的 Safari 一模一样。

但如果 UA 显示是 macOS，特性检测又显示是移动端 WebKit，那就能判断出这是 iPad：

// 检测 iPadOS
function isiPad() {
    return isDesktopWebKit() && isMobileWebKit();
}

几个关键点

WebKit 不等于 Safari，iOS 上所有浏览器都用 WebKit。

主要用特性检测，UA 检测只是补充。

多看 Safari 和 WebKit 的发布说明，但也别全信，因为有些变更根本没写进去。

真机测试不能省，有些 bug 只有在实际设备上才能发现。

有时候 @supports 会撒谎，浏览器说支持但实际不行，这时候得检查实际渲染效果。

写在最后

核心思路就是：特性检测为主，UA 检测为辅，真机测试验证。

参考资料

《独立开发者精选工具》第 023 期

Immerse — Tue, 02 Dec 2025 15:18:10 +0800

Indie Tools 是一个收录独立开发、AI 出海领域最新、最实用的免费工具与资源工具站。让你快速找到所需，专注于创造产品。

独立开发者必备网站：https://www.indietools.work

Github: https://github.com/yaolifeng0629/Awesome-independent-tools

如果本文能给你提供启发和帮助，感谢各位小伙伴动动小手指，一键三连 (点赞、评论、转发)，给我一些支持和鼓励，谢谢。

favicon-generator

总结

免费在线 Favicon 生成工具，快速生成多设备图标。

链接: https://www.indietools.work/product/favicon-generator

特性

从图像自动生成多尺寸图标。
在线编辑器支持简单编辑和预览。
一键打包下载所有格式图标。
提供可直接嵌入的 HTML 代码。

使用场景

网站开发者快速创建 Favicon。
为移动应用或 PWA 生成应用图标。

缺点

高级编辑功能有限。
网站界面较陈旧。

WeClone

总结

用聊天记录微调大模型，打造个性化数字分身。

链接: https://www.indietools.work/product/weclone

特性

用个人聊天记录微调模型，模仿用户语言风格。
将模型绑定到聊天机器人，实现实时互动。
提供数据处理到部署的完整工作流。

使用场景

创建个人数字分身与朋友互动。
为创作者构建虚拟形象与粉丝交流。
部署具有特定语言风格的社群助手。

缺点

数据隐私保护可能不足。
生成效果受限于基础模型能力。

Midjourney Sref

总结

收录 4000+ 个 Midjourney 风格参考代码，快速复制艺术风格。

链接: https://www.indietools.work/product/midjourney-sref

特性

提供超 4000 个精选--sref 代码。
每个代码配有效果图预览。
界面简洁，易于搜索浏览。

使用场景

快速为作品寻找特定艺术风格。
参考不同风格激发创作灵感。

缺点

风格库庞大，新手选择困难。
功能单一，缺乏高级筛选。

awesome-chatgpt-prompts-zh

总结

丰富的中文提示词库，提升 ChatGPT 对话质量。

链接: https://www.indietools.work/product/awesome-chatgpt-prompts-zh

特性

收录不同场景和角色的中文提示词模板。
内容持续更新，紧跟功能迭代。
提示词经测试，可直接复制使用。

使用场景

让 ChatGPT 扮演特定角色对话。
为创作者、学生提供提问灵感。

缺点

提示词质量参差不齐。
主要面向中文用户。

awesome-chatgpt-prompts

总结

社区驱动的 ChatGPT 提示词库，提升与大模型的互动效率。

链接: https://www.indietools.work/product/awesome-chatgpt-prompts

特性

提供多样化角色扮演提示。
覆盖编程、写作、营销等领域。
社区持续更新，保持实用性。

使用场景

为创作者提供灵感和文案框架。
帮助开发者获取代码解决方案。
辅助学生进行学术写作。

缺点

提示词质量水平不一。
部分提示词需调整适配新模型。

minimaxi

总结

高性价比国内文本转语音 API 平台，付费使用。

链接: https://www.indietools.work/product/minimaxi

特性

多种高自然度音色可选。
性价比高，适合预算有限用户。
API 稳定，方便集成。

使用场景

为视频、有声读物生成配音。
为智能助手提供语音交互。

缺点

需付费，不适合轻度用户。
国际化和多语言支持有限。

SnippAI

总结

AI 截图工具，智能识别并处理屏幕内容。

链接: https://www.indietools.work/product/snippai

特性

智能识别截图中的文本、代码或图像。
AI 驱动的总结、解释和翻译功能。
一键截图获取 AI 分析结果。
支持代码片段解释和格式优化。

使用场景

快速提取和总结网页文章核心内容。
理解和解释代码片段功能。
辅助学生快速消化文献资料。
翻译截图中的外语文字。

缺点

处理复杂专业内容时可能不精确。
离线状态下功能受限。

往期回顾

2025 年 CSS 新特性大盘点

Immerse — Sat, 29 Nov 2025 16:43:42 +0800

大家好，我是 Immerse，一名独立开发者、内容创作者、AGI 实践者。

关注公众号：沉浸式趣谈，获取最新文章（更多内容只在公众号更新）

个人网站：https://yaolifeng.com 也同步更新。

转载请在文章开头注明出处和版权信息。

我会在这里分享关于编程、独立开发、AI干货、开源、个人思考等内容。

如果本文对您有所帮助，欢迎动动小手指一键三连 (点赞、评论、转发)，给我一些支持和鼓励，谢谢！

2025 年了，CSS 又进化了

去年写过一篇 CSS 新特性盘点，本来以为今年不会有太大变化。结果一看，新东西比去年还多。

这次整理了几个我觉得特别实用的功能，浏览器支持也都不错，可以用起来了。

终于可以动画到 auto 了

之前我们做高度展开动画，基本都是靠 max-height 硬撑。

比如从 0 展开到实际高度，只能写个超大的值，体验很差。

现在可以直接动画到 auto 了：

html {
  interpolate-size: allow-keywords;
}

加上这一行，所有 height: 0 到 height: auto 的过渡都能生效。

或者你也可以用 calc-size() 函数，不需要全局设置：

.content {
  height: 3lh;
  overflow: hidden;
  transition: height 0.2s;

  &.expanded {
    height: calc-size(auto, size);
  }
}

这个功能总算来了。

而且不只是 height，任何接受尺寸的属性都能用，不只是 auto，min-content 这些关键字也行。

目前 Chrome 已经支持，其他浏览器应该也快了。

Popover 是个 HTML 属性，给任意元素加上就有开关功能。

配合 Invoker 用起来更爽，不用写 JavaScript 就能控制弹窗。

<button commandfor="menu" command="toggle">
  打开菜单
</button>

<div id="menu" popover>
  菜单内容
</div>

这样就够了，按钮点击自动控制弹窗显示隐藏。

浏览器会自动处理无障碍访问、键盘操作、焦点管理这些细节。

而且还能配合 Anchor Positioning 用，让弹窗自动定位到触发元素旁边。

Popover 已经全浏览器支持，Invoker 目前只有 Chrome，不过有 polyfill 可以用。

CSS 里可以写函数了

CSS 有 calc()、clamp() 这些内置函数，现在我们可以自己写了：

@function --titleBuilder(--name) {
  result: var(--name) " is cool.";
}

然后就能在任何地方调用：

.title::after {
  content: --titleBuilder("CSS");
}

这个功能让 CSS 更像编程语言了。

把复杂逻辑封装到函数里，代码更清爽，也更好维护。

不过目前只有 Chrome 支持，可以先用着，不支持的浏览器会回退到默认值。

if() 函数也来了

CSS 本来就有很多条件逻辑，比如选择器匹配、媒体查询。

但这次的 if() 函数是第一个专门做条件分支的：

.grid {
  display: grid;
  grid-template-columns:
    if(
      media(max-width > 300px): repeat(2, 1fr);
      media(max-width > 600px): repeat(3, 1fr);
      media(max-width > 900px): repeat(auto-fit, minmax(250px, 1fr));
      else: 1fr;
    );
}

看起来像不像 switch 语句？第一个匹配的条件会生效。

条件可以是 media()、supports()、style() 这几种。

把所有逻辑都写在一个属性里，代码可读性好很多。

目前 Chrome 独占，其他浏览器还在路上。

表单输入框自动调整大小

field-sizing 这个属性专门解决表单输入框的问题。

textarea {
  field-sizing: content;
}

加上这一行，textarea 会自动根据内容调整高度。

用户输入多少内容，输入框就有多高，不用手动拖拽了。

在手机上体验特别好，拖拽调整大小本来就很难操作。

这个功能之前都是用 JavaScript 实现，现在 CSS 原生支持了。

Chrome 和 Safari 都能用，Firefox 估计也快了。

select 下拉框终于能自定义样式了

select 元素的外观一直很难自定义，打开后显示的选项更是完全没法控制。

现在可以完全自定义了，只要先开启：

select,
::picker(select) {
  appearance: base-select;
}

然后想怎么改就怎么改，选项的样式、布局、动画都能控制。

目前 Chrome 独占，不过不支持的浏览器会回退到原生样式，完全不影响使用。

text-wrap 让排版更好看

text-wrap: balance 可以让每行文字长度尽量接近：

h1 {
  text-wrap: balance;
}

用在标题上效果特别好，不会出现最后一行只有一个词的情况。

还有个 text-wrap: pretty，专门优化正文排版：

p {
  text-wrap: pretty;
}

浏览器会自动调整断行，避免孤词，让文字看起来更舒服。

balance 已经全浏览器支持，pretty 在 Chrome 和 Safari 能用。

这种优化对用户体验很重要，而且完全不影响功能，可以直接加上。

linear() 实现复杂缓动效果

CSS 的 linear 关键字之前就是匀速动画，很无聊。

但 linear() 函数可以实现超复杂的缓动，比如弹跳效果：

.bounce {
  animation-timing-function: linear(
    0, 0.004, 0.016, 0.035, 0.063, 0.098, 0.141 13.6%, 0.25, 0.391, 0.563, 0.765,
    1, 0.891 40.9%, 0.848, 0.813, 0.785, 0.766, 0.754, 0.75, 0.754, 0.766, 0.785,
    0.813, 0.848, 0.891 68.2%, 1 72.7%, 0.973, 0.953, 0.941, 0.938, 0.941, 0.953,
    0.973, 1, 0.988, 0.984, 0.988, 1
  );
}

这种效果用 cubic-bezier() 根本做不出来。

而且已经全浏览器支持了，可以放心用。

有在线工具可以生成这些值，不用自己手写。

shape() 函数画任意图形

CSS 之前有 path() 函数，但语法很难写，而且只能用像素。

shape() 是专门为 CSS 设计的，支持所有单位和自定义属性：

.arrow {
  clip-path: shape(
    evenodd from 97.788201% 41.50201%,
    line by -30.839077% -41.50201%,
    curve by -10.419412% 0% with -2.841275% -3.823154% / -7.578137% -3.823154%,
    smooth by 0% 14.020119% with -2.841275% 10.196965%,
    close
  );
}

可以用在 clip-path 裁剪元素，也能用在 offset-path 做路径动画。

而且可以响应式调整，配合媒体查询和容器查询都没问题。

Chrome 和 Safari 已经支持，Firefox 也在开发中。

attr() 变强了

之前 attr() 只能取字符串，现在可以指定类型了：

<div data-count="42" data-color="#ff0000">

div {
  --count: attr(data-count type(<number>));
  --color: attr(data-color type(<color>));
}

这样可以直接把 HTML 属性当数字或颜色用，方便多了。

目前 Chrome 独占，不过对于不支持的浏览器，可以设置回退值。

reading-flow 解决 Tab 顺序问题

用 Grid 或 Flexbox 重新排列元素后，Tab 键的焦点顺序会乱。

现在可以用 reading-flow 告诉浏览器按照视觉顺序来：

.grid {
  reading-flow: grid-rows;
}

这样焦点就会按照 Grid 的行顺序移动，不会乱跳了。

Flexbox 用 flex-flow，其他布局也有对应的值。

这个功能对无障碍访问很重要，不过目前只有 Chrome 支持。

等其他浏览器跟进之前，最好不要大量重排布局。

值得期待的功能

还有一些功能在开发中，但还没正式发布：

Masonry 布局虽然各浏览器实现不同，但在稳步推进。

Safari 的 random() 函数可以生成随机数，玩起来很有意思。

margin-trim 可以自动去掉容器边缘元素的外边距，Safari 独占中。

sibling-index() 和 sibling-count() 函数在 Chrome 能用，做交错动画很方便。

View Transitions 的 match-element 不用给每个元素起名字了，而且 Firefox 也在开发中。

还有很多其他功能在路上。

别忘了这些已经能用的

Container Queries 和 :has() 这些去年的新功能，现在已经全浏览器支持。

View Transitions、Anchor Positioning、Scroll-Driven Animations 也都在 Safari 上线了。

dvh 这些视口单位也成为标准了。

CSS 现在能做的事情越来越多，写起来也越来越顺手。

参考：https://frontendmasters.com/blog/what-you-need-to-know-about-modern-css-2025-edition/

其他好文推荐

2025 最新！独立开发者穷鬼套餐

Windows 安装 Claude Code 的新姿势，保姆级教程

Claude Code 从入门到精通：最全配置指南和工具推荐

Claude Code 终极配置指南：一行命令搞定各种配置

一个配置文件搞定！Claude Code 多模型智能切换

这个 361k Star 的项目，一定要收藏！

搞定 XLSX 预览？别瞎找了，这几个库（尤其最后一个）真香！

【完整汇总】近 5 年 JavaScript 新特性完整总览

关于 Node，一定要学这个 10+ 万 Star 项目！

每天一个独立开发者工具

Immerse — Mon, 24 Nov 2025 07:54:29 +0800

# 每天一个独立开发者工具

✨ 今日分享：一个基于现代技术栈（Vite、Vue 3、TypeScript）开发的中后台 Admin 模板

👇 直达链接： https://www.indietools.work/product/naive-ui-pro

️ Github: https://github.com/yaolifeng0629/Awesome-independent-tools

#SaaS #BuildInPublic #IndieTools #IndieHackers #WebDev

100% 用 AI 做完一个新项目，从 Plan 到 Finished 我学到了这些

Immerse — Mon, 10 Nov 2025 13:47:52 +0800

大家好，我是 Immerse，一名独立开发者、内容创作者、AGI 实践者。

关注公众号：沉浸式趣谈，获取最新文章（更多内容只在公众号更新）

个人网站：https://yaolifeng.com 也同步更新。

转载请在文章开头注明出处和版权信息。

我会在这里分享关于编程、独立开发、AI干货、开源、个人思考等内容。

如果本文对您有所帮助，欢迎动动小手指一键三连 (点赞、评论、转发)，给我一些支持和鼓励，谢谢！

女朋友一句话催生的 Chrome 插件，解决批量下载图片问题

周末在家，女朋友工作需要下载网站上的一些图片，她说太麻烦了。

右键、选择保存图片、选文件夹、改名字，一张图就得折腾好几步。

要是网页里有二三十张图，这得点多少次鼠标。

下载地址：

GitHub:https://github.com/yaolifeng0629/PickPic

谷歌浏览器商店：https://chromewebstore.google.com/detail/pickpic-one-click-downloa/hfdohacifjijbgobekodafjpjghflemh

压缩包：https://github.com/yaolifeng0629/PickPic/releases/tag/v1.0.2

一个很简单的需求

需求其实很明确。

在网页上看到喜欢的图片，想批量保存到本地。

听起来很简单对吧？但我搜了一圈，发现现有的工具都不太满意。

有些插件功能倒是有，但要么太复杂，要么广告一堆，要么就是只支持特定网站。

我想要的很简单：打开网页，一键预览，选择下载，完事。

所以决定自己做一个。

这个插件能干啥

核心功能就几个。

点击浏览器图标，侧边栏会显示当前网页的所有图片和视频。

可以预览，双击图片会在新标签页打开，看得更清楚。

想下载哪张就勾选哪张，也可以全选。

单张图直接下载，多张图自动打包成 ZIP 文件。

对微信公众号做了特殊优化。能看到文章标题、作者、描述这些信息。

支持中英文切换。

就这些，没有复杂的设置，打开就能用。

开发过程还挺顺

技术栈用的是 Plasmo 框架，这玩意专门做浏览器插件的。

配合 React、TypeScript、Tailwind CSS，开发体验很不错。

状态管理用 Zustand，轻量好用。

图片打包用 JSZip，生成 ZIP 文件很快。

支持的网站挺多

除了微信公众号，其他网站也都能用。

我测试了掘金、知乎、InfoQ、简书、CSDN、博客园这些技术社区，都没问题。

理论上任何网页都能用，因为我做的是通用提取逻辑。只要是 img 标签或者 video 标签，都能识别出来。（暂时没有处理防爬逻辑）

对微信公众号做了额外优化，因为自己平时也会用到，所以多花了点心思。

其他网站暂时没做特殊处理，但基本功能都是正常的。

为啥又是一个工具

做这个插件的时候，我想起之前看 Marc Lou 的分享。

他说最好的产品，往往是解决自己问题的产品。

因为你就是第一个用户，最清楚哪里好用哪里不好用。

不需要做市场调研，不需要猜用户想要什么。

你自己用着舒服，产品就不会太差。

做的过程中没想过能不能赚钱，会不会有很多人用。

就是单纯想解决这个痒处。

接下来想加点啥

目前功能还比较基础，后面想加一些新东西。

比如批量重命名，按文章标题、日期、序号这些规则自动命名文件。

在考虑支持更多格式，不光是图片和视频，PDF、音频这些也能提取。

不过这些都是想法，会不会做、什么时候做，还没确定。

先把目前的问题解决了再说。

如何使用

GitHub:https://github.com/yaolifeng0629/PickPic

谷歌浏览器商店：https://chromewebstore.google.com/detail/pickpic-one-click-downloa/hfdohacifjijbgobekodafjpjghflemh

压缩包：https://github.com/yaolifeng0629/PickPic/releases/tag/v1.0.2

欢迎提 Issue 和 PR，有想法可以一起讨论。

也欢迎 Star 支持一下。

项目还在早期阶段，肯定有不完善的地方。

但我会持续维护，遇到问题会尽快修复。

开发过程开源

对了，这个项目从 Plan 到 Task 再到 Implement，每个阶段我都开源出来了。

包括最初的想法、任务拆解、具体实现，甚至原型设计都在 GitHub 仓库里。

想看完整开发过程的小伙伴，可以去仓库翻一翻。

说不定能给你自己做项目提供点思路。

顺便点个 Star 支持一下，感谢！

一点小感悟

做这个插件让我想明白一件事。

不是所有项目都要追求商业化，不是所有产品都要想着赚钱。

有时候就是想解决一个小问题，让自己的生活方便一点。

这个过程本身就很有意思。

而且你真心解决了自己的问题，产品自然会有温度。

别人用起来也能感受到这种真实。

Marc Lou 说好奇心才是创业的起点，我觉得说得特别对。

先把痒处挠了，至于能不能变成生意，那是后面的事。

项目地址：https://github.com/yaolifeng0629/PickPic

欢迎试用，欢迎反馈。

每天一个独立开发者工具

Immerse — Fri, 07 Nov 2025 07:51:50 +0800

# 每天一个独立开发者工具

✨ 今日分享：一款面向服务器运维的图形化 Web 管理工具，集成了网站、数据库、FTP、文件、防火墙等核心功能

👇 直达链接： https://www.indietools.work/product/baota

️ Github: https://github.com/yaolifeng0629/Awesome-independent-tools

#SaaS #BuildInPublic #IndieTools #IndieHackers #WebDev

每天一个独立开发者工具

Immerse — Wed, 05 Nov 2025 07:50:31 +0800

# 每天一个独立开发者工具

✨ 今日分享：一个现代化的 Serverless 平台，旨在简化从代码到全球部署的整个流程

👇 直达链接： https://www.indietools.work/product/koyeb

️ Github: https://github.com/yaolifeng0629/Awesome-independent-tools

#SaaS #BuildInPublic #IndieTools #IndieHackers #WebDev

每天一个独立开发者工具

Immerse — Mon, 03 Nov 2025 07:52:08 +0800

# 每天一个独立开发者工具

✨ 今日分享： Told 是一款专注于用户体验和客户反馈的轻量级调查工具

👇 直达链接： https://www.indietools.work/product/told

️ Github: https://github.com/yaolifeng0629/Awesome-independent-tools

#SaaS #BuildInPublic #IndieTools #IndieHackers #WebDev

每天一个独立开发者工具

Immerse — Fri, 31 Oct 2025 07:55:05 +0800

# 每天一个独立开发者工具

✨ 今日分享：一款基于 Google Trends API 的批量数据分析工具，核心价值在于将单次关键词趋势查询扩展为高效的批量对比研究

👇 直达链接： https://www.indietools.work/product/trendbatch

️ Github: https://github.com/yaolifeng0629/Awesome-independent-tools

#SaaS #BuildInPublic #IndieTools #IndieHackers #WebDev

每天一个独立开发者工具

Immerse — Wed, 29 Oct 2025 07:53:39 +0800

# 每天一个独立开发者工具

✨ 今日分享：一个专注于为 AI 阅读优化的技术文档平台，提供多种技术栈的 LLM.txt 格式文档

👇 直达链接： https://www.indietools.work/product/context7?type=ai-resources

️ Github: https://github.com/yaolifeng0629/Awesome-independent-tools

#SaaS #BuildInPublic #IndieTools #IndieHackers #WebDev