[{"data":1,"prerenderedAt":5021},["ShallowReactive",2],{"build-logs-metool":3,"build-log-metool-2026-06-25-html-editor":4793},[4,384,587,1209,1360,1597,1898,2170,2398,2636,2977,3146,3276,3540,3726,3890,4031,4201,4350,4484,4659],{"id":5,"title":6,"body":7,"date":345,"description":346,"draft":347,"extension":348,"faq":349,"meta":362,"navigation":363,"path":364,"project":365,"readingTime":366,"seo":367,"seoKeywords":368,"stem":377,"summary":378,"tags":379,"updated":382,"__hash__":383},"builds\u002Fbuilds\u002Fmetool\u002F2026-06-25-html-editor.md","上线可视化 HTML 编辑器：AI 出码后的最后 10%，别再用对话改一个字了",{"type":8,"value":9,"toc":335},"minimark",[10,15,19,22,29,32,48,51,58,65,69,77,80,86,93,96,106,112,115,121,127,133,139,142,169,172,176,179,254,261,286,289,292,312,315,320,323,326,329],[11,12,14],"h2",{"id":13},"问题ai-生成的-html改一个字为什么这么麻烦","问题：AI 生成的 HTML，改一个字为什么这么麻烦？",[16,17,18],"p",{},"最近 AI 越来越擅长直接输出 HTML 了。",[16,20,21],{},"落地页、数据报告、产品原型、甚至整套 HTML 幻灯片——ChatGPT、Claude、Gemini 都能一次生成，样式完整、结构清晰，打开就能看。",[16,23,24,25],{},"但生成完之后，一个新痛点立刻出现：",[26,27,28],"strong",{},"你往往只想改一个字、换一张图、调一句文案，却不得不再开一轮 AI 对话。",[16,30,31],{},"我遇到过太多次这种场景：",[33,34,35,39,42,45],"ol",{},[36,37,38],"li",{},"Claude 生成了一个活动落地页，标题里有个错别字",[36,40,41],{},"把 HTML 丢回去说「把第三段改成 XXX」",[36,43,44],{},"AI 重新生成，第三段改对了，但侧边栏的配色和间距全变了",[36,46,47],{},"再改一轮，又动了别的地方……",[16,49,50],{},"改一个数字、换一张配图、把模块顺序调一下——这些事手动点一下就能完成，却每次都要烧 token、等生成、还要检查 AI 有没有改坏其他地方。",[16,52,53,54,57],{},"海外产品 HtmlDrag、HeyHTML 都在强调同一个概念：",[26,55,56],{},"AI 出码后的「最后 10% 打磨」","。结构 AI 已经帮你搭好了，剩下的内容微调，应该用手而不是用对话。",[16,59,60],{},[61,62],"img",{"alt":63,"src":64},"cover","\u002Fb\u002Fmetool\u002Fhtml-editor-cover.png",[11,66,68],{"id":67},"为什么不直接打开源码改","为什么不直接打开源码改？",[16,70,71,72,76],{},"理论上可以。把 ",[73,74,75],"code",{},".html"," 文件拖进 VS Code，找到对应标签，改文字、换图片路径、调 CSS。",[16,78,79],{},"但对大多数非技术人员来说，这条路走不通。HTML 标签嵌套层级深，改一处可能影响全局样式；图片路径是相对路径还是外链，改完下载后能不能正常显示，都是坑。",[16,81,82,83],{},"再找 AI 改？前面说了——",[26,84,85],{},"小改动不值得大动干戈。",[16,87,88,89,92],{},"我想要的是：",[26,90,91],{},"上传 HTML，页面直接渲染出来，像编辑 Word 文档一样点选修改，改完一键下载。"," 不需要看一行代码，不需要装任何软件，HTML 也不离开浏览器。",[11,94,95],{"id":95},"做了什么",[16,97,98,105],{},[99,100,104],"a",{"href":101,"rel":102},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fhtml\u002Feditor\u002F",[103],"nofollow","MeTool 可视化 HTML 编辑器"," 就是这个思路。",[16,107,108,109,111],{},"上传 AI 生成或已有的 ",[73,110,75],{}," 文件，页面立即在编辑区渲染。点中任意元素，浮动工具栏即时出现——改文字、调字体字号颜色、替换配图、删除多余模块、拖拽调整顺序。全程在渲染后的页面上操作，源码面板都不需要打开。",[16,113,114],{},"四个核心能力，对应四个最常见的修改需求：",[16,116,117,120],{},[26,118,119],{},"点选即改"," — 双击元素进入文字编辑，像改文档一样直接改写措辞。选中后还能调字体、字号、颜色、对齐和加粗。",[16,122,123,126],{},[26,124,125],{},"图片内嵌"," — 选中图片上传新图，自动转成 base64 嵌入 HTML。下载后的文件在任何电脑、任何地方打开都能正常显示，不必额外携带图片文件夹。这是 AI 生成 HTML 里最常见的痛点：外链图片失效、相对路径丢失，内嵌后彻底解耦。",[16,128,129,132],{},[26,130,131],{},"智能拖拽"," — 不是把元素随便扔到页面上。编辑器会识别元素的排版上下文：flex \u002F grid 文档流里的模块用「排序式」拖拽，释放后自动吸附回原本的排列规则，手机 \u002F 平板 \u002F 桌面切换视口也不乱；只有原本就是绝对定位的装饰元素才允许自由拖到任意坐标。",[16,134,135,138],{},[26,136,137],{},"本地隐私"," — 所有编辑在浏览器本地完成，HTML 和图片不上传任何服务器。编辑进度自动缓存到本地，刷新不丢失。",[16,140,141],{},"另外几个细节是实际用下来觉得必要的：",[143,144,145,151,157,163],"ul",{},[36,146,147,150],{},[26,148,149],{},"暂停编辑模式","：HTML 幻灯片（reveal.js、自定义 deck 等）载入后，可以先暂停编辑、自由翻页浏览，找到要改的那一页再恢复编辑。交互后才出现的内容（按钮点开弹层、翻页后才显示的模块）也能正常触达。",[36,152,153,156],{},[26,154,155],{},"撤销 \u002F 重做","：最多 50 步，改错了可以回退。",[36,158,159,162],{},[26,160,161],{},"全局查找替换","：品牌名写错了一处，一次替换全部相同措辞。",[36,164,165,168],{},[26,166,167],{},"多视口预览","：手机 \u002F 平板 \u002F 桌面三档切换，改完立刻看响应式效果。",[16,170,171],{},"导出时支持下载干净 HTML（剥离编辑层），HTML 幻灯片还可以导出多页 PDF 或逐页 PNG 压缩包。",[11,173,175],{"id":174},"改内容用手点改结构再找-ai","改内容用手点，改结构再找 AI",[16,177,178],{},"做这个工具时，我把能力边界想得很清楚——可视化编辑和对话式 AI 修改并不冲突，各有适用场景：",[180,181,182,198],"table",{},[183,184,185],"thead",{},[186,187,188,192,195],"tr",{},[189,190,191],"th",{},"需求",[189,193,194],{},"推荐方式",[189,196,197],{},"理由",[199,200,201,213,223,233,244],"tbody",{},[186,202,203,207,210],{},[204,205,206],"td",{},"改一句文案 \u002F 一个数字",[204,208,209],{},"可视化编辑",[204,211,212],{},"点一下即可，秒级完成，不费 token",[186,214,215,218,220],{},[204,216,217],{},"换一张配图",[204,219,209],{},[204,221,222],{},"上传内嵌，所见即所得",[186,224,225,228,230],{},[204,226,227],{},"调整模块顺序",[204,229,209],{},[204,231,232],{},"拖拽即可，自动保持响应式排版",[186,234,235,238,241],{},[204,236,237],{},"新增一整个章节 \u002F 重构布局",[204,239,240],{},"对话式 AI",[204,242,243],{},"结构性变更更适合让 AI 重写",[186,245,246,249,251],{},[204,247,248],{},"改设计风格 \u002F 配色体系",[204,250,240],{},[204,252,253],{},"系统性样式改动一句话更高效",[16,255,256,257,260],{},"一句话总结：",[26,258,259],{},"「改内容」用可视化编辑器，「改结构」再找 AI。"," 把昂贵的 API 调用留给真正需要它的地方。",[16,262,263,264,268,269,274,275,280,281,285],{},"这和 metool HTML 分类里其他工具形成一条完整工作流：在",[99,265,267],{"href":101,"rel":266},[103],"编辑器","里改内容 → 用",[99,270,273],{"href":271,"rel":272},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fhtml\u002Fpreview\u002F",[103],"实时预览","检查多视口效果 → 用",[99,276,279],{"href":277,"rel":278},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fhtml\u002Fshare\u002F",[103],"分享链接","发给对方看。之前写过 ",[99,282,284],{"href":283},"\u002Fbuilds\u002Fmetool\u002F2026-05-14-html-markdown-share","HTML 和 Markdown 分享工具"," 解决「发给别人看」的问题；这次补的是「自己改」这一环。",[11,287,288],{"id":288},"我的使用方式",[16,290,291],{},"现在我的典型流程是这样的：",[33,293,294,300,303,306,309],{},[36,295,296,297,299],{},"让 Claude 生成一份 HTML 报告或落地页，下载 ",[73,298,75],{}," 文件",[36,301,302],{},"拖进 MeTool 可视化编辑器，先过一遍整体效果",[36,304,305],{},"点选改错别字、换主图、调模块顺序——全程不超过 5 分钟",[36,307,308],{},"切换到手机视口看一眼响应式有没有问题",[36,310,311],{},"满意后下载 HTML；如果要发给别人，再丢进分享工具生成链接",[16,313,314],{},"如果是 HTML 幻灯片，会先开「暂停编辑」翻几页找到要改的内容，改完标题和配图，导出 PDF 直接发。",[16,316,317],{},[26,318,319],{},"能手动点一下就改好的事，就别再麻烦 AI 了。",[321,322],"hr",{},[16,324,325],{},"这个工具解决的是 AI 时代一个很具体的问题：生成 HTML 已经很容易，但改 HTML 不应该比生成还麻烦。",[16,327,328],{},"如果你也经常在 AI 生成的 HTML 里改一个字、换一张图，大概会理解这个痛点。",[16,330,331],{},[99,332,334],{"href":101,"rel":333},[103],"试试可视化 HTML 编辑器 →",{"title":336,"searchDepth":337,"depth":337,"links":338},"",3,[339,341,342,343,344],{"id":13,"depth":340,"text":14},2,{"id":67,"depth":340,"text":68},{"id":95,"depth":340,"text":95},{"id":174,"depth":340,"text":175},{"id":288,"depth":340,"text":288},"2026-06-25","ChatGPT、Claude 生成的 HTML 落地页、报告、幻灯片，改一句文案或换一张图却要再开一轮 AI 对话——慢、费 token，还可能改坏其他地方。MeTool 上线可视化 HTML 编辑器：上传 HTML，点选即改，全程不看代码，100% 浏览器本地处理。",false,"md",[350,353,356,359],{"q":351,"a":352},"编辑后的图片会丢失吗？","不会。你替换的图片会以 base64 编码直接内嵌进 HTML，下载后的文件在任何电脑、任何地方打开都能正常显示图片，无需额外附带图片文件。",{"q":354,"a":355},"拖拽会不会把页面排版搞乱？","不会。编辑器会智能识别元素的排版方式：处于正常文档流（flex \u002F grid）中的元素采用「排序式」拖拽，释放后自动吸附回原本的排列规则，换屏不乱；只有原本就是绝对定位的装饰元素才允许自由拖到任意坐标。",{"q":357,"a":358},"需要懂 HTML 或 CSS 吗？","不需要。整个编辑过程都在渲染后的页面上进行：点选、改字、换色、换图、删除、拖拽，全程不展示也不需要看源码。改完一键下载即可。",{"q":360,"a":361},"我的 HTML 会上传到服务器吗？","不会。所有编辑都在你的浏览器本地完成，HTML 与图片都不会离开你的设备，关闭页面前会自动缓存到本地，刷新不丢失。",{},true,"\u002Fbuilds\u002Fmetool\u002F2026-06-25-html-editor","metool",5,{"title":6,"description":346},[369,370,371,372,373,374,375,376],"HTML在线编辑器","AI生成HTML编辑","可视化HTML编辑","改AI生成的HTML","HTML拖拽编辑","不用代码改HTML","HtmlDrag替代品","AI出码后编辑","builds\u002Fmetool\u002F2026-06-25-html-editor","MeTool 上线可视化 HTML 编辑器，解决 AI 生成 HTML 后的「最后一公里」修改问题：上传 HTML 直接渲染，点选元素改文字、换字体颜色、替换配图（base64 内嵌）、智能拖拽排序，全程不看代码。改内容用手点，改结构再找 AI——把 token 留给真正需要的地方。",[380,381],"独立开发","AI 应用",null,"k6UJGtEFlJOaT5cXno99BozpRdR4n4k0X2oVj9zd9KQ",{"id":385,"title":386,"body":387,"date":559,"description":560,"draft":347,"extension":348,"faq":561,"meta":571,"navigation":363,"path":572,"project":365,"readingTime":573,"seo":574,"seoKeywords":575,"stem":583,"summary":584,"tags":585,"updated":382,"__hash__":586},"builds\u002Fbuilds\u002Fmetool\u002F2026-06-18-screen-wake-lock.md","上线屏幕常亮工具：等 AI 写代码时，电脑别再自动息屏了",{"type":8,"value":388,"toc":552},[389,393,396,399,402,416,419,424,428,431,434,437,442,444,447,450,453,460,467,470,474,477,482,493,498,509,512,514,517,534,537,539,542,545],[11,390,392],{"id":391},"问题等-ai-写代码时屏幕黑了","问题：等 AI 写代码时，屏幕黑了",[16,394,395],{},"最近大量时间花在用 AI 编程工具上——Cursor、Claude Code、Codex。工作流程很简单：给 AI 一段指令，然后等它生成。",[16,397,398],{},"问题出在「等」这个环节。",[16,400,401],{},"AI 生成一个复杂功能可能需要 2-5 分钟，有时更久。而我的 MacBook 默认 2 分钟无操作就息屏。于是经常出现这样的情况：",[33,403,404,407,410,413],{},[36,405,406],{},"给 Claude Code 下了指令，去倒杯水",[36,408,409],{},"回来发现屏幕黑了",[36,411,412],{},"解锁后发现 AI 还在跑——运气好的话",[36,414,415],{},"运气不好的话，网络已经断了，Claude Code 的 SSH 会话超时，得重新来",[16,417,418],{},"这事烦了我好几次之后，我决定做个工具解决它。",[16,420,421],{},[61,422],{"alt":63,"src":423},"\u002Fb\u002Fmetool\u002Fscreen-wake-lock-cover.jpg",[11,425,427],{"id":426},"为什么不改系统设置","为什么不改系统设置？",[16,429,430],{},"最简单的方案当然是：系统偏好设置 → 显示器 → 关闭显示器：永不。",[16,432,433],{},"但我不想这样做。改完之后我一定会忘记改回来，然后连续几天屏幕永远亮着，电费和屏幕寿命都在烧。",[16,435,436],{},"我也看了 Caffeine、Amphetamine 这些 Mac 上的防息屏工具，都不错，但——在客户的电脑上我没法装东西，在公司电脑上可能没有管理员权限。",[16,438,88,439],{},[26,440,441],{},"打开一个网页，点一下，屏幕常亮；用完关掉网页，一切恢复原样。",[11,443,95],{"id":95},[16,445,446],{},"用浏览器的 Screen Wake Lock API 做了一个屏幕常亮工具。核心逻辑很简单：页面请求一个「唤醒锁」，只要页面保持在前台，设备就不会自动息屏。",[16,448,449],{},"但光有个开关太无聊了。等 AI 的那几分钟，盯着一个黑屏或白屏也没意思。",[16,451,452],{},"于是我录了一段 Claude Code 在终端里工作的视频——代码在屏幕上刷刷地滚动，光标在跳，看起来很忙碌。把这段视频做成了全屏背景选项：",[16,454,455],{},[456,457],"video",{"src":458,"autoPlay":363,"loop":363,"muted":363,"playsInline":363,"style":459},"\u002Fb\u002Fmetool\u002Fclaude-code-work.mp4","width:100%;border-radius:12px;margin:16px 0;",[16,461,462,463,466],{},"开启常亮后，整个屏幕变成这段视频的全屏播放。效果就像是——",[26,464,465],{},"AI 正在你的屏幕上写代码","，你只需要等着收货就好。",[16,468,469],{},"比盯着一个倒计时数字有意思多了。",[11,471,473],{"id":472},"它能做什么不能做什么","它能做什么，不能做什么",[16,475,476],{},"做这个工具时我刻意把能力边界想清楚了，在工具页也写得很明白：",[16,478,479],{},[26,480,481],{},"能做的：",[143,483,484,487,490],{},[36,485,486],{},"本页全屏时，阻止设备自动息屏（等 AI 工作、浏览器内演示投屏）",[36,488,489],{},"双屏场景，把本页放在第二块屏保持可见，主屏继续用 Cursor \u002F Claude Code",[36,491,492],{},"设置定时关闭，到点自动恢复",[16,494,495],{},[26,496,497],{},"做不到的：",[143,499,500,503,506],{},[36,501,502],{},"切到其他应用后继续防息屏（切走 = 失效）",[36,504,505],{},"在后台保持系统唤醒（这不是浏览器能做的事）",[36,507,508],{},"替代 PowerPoint 演示时的防息屏（PPT 在前台时浏览器已经不可见了）",[16,510,511],{},"这个限制是浏览器 API 的机制决定的，不是 bug。把这件事讲清楚比假装全能更重要。",[11,513,288],{"id":288},[16,515,516],{},"现在我的工作流是这样的：",[33,518,519,522,525,528,531],{},[36,520,521],{},"外接显示器上打开 MeTool 屏幕常亮工具，选「AI 工作」背景，设置 30 分钟定时",[36,523,524],{},"点开关，外屏全屏播放 Claude Code 工作视频",[36,526,527],{},"主屏上用 Cursor \u002F Claude Code 工作",[36,529,530],{},"等 AI 生成时，瞥一眼外屏——视频在滚动，心理上知道「AI 还在忙」",[36,532,533],{},"30 分钟后外屏自动恢复息屏，不用管它",[16,535,536],{},"即使没有双屏，单屏时也可以直接在本页全屏等待，AI 在后台跑。只要本页可见，设备就不会睡。",[321,538],{},[16,540,541],{},"这个工具做得很快，前后半天时间。但它解决了一个我每天都会遇到的实际问题——等 AI 写代码时，电脑别再自己黑屏了。",[16,543,544],{},"如果你也在用 AI 编程工具，大概也会遇到同样的事。",[16,546,547],{},[99,548,551],{"href":549,"rel":550},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fdev\u002FwakeLock\u002F",[103],"试试屏幕常亮工具 →",{"title":336,"searchDepth":337,"depth":337,"links":553},[554,555,556,557,558],{"id":391,"depth":340,"text":392},{"id":426,"depth":340,"text":427},{"id":95,"depth":340,"text":95},{"id":472,"depth":340,"text":473},{"id":288,"depth":340,"text":288},"2026-06-18","用 Cursor、Claude Code 写代码时，AI 跑了几分钟，屏幕一黑——网断了，进度丢了。为解决这个问题做了一个浏览器屏幕常亮工具，顺便录了段 Claude Code 工作的视频当全屏背景。",[562,565,568],{"q":563,"a":564},"这个工具关掉浏览器后还有效吗？","没有。关闭页面或切到其他应用后，常亮自动停止，设备恢复正常息屏行为。它解决的是「临时需要」，不是永久修改系统设置。",{"q":566,"a":567},"能让电脑在跑 PPT 演示时不息屏吗？","不能。切到 PPT 后浏览器不在前台，工具失效。它适合的是「内容就在浏览器里」的场景，或者你用双屏时把这个页面放在第二块屏保持可见。",{"q":569,"a":570},"Firefox 能用吗？","能。Chrome、Edge、Safari 用原生 Wake Lock API，Firefox 自动走兼容模式（隐藏媒体播放），效果一样。",{},"\u002Fbuilds\u002Fmetool\u002F2026-06-18-screen-wake-lock",4,{"title":386,"description":560},[576,577,578,579,580,581,582],"屏幕常亮","防止息屏","AI写代码等待","Cursor防息屏","Claude Code屏幕","自动息屏怎么关闭","wake lock","builds\u002Fmetool\u002F2026-06-18-screen-wake-lock","用 AI 编程工具（Cursor、Claude Code、Codex）时，等 AI 生成代码的几分钟内设备自动息屏，导致网络断开或进程中断。MeTool 上线屏幕常亮工具，一键防息屏，支持定时关闭，还有一段 Claude Code 工作的视频作为全屏等待背景。",[380,381],"aXFa95YiNoQ-tMKQ3es4xrdz3AQofwWXYLovEJfnVXM",{"id":588,"title":589,"body":590,"date":1179,"description":1180,"draft":347,"extension":348,"faq":1181,"meta":1194,"navigation":363,"path":1195,"project":365,"readingTime":1196,"seo":1197,"seoKeywords":1198,"stem":1205,"summary":1206,"tags":1207,"updated":382,"__hash__":1208},"builds\u002Fbuilds\u002Fmetool\u002F2026-06-13-blind-watermark.md","上线隐形水印工具：调研了六种方案后，选了一个诚实的折中方案",{"type":8,"value":591,"toc":1166},[592,596,599,606,609,612,618,622,625,662,665,668,788,791,803,806,813,817,820,825,828,831,834,838,841,848,852,855,861,887,890,910,913,917,928,937,963,977,983,986,990,993,996,999,1003,1006,1009,1013,1016,1144,1150,1152,1155,1162],[11,593,595],{"id":594},"隐形水印是什么为什么要做它","隐形水印是什么，为什么要做它",[16,597,598],{},"图片加水印这件事，最常见的方式是在角落盖个半透明 Logo。但这有个问题——影响美观，而且只要稍加裁剪或修图，水印就没了。",[16,600,601,602,605],{},"隐形水印解决的是另一件事：",[26,603,604],{},"把信息藏进图片里，肉眼看不到，但事后能提取验证","。用途不是「防止被盗用」，而是「被盗用后能证明来源」。",[16,607,608],{},"几个典型场景：机构颁发的电子证书，接收方想验证是否为原图；摄影师给自己的作品留下不可见的版权标记；企业内部文件分发，不同渠道嵌入不同标记，泄漏后追溯来源。",[16,610,611],{},"我们上线了这个工具，提供两种模式，用起来很简单：上传图片、输入要藏的文字和密码、下载带水印的 PNG，验证时同样上传图片输入密码，一秒出结果。",[16,613,614],{},[61,615],{"alt":616,"src":617},"ui","\u002Fb\u002Fmetool\u002FblindWatermark\u002Fui.png",[11,619,621],{"id":620},"两种模式用图说话","两种模式，用图说话",[16,623,624],{},"先看最直接的问题：加了水印之后，图片会变样吗？",[180,626,627,640],{},[183,628,629],{},[186,630,631,634,637],{},[189,632,633],{},"原图",[189,635,636],{},"文字嵌入模式",[189,638,639],{},"抗旋转\u002F缩放模式",[199,641,642],{},[186,643,644,650,656],{},[204,645,646],{},[61,647],{"alt":633,"src":648,"width":649},"\u002Fb\u002Fmetool\u002FblindWatermark\u002Foriginal.png",120,[204,651,652],{},[61,653],{"alt":654,"src":655,"width":649},"文字嵌入水印","\u002Fb\u002Fmetool\u002FblindWatermark\u002Fdwt-embed.png",[204,657,658],{},[61,659],{"alt":660,"src":661,"width":649},"抗旋转水印","\u002Fb\u002Fmetool\u002FblindWatermark\u002Ffft-embed.png",[16,663,664],{},"三张图肉眼看不出区别——这是隐形水印的基本前提，两种模式都做到了。",[16,666,667],{},"然后是关键问题：图片被各种方式「处理」之后，水印还能验证吗？",[180,669,670,686],{},[183,671,672],{},[186,673,674,677,680,683],{},[189,675,676],{},"编辑方式",[189,678,679],{},"编辑后效果",[189,681,682],{},"文字嵌入",[189,684,685],{},"抗旋转\u002F缩放",[199,687,688,706,722,738,755,772],{},[186,689,690,693,700,703],{},[204,691,692],{},"亮度 +30",[204,694,695],{},[61,696],{"alt":697,"src":698,"width":699},"亮度攻击","\u002Fb\u002Fmetool\u002FblindWatermark\u002Fattack-brightness.png",80,[204,701,702],{},"❌",[204,704,705],{},"✅ 60%",[186,707,708,711,717,719],{},[204,709,710],{},"遮挡 80×80",[204,712,713],{},[61,714],{"alt":715,"src":716,"width":699},"遮挡攻击","\u002Fb\u002Fmetool\u002FblindWatermark\u002Fattack-mask.png",[204,718,702],{},[204,720,721],{},"✅ 73%",[186,723,724,727,733,735],{},[204,725,726],{},"旋转 90°",[204,728,729],{},[61,730],{"alt":731,"src":732,"width":699},"旋转攻击","\u002Fb\u002Fmetool\u002FblindWatermark\u002Fattack-rotate90.png",[204,734,702],{},[204,736,737],{},"✅ 80%",[186,739,740,743,749,752],{},[204,741,742],{},"缩放往返 75%",[204,744,745],{},[61,746],{"alt":747,"src":748,"width":699},"缩放攻击","\u002Fb\u002Fmetool\u002FblindWatermark\u002Fattack-scale75.png",[204,750,751],{},"✅",[204,753,754],{},"✅ 64%",[186,756,757,760,767,769],{},[204,758,759],{},"裁剪 90%",[204,761,762],{},[61,763],{"alt":764,"src":765,"width":766},"裁剪90%","\u002Fb\u002Fmetool\u002FblindWatermark\u002Fattack-crop90.png",72,[204,768,702],{},[204,770,771],{},"✅ 51%",[186,773,774,777,784,786],{},[204,775,776],{},"裁剪 50%",[204,778,779],{},[61,780],{"alt":781,"src":782,"width":783},"裁剪50%","\u002Fb\u002Fmetool\u002FblindWatermark\u002Fattack-crop50.png",60,[204,785,702],{},[204,787,702],{},[16,789,790],{},"两种模式的定位由此清晰：",[143,792,793,798],{},[36,794,795,797],{},[26,796,636],{},"：能读出你藏进去的文字（版权声明、你的名字），但对改动比较敏感。适合「原图 PNG 直接分发」的场景，比如机构颁发的电子证书。",[36,799,800,802],{},[26,801,639],{},"：不能读文字，只验证「有没有水印」，但抗改动能力强得多。适合图片可能被转发、旋转、截取的场景。",[16,804,805],{},"两种模式可以叠加使用——先嵌文字，再嵌指纹，互不干扰，可分别独立验证。",[16,807,808,809,812],{},"有一点要提前说清楚：",[26,810,811],{},"截图之后通常无法可靠验证","。截图不是复制原始像素，而是经过屏幕渲染和重新编码的，这个过程会破坏水印信号。这个工具最适合「发送原图 PNG 文件」的链路，不是截图溯源的工具。这不是为了降低预期而说的，是我们实测得到的真实结论。",[11,814,816],{"id":815},"做工具之前调研了六种方案","做工具之前，调研了六种方案",[16,818,819],{},"上面说的「我们选定了 DWT-DCT-SVD 算法」，但为什么是它？我们调研了六种方案，把这个过程整理出来，也许对你理解这类工具的能力边界有帮助。",[821,822,824],"h3",{"id":823},"方案一经典频域算法-dwt-dct-svd","方案一：经典频域算法 DWT-DCT-SVD",[16,826,827],{},"这是学术和工程界应用最广的开源方案。原理是把图片分解成频率层次，把水印信息嵌入到低频系数里——人眼对低频变动不敏感，所以水印不可见；提取时也只需要带水印的图，不需要原图对比。",[16,829,830],{},"优点：完全开源、可在浏览器实现、真正的「盲」提取。缺点：对旋转和高强度 JPEG 压缩比较脆弱。",[16,832,833],{},"腾讯云和阿里云的文字盲水印服务底层大概率用的就是这个算法族——官方文档的限制（最小尺寸、长宽比要求）和这个算法的块结构要求完全对应。",[821,835,837],{"id":836},"方案二简单-fft-差值法伪盲水印","方案二：简单 FFT 差值法（伪盲水印）",[16,839,840],{},"GitHub 上有一些「盲水印」项目用的是这个思路：把水印图的频域叠加到原图频域上，提取时做差还原。",[16,842,843,844,847],{},"看起来很聪明，但",[26,845,846],{},"不是真正的盲水印","——提取时必须持有原图才能做差。腾讯云的图片水印（type1\u002Ftype2）用的就是这个，本质是「有原图才能验证」的留底方案，不适合我们要做的场景。",[821,849,851],{"id":850},"方案三让水印能抗旋转实验结果让我们放弃了这个方向","方案三：让水印能抗旋转——实验结果让我们放弃了这个方向",[16,853,854],{},"DWT-DCT-SVD 有个软肋：图片一旦被旋转，内部的块结构对不上，水印提取就失败。一个自然的想法是「同时埋一层定位模板，提取时先估出旋转角度、把图摆正、再提取」。",[16,856,857,858],{},"我们认真做了实验，用三张真实照片跑了完整测试，结论是：",[26,859,860],{},"调门要么开不够，要么开太大。",[862,863,865,866,865,878],"div",{"style":864},"display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap;margin:16px 0;","\n  ",[862,867,869,870,869,875,865],{"style":868},"flex:1;min-width:180px;text-align:center;","\n    ",[61,871],{"src":872,"alt":873,"style":874},"\u002Fb\u002Fmetool\u002Fpeppers_original.png","peppers 原图","width:100%;border-radius:8px;",[16,876,633],{"style":877},"font-size:13px;color:#888;margin-top:6px;",[862,879,869,880,869,884,865],{"style":868},[61,881],{"src":882,"alt":883,"style":874},"\u002Fb\u002Fmetool\u002Fpeppers_watermarked.png","peppers 嵌入水印后",[16,885,886],{"style":877},"叠加定位模板后——肉眼已可见条纹",[16,888,889],{},"定位模板信号弱时，旋转后找不到模板，摆正失败；强到能用时，图片已经出现肉眼可见的条纹。即使开到最大强度，旋转 8° 只有 1 张图能恢复，旋转 15° 全部失败，旋转加 JPEG 组合则全军覆没：",[862,891,865,892,865,901],{"style":864},[862,893,869,894,869,898,865],{"style":868},[61,895],{"src":896,"alt":897,"style":874},"\u002Fb\u002Fmetool\u002Fpeppers_rotate8_attacked.png","旋转 8° 攻击后",[16,899,900],{"style":877},"旋转 8° 后（提取失败）",[862,902,869,903,869,907,865],{"style":868},[61,904],{"src":905,"alt":906,"style":874},"\u002Fb\u002Fmetool\u002Fpeppers_rotate8_realigned.png","摆正后",[16,908,909],{"style":877},"几何摆正后——仍然提取失败",[16,911,912],{},"算法确实能估出「转了 7.8°」，把图摆正了——但真实照片经过重采样和 JPEG 编码，信号损耗已经超出了能恢复的范围。这个方向不上线。",[821,914,916],{"id":915},"方案四开源项目-blindwatermark-的示例看起来效果很好但有隐藏前提","方案四：开源项目 BlindWatermark 的示例看起来效果很好，但有隐藏前提",[16,918,919,920,923,924,927],{},"调研过程中我们也看了 GitHub 上颇受欢迎的 ",[73,921,922],{},"BlindWatermark","（fire-keeper）和 ",[73,925,926],{},"blind_watermark","（guofei9987），README 展示的效果图很惊艳——旋转、截图、JPEG 之后都能还原水印图案。我们拆解了一下，发现有几个关键前提没有被明显标出：",[16,929,930,933,934,936],{},[26,931,932],{},"旋转等几何攻击的「成功」，需要精确的逆操作。"," 打开 ",[73,935,926],{}," 的示例代码，每个「攻击成功」的测试都有对应的还原步骤：旋转了 60° 就反向旋转 -60°，缩放到 400×300 就用原图尺寸缩放回去：",[938,939,943],"pre",{"className":940,"code":941,"language":942,"meta":336,"style":336},"language-python shiki shiki-themes github-light-default github-dark-default","att.rot_att(input_filename='output\u002Fembedded.png', ..., angle=60)\natt.rot_att(input_filename='output\u002F旋转攻击.png', ..., angle=-60)  # ← 精确反转\nwm_extract = bwm1.extract('output\u002F旋转攻击_还原.png', ...)\n","python",[73,944,945,953,958],{"__ignoreMap":336},[946,947,950],"span",{"class":948,"line":949},"line",1,[946,951,952],{},"att.rot_att(input_filename='output\u002Fembedded.png', ..., angle=60)\n",[946,954,955],{"class":948,"line":340},[946,956,957],{},"att.rot_att(input_filename='output\u002F旋转攻击.png', ..., angle=-60)  # ← 精确反转\n",[946,959,960],{"class":948,"line":337},[946,961,962],{},"wm_extract = bwm1.extract('output\u002F旋转攻击_还原.png', ...)\n",[16,964,965,968,969,972,973,976],{},[26,966,967],{},"截图攻击需要同时持有原图。"," ",[73,970,971],{},"estimate_crop_parameters"," 函数的参数里明确写着 ",[73,974,975],{},"original_file='output\u002Fembedded.png'","——用 SIFT 特征点把截图对齐回原图，本质是「非盲」操作。",[16,978,979,982],{},[26,980,981],{},"成功标准不同。"," 这些项目嵌入的是一张黑白水印图，提取出来即使有失真，人眼仍能辨认图案。我们嵌入的是精确文字 bit 串，一个 bit 错误就会导致 UTF-8 解码失败——「要么完全正确，要么完全失败」，门槛高得多。",[16,984,985],{},"说这些不是否定这些项目，算法本身是扎实的，README 也坦承了自己的「现在的问题」章节。只是评估一个工具的真实能力时，需要区分「已知攻击参数下能还原」和「真实未知场景下盲提取」——这是两件不同的事。",[821,987,989],{"id":988},"方案五google-synthid","方案五：Google SynthID",[16,991,992],{},"Google DeepMind 2025 年发表的方案，已处理超 20 亿张图片，鲁棒性远超所有频域方案。",[16,994,995],{},"技术路线完全不同：端到端训练的神经网络，训练时主动对水印图施加随机 JPEG、旋转、裁剪攻击，编码器被迫学习把信号藏在这些变换都动不了的地方。",[16,997,998],{},"对我们来说，现阶段引入不现实——模型闭源，且我们的定位是完全离线的免费工具。",[821,1000,1002],{"id":1001},"方案六trustmarkadobeiccv-2025","方案六：TrustMark（Adobe，ICCV 2025）",[16,1004,1005],{},"开源的深度学习水印方案，有 ONNX 版本，理论上可以在浏览器通过 WebGPU 运行，模型约 3 MB。",[16,1007,1008],{},"这个方向值得后续评估，「浏览器只做验证，嵌入仍离线处理」的模式在技术上是可行的。已列入我们的技术路线图。",[821,1010,1012],{"id":1011},"为什么选-dwt-dct-svd而不是云-api","为什么选 DWT-DCT-SVD，而不是云 API",[16,1014,1015],{},"调研完这六种方案，再来看云厂商的服务就清楚多了：",[180,1017,1018,1037],{},[183,1019,1020],{},[186,1021,1022,1025,1028,1031,1034],{},[189,1023,1024],{},"比较维度",[189,1026,1027],{},"MeTool",[189,1029,1030],{},"腾讯云 type3",[189,1032,1033],{},"阿里云新版",[189,1035,1036],{},"Google SynthID",[199,1038,1039,1056,1069,1084,1098,1114,1128],{},[186,1040,1041,1044,1047,1050,1053],{},[204,1042,1043],{},"算法",[204,1045,1046],{},"DWT-DCT-SVD",[204,1048,1049],{},"同源",[204,1051,1052],{},"可能升级版",[204,1054,1055],{},"深度学习",[186,1057,1058,1061,1063,1065,1067],{},[204,1059,1060],{},"抗亮度\u002F噪声",[204,1062,751],{},[204,1064,751],{},[204,1066,751],{},[204,1068,751],{},[186,1070,1071,1074,1076,1079,1082],{},[204,1072,1073],{},"抗旋转+JPEG（真实图）",[204,1075,702],{},[204,1077,1078],{},"❌（推测）",[204,1080,1081],{},"未知",[204,1083,751],{},[186,1085,1086,1089,1091,1093,1096],{},[204,1087,1088],{},"抗截屏",[204,1090,702],{},[204,1092,702],{},[204,1094,1095],{},"✅（声称）",[204,1097,751],{},[186,1099,1100,1103,1105,1108,1111],{},[204,1101,1102],{},"任意中文文本",[204,1104,751],{},[204,1106,1107],{},"有限",[204,1109,1110],{},"256 字符上限",[204,1112,1113],{},"不支持",[186,1115,1116,1119,1121,1123,1125],{},[204,1117,1118],{},"纯浏览器\u002F无需上传",[204,1120,751],{},[204,1122,702],{},[204,1124,702],{},[204,1126,1127],{},"需模型文件",[186,1129,1130,1133,1136,1139,1141],{},[204,1131,1132],{},"成本",[204,1134,1135],{},"零",[204,1137,1138],{},"按调用收费",[204,1140,1138],{},[204,1142,1143],{},"零（开源）",[16,1145,1146,1149],{},[26,1147,1148],{},"MeTool 最大的差异化是：完全离线、免费、支持任意中文文本。"," 云 API 架构上做不到这三点——用户必须上传图片，有隐私顾虑、有费用、有网络延迟。在能力相近的情况下，这三点就是我们的理由。",[321,1151],{},[16,1153,1154],{},"这次开发最大的收获不是上线了一个工具，而是搞清楚了「这个工具在哪里会失效」。把这件事写清楚、放在工具页的显眼位置，是比功能本身更值得做的事。",[16,1156,1157],{},[99,1158,1161],{"href":1159,"rel":1160},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fimages\u002FblindWatermark\u002F",[103],"现在就试试隐形水印工具",[1163,1164,1165],"style",{},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":336,"searchDepth":337,"depth":337,"links":1167},[1168,1169,1170],{"id":594,"depth":340,"text":595},{"id":620,"depth":340,"text":621},{"id":815,"depth":340,"text":816,"children":1171},[1172,1173,1174,1175,1176,1177,1178],{"id":823,"depth":337,"text":824},{"id":836,"depth":337,"text":837},{"id":850,"depth":337,"text":851},{"id":915,"depth":337,"text":916},{"id":988,"depth":337,"text":989},{"id":1001,"depth":337,"text":1002},{"id":1011,"depth":337,"text":1012},"2026-06-13","做隐形水印工具之前，我们认真调研了从经典频域算法到 Google SynthID 的六种方案，并用真实照片跑了抗攻击对比实验。最终选择了一个「能力边界清晰」的前端可行方案，而不是夸大效果的黑盒。",[1182,1185,1188,1191],{"q":1183,"a":1184},"隐形水印嵌入后图片看起来有变化吗？","几乎看不出来。DWT-DCT-SVD 算法在小波\u002FDCT 频域系数上做微小调整，对人眼视觉影响极小。单独的信息水印嵌入后 PSNR 约 37 dB，完全在业界「肉眼不可见」的标准范围内（通常要求 ≥ 38 dB）。",{"q":1186,"a":1187},"截图后还能验证水印吗？","通常不能可靠验证。截图经过显示器渲染、色彩转换、可能的分辨率变化和重新编码，这些操作会破坏频域中的水印信号。隐形水印最适合保护「原图 PNG 文件」的传播链路，不能作为截图防盗的手段。",{"q":1189,"a":1190},"两种模式的区别是什么？","「嵌入自定义文字」模式可在图片中隐藏任意文字，验证时可完整读出，适合版权声明和溯源；「抗旋转\u002F缩放」模式写入密码指纹，抵抗旋转和缩放后仍可验证有无水印，但不能读出内容。两种模式可叠加使用。",{"q":1192,"a":1193},"为什么不用 Google SynthID 那样的深度学习方案？","深度学习方案（如 SynthID、TrustMark）鲁棒性更强，但模型本身需要几 MB 至几十 MB，且需要 WebGPU 或 WASM 运行时，部署成本高、首次加载慢。DWT-DCT-SVD 是纯数学算法，零依赖、纯浏览器本地运行，适合当前阶段做免费公开工具。深度学习路线已在我们的技术路线图上，作为后续升级方向。",{},"\u002Fbuilds\u002Fmetool\u002F2026-06-13-blind-watermark",8,{"title":589,"description":1180},[1199,1200,1046,1201,1202,1203,1204],"隐形水印","盲水印","图片版权保护","隐形水印原理","前端水印","图片防盗","builds\u002Fmetool\u002F2026-06-13-blind-watermark","MeTool 上线隐形水印工具，支持文字嵌入和抗旋转\u002F缩放两种模式，100% 浏览器本地处理无需上传。开发前系统调研了腾讯云、阿里云、Google SynthID 等主流方案，并用真实照片做了抗攻击实验，最终选定 DWT-DCT-SVD 方案，诚实标注能力边界，不做虚假宣传。",[380,381],"jzJf-x2OZdosBHHeiqJnjK3VssooCBA_zNnHZgnj9B0",{"id":1210,"title":1211,"body":1212,"date":1331,"description":1332,"draft":347,"extension":348,"faq":1333,"meta":1346,"navigation":363,"path":283,"project":365,"readingTime":573,"seo":1347,"seoKeywords":1348,"stem":1356,"summary":1357,"tags":1358,"updated":382,"__hash__":1359},"builds\u002Fbuilds\u002Fmetool\u002F2026-05-14-html-markdown-share.md","上线了两个分享工具：AI 生成的 HTML 和 Markdown，现在都能一键发给别人看了",{"type":8,"value":1213,"toc":1326},[1214,1217,1220,1223,1234,1244,1250,1260,1266,1269,1276,1282,1285,1288,1295,1298,1305,1308,1311,1317,1320,1323],[11,1215,1216],{"id":1216},"从一个真实痛点出发",[16,1218,1219],{},"做这两个工具，起因是一个很具体的问题。",[16,1221,1222],{},"AI 现在能生成质量很高的 HTML 页面——带标签页的方案对比、可折叠的代码审查报告、带图表的数据摘要。但生成完之后，怎么发给别人看？",[16,1224,1225,1226,1229,1230,1233],{},"发源码？对方看到的是一堆 ",[73,1227,1228],{},"\u003Cdiv>"," 和 ",[73,1231,1232],{},"\u003Cspan>","。发附件？对方还得找个能打开 HTML 的工具，手机上基本没戏。上传到服务器？需要账号、需要配置，不是人人都搞得定。",[16,1235,1236,1237,1229,1240,1243],{},"Markdown 也有同样的问题。AI 生成了一份结构清晰的会议纪要或技术规格，直接发过去对方看到的是满屏 ",[73,1238,1239],{},"#",[73,1241,1242],{},"**","。",[16,1245,1246,1249],{},[26,1247,1248],{},"这是 AI 生成内容的「最后一公里」问题。"," 生成很容易，分享很麻烦。",[1251,1252,1253],"blockquote",{},[16,1254,1255,1256],{},"关于 HTML 和 Markdown 各自适合什么场景，我在另一篇文章里有更详细的分析：",[99,1257,1259],{"href":1258},"\u002Farticles\u002Fmarkdown-vs-html","「Markdown 已死」？先别慌，自媒体又在夸大了",[16,1261,1262],{},[61,1263],{"alt":1264,"src":1265},"MeTool AI HTML 预览分享工具","\u002Fa\u002Fmarkdown-vs-html\u002Fhtml-preview.png",[11,1267,1268],{"id":1268},"上线了两个工具",[16,1270,1271],{},[99,1272,1275],{"href":1273,"rel":1274},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fdev\u002FhtmlShare\u002F",[103],"AI HTML 预览分享",[16,1277,1278,1279,1281],{},"把 AI 生成的 HTML 粘进去，或者拖入 ",[73,1280,75],{}," 文件，点一下「生成分享链接」，得到一个 7 天有效的链接。",[16,1283,1284],{},"对方收到链接，浏览器打开，看到的是完整渲染的 HTML 页面——样式、图表、交互效果全部保留。手机打开也正常。",[16,1286,1287],{},"短内容直接编码进 URL，不经过任何服务器。较长内容用第三方临时存储，生成前会提示确认。",[16,1289,1290],{},[99,1291,1294],{"href":1292,"rel":1293},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fmarkdown\u002Fshare\u002F",[103],"Markdown 分享预览",[16,1296,1297],{},"逻辑相同，针对 Markdown 格式。",[16,1299,1300,1301,1304],{},"粘入 Markdown 文本或拖入 ",[73,1302,1303],{},".md"," 文件，生成链接，对方打开看到 GitHub 风格的完整排版效果——标题、代码块、表格、引用，全部渲染。",[16,1306,1307],{},"Markdown 有个天然优势：体积比 HTML 小得多。同样内容，Markdown 可能 5 KB，HTML 可能 50 KB。所以 Markdown 的短链接往往能直接塞进 URL，比 HTML 链接更短、更干净，也更适合在微信这类消息长度有限制的场景里传播。",[11,1309,1310],{"id":1310},"做这两个工具学到的事",[16,1312,1313,1314],{},"HTML 和 Markdown 的分享需求，本质上是一件事：",[26,1315,1316],{},"内容生产者和内容消费者之间存在工具断层。",[16,1318,1319],{},"你用 AI 生成了格式化内容，你有工具查看（IDE、浏览器、Markdown 编辑器）。但接收方没有这些工具，也不应该为了看你发的一份报告去安装软件。",[16,1321,1322],{},"链接是最低门槛的传递载体。浏览器是最普及的查看工具。这两个工具做的事情就是把这条路打通。",[16,1324,1325],{},"另外，这次也顺手解决了一个安全性问题：接收方打开链接前会看到一个来源确认弹窗，提示内容来自分享者，注意不要在页面内输入敏感信息。这个设计是为了防止有人把恶意 HTML 页面伪装成正常分享传播。",{"title":336,"searchDepth":337,"depth":337,"links":1327},[1328,1329,1330],{"id":1216,"depth":340,"text":1216},{"id":1268,"depth":340,"text":1268},{"id":1310,"depth":340,"text":1310},"2026-05-14","AI 生成 HTML 和 Markdown 后最大的问题是没法直接分享——发源码对方看不了，发附件又麻烦。上线了两个工具解决这个问题：粘贴内容，生成链接，手机直接查看。",[1334,1337,1340,1343],{"q":1335,"a":1336},"AI HTML 分享工具和 Markdown 分享工具有什么区别？","两个工具解决不同格式的分享问题。HTML 分享工具针对 AI 生成的交互式 HTML 页面，对方打开后看到的是完整渲染效果，包括样式、图表和交互组件。Markdown 分享工具针对 AI 生成的 Markdown 文档，对方看到的是 GitHub 风格的排版效果。短内容 Markdown 链接更短，因为 Markdown 体积比 HTML 小很多。",{"q":1338,"a":1339},"分享链接安全吗？内容会上传到服务器吗？","短内容直接编码进 URL，完全不经过任何服务器。较长内容需要第三方临时存储时，工具会提前告知并请用户确认。链接有效期 7 天，到期自动失效，接收者打开前会看到安全确认弹窗。",{"q":1341,"a":1342},"对方收到链接需要安装什么吗？","不需要。对方直接用浏览器打开链接即可，无需注册账号、无需安装任何应用，手机和电脑均可查看。",{"q":1344,"a":1345},"这两个工具适合什么使用场景？","适合把 AI 生成的内容发给同事、朋友或客户查看。比如：AI 生成的方案对比 HTML 页面、代码审查说明、数据报告、会议纪要 Markdown、行动项清单、技术规格文档等。凡是「自己看得到渲染效果，但发给别人就变成乱码」的内容，都适合用这两个工具分享。",{},{"title":1211,"description":1332},[1349,1350,1351,1352,1353,1354,1355],"AI HTML分享","Markdown分享链接","HTML预览分享","AI输出分享","在线HTML查看","Markdown渲染分享","无需登录分享文档","builds\u002Fmetool\u002F2026-05-14-html-markdown-share","MeTool 上线 AI HTML 预览分享和 Markdown 分享预览两个工具，解决 AI 生成内容的「最后一公里」问题：粘贴内容，一键生成 7 天有效的分享链接，对方无需任何工具直接用浏览器查看，手机也能看。",[380,381],"rELoyp0IDsjo5dZCpMybDiovIIybTqn1_PSWt-HIBG4",{"id":1361,"title":1362,"body":1363,"date":1566,"description":1567,"draft":347,"extension":348,"faq":1568,"meta":1581,"navigation":363,"path":1582,"project":365,"readingTime":366,"seo":1583,"seoKeywords":1584,"stem":1592,"summary":1593,"tags":1594,"updated":382,"__hash__":1596},"builds\u002Fbuilds\u002Fmetool\u002F2026-05-10-data-growth-go-global.md","活跃用户翻了 10 倍，下一步是走出中国",{"type":8,"value":1364,"toc":1559},[1365,1368,1371,1377,1380,1383,1393,1396,1402,1406,1409,1415,1418,1432,1435,1438,1441,1444,1450,1456,1459,1465,1468,1471,1475,1478,1481,1488,1494,1498,1501,1504,1524,1527,1553,1556],[11,1366,1367],{"id":1367},"数据验证了一件事",[16,1369,1370],{},"打开 Google Analytics 的 90 天报告，数字让我盯了好一会儿。",[16,1372,1373],{},[61,1374],{"alt":1375,"src":1376},"metool 过去 90 天活跃用户增长趋势","\u002Fb\u002Fmetool\u002F202605ga_trend.png",[16,1378,1379],{},"活跃用户 2 万，增长 1033%。事件数 25 万，增长 1720%。浏览次数 4.7 万，增长 695%。",[16,1381,1382],{},"那条曲线讲了一个很清晰的故事：2 月到 3 月中旬基本是一条平线，3 月底开始拉升，4 月初出现第一个跳跃，然后持续爬坡到 5 月初的 6000。",[16,1384,1385,1386,1392],{},"如果对照之前几篇文章的时间线，3 月底正好是我开始用 ",[99,1387,1391],{"href":1388,"rel":1389,"target":1390},"https:\u002F\u002Fgithub.com\u002FMorvanZhou\u002Fgoogle-analytics-and-search-improve",[103],"_blank","GA 分析 Skill"," 做数据驱动迭代的时间点。接入 Google Search Console 看搜索词、用数据决定做什么工具、发现 3D 品类的自然需求、一口气铺开整个 3D 工具矩阵、用 GA4 数据找到 UX 流失点、提炼出能力先于数据和因果并列两条设计准则。",[16,1394,1395],{},"每一次迭代都有数据支撑，每一次改动都能在后续数据里看到反馈。这个「数据 → 决策 → 验证」的循环跑了将近两个月，累积效应终于在曲线上体现出来了。",[16,1397,256,1398,1401],{},[26,1399,1400],{},"自己做的分析工具，分析自己的产品，驱动自己的增长。"," 这大概是独立开发者最理想的状态。",[11,1403,1405],{"id":1404},"全球覆盖但中国一家独大","全球覆盖，但中国一家独大",[16,1407,1408],{},"再看用户的地理分布：",[16,1410,1411],{},[61,1412],{"alt":1413,"src":1414},"metool 按国家\u002F地区划分的活跃用户","\u002Fb\u002Fmetool\u002F202605ga_map.jpeg",[16,1416,1417],{},"覆盖面看起来不错，蓝色铺满了好几个大洲。但数字告诉我的是另一个故事：",[143,1419,1420,1426,1429],{},[36,1421,1422,1425],{},[26,1423,1424],{},"中国大陆：1.2 万","，增长 213%，占总用户的 80% 左右",[36,1427,1428],{},"美国：755，新加坡：631，香港：467，日本：398",[36,1430,1431],{},"台湾：207，德国：54",[16,1433,1434],{},"中国区的用户量是第二名美国的 16 倍。地图上看起来「全球化」，实际上是中国区在一个人扛着整条增长曲线。",[16,1436,1437],{},"这不是坏事，但也不是能安心的事。",[11,1439,1440],{"id":1440},"流量来源揭示了真正的问题",[16,1442,1443],{},"把流量来源拆开看，问题就更清楚了：",[16,1445,1446],{},[61,1447],{"alt":1448,"src":1449},"metool 按来源\u002F媒介划分的活跃用户","\u002Fb\u002Fmetool\u002F20260ga_source.jpeg",[16,1451,1452,1453,1243],{},"排名第一：",[26,1454,1455],{},"cn.bing.com \u002F referral，7911 次",[16,1457,1458],{},"中国区 Bing 一个渠道贡献了接近 56% 的流量。加上 bing organic 的 1469 次，Bing 系总共贡献了超过 9000 次访问。",[16,1460,1461,1462,1243],{},"相比之下，",[26,1463,1464],{},"Google organic 只有 200 次",[16,1466,1467],{},"200 次。在一个英文优先、面向全球的工具站上，Google 的自然搜索流量只有 200。这个数字让我停下来想了很久。",[16,1469,1470],{},"还有两个有意思的来源：doubao.com referral 426 次、chatgpt.com referral 159 次。AI 产品开始给工具站导流了，虽然量还小，但趋势值得关注。",[11,1472,1474],{"id":1473},"bing-红利和-bing-风险","Bing 红利和 Bing 风险",[16,1476,1477],{},"中国区 Bing 的流量本质上是一波红利。",[16,1479,1480],{},"微软在中国区大力推广 Bing 搜索（Edge 浏览器默认搜索引擎），而 Bing 对中英文混合内容的收录效率不错。metool 之前做了一系列 SEO 优化：默认语言切英文、全站结构化数据、IndexNow 加速收录，这些正好踩中了 Bing 的收录逻辑。",[16,1482,1483,1484,1487],{},"但红利的另一面是风险：",[26,1485,1486],{},"如果流量高度依赖单一渠道，渠道一变，增长就断了。"," Bing 的算法调整、收录策略变化，或者竞争对手在同样的关键词上发力，都可能让这条曲线掉头。",[16,1489,1490,1491],{},"过去两个月证明了「数据驱动」能带来增长。但数据也在告诉我：",[26,1492,1493],{},"这个增长的基础还不够稳。",[11,1495,1497],{"id":1496},"下一步走出去","下一步：走出去",[16,1499,1500],{},"结论很清楚：metool 需要打开国际市场。",[16,1502,1503],{},"不是因为中国市场不好，而是因为：",[33,1505,1506,1512,1518],{},[36,1507,1508,1511],{},[26,1509,1510],{},"单一渠道依赖风险太高","。Google organic 200 次，说明 Google SEO 基本还没打开。全球最大的搜索引擎的自然流量几乎为零，这本身就是一个巨大的增长空间。",[36,1513,1514,1517],{},[26,1515,1516],{},"国际用户的工具需求同样旺盛","。3D 查看器、图片处理、音频编辑，这些需求不分国界。而且国际用户的付费意愿通常更强，这为后续的商业化留了空间。",[36,1519,1520,1523],{},[26,1521,1522],{},"基础设施已经就绪","。metool 的默认语言已经是英文，工具的核心体验没有语言门槛。缺的不是产品本身，而是在国际搜索引擎上的存在感。",[16,1525,1526],{},"具体要做的事：",[143,1528,1529,1535,1541,1547],{},[36,1530,1531,1534],{},[26,1532,1533],{},"攻 Google SEO","：分析国际用户的搜索词，针对性地优化页面标题、描述、结构化数据。重点是 3D 工具品类，这是已经验证过有需求的方向。",[36,1536,1537,1540],{},[26,1538,1539],{},"内容本地化","：虽然界面已经是英文，但落地页的文案、FAQ、使用指南需要更加贴合英文用户的表达习惯，不能只是中文的直译。",[36,1542,1543,1546],{},[26,1544,1545],{},"拓展 AI 搜索渠道","：chatgpt.com 和 doubao.com 已经开始导流了。优化 GEO（生成式引擎优化），让 AI 搜索引擎更容易引用 metool 的工具页面。",[36,1548,1549,1552],{},[26,1550,1551],{},"继续用数据说话","：每次改动都要在数据里看到反馈。用同样的 GA 分析 Skill 追踪国际市场的变化，不猜，只看数据。",[16,1554,1555],{},"从 0 到 2 万用户，用了大半年。下一个目标不是简单地把数字再翻一倍，而是让增长的来源更分散、更健康、更国际化。",[16,1557,1558],{},"中国区的 Bing 红利给了 metool 第一波起飞的燃料。但要飞得更远，需要更多的引擎。",{"title":336,"searchDepth":337,"depth":337,"links":1560},[1561,1562,1563,1564,1565],{"id":1367,"depth":340,"text":1367},{"id":1404,"depth":340,"text":1405},{"id":1440,"depth":340,"text":1440},{"id":1473,"depth":340,"text":1474},{"id":1496,"depth":340,"text":1497},"2026-05-10","用自己做的 GA 分析 Skill 持续迭代了几个版本之后，metool 过去 90 天的活跃用户从不到 2000 涨到了 2 万，事件数增长了 17 倍。但数据也清楚地告诉我一件事：流量高度依赖中国区的 Bing，国际市场几乎没打开。是时候认真想想怎么走出去了。",[1569,1572,1575,1578],{"q":1570,"a":1571},"metool 过去 90 天的增长数据是多少？","活跃用户 2 万（增长 1033.4%），事件数 25 万（增长 1720.6%），浏览次数 4.7 万（增长 695.3%），每位活跃用户平均互动时长 2 分 06 秒（增长 116.8%）。从 2 月到 5 月初，日活从接近零攀升到 6000 左右。",{"q":1573,"a":1574},"metool 的流量主要来自哪里？","排名第一的是 cn.bing.com referral（7911 次），其次是直接访问（3783 次）、bing organic（1469 次）、doubao.com referral（426 次）、google organic（200 次）、chatgpt.com referral（159 次）。中国区 Bing 是绝对的流量主力，Google 的自然搜索流量远低于预期。",{"q":1576,"a":1577},"metool 的用户分布在哪些国家和地区？","中国大陆 1.2 万（占比约 80%），美国 755，新加坡 631，香港 467，日本 398，台湾 207，德国 54。虽然覆盖了全球多个地区，但中国区一家独大，国际市场的渗透率还很低。",{"q":1579,"a":1580},"为什么要从中国区向国际市场扩展？","单一市场依赖风险高，中国区的流量主要靠 Bing 一个渠道，如果 Bing 算法变化或收录策略调整，流量可能断崖式下跌。国际市场的工具需求更大、付费意愿更强、Google SEO 的长尾效应更持久。而且 metool 已经默认英文界面，国际化的基础设施是现成的。",{},"\u002Fbuilds\u002Fmetool\u002F2026-05-10-data-growth-go-global",{"title":1362,"description":1567},[1585,1586,1587,1588,1589,1590,1591],"独立开发出海","工具站国际化","Google Analytics 数据分析","在线工具流量增长","Bing SEO 中国区","AI Skill 数据驱动","工具站全球化策略","builds\u002Fmetool\u002F2026-05-10-data-growth-go-global","metool 过去 90 天活跃用户增长 1033%，事件数增长 1720%，用自建 GA 分析 Skill 持续迭代是核心驱动力。但流量来源分析显示 56% 来自 cn.bing.com，中国区占绝对主导。国际市场的 Google organic 仅 200 次，说明 Google SEO 还没真正打开。下一阶段的重心是突破中国区依赖，向国际市场进发。",[380,1595],"产品思考","icPCk9P0agGM-7QowKbFYXI4VimjQWm5mqzfxRf8nmI",{"id":1598,"title":1599,"body":1600,"date":1867,"description":1868,"draft":347,"extension":348,"faq":1869,"meta":1882,"navigation":363,"path":1883,"project":365,"readingTime":1884,"seo":1885,"seoKeywords":1886,"stem":1894,"summary":1895,"tags":1896,"updated":382,"__hash__":1897},"builds\u002Fbuilds\u002Fmetool\u002F2026-04-12-capability-first-ux.md","用数据发现了用户在哪里流失，然后我重写了自己的 UX 准则",{"type":8,"value":1601,"toc":1853},[1602,1605,1613,1619,1622,1628,1631,1634,1638,1641,1645,1651,1654,1674,1678,1684,1686,1706,1710,1719,1723,1726,1732,1737,1751,1754,1758,1761,1767,1772,1804,1808,1811,1818,1826,1829,1835,1838,1841,1844,1847,1850],[11,1603,1604],{"id":1604},"用自己做的工具分析自己的工具",[16,1606,1607,1608,1612],{},"最近用自己的 ",[99,1609,1611],{"href":1388,"rel":1610,"target":1390},[103],"GA4 + GSC 分析技能"," 做了一次 metool 的完整数据审查。这个技能会自动拉取 Google Analytics 和 Search Console 的数据，分析用户行为路径，找出实际用户行为和预期目标之间的落差。",[16,1614,1615,1616],{},"数据里有一个细节让我停下来认真想了很久：",[26,1617,1618],{},"工具页面的跳出率比我预期的高很多，而且用户停留时间集中在前 10 秒。",[16,1620,1621],{},"10 秒。用户打开了工具页面，扫了一眼，然后就离开了。",[16,1623,1624,1625],{},"我重新打开了几个自己做的工具页面，第一次以\"用户\"而不是\"作者\"的视角去看。结论让我有点不舒服：",[26,1626,1627],{},"很多工具页面，在我没有上传任何文件之前，页面几乎是空的。",[16,1629,1630],{},"一个上传框，一段描述文字，仅此而已。用户不知道上传之后会发生什么，不知道有哪些配置选项，不知道最终结果长什么样子。唯一的选择是上传并等待——这需要一定的信任成本。",[16,1632,1633],{},"而用户不愿意在信任成本上赌注的时候，他们就直接离开了。",[11,1635,1637],{"id":1636},"提炼两条-ux-准则","提炼两条 UX 准则",[16,1639,1640],{},"这次体验让我重新想了工具类产品的交互逻辑，最后沉淀成两条准则。",[821,1642,1644],{"id":1643},"能力先于数据capability-first-ux","能力先于数据（Capability-First UX）",[16,1646,1647,1650],{},[26,1648,1649],{},"界面的结构与能力应独立于用户数据而完整存在。"," 数据的有无只改变状态，不改变界面的骨架与可见范围。",[16,1652,1653],{},"具体来说：",[143,1655,1656,1662,1668],{},[36,1657,1658,1661],{},[26,1659,1660],{},"零数据可读性","：即使没有任何用户输入，界面本身就是工具能力的完整说明书",[36,1663,1664,1667],{},[26,1665,1666],{},"结构恒定，状态渐进","：页面不因数据到达而从一种布局跳变为另一种布局",[36,1669,1670,1673],{},[26,1671,1672],{},"入口即全貌","：用户首次进入时所见 ≈ 工作中所见，消除「上传后才知道能做什么」的认知黑箱",[821,1675,1677],{"id":1676},"因果并列cause-effect-juxtaposition","因果并列（Cause-Effect Juxtaposition）",[16,1679,1680,1683],{},[26,1681,1682],{},"输入区与输出区在桌面端应并列放置，让用户一眼感知因果关系。"," 上下堆叠的布局迫使用户滚动才能看到操作的结果，打断了「操作 → 反馈」的认知流。",[16,1685,1653],{},[143,1687,1688,1694,1700],{},[36,1689,1690,1693],{},[26,1691,1692],{},"空间换认知","：桌面端屏幕宽度充裕时，优先用横向空间并列展示「输入 → 输出」",[36,1695,1696,1699],{},[26,1697,1698],{},"结果常驻可见","：输出区域使用 sticky 定位，在用户调整配置或滚动时始终停留在视口内",[36,1701,1702,1705],{},[26,1703,1704],{},"Demo 与正式态视觉分离","：示例内容必须在视觉上与正式操作态有明确区分，避免用户误判",[11,1707,1709],{"id":1708},"拿-iphone-拼长图工具做验证","拿 iPhone 拼长图工具做验证",[16,1711,1712,1713,1718],{},"想清楚这两条准则之后，我选了 metool 上的 ",[99,1714,1717],{"href":1715,"rel":1716,"target":1390},"https:\u002F\u002Fmetool.online\u002Fimages\u002FiphoneLongImageStitch\u002F",[103],"iPhone 拼长图"," 工具来做重构验证，因为这个工具的原始版本是一个典型的反例。",[821,1720,1722],{"id":1721},"老版本上传之后才能看见","老版本：上传之后才能看见",[16,1724,1725],{},"下面是老版本在用户没有上传任何图片时的页面：",[16,1727,1728],{},[61,1729],{"alt":1730,"src":1731},"老版本空状态：只有上传框，看不到任何功能结构","\u002Fb\u002Fmetool\u002Fux-compare-old-empty.png",[16,1733,1734],{},[26,1735,1736],{},"老版本的问题：",[33,1738,1739,1742,1745,1748],{},[36,1740,1741],{},"上传区域之下的设置项（格式、品质、是否保持比例）和结果预览，只有上传图片之后才会出现",[36,1743,1744],{},"用户在上传前完全无法判断这个工具「有多少配置项」「结果长什么样」",[36,1746,1747],{},"整个页面是典型的垂直堆叠：上传 → 设置 → 结果，用户需要滚动才能看到操作结果",[36,1749,1750],{},"点击「开始拼接」之后，需要向下滚动才能看到结果",[16,1752,1753],{},"这是一个用户必须「先投入，才能了解」的工具。信任门槛很高。",[821,1755,1757],{"id":1756},"新版本首屏即全貌","新版本：首屏即全貌",[16,1759,1760],{},"下面是新版本在用户没有上传任何图片时的页面：",[16,1762,1763],{},[61,1764],{"alt":1765,"src":1766},"新版本空状态：界面骨架完整，设置和结果区始终可见","\u002Fb\u002Fmetool\u002Fux-compare-new-empty.png",[16,1768,1769],{},[26,1770,1771],{},"新版本的变化：",[33,1773,1774,1780,1786,1792,1798],{},[36,1775,1776,1779],{},[26,1777,1778],{},"桌面端并列布局","：左侧是上传区 + 设置栏，右侧是结果预览区，不需要滚动就能同时看到",[36,1781,1782,1785],{},[26,1783,1784],{},"设置栏始终可见","：格式选择、品质滑块、自动去重叠开关，在上传前就能看见（视觉上淡化但结构完整）",[36,1787,1788,1791],{},[26,1789,1790],{},"结果区始终可见","：右侧结果区在无数据时以占位图展示，sticky 定位固定在视口内",[36,1793,1794,1797],{},[26,1795,1796],{},"Demo 模式","：首次进入时自动加载示例图片并展示拼接结果，用户一进门就能看到完整的「输入 → 结果」链路",[36,1799,1800,1803],{},[26,1801,1802],{},"Demo 视觉分离","：示例内容用虚线边框、降低饱和度、灰色 sparkle 标签标注，明确与正式操作态区分；上传入口始终保持可见",[821,1805,1807],{"id":1806},"关键细节demo-上方保留上传入口","关键细节：Demo 上方保留上传入口",[16,1809,1810],{},"这里有一个微妙的设计决策：Demo 内容和上传入口不能相互遮挡。",[16,1812,1813,1814,1817],{},"如果 Demo 内容填满了上传区，用户反而找不到「我要上传自己的图片」入口。所以新版本的处理是：Demo 状态下，",[26,1815,1816],{},"上传 FileDropZone 在上，Demo 缩略图展示在下","，用户随时都能直接拖拽上传，不需要先\"退出\"Demo 模式。",[938,1819,1824],{"className":1820,"code":1822,"language":1823},[1821],"language-text","┌─────────────────┐  ┌──────────────────┐\n│  📁 拖拽上传    │  │  ✦ Demo 结果预览 │\n│                 │  │                  │\n│  [FileDropZone] │  │  [stitched img]  │\n│                 │  │                  │\n├─────────────────┤  │  ↑ sticky 固定   │\n│  ✦ DEMO         │  └──────────────────┘\n│  [示例缩略图]   │\n│  → Demo 结果   │\n├─────────────────┤\n│  格式  品质  □  │  ← 设置栏始终可见\n└─────────────────┘\n","text",[73,1825,1822],{"__ignoreMap":336},[11,1827,1828],{"id":1828},"这两条准则的本质",[16,1830,1831,1832],{},"回头看，这两条准则本质上在解决同一个问题：",[26,1833,1834],{},"降低用户的认知税。",[16,1836,1837],{},"用户的认知资源是有限的。如果用户需要先上传、先等待，才能推断出「这个工具大概能做什么」，这个推断过程本身就是认知税。而工具类产品的用户通常是来解决具体问题的，他们不愿意把认知资源花在搞清楚界面上。",[16,1839,1840],{},"「能力先于数据」把这份认知税降为零——界面自己就是说明书。\n「因果并列」把操作反馈的延迟降为零——结果就在输入旁边。",[16,1842,1843],{},"两者加在一起，用户的\"我能做什么？\"\"做完之后是什么样？\"这两个问题，在进入页面的第一秒就有了答案。",[11,1845,1846],{"id":1846},"接下来的节奏",[16,1848,1849],{},"这次重构完成了拼长图工具，接下来会陆续把这两条准则应用到 metool 上其他的工具页面。优先处理那些「零数据状态下几乎是空白页」的工具。",[16,1851,1852],{},"同时继续用 GA4 数据来验证假设——这次改动是否真的降低了跳出率，用户停留时间是否有变化。数据说了算。",{"title":336,"searchDepth":337,"depth":337,"links":1854},[1855,1856,1860,1865,1866],{"id":1604,"depth":340,"text":1604},{"id":1636,"depth":340,"text":1637,"children":1857},[1858,1859],{"id":1643,"depth":337,"text":1644},{"id":1676,"depth":337,"text":1677},{"id":1708,"depth":340,"text":1709,"children":1861},[1862,1863,1864],{"id":1721,"depth":337,"text":1722},{"id":1756,"depth":337,"text":1757},{"id":1806,"depth":337,"text":1807},{"id":1828,"depth":340,"text":1828},{"id":1846,"depth":340,"text":1846},"2026-04-12","用自己做的 GA4 + GSC 分析工具审查 metool 的用户行为数据，发现用户在工具页面的一个关键流失点——不知道能做什么就离开了。这让我重新审视了整个交互逻辑，提炼出两条核心 UX 准则，并用 iPhone 拼长图工具做了一次完整的重构。",[1870,1873,1876,1879],{"q":1871,"a":1872},"什么是「能力先于数据」UX 原则？","界面的结构与功能区域应该独立于用户数据而完整存在。数据的有无只改变控件状态（启用\u002F禁用、填充\u002F占位），不改变界面的骨架与可见范围。用户第一眼看到的界面，就已经是工具能做什么的完整说明书。",{"q":1874,"a":1875},"什么是「因果并列」UX 原则？","在桌面端宽度充裕时，把输入区（操作\u002F配置）和输出区（结果\u002F预览）并列放置，让用户一眼就能感知因果关系。输出区使用 sticky 定位，在用户操作时始终停留在视口内，提供即时反馈。",{"q":1877,"a":1878},"为什么 Demo 内容要和正式操作态视觉上区分开？","如果 Demo 数据和用户实际操作结果在视觉上没有区别，用户容易误以为「数据已经预填了」或者「页面有 Bug」。使用降低饱和度、虚线边框、灰色调、标签标注等手段明确区分，同时 Demo 展示区始终保持上传入口可见，避免用户找不到操作入口。",{"q":1880,"a":1881},"这次 UX 重构具体改了什么？","把原来「先上传才能看到设置和结果区」的垂直堆叠布局，改为「设置和结果预览始终可见，数据到来前以占位\u002F禁用态展示」的并列布局。同时加入 Demo 模式，用户首次进入就能看到完整的输入 + 结果展示，消除了「上传后才知道能做什么」的认知黑箱。",{},"\u002Fbuilds\u002Fmetool\u002F2026-04-12-capability-first-ux",6,{"title":1599,"description":1868},[1887,1888,1889,1890,1891,1892,1893],"独立开发 UX 设计","工具类产品交互设计","能力先于数据 UX","因果并列布局","用户留存优化","Google Analytics 用户行为分析","在线工具交互优化","builds\u002Fmetool\u002F2026-04-12-capability-first-ux","通过 GA4 数据分析发现工具页面的高跳出率根源在于「数据到来前界面是空的」，提炼出「能力先于数据」和「因果并列」两条 UX 准则，并在 iPhone 拼长图工具上完成了完整重构，新版本在首屏即展示完整的界面骨架和 Demo 结果。",[380,1595],"4xRt7OTQ-Eb2TfiUQvHXYGeDYvUFh9V6f-mS56bDP-U",{"id":1899,"title":1900,"body":1901,"date":2141,"description":2142,"draft":347,"extension":348,"faq":2143,"meta":2156,"navigation":363,"path":2157,"project":365,"readingTime":366,"seo":2158,"seoKeywords":2159,"stem":2166,"summary":2167,"tags":2168,"updated":382,"__hash__":2169},"builds\u002Fbuilds\u002Fmetool\u002F2026-04-06-screen-editor.md","录了个产品演示，观众说看不清我点了哪里",{"type":8,"value":1902,"toc":2131},[1903,1909,1912,1915,1918,1924,1927,1931,1938,1941,1947,1950,1957,1960,1972,1977,1980,1986,1989,1992,1995,2009,2012,2015,2021,2024,2027,2040,2050,2057,2061,2064,2071,2074,2077,2080,2094,2106,2109,2113,2119,2122,2125,2128],[16,1904,1905],{},[61,1906],{"alt":1907,"src":1908},"metool editor","\u002Fb\u002Fmetool\u002Fvideo-editor-cover.png",[11,1910,1911],{"id":1911},"录屏视频的老问题",[16,1913,1914],{},"做独立开发这一年多，产品演示视频是绕不开的事。",[16,1916,1917],{},"不管是在 Product Hunt 上发布新工具、在 metool 官网展示功能，还是录一段教程发到 B站，都需要录屏。录屏本身不难，macOS 自带的录屏就够用。但录完之后看回放，总觉得哪里不对。",[16,1919,1920,1921],{},"问题很明确：",[26,1922,1923],{},"观众看不清我到底点了哪里。",[16,1925,1926],{},"光标在 1080p 的全屏画面里移动，菜单上某个选项被选中了，终端里跑出了一行关键输出。这些对我来说很清楚，因为我知道自己在干什么。但对观众来说，他们不是在\"看\"演示，而是在满屏幕\"找\"我点了哪里。",[11,1928,1930],{"id":1929},"openscreen-解决了问题但带来了新问题","OpenScreen 解决了问题，但带来了新问题",[16,1932,1933,1934,1937],{},"之前我一直在用 OpenScreen 做录屏视频的后期处理。它最核心的功能就是",[26,1935,1936],{},"动态聚焦","：在录屏视频的任意时间点，画面自动放大到你指定的操作区域，停留一会儿后平滑缩回全景。",[16,1939,1940],{},"效果很好，观众的视线被自然引导到关键操作，不需要加红框、画箭头、配旁白说\"请注意看右上角\"。",[16,1942,1943,1944],{},"但用了一段时间后，有一个持续困扰我的问题：",[26,1945,1946],{},"OpenScreen 的操作逻辑和我习惯的剪辑软件差太远了。",[16,1948,1949],{},"我日常用剪映和 iMovie，已经形成了肌肉记忆。播放头定位、快捷键分割、拖拽修剪、时间线操作，这些在剪映里是一套非常直觉的流程。但 OpenScreen 是 Electron 桌面应用，它的快捷键体系、界面交互、操作逻辑都是自成一套的。",[16,1951,1952,1953,1956],{},"每次打开 OpenScreen，我都需要一个\"切换脑子\"的过程。不是说它不好用，而是我用得",[26,1954,1955],{},"不顺手","。对一个偶尔才用一次的工具来说，这个切换成本太高了。",[11,1958,1959],{"id":1959},"自己做一个",[16,1961,1962,1963,1966,1967,1243],{},"既然痛点这么明确，思路也很清楚：",[26,1964,1965],{},"做一个操作习惯对标剪映的录屏视频编辑器，把动态聚焦作为核心功能，跑在浏览器里。"," 于是就有了 metool 的 ",[99,1968,1971],{"href":1969,"rel":1970,"target":1390},"https:\u002F\u002Fmetool.online\u002Fvideos\u002FscreenEditor\u002F",[103],"录屏视频编辑器",[1973,1974],"video-player",{"alt":1975,"src":1976},"演示视频","\u002Fb\u002Fmetool\u002Feditor-demo_edited_compressed.mp4",[16,1978,1979],{},"不需要安装，不限平台，打开网页就能用。操作逻辑不需要重新学，⌘B 分割、拖拽修剪、时间线多片段管理，和剪映一模一样。",[16,1981,1982,1983],{},"核心差异点只有一个：",[26,1984,1985],{},"动态聚焦是一等公民。",[16,1987,1988],{},"在剪映或 iMovie 里，如果你想做类似的效果，需要手动打关键帧、调缩放参数、算坐标位置。能做，但流程很长。在这个编辑器里，按 Z 键，在预览画面上框选一个区域，就完成了。视频会以 ease-in-out 动画自动放大到那个区域，停留设定时间后平滑缩回。",[11,1990,1991],{"id":1991},"动态聚焦怎么用",[16,1993,1994],{},"具体的操作流程是这样的：",[33,1996,1997,2000,2003,2006],{},[36,1998,1999],{},"上传一段录屏视频（MP4\u002FMOV\u002FM4V，200MB 以内）",[36,2001,2002],{},"在时间线上定位到需要聚焦的时间点",[36,2004,2005],{},"按 Z 键，在预览画面上框选关键操作区域",[36,2007,2008],{},"视频就会在那个时间点自动放大到框选区域",[16,2010,2011],{},"每个 Zoom 的进入和退出都有过渡动画，默认 1 秒，可以调。如果片段时长不够，系统会自动适配过渡参数，不会出现动画卡顿的情况。",[16,2013,2014],{},"在时间线上，Zoom 关键帧是可以直接拖拽的，调整位置和时长都很直观。",[16,2016,2017,2020],{},[26,2018,2019],{},"这个功能让录屏视频从\"裸录屏\"变成\"有引导的专业演示\"。"," 观众不需要自己找重点，画面会自动带着他们看。",[11,2022,2023],{"id":2023},"不只是动态聚焦",[16,2025,2026],{},"既然做了编辑器，剪辑的基本功能也不能少。",[16,2028,2029,2032,2033,2036,2037,1243],{},[26,2030,2031],{},"时间线剪辑","完全对标剪映的操作方式：播放头定位 → ⌘B 分割 → 拖拽修剪头尾 → 拖拽重排序。每个片段可以独立设置 ",[26,2034,2035],{},"0.25x 到 4x 的变速","（慢放关键步骤、快进重复操作），以及 ",[26,2038,2039],{},"0 到 200% 的音量调节",[16,2041,2042,2045,2046,2049],{},[26,2043,2044],{},"视觉效果","是另一个加分项。准备了 ",[26,2047,2048],{},"16 款 macOS 风格壁纸","作为背景（深空紫、日落、海洋蓝、极光绿等），加上渐变和纯色选项。圆角、阴影强度、内边距、背景模糊都可以调。录屏画面套上这些效果，瞬间从\"截屏录像\"变成\"产品宣传片\"的质感。",[16,2051,2052,2053,2056],{},"还做了",[26,2054,2055],{},"编辑进度持久化","。所有编辑状态自动保存到 IndexedDB，下次上传同一个视频，片段分割、Zoom 关键帧、变速、音量、样式配置全部恢复。不用担心浏览器关了就白干了。",[11,2058,2060],{"id":2059},"导出浏览器也能做","导出：浏览器也能做",[16,2062,2063],{},"导出是我最担心的环节。视频编码在浏览器里跑，性能够吗？",[16,2065,2066,2067,2070],{},"答案是够的。用了浏览器原生的 ",[26,2068,2069],{},"WebCodecs API","，H.264 视频编码 + AAC 音频编码，GPU 加速。支持原始分辨率、1080p、720p、480p 多档输出。最关键的是，动态聚焦效果、变速、音量调节、视觉样式，在导出的视频里全部完整保留。",[16,2072,2073],{},"不需要上传到服务器，所有处理都在本地完成。",[11,2075,2076],{"id":2076},"和其他工具的定位区别",[16,2078,2079],{},"市面上做录屏和编辑的工具不少，但定位各有不同。",[16,2081,2082,2085,2086,2089,2090,2093],{},[26,2083,2084],{},"Screen Studio"," 是 macOS 上的标杆，月费 $29，录屏+编辑一体化，动画效果丰富。但它是付费的、macOS 专属的。",[26,2087,2088],{},"OpenScreen"," 是开源替代品，免费但需要下载 Electron 应用，操作方式自成一套。",[26,2091,2092],{},"Cap"," 是开源 Loom 替代品，核心是录屏+分享，编辑功能比较基础。",[16,2095,2096,2097,2101,2102,2105],{},"metool 的 ",[99,2098,2100],{"href":1969,"rel":2099,"target":1390},[103],"录屏编辑器"," 不做录屏，",[26,2103,2104],{},"只做录屏的后期编辑","。定位很窄，但在这个窄赛道上做得更深：动态聚焦是一等公民、操作习惯对标主流编辑器、16 款壁纸背景一键配置、变速和音量精细控制、纯浏览器零安装。",[16,2107,2108],{},"对于 3 到 15 分钟的录屏视频后期，这个工具比全功能编辑器快得多。",[11,2110,2112],{"id":2111},"自己用的工具做起来最有底气","自己用的工具，做起来最有底气",[16,2114,2115,2116],{},"回头看 metool 上做过的所有工具，",[26,2117,2118],{},"自己是重度用户的工具，做起来方向感最强。",[16,2120,2121],{},"公众号 Markdown 转换是这样，音频编辑器是这样，这个录屏编辑器也是这样。需求不是调研来的，是自己用的时候觉得\"这里不对\"然后去解决的。",[16,2123,2124],{},"OpenScreen 的操作逻辑让我每次都要\"切换脑子\"，这不是一个产品评测意义上的缺点，是我个人工作流里的真实摩擦。这种摩擦只有自己用的时候才能感受到，别人的需求文档里不会写。",[16,2126,2127],{},"接下来要做的是把这个工具和之前的 GEO 策略结合起来：在工具页底部注入详细的使用场景文章，让 AI 搜索引擎也能理解\"这是一个带动态聚焦功能的在线录屏编辑器\"。",[16,2129,2130],{},"工具和内容的结合，是 metool 现在的主要打法。",{"title":336,"searchDepth":337,"depth":337,"links":2132},[2133,2134,2135,2136,2137,2138,2139,2140],{"id":1911,"depth":340,"text":1911},{"id":1929,"depth":340,"text":1930},{"id":1959,"depth":340,"text":1959},{"id":1991,"depth":340,"text":1991},{"id":2023,"depth":340,"text":2023},{"id":2059,"depth":340,"text":2060},{"id":2076,"depth":340,"text":2076},{"id":2111,"depth":340,"text":2112},"2026-04-06","一直在用 OpenScreen 做产品演示视频的动态聚焦，但它的操作逻辑和剪映、iMovie 差太远，每次用都得重新适应。既然痛点这么明确，不如自己做一个。于是在 metool 上做了一个纯浏览器的录屏视频编辑器，核心功能就是动态聚焦。",[2144,2147,2150,2153],{"q":2145,"a":2146},"什么是动态聚焦（Smooth Zoom）？","动态聚焦是一种录屏视频的后期编辑技术。在视频的任意时间点，画面以丝滑动画自动放大到你框选的关键操作区域，停留设定时间后平滑缩回全景。这样观众的视线会被自然引导到操作重点，不需要红框标注或语音提示'请看右上角'。",{"q":2148,"a":2149},"这个编辑器和 Screen Studio、OpenScreen 有什么区别？","Screen Studio 是 macOS 专属付费应用（月费 $29），OpenScreen 是需要下载的 Electron 桌面应用且操作方式与主流编辑器差异大。MeTool 的编辑器是纯浏览器在线工具，零安装、跨平台、完全免费，操作习惯对标剪映和 iMovie（⌘B 分割、Z 添加 Zoom、拖拽修剪）。",{"q":2151,"a":2152},"这个编辑器除了动态聚焦还有什么功能？","包括剪映式时间线剪辑（分割、修剪、重排序）、0.25x-4x 变速控制、0-200% 音量调节、16 款 macOS 风格壁纸背景、可调圆角和阴影、背景模糊、编辑进度自动保存到 IndexedDB、WebCodecs GPU 加速导出。",{"q":2154,"a":2155},"浏览器里能做视频编辑和导出吗？","可以。使用浏览器原生的 WebCodecs API 进行 H.264 视频编码和 AAC 音频编码，GPU 加速渲染。支持原始分辨率、1080p、720p、480p 导出，动态聚焦效果和视觉样式在导出中完整保留。所有处理都在本地完成，不需要上传到服务器。",{},"\u002Fbuilds\u002Fmetool\u002F2026-04-06-screen-editor",{"title":1900,"description":2142},[1971,2160,2161,2162,2163,2164,2165],"动态聚焦视频","Screen Studio 替代品","OpenScreen 替代品","在线视频编辑器","产品演示视频制作","Smooth Zoom 录屏","builds\u002Fmetool\u002F2026-04-06-screen-editor","因为 OpenScreen 的操作逻辑和主流剪辑软件差异太大，自己在 metool 上做了一个纯浏览器的录屏视频编辑器。核心功能是动态聚焦（Smooth Zoom），让录屏视频自动放大到关键操作区域，操作习惯完全对标剪映和 iMovie，零安装、跨平台、完全免费。",[380,1595],"2EFMus60db2ekLagwzCI-PSBBHGV_YfvYna5X6_hodQ",{"id":2171,"title":2172,"body":2173,"date":2368,"description":2369,"draft":347,"extension":348,"faq":2370,"meta":2383,"navigation":363,"path":2384,"project":365,"readingTime":573,"seo":2385,"seoKeywords":2386,"stem":2394,"summary":2395,"tags":2396,"updated":382,"__hash__":2397},"builds\u002Fbuilds\u002Fmetool\u002F2026-04-04-content-meets-tool.md","尝到 SEO 甜头后，我开始琢磨怎么让 AI 也能找到我",{"type":8,"value":2174,"toc":2360},[2175,2179,2182,2188,2191,2194,2200,2203,2206,2209,2212,2217,2220,2226,2229,2232,2235,2241,2244,2250,2255,2258,2261,2267,2273,2311,2317,2324,2327,2330,2333,2339,2342,2346,2349,2352,2357],[11,2176,2178],{"id":2177},"seo-见效了然后呢","SEO 见效了，然后呢",[16,2180,2181],{},"上一篇写到，metool 的日活从不到 100 一下子涨到了 300。SEO 持续优化了几个月，终于看到了正反馈。",[16,2183,2184,2185],{},"这种\"做了就有效果\"的感觉让人上头。自然而然地，我开始想下一个问题：",[26,2186,2187],{},"还有什么增长渠道是我没覆盖到的？",[16,2189,2190],{},"答案几乎是立刻浮现的：AI 搜索引擎。",[16,2192,2193],{},"越来越多的人不再打开 Google 输入关键词了。他们直接问 ChatGPT、Perplexity、Google AI Overview。AI 直接给答案，用户甚至不需要点进任何网站。",[16,2195,2196,2197],{},"我自己就是这样。日常遇到问题，第一反应已经不是 Google，而是问 AI。那反过来想，",[26,2198,2199],{},"如果我的工具不能出现在 AI 的回答里，就等于在一个越来越大的流量入口前隐身了。",[11,2201,2202],{"id":2202},"纯工具页的致命问题",[16,2204,2205],{},"想象一下 AI 搜索引擎在抓取 metool 的一个工具页。",[16,2207,2208],{},"页面上有什么？一个标题、几个按钮、一个上传区域、一些交互控件。对人类来说，一眼就知道这是个图片压缩工具。但对 LLM 来说，页面上几乎没有可供\"理解\"的文本内容。",[16,2210,2211],{},"当用户问 AI：\"有什么好用的在线图片压缩工具？\"AI 需要的是一段可引用的文字描述，而不是一堆 HTML 按钮。",[16,2213,2214],{},[26,2215,2216],{},"纯工具页，对 AI 搜索引擎来说几乎是隐形的。",[11,2218,2219],{"id":2219},"把内容和工具捆在一起",[16,2221,2222,2223],{},"解决思路很直接：",[26,2224,2225],{},"给每个工具页都写一篇文章。",[16,2227,2228],{},"不是单独写一个博客页面，而是直接把文章注入到工具页的底部。用户打开页面，首屏还是工具本身，交互区在最上面，不影响使用。但如果用户想了解更多，比如\"这个工具支持哪些格式\"\"压缩算法是怎么回事\"\"和其他工具比有什么区别\"，往下滑就能找到。",[16,2230,2231],{},"同时，当 AI 搜索引擎抓取这个页面时，它不仅能看到工具的标题和按钮，还能看到一篇完整的、结构化的文章。这就给了 AI 足够的上下文去理解：\"这个页面是一个在线图片压缩工具，支持 PNG\u002FJPG\u002FWebP，无需上传到服务器，本地浏览器处理...\"",[16,2233,2234],{},"以 Word 转 PDF 这个工具页为例，改之前页面底部到\"相关工具推荐\"就结束了：",[16,2236,2237],{},[61,2238],{"alt":2239,"src":2240},"改版前：工具页底部只有 FAQ 和相关推荐，没有正文内容","\u002Fb\u002Fmetool\u002F2026-04-04_before_insert_article.jpeg",[16,2242,2243],{},"改之后，FAQ 和相关推荐下面多了一整篇文章，介绍这个工具的使用场景、核心优势、技术原理：",[16,2245,2246],{},[61,2247],{"alt":2248,"src":2249},"改版后：工具页底部注入了一篇完整的 GEO 文章","\u002Fb\u002Fmetool\u002F2026-04-04_after_insert_article.jpeg",[16,2251,2252],{},[26,2253,2254],{},"一个页面，同时服务两类读者：人类用户和 AI 模型。",[11,2256,2257],{"id":2257},"重新设计页面结构",[16,2259,2260],{},"为了让工具和内容自然共存，我和 AI 一起重新规划了页面结构：",[16,2262,2263],{},[61,2264],{"alt":2265,"src":2266},"工具页的新页面结构","\u002Fb\u002Fmetool\u002F2026-04-04_geo_artical_section.png",[16,2268,2269,2272],{},[26,2270,2271],{},"单工具页","从上到下分六层：",[33,2274,2275,2281,2287,2293,2299,2305],{},[36,2276,2277,2280],{},[26,2278,2279],{},"Header"," — 面包屑导航、工具标题、一句话描述",[36,2282,2283,2286],{},[26,2284,2285],{},"工具交互区"," — 首屏核心，用户打开就能直接用",[36,2288,2289,2292],{},[26,2290,2291],{},"Feature Highlights"," — 功能亮点，快速建立信任感",[36,2294,2295,2298],{},[26,2296,2297],{},"Related Tools"," — 相关工具推荐，引导用户探索更多",[36,2300,2301,2304],{},[26,2302,2303],{},"FAQ Section"," — 常见问题，覆盖用户最可能搜索的问题",[36,2306,2307,2310],{},[26,2308,2309],{},"SEO\u002FGEO 长文章"," — 给搜索引擎和 AI 模型的深度内容",[16,2312,2313,2316],{},[26,2314,2315],{},"分类集合页","也类似，在工具卡片网格下面加了分类级的 FAQ 和介绍文章。",[16,2318,2319,2320,2323],{},"关键设计原则是：",[26,2321,2322],{},"工具功能在上，内容在下，互不干扰。"," 对着急用工具的人，首屏就是交互区；对想深入了解的人，向下滑就有完整信息；对 AI 爬虫，整个页面都是可理解的结构化内容。",[11,2325,2326],{"id":2326},"为什么我觉得这个方向很重要",[16,2328,2329],{},"这不只是一个 SEO 技巧，而是一个对未来的判断。",[16,2331,2332],{},"传统搜索引擎的逻辑是：用户搜关键词 → 看到结果列表 → 点进网站。在这个模式里，你只需要排名靠前就行。",[16,2334,2335,2336],{},"AI 问答的逻辑完全不同：用户提问 → AI 综合多个来源生成答案 → 可能附上引用链接。在这个模式里，",[26,2337,2338],{},"你的内容需要足够好、足够结构化，才能被 AI \"选中\"作为答案来源。",[16,2340,2341],{},"一个只有按钮和交互控件的工具页，在 AI 问答的世界里是不存在的。但一个工具页加上一篇高质量文章，就有可能在用户问\"best online audio editor\"的时候被 AI 引用。",[11,2343,2345],{"id":2344},"geo-的实验继续","GEO 的实验继续",[16,2347,2348],{},"从之前加 llms.txt、FAQ Schema、HowTo 结构化数据，到现在给每个工具页注入长文章，metool 一直在做 GEO（Generative Engine Optimization）的实验。",[16,2350,2351],{},"这些尝试能不能带来效果，还需要时间验证。但逻辑链条是清晰的：",[16,2353,2354],{},[26,2355,2356],{},"更多可被 AI 理解的内容 → AI 搜索引擎更容易引用 → 在 AI 问答时代获得更多曝光",[16,2358,2359],{},"传统 SEO 让你在 Google 结果页出现，GEO 让你在 AI 的回答里出现。两条路都得走。",{"title":336,"searchDepth":337,"depth":337,"links":2361},[2362,2363,2364,2365,2366,2367],{"id":2177,"depth":340,"text":2178},{"id":2202,"depth":340,"text":2202},{"id":2219,"depth":340,"text":2219},{"id":2257,"depth":340,"text":2257},{"id":2326,"depth":340,"text":2326},{"id":2344,"depth":340,"text":2345},"2026-04-04","用户量涨了三倍，SEO 是见效了。但我意识到光靠 Google 排名不够，还得让 ChatGPT、Perplexity 这些 AI 搜索引擎也能推荐你。问题是纯工具页对 AI 几乎是隐形的。于是我在每个工具页底部注入了一篇文章，让工具和内容捆绑。",[2371,2374,2377,2380],{"q":2372,"a":2373},"为什么要在工具页里写文章？","纯工具页几乎没有文本内容，LLM 抓取后无法理解这个页面是做什么的。当用户问 AI'有什么在线工具可以压缩图片'时，AI 没有足够的文本信息来引用你的工具页。在工具页注入一篇文章，等于给 AI 搜索引擎提供了可引用的内容。",{"q":2375,"a":2376},"这对用户体验有影响吗？","文章放在页面底部，工具交互区仍然在首屏。用户打开页面就能直接使用工具，不受影响。但如果用户想了解更多（比如使用技巧、格式对比、常见问题），向下滑就能找到。这种'工具在上、内容在下'的布局同时服务了两类需求。",{"q":2378,"a":2379},"什么是 GEO（Generative Engine Optimization）？","GEO 是针对 AI 搜索引擎（ChatGPT、Perplexity、Google AI Overview 等）的优化策略。传统 SEO 优化的是 Google 排名，GEO 优化的是'AI 回答问题时是否引用你的内容'。核心手段包括：提供结构化的高质量文本、FAQ、使用步骤说明、llms.txt 等，让 LLM 更容易理解和引用你的页面。",{"q":2381,"a":2382},"工具页的新页面结构是怎样的？","单工具页从上到下分六层：Header（面包屑\u002F标题\u002F描述）、工具交互区（首屏核心）、Feature Highlights（功能亮点信任信号）、Related Tools（相关工具推荐）、FAQ Section（常见问题）、SEO\u002FGEO 长文章（给搜索引擎和 AI 模型）。分类集合页则是：Header、工具卡片网格、FAQ、分类级介绍文章。",{},"\u002Fbuilds\u002Fmetool\u002F2026-04-04-content-meets-tool",{"title":2172,"description":2369},[2387,2388,2389,2390,2391,2392,2393],"GEO 优化策略","AI 搜索引擎优化","工具页内容注入","LLM 检索增强","Generative Engine Optimization","工具站内容策略","AI 问答时代 SEO","builds\u002Fmetool\u002F2026-04-04-content-meets-tool","SEO 见效、用户涨了三倍后，开始琢磨下一个增长渠道：AI 搜索引擎。发现纯工具页对 LLM 几乎是隐形的，没有文本内容就没有检索有效性。于是在每个工具页底部注入了长文章，让工具和内容深度捆绑，同时服务人类用户和 AI 模型。",[380,381],"4m_V9B7pBnSr7zFPgd5BFaVEP2UB1HjkdSvteBao61Q",{"id":2399,"title":2400,"body":2401,"date":2607,"description":2608,"draft":347,"extension":348,"faq":2609,"meta":2622,"navigation":363,"path":2623,"project":365,"readingTime":573,"seo":2624,"seoKeywords":2625,"stem":2632,"summary":2633,"tags":2634,"updated":382,"__hash__":2635},"builds\u002Fbuilds\u002Fmetool\u002F2026-04-03-user-growth-and-quality.md","用户突然变多了，我慌了",{"type":8,"value":2402,"toc":2599},[2403,2406,2409,2415,2418,2421,2427,2431,2434,2437,2443,2446,2452,2455,2458,2461,2467,2470,2502,2508,2512,2515,2518,2522,2527,2530,2533,2536,2542,2545,2551,2557,2563,2566,2570,2573,2580,2586,2589,2596],[11,2404,2405],{"id":2405},"数据开始动了",[16,2407,2408],{},"打开 Google Analytics，我差点没反应过来。",[16,2410,2411],{},[61,2412],{"alt":2413,"src":2414},"metool 活跃用户增长趋势","\u002Fb\u002Fmetool\u002Fuser-boot.png",[16,2416,2417],{},"过去 28 天，活跃用户 880，涨了 67.9%。新用户 818，涨了 66.3%。但最让我兴奋的是那条曲线的尾巴：最近两天，日活跃用户从不到 100 一下子拉到了 300 左右。",[16,2419,2420],{},"前几篇文章一直在讲 SEO 优化、数据驱动、扩展 3D 品类。说实话，做这些事的时候心里是没底的，因为 SEO 是一个滞后反馈的游戏，你做了优化，可能要等几周甚至几个月才能看到效果。",[16,2422,2423,2424],{},"现在数据给了一个正反馈：",[26,2425,2426],{},"方向是对的。",[11,2428,2430],{"id":2429},"兴奋了三秒然后开始焦虑","兴奋了三秒，然后开始焦虑",[16,2432,2433],{},"高兴了一会儿之后，一个新的担忧浮上来。",[16,2435,2436],{},"这大半年来，我的策略一直是\"快速上线\"。借助 AI Coding 的速度，很多工具从想法到上线只用了一两个小时。几十个工具就是这么铺出来的。",[16,2438,2439,2440],{},"但\"快速上线\"的代价是：",[26,2441,2442],{},"很多工具没有经过认真测试。",[16,2444,2445],{},"用户少的时候，问题不明显。反正也没几个人用，有 bug 也没人发现。但现在日活 300 了，如果用户点进来发现工具不好用、功能太单薄、甚至有 bug，第一印象就毁了。",[16,2447,2448,2449,1243],{},"做工具站最怕的不是没人来，而是",[26,2450,2451],{},"人来了，用了一次，再也不来了",[11,2453,2454],{"id":2454},"从最热门的页面开始",[16,2456,2457],{},"焦虑归焦虑，解决问题还是得靠数据。",[16,2459,2460],{},"打开 Google Analytics 的页面报告，看昨天哪些工具页面访问量最高：",[16,2462,2463],{},[61,2464],{"alt":2465,"src":2466},"昨日访问量 Top 5 的工具页面","\u002Fb\u002Fmetool\u002F20260403-top-tools.png",[16,2468,2469],{},"排名很清晰：",[33,2471,2472,2478,2484,2490,2496],{},[36,2473,2474,2477],{},[26,2475,2476],{},"3D 模型格式转换"," — 92 次浏览，79 个活跃用户",[36,2479,2480,2483],{},[26,2481,2482],{},"音频编辑器"," — 36 次浏览，29 个活跃用户",[36,2485,2486,2489],{},[26,2487,2488],{},"图片压缩"," — 33 次浏览，20 个活跃用户",[36,2491,2492,2495],{},[26,2493,2494],{},"JSON 格式化"," — 26 次浏览，21 个活跃用户",[36,2497,2498,2501],{},[26,2499,2500],{},"Markdown 转换器"," — 23 次浏览，20 个活跃用户",[16,2503,2504,2505],{},"逻辑很简单：",[26,2506,2507],{},"用户最多的地方，最值得先修。",[11,2509,2511],{"id":2510},"_3d-格式转换意料之中的第一名","3D 格式转换：意料之中的第一名",[16,2513,2514],{},"3D 模型格式转换排第一，不意外。上一篇文章里分析过，3D 工具是 metool 唯一有自然搜索流量的品类。这次用户增长，3D 工具应该贡献了不少。",[16,2516,2517],{},"我把这个工具从头到尾跑了一遍，测试了各种格式之间的互转。修复了几个边界情况的问题，确保核心流程是通的。",[11,2519,2521],{"id":2520},"音频编辑器老工具的新问题","音频编辑器：老工具的新问题",[16,2523,2524,2525,1243],{},"让我真正停下来思考的是排第二的",[26,2526,2482],{},[16,2528,2529],{},"这个工具是很久之前做的，当时只做了最基本的功能：上传音频、简单裁剪、导出。能用，但仅此而已。",[16,2531,2532],{},"29 个活跃用户，对一个功能单薄的工具来说，其实不少了。这说明\"在线音频编辑\"这个需求是真实存在的。但如果用户进来发现只能做简单裁剪，大概率会失望离开。",[16,2534,2535],{},"我和 AI 做了一轮对话，梳理了音频编辑器真正需要的功能：",[16,2537,2538],{},[61,2539],{"alt":2540,"src":2541},"和 AI 一起规划音频编辑器的功能增强","\u002Fb\u002Fmetool\u002F20260403-audio-editor-plan.png",[16,2543,2544],{},"梳理下来，功能可以分成三个梯队：",[16,2546,2547,2550],{},[26,2548,2549],{},"第一梯队，高频刚需","：淡入淡出（避免裁剪后的爆音）、MP3\u002FOGG 导出（不要只能导出巨大的 WAV）、音量调节、键盘快捷键、精确时间输入。这些不是\"加分项\"，而是\"没有就不好用\"。",[16,2552,2553,2556],{},[26,2554,2555],{},"第二梯队，差异化竞争力","：静音检测自动裁切（播客和录课用户的刚需）、片段边界拖拽调整、片段分割、变速播放。这些功能在大多数在线音频编辑器上都没有，做出来就是竞争力。",[16,2558,2559,2562],{},[26,2560,2561],{},"第三梯队，锦上添花","：波形\u002F频谱图切换、简易降噪、片段重叠检测、项目保存恢复。",[16,2564,2565],{},"思路很清楚：先把第一梯队做完，让工具从\"能用\"变成\"好用\"。",[11,2567,2569],{"id":2568},"从快速上线到让人用得住","从\"快速上线\"到\"让人用得住\"",[16,2571,2572],{},"回头看，这其实是一个自然的阶段切换。",[16,2574,2575,2576,2579],{},"前面大半年，核心命题是",[26,2577,2578],{},"覆盖面","：做更多工具、覆盖更多品类、占据更多搜索入口。速度是第一优先级。",[16,2581,2582,2583,1243],{},"但当用户真的开始来了，核心命题就变了：",[26,2584,2585],{},"质量",[16,2587,2588],{},"一个工具好不好，不是我自己觉得好就行，而是用户用了之后愿不愿意再来。覆盖面解决的是\"让人发现你\"，质量解决的是\"让人留下来\"。",[16,2590,2591,2592,2595],{},"现在的策略是：",[26,2593,2594],{},"用数据找到用户最常用的工具，集中精力把它们做到真正好用。"," 不再追求工具数量的增长，而是把已有工具的深度做上去。",[16,2597,2598],{},"先从 3D 格式转换和音频编辑器开始。",{"title":336,"searchDepth":337,"depth":337,"links":2600},[2601,2602,2603,2604,2605,2606],{"id":2405,"depth":340,"text":2405},{"id":2429,"depth":340,"text":2430},{"id":2454,"depth":340,"text":2454},{"id":2510,"depth":340,"text":2511},{"id":2520,"depth":340,"text":2521},{"id":2568,"depth":340,"text":2569},"2026-04-03","SEO 持续优化后，metool 的活跃用户从日均不到 100 涨到了 300。兴奋之后是焦虑：很多工具没经过认真测试，用户真的能用吗？我决定从访问量最高的页面开始，逐个把质量关补上。",[2610,2613,2616,2619],{"q":2611,"a":2612},"metool 的用户增长是怎么实现的？","主要靠持续的 SEO 优化：默认语言切英文覆盖国际用户、全站加 FAQ 和 HowTo 结构化数据、基于搜索数据扩展 3D 工具品类、提交 IndexNow 加速收录。没有投广告，纯粹靠搜索引擎的自然流量增长。",{"q":2614,"a":2615},"用户变多后为什么会焦虑？","因为之前的策略是'快速上线'，借助 AI Coding 的速度，很多工具从开发到上线只用了一两个小时，没有做充分的功能测试。用户少的时候问题不明显，用户多了之后，功能不完善或存在 bug 会直接影响口碑和留存。",{"q":2617,"a":2618},"怎么决定优先测试和优化哪些工具？","看 Google Analytics 的页面浏览数据。昨天访问量最高的五个工具页面是：3D 模型格式转换（92 次浏览）、音频编辑器（36 次）、图片压缩（33 次）、JSON 格式化（26 次）、Markdown 转换器（23 次）。优先从访问量最高的开始测试和优化。",{"q":2620,"a":2621},"音频编辑器打算增强哪些功能？","分三个优先级：第一梯队是高频刚需（淡入淡出、MP3\u002FOGG 导出、音量调节、键盘快捷键）；第二梯队是差异化竞争力（静音检测自动裁切、片段边界拖拽调整、变速播放）；第三梯队是锦上添花（波形\u002F频谱图切换、简易降噪、项目保存恢复）。",{},"\u002Fbuilds\u002Fmetool\u002F2026-04-03-user-growth-and-quality",{"title":2400,"description":2608},[2626,2627,2628,2629,2630,1892,2631],"工具站用户增长","产品质量与用户体验","数据驱动功能优化","在线音频编辑器功能规划","独立开发产品测试","工具站功能迭代优先级","builds\u002Fmetool\u002F2026-04-03-user-growth-and-quality","metool 的 SEO 优化开始见效，活跃用户从日均不到 100 涨到 300。但用户变多带来了新的焦虑：很多工具是快速上线的，没有经过认真测试。通过 Google Analytics 找到访问量最高的工具页面，优先测试和增强 3D 模型格式转换和音频编辑器，从'快速上线'转向'让人用得住'。",[380,1595],"BAltcFwRZ4So0Xjk-p8jOA2QfMGxN9df1AzCgd_7XrI",{"id":2637,"title":2638,"body":2639,"date":2946,"description":2947,"draft":347,"extension":348,"faq":2948,"meta":2961,"navigation":363,"path":2962,"project":365,"readingTime":366,"seo":2963,"seoKeywords":2964,"stem":2973,"summary":2974,"tags":2975,"updated":382,"__hash__":2976},"builds\u002Fbuilds\u002Fmetool\u002F2026-04-01-data-driven-building.md","接入 Google Search Console，用搜索数据决定下一步做什么",{"type":8,"value":2640,"toc":2936},[2641,2644,2647,2650,2656,2659,2662,2665,2668,2682,2685,2689,2692,2712,2718,2721,2724,2727,2730,2734,2737,2740,2772,2778,2781,2785,2788,2791,2834,2837,2843,2849,2852,2855,2858,2861,2892,2895,2898,2901,2927,2933],[11,2642,2643],{"id":2643},"从搜索数据开始",[16,2645,2646],{},"上一篇聊了 URL 迁移导致检索量断崖式下跌。跌完之后呢？等恢复的同时，我开始认真看数据。",[16,2648,2649],{},"把 Google Search Console 的搜索词数据拉出来，终于看到了用户是怎么找到 metool 的：",[16,2651,2652],{},[61,2653],{"alt":2654,"src":2655},"Google Search Console 搜索词数据","\u002Fb\u002Fmetool\u002Fgoogle-search-queries.png",[16,2657,2658],{},"这张图里藏了很多信息。",[11,2660,2661],{"id":2661},"品牌词占主导",[16,2663,2664],{},"前四条搜索词全是品牌词的变体：me tool、metool、me tools、metools。加起来 49 次点击、1273 次展现。",[16,2666,2667],{},"这说明两件事：",[33,2669,2670,2676],{},[36,2671,2672,2675],{},[26,2673,2674],{},"目前大部分用户是\"知道 metool 才来的\"","，而不是搜某个具体需求然后发现了 metool。换句话说，自然搜索带来的新用户还很少。",[36,2677,2678,2681],{},[26,2679,2680],{},"品牌词的点击率不高","。metool 这个词 743 次展现只有 19 次点击，说明搜索结果页上的标题和描述还不够吸引人，或者排名位置不够靠前。",[16,2683,2684],{},"品牌搜索是基本盘，但不能只靠基本盘。要增长，必须让非品牌搜索也能带来流量。",[11,2686,2688],{"id":2687},"_3d-查看器是唯一的自然流量信号","3D 查看器是唯一的自然流量信号",[16,2690,2691],{},"往下看，终于看到了非品牌词：",[143,2693,2694,2700,2706],{},[36,2695,2696,2699],{},[26,2697,2698],{},"glb viewer"," — 1 次点击，97 次展现",[36,2701,2702,2705],{},[26,2703,2704],{},"glb viewer online"," — 1 次点击，20 次展现",[36,2707,2708,2711],{},[26,2709,2710],{},"gltf viewer online"," — 1 次点击，14 次展现",[16,2713,2714,2715],{},"点击量虽然只有个位数，但展现量说明了问题：",[26,2716,2717],{},"有人在搜这些词，而且 Google 认为 metool 的页面和这些搜索词相关。",[16,2719,2720],{},"97 次展现意味着 Google 已经把 metool 的 3D 查看器页面展示给了将近 100 个搜索用户。只是排名可能还不够高，用户没有点进来。",[16,2722,2723],{},"这是一个信号：3D 在线查看器是一个有真实需求的品类，而且 metool 已经有了初步的搜索基础。",[11,2725,2726],{"id":2726},"游戏也有微弱信号",[16,2728,2729],{},"最后两条：五子棋ai（11 次展现）、围棋在线（8 次展现）。量很小，但说明游戏品类也有一些自然搜索曝光。不过游戏市场的竞争格局和工具市场完全不同，暂时不作为重点。",[11,2731,2733],{"id":2732},"和-ai-一起做用户调研","和 AI 一起做用户调研",[16,2735,2736],{},"光看搜索词还不够。搜索「glb viewer」的人到底是谁，他们真正需要什么？",[16,2738,2739],{},"我和 AI 一起做了一轮用户需求分析，拆解出了几类典型用户：",[143,2741,2742,2748,2754,2760,2766],{},[36,2743,2744,2747],{},[26,2745,2746],{},"3D 设计师","：快速预览模型效果，不想打开 Blender 或 Maya。metool 的 GLB Viewer 基本满足。",[36,2749,2750,2753],{},[26,2751,2752],{},"游戏开发者","：检查导出的模型是否正确，查看动画和材质。当前只能看，缺少模型信息面板。",[36,2755,2756,2759],{},[26,2757,2758],{},"3D 打印爱好者","：检查模型尺寸和可打印性。这部分完全没覆盖。",[36,2761,2762,2765],{},[26,2763,2764],{},"前端\u002FWeb 开发者","：预览要嵌入网页的 3D 资源，关心性能指标。也没覆盖。",[36,2767,2768,2771],{},[26,2769,2770],{},"采购和 PM","：收到 3D 资产后快速查看，不想装软件。基本满足。",[16,2773,2774,2775,1243],{},"这个分析很有价值。它告诉我两件事：第一，3D 查看器的用户群比我想象的宽得多；第二，",[26,2776,2777],{},"不同用户需要的不只是\"查看\"，还有格式转换、模型优化、信息检查这些周边能力",[16,2779,2780],{},"围绕这些需求，新的工具方向就清晰了：不同格式的查看器覆盖更多搜索入口，模型优化器和格式转换器满足深层需求。每个新页面都是一个独立的长尾关键词入口。",[11,2782,2784],{"id":2783},"用数据做决策一口气强化整个-3d-品类","用数据做决策：一口气强化整个 3D 品类",[16,2786,2787],{},"不是只加一个工具，而是把整个 3D 品类做厚。",[16,2789,2790],{},"metool 之前只有 GLB\u002FglTF Viewer、STL Viewer 和 Text to 3D 三个 3D 相关工具。这次基于数据信号和用户调研，一口气补上了四个：",[143,2792,2793,2803,2813,2823],{},[36,2794,2795,2802],{},[26,2796,2797],{},[99,2798,2801],{"href":2799,"rel":2800,"target":1390},"https:\u002F\u002Fmetool.online\u002F3d\u002FfbxViewer\u002F",[103],"FBX Viewer"," — 游戏开发和动画领域的主流格式，覆盖 fbx viewer online、fbx file viewer 等搜索词",[36,2804,2805,2812],{},[26,2806,2807],{},[99,2808,2811],{"href":2809,"rel":2810,"target":1390},"https:\u002F\u002Fmetool.online\u002F3d\u002FusdzViewer\u002F",[103],"USDZ\u002FUSD Viewer"," — Apple AR 生态的标准格式，iOS 开发者和设计师的刚需",[36,2814,2815,2822],{},[26,2816,2817],{},[99,2818,2821],{"href":2819,"rel":2820,"target":1390},"https:\u002F\u002Fmetool.online\u002F3d\u002FmodelOptimizer\u002F",[103],"3D Model Optimizer"," — 在线减面、压缩贴图，覆盖 reduce 3d model size、optimize glb file 等搜索词",[36,2824,2825,2833],{},[26,2826,2827,2828],{},"增强了 ",[99,2829,2832],{"href":2830,"rel":2831,"target":1390},"https:\u002F\u002Fmetool.online\u002F3d\u002FmodelConvert\u002F",[103],"3D Model Format Converter"," — 支持 STL、OBJ、GLB、glTF、PLY、FBX、DAE 等格式互转",[16,2835,2836],{},"加上原有的三个，metool 的 3D 工具品类从 3 个扩展到了 7 个。",[16,2838,2839],{},[61,2840],{"alt":2841,"src":2842},"metool 的 3D 工具矩阵","\u002Fb\u002Fmetool\u002F3d-tools-matrix.png",[16,2844,2845,2846],{},"这就是数据驱动和凭感觉做的区别：",[26,2847,2848],{},"不是\"我觉得某个工具有用所以做\"，而是\"数据显示 3D 查看器有需求 → 调研发现用户群比想象的宽 → 围绕整个品类做厚\"。",[11,2850,2851],{"id":2851},"一个实验田",[16,2853,2854],{},"我想把 metool 做成数据驱动型构建的实验田。",[16,2856,2857],{},"之前做了大半年工具，模式是\"有什么想法就做什么\"。工具做了几十个，但哪些有人用、哪些没人用，心里没数。",[16,2859,2860],{},"现在的模式是一个循环：",[33,2862,2863,2869,2875,2881,2887],{},[36,2864,2865,2868],{},[26,2866,2867],{},"收集数据"," — Google Search Console 看搜索词，Google Analytics 看用户行为",[36,2870,2871,2874],{},[26,2872,2873],{},"分析信号"," — 哪些品类有自然需求，哪些搜索词有潜力",[36,2876,2877,2880],{},[26,2878,2879],{},"做出决策"," — 优先做数据验证过的方向",[36,2882,2883,2886],{},[26,2884,2885],{},"上线验证"," — 看新工具的搜索表现",[36,2888,2889],{},[26,2890,2891],{},"回到第一步",[16,2893,2894],{},"这个循环听起来简单，但和之前的工作方式完全不同。之前是\"做完就忘\"，现在是\"做完还要看数据反馈\"。",[11,2896,2897],{"id":2897},"下一步",[16,2899,2900],{},"3D 品类已经铺开了，接下来要做的是深耕和验证：",[143,2902,2903,2909,2915,2921],{},[36,2904,2905,2908],{},[26,2906,2907],{},"增强现有查看器的深度功能","：模型信息面板（顶点数、面数、材质列表）、截图导出、环境贴图切换、URL 直接加载。这些功能能提升用户停留时间和回访率。",[36,2910,2911,2914],{},[26,2912,2913],{},"优化品牌词的点击率","：743 次展现只有 19 次点击，搜索结果的标题和描述需要更有吸引力。",[36,2916,2917,2920],{},[26,2918,2919],{},"追踪新工具的搜索表现","：这批 3D 工具上线后，观察 Google 何时开始收录、展现量和点击量的变化趋势。这是验证\"数据驱动\"循环是否有效的关键一步。",[36,2922,2923,2926],{},[26,2924,2925],{},"观察 URL 迁移后的恢复速度","：上次切默认语言导致索引断崖，需要持续追踪。",[16,2928,2929,2930],{},"长期来看，我想验证一个假设：",[26,2931,2932],{},"一个工具站，能不能完全靠数据驱动来决定做什么、优化什么、放弃什么。",[16,2934,2935],{},"不靠直觉，不靠\"我觉得\"，只靠数据说话。metool 就是这个实验。",{"title":336,"searchDepth":337,"depth":337,"links":2937},[2938,2939,2940,2941,2942,2943,2944,2945],{"id":2643,"depth":340,"text":2643},{"id":2661,"depth":340,"text":2661},{"id":2687,"depth":340,"text":2688},{"id":2726,"depth":340,"text":2726},{"id":2732,"depth":340,"text":2733},{"id":2783,"depth":340,"text":2784},{"id":2851,"depth":340,"text":2851},{"id":2897,"depth":340,"text":2897},"2026-04-01","不再凭感觉做工具了。把 Google Search Console 接入工作流，看到真实的搜索词后发现 3D 查看器有自然流量潜力。和 AI 一起做了用户调研，一口气补上了 FBX Viewer、USDZ Viewer、3D 模型优化器。这是 metool 转向数据驱动型构建的第一步。",[2949,2952,2955,2958],{"q":2950,"a":2951},"为什么要用 Google Search Console 来指导工具开发？","Google Search Console 能看到用户是通过什么搜索词找到你的网站的，包括展现量和点击量。这比 Google Analytics 更直接地反映用户需求——用户在搜什么，说明他们需要什么。用这些数据来决定下一步做什么工具，比凭感觉靠谱得多。",{"q":2953,"a":2954},"搜索数据里发现了什么有价值的信号？","品牌词（metool、me tool 等）占了大部分点击，说明自然搜索带来的新用户还很少。但非品牌词中，glb viewer 有 97 次展现、gltf viewer online 有 14 次展现，说明 3D 在线查看器有真实的搜索需求，而且 Google 已经认为 metool 的页面与这些搜索词相关。",{"q":2956,"a":2957},"基于数据分析，这次做了哪些 3D 工具？","一口气做了四个新工具：FBX Viewer（游戏开发常用格式）、USDZ\u002FUSD Viewer（Apple AR 生态格式）、3D Model Optimizer（减面和贴图压缩）、增强了 3D Model Format Converter（支持更多格式互转）。加上原有的 GLB\u002FglTF Viewer、STL Viewer 和 Text to 3D，3D 品类从 2 个工具扩展到了 7 个。",{"q":2959,"a":2960},"什么是数据驱动型构建？","不再凭直觉决定做什么功能，而是通过搜索数据和用户行为数据发现真实需求，用 AI 辅助做深度调研，然后决定优先做什么。核心循环是：收集数据 → 分析信号 → AI 辅助调研 → 做出决策 → 上线验证 → 再看数据。metool 正在成为这种模式的实验田。",{},"\u002Fbuilds\u002Fmetool\u002F2026-04-01-data-driven-building",{"title":2638,"description":2947},[2965,2966,2967,2968,2969,2970,2971,2972],"Google Search Console 数据分析","数据驱动产品迭代","工具站搜索词分析","GLB Viewer 在线","FBX Viewer 在线工具","USDZ Viewer 在线","3D 模型优化器在线","独立开发数据驱动","builds\u002Fmetool\u002F2026-04-01-data-driven-building","通过 Google Search Console 分析 metool.online 的真实搜索数据，发现 3D 查看器是唯一有自然搜索流量的工具品类。和 AI 一起做了用户需求调研后，一口气补上了 FBX Viewer、USDZ\u002FUSD Viewer、3D Model Optimizer、增强了格式转换器，把 3D 工具从 2 个扩展到 7 个。这是从'凭感觉做工具'到'用数据决定做什么'的转变。",[380,1595],"Pc5ArqDao5dfNG0TZmiUUo3Vq_NoOgAAuJWYzvhlGug",{"id":2978,"title":2979,"body":2980,"date":3116,"description":3117,"draft":347,"extension":348,"faq":3118,"meta":3131,"navigation":363,"path":3132,"project":365,"readingTime":573,"seo":3133,"seoKeywords":3134,"stem":3142,"summary":3143,"tags":3144,"updated":382,"__hash__":3145},"builds\u002Fbuilds\u002Fmetool\u002F2026-03-31-url-restructure-cost.md","切换默认语言后，检索量断崖式下跌",{"type":8,"value":2981,"toc":3109},[2982,2985,2988,2994,2997,3000,3003,3009,3012,3015,3022,3042,3047,3050,3053,3056,3059,3062,3065,3068,3088,3091,3094,3097,3100,3103,3106],[11,2983,2984],{"id":2984},"数据说话",[16,2986,2987],{},"先看 Google Search Console 的数据：",[16,2989,2990],{},[61,2991],{"alt":2992,"src":2993},"切换 URL 路径后检索量断崖式下跌","\u002Fb\u002Fmetool\u002Findex-optimize.png",[16,2995,2996],{},"从 1 月到 3 月中旬，metool.online 的 Impressions（展现量）和 Clicks（点击量）一直在稳步增长。Impressions 从每天几十涨到了 300+，Clicks 从 0 涨到了日均 20+。",[16,2998,2999],{},"三个月的积累，一个决定，几乎归零。",[11,3001,3002],{"id":3002},"发生了什么",[16,3004,3005,3006],{},"3 月 19 日，我做了一个决定：",[26,3007,3008],{},"把 metool.online 的默认语言从中文切成英文。",[16,3010,3011],{},"原因很简单：工具站的使用场景是全球通用的。图片压缩、视频转 GIF、JSON 格式化，这些需求不分国界。英文覆盖的潜在用户群远大于中文。",[16,3013,3014],{},"但我低估了这个改动对 SEO 的冲击。",[16,3016,3017,3018,3021],{},"metool 用的是 Nuxt i18n 的 ",[73,3019,3020],{},"prefix_except_default"," 策略——默认语言不带路径前缀，其他语言带前缀。切换默认语言意味着：",[143,3023,3024,3034],{},[36,3025,3026,3027,3030,3031],{},"之前的中文页面 ",[73,3028,3029],{},"\u002Fimages\u002Fcompress\u002F"," → 变成了 ",[73,3032,3033],{},"\u002Fzh\u002Fimages\u002Fcompress\u002F",[36,3035,3036,3037,3030,3040],{},"之前的英文页面 ",[73,3038,3039],{},"\u002Fen\u002Fimages\u002Fcompress\u002F",[73,3041,3029],{},[16,3043,3044],{},[26,3045,3046],{},"全站几十个工具的 URL 全部变了。",[16,3048,3049],{},"紧接着 3 月 26 日，我又做了一轮 trailing slash 统一和 sitemap 重建。双重打击。",[11,3051,3052],{"id":3052},"代价",[16,3054,3055],{},"Google 已经索引的所有旧 URL 全部失效。搜索引擎不知道这些页面\"搬家\"了，它只看到旧 URL 返回了不同的内容（英文版），或者根本找不到了。",[16,3057,3058],{},"结果就是图表上看到的：Impressions 从日均 300+ 跌到不足 80，Clicks 从日均 20+ 跌到接近 0。",[16,3060,3061],{},"三个月的 SEO 积累，几天之内几乎清零。",[11,3063,3064],{"id":3064},"本可以做得更好",[16,3066,3067],{},"回头看，这次迁移本可以更平滑：",[143,3069,3070,3076,3082],{},[36,3071,3072,3075],{},[26,3073,3074],{},"301 重定向","：把旧 URL 301 到新 URL，告诉搜索引擎\"页面搬家了\"而不是\"页面消失了\"。SSG 静态站做 301 需要在部署层配置，当时没有做。",[36,3077,3078,3081],{},[26,3079,3080],{},"过渡期 sitemap","：新旧 URL 同时提交，用 canonical 标签指向新 URL，给搜索引擎过渡时间。",[36,3083,3084,3087],{},[26,3085,3086],{},"分步迁移","：先切语言，等索引稳定了再统一 trailing slash，避免双重打击。",[16,3089,3090],{},"这些都是标准的 URL 迁移方案，但我当时只想着\"赶紧改完\"，没有给搜索引擎留缓冲。",[11,3092,3093],{"id":3093},"为什么我认为长期是对的",[16,3095,3096],{},"短期阵痛是确定的，但我依然认为这个决定是对的。",[16,3098,3099],{},"中文互联网的工具站竞争激烈，而且中文用户获取成本高。英文作为默认语言，每一个工具页面都在面向全球用户。\"online image compressor\"的搜索量是\"在线图片压缩\"的几十倍。",[16,3101,3102],{},"按照 Google 的重新索引周期，新 URL 被完全爬取和收录通常需要 2-4 周，恢复到之前的排名水平可能需要 1-2 个月。前提是新 sitemap 已正确提交、内容质量没有下降。",[16,3104,3105],{},"现在能做的就是：确保新 sitemap 正确、补上 301 重定向、然后等待。",[16,3107,3108],{},"SEO 是一个长期游戏。有时候你必须接受短期的损失，去换一个更大的可能性。",{"title":336,"searchDepth":337,"depth":337,"links":3110},[3111,3112,3113,3114,3115],{"id":2984,"depth":340,"text":2984},{"id":3002,"depth":340,"text":3002},{"id":3052,"depth":340,"text":3052},{"id":3064,"depth":340,"text":3064},{"id":3093,"depth":340,"text":3093},"2026-03-31","为了面向国际用户把默认语言从中文切成英文，所有 URL 路径全变了。Google 索引一夜清零，三个月积累的检索量几乎归零。短期阵痛，但我认为长期是对的。",[3119,3122,3125,3128],{"q":3120,"a":3121},"为什么切换默认语言会导致检索量下跌？","Nuxt i18n 的 prefix_except_default 策略下，默认语言的页面不带语言前缀。把默认语言从中文切成英文后，原来的 \u002Fimages\u002Fcompress\u002F（中文页）变成了 \u002Fzh\u002Fimages\u002Fcompress\u002F，而 \u002Fimages\u002Fcompress\u002F 现在指向英文页。Google 已经索引的所有旧 URL 全部失效，需要重新爬取和建立索引。",{"q":3123,"a":3124},"有没有办法避免这种检索量损失？","可以通过 301 重定向将旧 URL 映射到新 URL，告诉搜索引擎页面搬家了而不是消失了。但 SSG 静态站实现 301 重定向比较复杂，需要在部署层（Nginx\u002FCloudflare）配置规则。另一个方案是在 sitemap 中同时提交新旧 URL 并标注 canonical，给搜索引擎过渡时间。",{"q":3126,"a":3127},"检索量预计多久能恢复？","根据 Google 的重新索引周期，通常需要 2-4 周让新 URL 被完全爬取和收录，1-2 个月恢复到之前的排名水平。前提是新 sitemap 已正确提交、robots.txt 没有阻拦、页面内容质量没有下降。如果做了 301 重定向，恢复速度会更快。",{"q":3129,"a":3130},"切换默认语言的长期收益是什么？","英文作为默认语言意味着全球用户访问时默认看到英文界面，搜索引擎也优先索引英文内容。工具站的使用场景（图片压缩、格式转换等）是全球通用的，英文覆盖的潜在用户群远大于中文。长期来看，国际流量的天花板比中文流量高得多。",{},"\u002Fbuilds\u002Fmetool\u002F2026-03-31-url-restructure-cost",{"title":2979,"description":3117},[3135,3136,3137,3138,3139,3140,3141],"网站 URL 迁移","Google 索引下降","默认语言切换 SEO 影响","sitemap 重建","搜索引擎重新收录","i18n URL 结构变更","独立开发 SEO 教训","builds\u002Fmetool\u002F2026-03-31-url-restructure-cost","metool.online 为面向国际用户将默认语言从中文切成英文，导致全站 URL 路径结构变更，Google 三个月积累的索引几乎归零。Impressions 从日均 300+ 跌到不足 80，Clicks 从日均 20+ 跌到接近 0。这是一次有意识的短期牺牲，押注长期的国际化收益。",[380,1595],"JiLBHivnJLiSY1PmK_E_QtuRab70pGpC0z_ZoZPpYBo",{"id":3147,"title":3148,"body":3149,"date":3249,"description":3250,"draft":347,"extension":348,"faq":3251,"meta":3264,"navigation":363,"path":3265,"project":365,"readingTime":573,"seo":3266,"seoKeywords":3267,"stem":3272,"summary":3273,"tags":3274,"updated":382,"__hash__":3275},"builds\u002Fbuilds\u002Fmetool\u002F2026-03-19-seo-geo-breakthrough.md","做了大半年流量还是很少，我决定认真做 SEO",{"type":8,"value":3150,"toc":3243},[3151,3154,3157,3160,3163,3166,3169,3175,3181,3187,3191,3194,3204,3207,3210,3224,3228,3234,3237,3240],[11,3152,3153],{"id":3153},"流量困局",[16,3155,3156],{},"metool 做了大半年，工具已经有几十个了，覆盖了图片、视频、文档、3D、开发者工具、游戏、AI Skills 等品类。",[16,3158,3159],{},"但流量一直上不去。",[16,3161,3162],{},"Google Analytics 的数据很诚实：每天的访问量很少，大部分还是自己测试产生的。工具做得再多，没人知道它存在，就等于没做。",[11,3164,3165],{"id":3165},"数据驱动的优化",[16,3167,3168],{},"这次不是凭感觉优化了。我从 Google Analytics 的数据出发，让 AI 协助分析和执行。",[16,3170,3171,3174],{},[26,3172,3173],{},"默认语言切英文","：GA 数据显示，英文搜索的流量潜力远大于中文。工具站的使用场景是全球通用的——图片压缩、格式转换这些需求不分国界。把默认语言切成英文，能覆盖更多国际用户。",[16,3176,3177,3180],{},[26,3178,3179],{},"全站 FAQ 结构化数据","：给每个工具页都加了 FAQ Schema。搜索引擎会在结果中直接展示问答内容，占据更大的面积，提升点击率。",[16,3182,3183,3186],{},[26,3184,3185],{},"HowTo 结构化数据","：把每个工具的使用步骤结构化，让搜索引擎理解\"这个工具怎么用\"。当用户搜索\"how to compress video online\"时，搜索结果里就能直接展示操作步骤。",[11,3188,3190],{"id":3189},"让-ai-搜索引擎也能找到你","让 AI 搜索引擎也能找到你",[16,3192,3193],{},"传统 SEO 优化的是 Google 排名，但 2026 年了，越来越多人通过 ChatGPT、Perplexity 这些 AI 搜索引擎找信息。",[16,3195,3196,3197,1229,3200,3203],{},"我加了 ",[26,3198,3199],{},"llms.txt",[26,3201,3202],{},"llms-full.txt","——类似 robots.txt 之于传统爬虫，它告诉 AI 搜索引擎：\"关于 metool.online，这些是最值得引用的信息。\"",[16,3205,3206],{},"文件里列出了所有工具的名称、功能描述和 URL。当用户问 AI\"有什么在线工具可以压缩图片\"的时候，AI 就有可能引用 metool。",[16,3208,3209],{},"还做了一些技术层面的统一：",[143,3211,3212,3218],{},[36,3213,3214,3217],{},[26,3215,3216],{},"Trailing slash 处理"," — 统一 URL 格式，避免搜索引擎把带斜杠和不带斜杠的 URL 当作两个页面",[36,3219,3220,3223],{},[26,3221,3222],{},"robots.txt 优化"," — 允许 AI 爬虫（GPTBot、Anthropic 等）访问",[11,3225,3227],{"id":3226},"从做工具到做增长","从\"做工具\"到\"做增长\"",[16,3229,3230,3231],{},"这一轮优化让我意识到一件事：",[26,3232,3233],{},"做产品和做增长是两件完全不同的事。",[16,3235,3236],{},"前面大半年，我一直在\"做工具\"——有需求就做，做完就上线。但\"做增长\"需要的是另一套思维：数据分析、搜索优化、内容策略。",[16,3238,3239],{},"metool 现在有了几十个工具，架构也足够成熟。下一步不是继续加工具，而是让已有的工具被更多人发现和使用。",[16,3241,3242],{},"这个故事还在继续。",{"title":336,"searchDepth":337,"depth":337,"links":3244},[3245,3246,3247,3248],{"id":3153,"depth":340,"text":3153},{"id":3165,"depth":340,"text":3165},{"id":3189,"depth":340,"text":3190},{"id":3226,"depth":340,"text":3227},"2026-03-19","metool 做了大半年，工具几十个了，但流量一直上不去。借着 AI 能力提升，用 Google Analytics 数据反馈 + AI 协助，系统性地做了一轮 SEO 和 GEO 优化。",[3252,3255,3258,3261],{"q":3253,"a":3254},"为什么默认语言要从中文切成英文？","Google Analytics 数据显示，英文搜索带来的流量潜力远大于中文。工具站的使用场景是全球通用的（图片压缩、格式转换等），英文作为默认语言能覆盖更多国际用户，中文用户可以手动切换。",{"q":3256,"a":3257},"什么是 GEO 优化？","GEO（Generative Engine Optimization）是针对 AI 搜索引擎的优化。现在越来越多人通过 ChatGPT、Perplexity 等 AI 搜索信息，如果你的网站不能被 AI 引用，就等于失去了新的流量入口。GEO 包括添加 llms.txt、结构化数据、清晰的产品描述等。",{"q":3259,"a":3260},"llms.txt 是什么？","类似 robots.txt 之于传统爬虫，llms.txt 告诉 AI 搜索引擎'关于这个网站的核心信息'。metool 的 llms.txt 列出了所有工具的名称、功能描述和 URL，让 AI 在回答用户'有什么在线工具可以...'类型的问题时能引用 metool。",{"q":3262,"a":3263},"FAQ 和 HowTo 结构化数据有什么作用？","FAQ Schema 让搜索引擎在搜索结果中直接展示常见问题和回答，占据更大的结果面积。HowTo Schema 把工具的使用步骤结构化，让搜索引擎理解每个工具的操作流程。两者都能提升搜索结果的点击率和可见性。",{},"\u002Fbuilds\u002Fmetool\u002F2026-03-19-seo-geo-breakthrough",{"title":3148,"description":3250},[3268,3269,3199,3270,3185,3271,2388],"工具站 SEO 优化","GEO 优化","FAQ Schema 结构化数据","Google Analytics 数据驱动","builds\u002Fmetool\u002F2026-03-19-seo-geo-breakthrough","metool 做了大半年流量依然很少，工具几十个但没人知道。决定借助 AI 能力，通过 Google Analytics 数据反馈系统性做 SEO\u002FGEO 优化：默认语言切英文面向国际用户、全站加 FAQ 和 HowTo 结构化数据、添加 llms.txt 让 AI 搜索引擎也能引用、统一 trailing slash 和 robots.txt。",[380,381],"HVOKaXEceQ2DIID9meIXaR9TvaR2ws7zvMyDVcU90pg",{"id":3277,"title":3278,"body":3279,"date":3510,"description":3511,"draft":347,"extension":348,"faq":3512,"meta":3525,"navigation":363,"path":3526,"project":365,"readingTime":366,"seo":3527,"seoKeywords":3528,"stem":3536,"summary":3537,"tags":3538,"updated":382,"__hash__":3539},"builds\u002Fbuilds\u002Fmetool\u002F2026-03-12-dev-tools-and-ai-skills.md","三天上线十几个开发者工具，还做了 AI Skills 板块",{"type":8,"value":3280,"toc":3504},[3281,3285,3288,3297,3304,3308,3311,3321,3324,3329,3375,3380,3418,3423,3434,3440,3444,3447,3488,3492,3498,3501],[11,3282,3284],{"id":3283},"agent-skill-的摸索","Agent Skill 的摸索",[16,3286,3287],{},"2026 年初，我花了大量时间研究 AI Agent Skill 模式——让 AI 助手通过安装技能来扩展能力。",[16,3289,3290,3291,3296],{},"在这个过程中积累了不少经验：怎么设计 Skill 的接口、怎么处理跨平台兼容性、怎么让非技术用户也能安装使用。这些经验后来也应用到了 ",[99,3292,3295],{"href":3293,"rel":3294,"target":1390},"https:\u002F\u002Fwhoamiagent.com",[103],"whoami"," 等项目中。",[16,3298,3299,3300,3303],{},"既然有了经验，不如在 metool 上做一个 ",[26,3301,3302],{},"AI Skills 展示板块","，把我做的各种 Skill 都放上来。",[11,3305,3307],{"id":3306},"三天十几个新工具","三天，十几个新工具",[16,3309,3310],{},"3 月 12 日到 3 月 18 日，可能是 metool 开发密度最高的一段时间。",[16,3312,3313,3316,3317,3320],{},[26,3314,3315],{},"先做了统一设计系统","。之前每个工具页面各写各的，风格不统一，重复代码多。这次抽象出了 ",[73,3318,3319],{},"ToolPageLayout"," 组件——新工具只需要传入标题和核心内容，布局、动画、SEO 信息、相关工具推荐都自动处理。",[16,3322,3323],{},"有了统一架构，加工具的速度就上来了：",[16,3325,3326],{},[26,3327,3328],{},"开发者工具：",[143,3330,3331,3338,3345,3353,3360,3367],{},[36,3332,3333],{},[99,3334,3337],{"href":3335,"rel":3336,"target":1390},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fdev\u002Fbase64\u002F",[103],"Base64 编解码",[36,3339,3340],{},[99,3341,3344],{"href":3342,"rel":3343,"target":1390},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fdev\u002FregexTest\u002F",[103],"正则表达式测试器",[36,3346,3347,3352],{},[99,3348,3351],{"href":3349,"rel":3350,"target":1390},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fdev\u002FhashGenerator\u002F",[103],"哈希生成器","（MD5、SHA-1、SHA-256 等）",[36,3354,3355],{},[99,3356,3359],{"href":3357,"rel":3358,"target":1390},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fdev\u002FpasswordGenerator\u002F",[103],"随机密码生成器",[36,3361,3362],{},[99,3363,3366],{"href":3364,"rel":3365,"target":1390},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fdev\u002FtextDiff\u002F",[103],"文本差异对比",[36,3368,3369,3374],{},[99,3370,3373],{"href":3371,"rel":3372,"target":1390},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fdev\u002FdataFormatConvert\u002F",[103],"数据格式转换","（JSON\u002FYAML\u002FTOML 互转）",[16,3376,3377],{},[26,3378,3379],{},"文档和媒体工具：",[143,3381,3382,3390,3397,3403,3411],{},[36,3383,3384,3389],{},[99,3385,3388],{"href":3386,"rel":3387,"target":1390},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fdocs\u002FpdfTools\u002F",[103],"PDF 工具","（预览、拆分）",[36,3391,3392],{},[99,3393,3396],{"href":3394,"rel":3395,"target":1390},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fimages\u002Fwatermark\u002F",[103],"图片水印",[36,3398,3399],{},[99,3400,2476],{"href":3401,"rel":3402,"target":1390},"https:\u002F\u002Fmetool.online\u002Fzh\u002F3d\u002FmodelConvert\u002F",[103],[36,3404,3405,3410],{},[99,3406,3409],{"href":3407,"rel":3408,"target":1390},"https:\u002F\u002Fmetool.online\u002Fzh\u002F3d\u002FtextTo3d\u002F",[103],"Text to 3D","（文字生成 3D 模型）",[36,3412,3413],{},[99,3414,3417],{"href":3415,"rel":3416,"target":1390},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fdocs\u002FweixinToMarkdown\u002F",[103],"微信文章反向转 Markdown",[16,3419,3420],{},[26,3421,3422],{},"基础组件：",[143,3424,3425,3428,3431],{},[36,3426,3427],{},"FAQ 组件（每个工具页自动展示常见问题）",[36,3429,3430],{},"Toast 通知系统",[36,3432,3433],{},"vue-json-pretty 替换自制的 JSON 查看器",[16,3435,3436],{},[61,3437],{"alt":3438,"src":3439},"AI Skills 板块","\u002Fb\u002Fmetool\u002Fskills.png",[11,3441,3443],{"id":3442},"ai-skills-板块上线","AI Skills 板块上线",[16,3445,3446],{},"同时上线了 AI Skills 展示板块，每个 Skill 有独立的介绍页面：",[143,3448,3449,3458,3468,3478],{},[36,3450,3451,3457],{},[26,3452,3453],{},[99,3454,3295],{"href":3455,"rel":3456,"target":1390},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fskills\u002Fwhoami\u002F",[103]," — 跨 AI 身份同步",[36,3459,3460,3467],{},[26,3461,3462],{},[99,3463,3466],{"href":3464,"rel":3465,"target":1390},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fskills\u002Fzhongjie\u002F",[103],"中介哥"," — AI 买房参谋",[36,3469,3470,3477],{},[26,3471,3472],{},[99,3473,3476],{"href":3474,"rel":3475,"target":1390},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fskills\u002Fidea2mvp\u002F",[103],"idea2mvp"," — 从创意到产品",[36,3479,3480,3487],{},[26,3481,3482],{},[99,3483,3486],{"href":3484,"rel":3485,"target":1390},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fskills\u002FgaImprove\u002F",[103],"GA 优化"," — Google Analytics 数据驱动优化",[11,3489,3491],{"id":3490},"ai-coding-改变了什么","AI Coding 改变了什么",[16,3493,3494,3495,1243],{},"这三天能做这么多，核心原因是 ",[26,3496,3497],{},"AI Coding",[16,3499,3500],{},"每个工具的开发周期从\"半天\"缩短到了\"一两个小时\"。我负责定需求和验收，AI 负责写代码。统一的架构加上 AI 的速度，工具的边际成本几乎为零。",[16,3502,3503],{},"这也是我在探索 Agent Skill 过程中最深的体会：AI 不只是能帮你写代码，它改变的是你做事的规模和速度。",{"title":336,"searchDepth":337,"depth":337,"links":3505},[3506,3507,3508,3509],{"id":3283,"depth":340,"text":3284},{"id":3306,"depth":340,"text":3307},{"id":3442,"depth":340,"text":3443},{"id":3490,"depth":340,"text":3491},"2026-03-12","大量摸索 Agent Skill 模式积累了经验，借 AI Coding 的速度，三天内密集上线了十几个开发者工具和 AI Skills 展示板块。",[3513,3516,3519,3522],{"q":3514,"a":3515},"三天内是怎么做到上线这么多工具的？","两个关键因素：一是 metool 的架构已经很成熟，新增工具只需写核心逻辑；二是 AI Coding 的效率极高，每个工具的开发周期从'半天'缩短到了'一两个小时'。统一的 ToolPageLayout 组件让页面布局、SEO、FAQ 都是自动化的。",{"q":3517,"a":3518},"这次上线了哪些开发者工具？","Base64 编解码、正则表达式测试器、哈希生成器（MD5\u002FSHA 等）、随机密码生成器、文本差异对比、数据格式转换（JSON\u002FYAML\u002FTOML 互转）。此外还有 PDF 工具、图片水印、3D 模型格式转换和 Text to 3D。",{"q":3520,"a":3521},"AI Skills 板块是什么？","展示我开发的 AI Agent Skills 的专区，包括 whoami（跨 AI 身份同步）、中介哥（买房参谋）、idea2mvp（创意到产品）、GA 优化（Google Analytics 数据驱动）等。每个 Skill 有独立的介绍页面，包含功能说明、安装方式和使用演示。",{"q":3523,"a":3524},"统一设计系统（ToolPageLayout）解决了什么问题？","之前每个工具页面的布局、标题区域、描述文案、SEO 信息都是各写各的，风格不统一且重复代码多。ToolPageLayout 把这些全部抽象成一个统一组件，新工具只需传入标题和内容，布局、动画、SEO、相关工具推荐都自动处理。",{},"\u002Fbuilds\u002Fmetool\u002F2026-03-12-dev-tools-and-ai-skills",{"title":3278,"description":3511},[3529,3530,3531,3532,3337,3533,3534,3535],"AI Coding 开发效率","开发者在线工具","Agent Skill","AI Skills 展示","正则表达式测试","在线密码生成器","统一设计系统","builds\u002Fmetool\u002F2026-03-12-dev-tools-and-ai-skills","大量摸索 Agent Skill 模式后积累了丰富经验，借助 AI Coding 的效率，三天内在 metool 上密集上线了十几个开发者工具（Base64、正则测试、哈希生成、密码生成、文本对比等），同时做了统一的工具页面设计系统、FAQ 组件、Toast 通知，还上线了 AI Skills 展示板块。",[380,381],"hihzr5kpiZrcsafARUi4Ir4QvNVm8xwB2k6CfqqQfew",{"id":3541,"title":3542,"body":3543,"date":3696,"description":3697,"draft":347,"extension":348,"faq":3698,"meta":3711,"navigation":363,"path":3712,"project":365,"readingTime":573,"seo":3713,"seoKeywords":3714,"stem":3722,"summary":3723,"tags":3724,"updated":382,"__hash__":3725},"builds\u002Fbuilds\u002Fmetool\u002F2026-02-10-content-creation-tools.md","用 AI 写文章，一键转成公众号和小红书格式",{"type":8,"value":3544,"toc":3690},[3545,3549,3552,3558,3561,3564,3567,3570,3576,3586,3606,3612,3620,3634,3637,3640,3666,3670,3673,3687],[11,3546,3548],{"id":3547},"ai-写作的最后一公里","AI 写作的最后一公里",[16,3550,3551],{},"2026 年初，AI 的写作能力又提升了一大截。我开始认真写公众号，用 AI 辅助产出 Markdown 格式的文章。",[16,3553,3554,3555,1243],{},"写作效率提上来了，但有一个环节特别痛苦：",[26,3556,3557],{},"从 Markdown 到公众号发布",[16,3559,3560],{},"微信公众号编辑器不支持 Markdown，也不能直接粘贴 HTML。网上有一些 Markdown 转公众号的工具，但样式太固定、兼容性问题多。每次发文章，我都要花大量时间调排版。",[16,3562,3563],{},"同样的问题在小红书上更严重——小红书是图文格式，长文要拆成多张图片卡片。",[11,3565,3566],{"id":3566},"高度定制化的转换工具",[16,3568,3569],{},"2025 年 3 月做过一个微信文章转换的雏形，但功能很粗糙。这次我重写了整个工具。",[16,3571,3572],{},[61,3573],{"alt":3574,"src":3575},"Markdown 转微信公众号文章","\u002Fb\u002Fmetool\u002Fwechat-converter.png",[16,3577,3578,3585],{},[26,3579,3580],{},[99,3581,3584],{"href":3582,"rel":3583,"target":1390},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fdocs\u002FmdToWeixinArtical\u002F",[103],"Markdown 转公众号","：",[143,3587,3588,3591,3594,3597,3600,3603],{},[36,3589,3590],{},"自定义排版风格（标题、正文、引用、代码块各有独立样式）",[36,3592,3593],{},"代码高亮渲染",[36,3595,3596],{},"嵌套列表正确缩进（微信编辑器的经典坑）",[36,3598,3599],{},"HTML 注释自动清理",[36,3601,3602],{},"图片适配（圆角、阴影、居中）",[36,3604,3605],{},"一键复制到剪贴板，粘贴到微信编辑器直接可用",[16,3607,3608],{},[61,3609],{"alt":3610,"src":3611},"Markdown 转小红书卡片","\u002Fb\u002Fmetool\u002Fxiaohongshu-converter.png",[16,3613,3614,3585],{},[26,3615,3616],{},[99,3617,3610],{"href":3618,"rel":3619,"target":1390},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fdocs\u002FmdToXiaohongshu\u002F",[103],[143,3621,3622,3625,3628,3631],{},[36,3623,3624],{},"把长文渲染成小红书风格的图文卡片",[36,3626,3627],{},"支持字体大小调节",[36,3629,3630],{},"精准分页，每页内容自动适配小红书图片比例",[36,3632,3633],{},"直接截图就能发",[11,3635,3636],{"id":3636},"全站设计系统也重塑了",[16,3638,3639],{},"做内容工具的同时，我也对 metool 的整体设计做了一次升级：",[143,3641,3642,3648,3655],{},[36,3643,3644,3645],{},"统一了全站的图标系统，从散落各处的 SVG\u002FPNG 图标切换到 ",[26,3646,3647],{},"Iconify",[36,3649,3650,3651,3654],{},"加了 ",[26,3652,3653],{},"全局搜索功能","，工具多了之后靠导航找太慢",[36,3656,3657,3658,3665],{},"做了 ",[26,3659,3660],{},[99,3661,3664],{"href":3662,"rel":3663,"target":1390},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fgames\u002FsolarInHand\u002F",[103],"太阳系手势交互游戏","，儿子可以在手机上用手势旋转缩放太阳系",[11,3667,3669],{"id":3668},"一篇文章多平台分发","一篇文章，多平台分发",[16,3671,3672],{},"现在我的内容创作工作流是这样的：",[33,3674,3675,3678,3681,3684],{},[36,3676,3677],{},"用 AI 辅助撰写 Markdown 格式的文章",[36,3679,3680],{},"在 metool 上实时预览公众号效果",[36,3682,3683],{},"一键复制 HTML，粘贴到微信编辑器",[36,3685,3686],{},"用转小红书工具生成图文卡片截图",[16,3688,3689],{},"一篇文章，多平台分发，全程不需要手动排版。这就是\"自己做工具\"的好处：完全按自己的工作流定制。",{"title":336,"searchDepth":337,"depth":337,"links":3691},[3692,3693,3694,3695],{"id":3547,"depth":340,"text":3548},{"id":3566,"depth":340,"text":3566},{"id":3636,"depth":340,"text":3636},{"id":3668,"depth":340,"text":3669},"2026-02-10","AI 写作能力大提升，我开始写公众号。但从 Markdown 到公众号发布的最后一公里很痛苦。网上的工具不够用，我做了高度定制化的转换工具。",[3699,3702,3705,3708],{"q":3700,"a":3701},"为什么 Markdown 转公众号需要专门的工具？","微信公众号编辑器不支持 Markdown，而且对 HTML\u002FCSS 有严格限制（不支持外部样式表、不支持 class）。需要把 Markdown 渲染成内联样式的 HTML，还要处理代码高亮、图片适配、列表嵌套等公众号特有的兼容问题。",{"q":3703,"a":3704},"和网上已有的 Markdown 转公众号工具比，有什么不同？","网上的工具大多是通用方案，样式固定。metool 的版本做了高度定制化：自定义排版风格、代码块样式、标题层级样式、图片圆角和阴影效果等，还针对微信编辑器的各种坑做了兼容处理（如 HTML 注释清理、嵌套列表缩进修复）。",{"q":3706,"a":3707},"Markdown 转小红书工具是怎么工作的？","把 Markdown 内容渲染成小红书风格的图文卡片，支持字体大小调节和精准分页。每页内容自动适配小红书的图片比例，可以直接截图发布。适合把长文拆分成小红书的多图内容格式。",{"q":3709,"a":3710},"整个内容创作工作流是什么样的？","用 AI 辅助撰写 Markdown 格式的文章，在 metool 上实时预览效果，一键复制公众号格式的 HTML 粘贴到微信编辑器，同时用转小红书工具生成图文卡片。一篇文章，多平台分发，全程不需要手动排版。",{},"\u002Fbuilds\u002Fmetool\u002F2026-02-10-content-creation-tools",{"title":3542,"description":3697},[3715,3716,3717,3718,3719,3720,3721],"Markdown 转微信公众号","Markdown 转小红书","AI 写作工具","公众号排版工具","内容分发工具","微信文章格式转换","小红书图文卡片","builds\u002Fmetool\u002F2026-02-10-content-creation-tools","AI 能力提升后开始写公众号，发现从 Markdown 到公众号发布的最后一公里很痛苦。网上的转换工具不够用，在 metool 上做了高度定制化的 Markdown 转公众号和转小红书工具，实现 AI 辅助产出内容后一键分发到多个平台。",[380,381],"wss3sw3VhSQdFnFFEEZBvOfAiN67lGRhbtrz2a2gtuI",{"id":3727,"title":3728,"body":3729,"date":3861,"description":3862,"draft":347,"extension":348,"faq":3863,"meta":3876,"navigation":363,"path":3877,"project":365,"readingTime":366,"seo":3878,"seoKeywords":3879,"stem":3886,"summary":3887,"tags":3888,"updated":382,"__hash__":3889},"builds\u002Fbuilds\u002Fmetool\u002F2025-11-12-lan-transfer.md","iPhone 和安卓之间传文件，怎么就这么难",{"type":8,"value":3730,"toc":3855},[3731,3734,3737,3751,3754,3764,3768,3771,3777,3780,3794,3797,3801,3804,3810,3816,3822,3828,3834,3840,3843,3849,3852],[11,3732,3733],{"id":3733},"传个文件怎么就这么难",[16,3735,3736],{},"做移动端开发的时候，我经常需要在电脑和手机之间传文件。在 Mac 和 iPhone 之间有 AirDrop，还算方便。但如果是 iPhone 和安卓之间呢？",[143,3738,3739,3742,3745,3748],{},[36,3740,3741],{},"蓝牙太慢",[36,3743,3744],{},"微信传文件有大小限制，还会压缩",[36,3746,3747],{},"邮件附件也有限制",[36,3749,3750],{},"USB 线在手边不一定有",[16,3752,3753],{},"每次遇到这个场景我都很烦。明明两台设备就在手边，传个文件却要折腾半天。",[16,3755,3756,3757,1243],{},"我决定在 metool 上做一个 ",[26,3758,3759],{},[99,3760,3763],{"href":3761,"rel":3762,"target":1390},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fdev\u002FlanTransfer\u002F",[103],"局域网文件传输工具",[11,3765,3767],{"id":3766},"浏览器端-p2p-传输","浏览器端 P2P 传输",[16,3769,3770],{},"技术方案用了 WebRTC：两台设备打开同一个网页，通过邀请码建立点对点连接，文件直接在设备之间传输，不经过服务器。",[16,3772,3773],{},[61,3774],{"alt":3775,"src":3776},"跨设备文件互传工具","\u002Fb\u002Fmetool\u002Flan-transfer.png",[16,3778,3779],{},"第一版做了基础功能：",[143,3781,3782,3785,3788,3791],{},[36,3783,3784],{},"4 位数字邀请码配对",[36,3786,3787],{},"二维码扫码连接（手机扫一下就行）",[36,3789,3790],{},"文件和文本都能传",[36,3792,3793],{},"传输过程加密",[16,3795,3796],{},"但发布后发现，真实场景比想象的复杂得多。",[11,3798,3800],{"id":3799},"两周18-个-commit","两周，18 个 commit",[16,3802,3803],{},"从 11 月 12 日到 11 月 21 日，这个功能我迭代了 18 个 commit。是 metool 里单个功能迭代密度最高的一次。",[16,3805,3806,3809],{},[26,3807,3808],{},"大文件分块传输"," — 大文件不能一次性发送，要分块。每块用 Map 追踪接收状态，某一块失败了自动重传，不用重发整个文件。",[16,3811,3812,3815],{},[26,3813,3814],{},"批量文件支持"," — 不只传一个文件，要能一次选多个文件发送。",[16,3817,3818,3821],{},[26,3819,3820],{},"iOS 兼容"," — iOS Safari 对多文件传输有限制，需要特殊处理。还要提示用户调整浏览器的自动下载设置。",[16,3823,3824,3827],{},[26,3825,3826],{},"校园网\u002F办公网"," — 这类网络可能限制 P2P 连接。加了网络限制检测和提示，建议用户开手机热点作为替代方案。",[16,3829,3830,3833],{},[26,3831,3832],{},"代理环境"," — 开了代理的设备连接行为不同，加了说明。",[16,3835,3836,3839],{},[26,3837,3838],{},"连接体验"," — 邀请码从 6 位简化到 4 位纯数字，合并了扫码和手动输入的 UI，优化了连接状态的实时反馈。",[11,3841,3842],{"id":3842},"一个功能的极致打磨",[16,3844,3845,3846],{},"这两周的经历让我体会到一个道理：",[26,3847,3848],{},"做一个功能\"能用\"很快，做到\"好用\"要花十倍的时间。",[16,3850,3851],{},"初版半天就做完了，但覆盖各种边界场景、各种设备兼容性、各种网络环境，花了两周。每次觉得\"应该差不多了\"，真实使用的时候又会冒出新问题。",[16,3853,3854],{},"但这也是个人项目的好处：没有人催进度，可以把一个功能打磨到自己满意为止。",{"title":336,"searchDepth":337,"depth":337,"links":3856},[3857,3858,3859,3860],{"id":3733,"depth":340,"text":3733},{"id":3766,"depth":340,"text":3767},{"id":3799,"depth":340,"text":3800},{"id":3842,"depth":340,"text":3842},"2025-11-12","做移动端开发时经常需要跨设备传文件，iPhone 和安卓之间传文件特别痛苦。用 WebRTC 做了一个局域网 P2P 传输工具，两周迭代了 18 个 commit。",[3864,3867,3870,3873],{"q":3865,"a":3866},"为什么不用现有的文件传输工具？","AirDrop 只在苹果设备之间用，蓝牙传输太慢，微信传文件有大小限制和压缩，邮件附件也有限制。最简单的局域网传输方案需要两台设备在同一个网络下，但浏览器端的方案不需要安装任何软件，打开网页就能用。",{"q":3868,"a":3869},"WebRTC P2P 传输是怎么工作的？","两台设备打开同一个网页，通过邀请码（4 位数字）或二维码建立 WebRTC 点对点连接。文件直接在两台设备之间传输，不经过服务器。传输过程加密，数据不会被中间人截获。",{"q":3871,"a":3872},"大文件传输怎么处理？","大文件会自动分块传输，每块的接收状态用 Map 追踪。如果某一块传输失败，会自动重传而不是重新发送整个文件。这个机制在网络不稳定的环境下特别重要。",{"q":3874,"a":3875},"遇到了哪些边界场景？","校园网\u002F办公网可能限制 P2P 连接，加了使用限制提示和手机热点的解决方案建议。iOS Safari 对多文件传输有限制，做了特殊处理和提示。还有代理环境下的连接问题、自动下载的浏览器兼容性问题等，两周内覆盖了十几种边界场景。",{},"\u002Fbuilds\u002Fmetool\u002F2025-11-12-lan-transfer",{"title":3728,"description":3862},[3880,3881,3882,3883,3884,3808,3885],"局域网文件传输","WebRTC P2P","iPhone 安卓传文件","跨设备文件传输","浏览器端文件传输","在线局域网传输工具","builds\u002Fmetool\u002F2025-11-12-lan-transfer","移动端开发中 iPhone 和安卓之间传文件是一件极其痛苦的事。用 WebRTC 做了浏览器端 P2P 加密传输，支持二维码扫码连接、大文件分块传输和重传机制。两周内从初版迭代到覆盖校园网\u002F代理\u002FiOS 多文件等各种边界场景。",[380,1595],"3cGzuWpv-48beUzZ8_2W9usNWZv7Bs5wLJnbMUbBLO4",{"id":3891,"title":3892,"body":3893,"date":4001,"description":4002,"draft":347,"extension":348,"faq":4003,"meta":4016,"navigation":363,"path":4017,"project":365,"readingTime":573,"seo":4018,"seoKeywords":4019,"stem":4027,"summary":4028,"tags":4029,"updated":382,"__hash__":4030},"builds\u002Fbuilds\u002Fmetool\u002F2025-11-02-games-for-my-son.md","孩子一玩迷宫就是半小时，我又给他做了四个游戏",{"type":8,"value":3894,"toc":3995},[3895,3898,3901,3904,3907,3910,3913,3916,3922,3925,3935,3945,3955,3965,3968,3974,3977,3980,3982,3985,3988],[11,3896,3897],{"id":3897},"孩子的编程启蒙",[16,3899,3900],{},"我孩子很小就开始对我的电脑感兴趣。每次我在写代码，他就凑过来看。",[16,3902,3903],{},"之前在 metool 上做过一个迷宫游戏，带音效、带移动端触控操作。有一次我在手机上测试，孩子看到了，拿过去就开始玩。",[16,3905,3906],{},"一玩就是半小时。",[16,3908,3909],{},"从那以后，每次出门吃饭排队，他就问我：\"爸爸，可以玩迷宫吗？\" 我打开手机浏览器，进 metool，递给他。",[16,3911,3912],{},"这让我想到：既然迷宫他这么喜欢，我再做几个游戏给他。做成在线版，随时能打开。",[11,3914,3915],{"id":3915},"一天做了四个",[16,3917,3918],{},[61,3919],{"alt":3920,"src":3921},"给儿子做的游戏合集","\u002Fb\u002Fmetool\u002Fgames.png",[16,3923,3924],{},"2025 年 11 月 2 日，一天之内上线了：",[16,3926,3927,3934],{},[26,3928,3929],{},[99,3930,3933],{"href":3931,"rel":3932,"target":1390},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fgames\u002Fgo\u002F",[103],"围棋"," — 带一个启发式 AI 对手。算法考虑了领地控制、棋子连接和眼位判断，不靠深度学习模型，但在小棋盘上能提供有一定挑战性的对局。支持 9x9 和 13x13 两种棋盘。",[16,3936,3937,3944],{},[26,3938,3939],{},[99,3940,3943],{"href":3941,"rel":3942,"target":1390},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fgames\u002Fgomoku\u002F",[103],"五子棋"," — 同样带 AI 对手，配了胜利烟花动画。AI 的算法会评估棋型（活三、冲四等），对小朋友来说难度刚好。",[16,3946,3947,3954],{},[26,3948,3949],{},[99,3950,3953],{"href":3951,"rel":3952,"target":1390},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fgames\u002Ftetris\u002F",[103],"俄罗斯方块"," — 专门为移动端做了长按控制，方块能快速左右移动和加速下落。还做了悬浮分数面板和下一个方块预览，移动端体验接近桌面端。",[16,3956,3957,3964],{},[26,3958,3959],{},[99,3960,3963],{"href":3961,"rel":3962,"target":1390},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fvideos\u002FaudioEditor\u002F",[103],"音频波形编辑器"," — 这个不是游戏，但顺手做了。支持波形可视化、片段选择和裁剪。",[11,3966,3967],{"id":3967},"为什么做在线版",[16,3969,3970,3971,1243],{},"做 App 当然也行，但在线版有一个不可替代的优势：",[26,3972,3973],{},"不需要安装",[16,3975,3976],{},"孩子想玩的时候，我打开浏览器就行了。不用去 App Store 下载，不用等更新。我改了代码部署完，下一次打开就是最新版。",[16,3978,3979],{},"对于这种\"随时可能想用一下\"的场景，网页比 App 更合适。",[11,3981,3920],{"id":3920},[16,3983,3984],{},"后来我把游戏分类的标题改成了\"给儿子做的游戏合集\"。",[16,3986,3987],{},"这不是一个商业决策，是一个爸爸的决策。metool 上的工具大多是为我自己的工作需求做的，但游戏这个品类，是为我孩子做的。",[16,3989,3990,3991,3994],{},"后来又陆续加了",[99,3992,3664],{"href":3662,"rel":3993,"target":1390},[103],"，让他在手机上用手势旋转缩放太阳系。不过那是一个月之后的事了。",{"title":336,"searchDepth":337,"depth":337,"links":3996},[3997,3998,3999,4000],{"id":3897,"depth":340,"text":3897},{"id":3915,"depth":340,"text":3915},{"id":3967,"depth":340,"text":3967},{"id":3920,"depth":340,"text":3920},"2025-11-02","孩子看我编程很感兴趣，尤其迷宫游戏他一玩就是半小时。做成在线版，随时掏出手机就能给他玩。一天之内做了围棋、五子棋、俄罗斯方块和音频编辑器。",[4004,4007,4010,4013],{"q":4005,"a":4006},"围棋的 AI 对手是怎么实现的？","用启发式算法实现，不依赖深度学习模型。算法考虑了领地控制、棋子连接、眼位判断等围棋基本策略，在 9x9 和 13x13 棋盘上能提供有一定挑战性的对局体验。全部在浏览器端运行，不需要服务器计算。",{"q":4008,"a":4009},"为什么俄罗斯方块要做移动端长按控制？","在手机上玩俄罗斯方块，传统的虚拟按键体验很差。长按控制让方块能快速左右移动和加速下落，操作更流畅。还做了悬浮分数面板和下一个方块预览，让移动端的游戏体验接近桌面端。",{"q":4011,"a":4012},"这些游戏为什么做成在线版而不是 App？","在线版的优势是随时随地能用：掏出手机打开浏览器就能玩，不需要下载安装。对孩子来说，在等餐、坐车的时候想玩，打开网页比打开 App 更快。而且在线版更新不需要用户手动升级。",{"q":4014,"a":4015},"音频编辑器是做什么用的？","支持音频波形可视化、片段选择、裁剪和播放控制。可以在浏览器里直接编辑音频文件，截取需要的片段。虽然和游戏是同一天做的，但它属于工具而不是游戏。",{},"\u002Fbuilds\u002Fmetool\u002F2025-11-02-games-for-my-son",{"title":3892,"description":4002},[4020,4021,4022,4023,4024,4025,4026],"给孩子做的游戏","在线围棋 AI 对手","在线五子棋","在线俄罗斯方块","移动端网页游戏","前端游戏开发","启发式 AI 算法","builds\u002Fmetool\u002F2025-11-02-games-for-my-son","孩子看编程很感兴趣，之前做的迷宫游戏他一玩就是半小时。一天之内在 metool 上线了围棋（带启发式 AI 对手）、五子棋（带 AI）、俄罗斯方块（移动端长按控制），还顺手做了一个音频波形编辑器。",[380,1595],"sdnRuCOzhZjRsJiLHYmOHoSrVUv1pu-bpmx4SCnd2P4",{"id":4032,"title":4033,"body":4034,"date":4172,"description":4173,"draft":347,"extension":348,"faq":4174,"meta":4187,"navigation":363,"path":4188,"project":365,"readingTime":573,"seo":4189,"seoKeywords":4190,"stem":4197,"summary":4198,"tags":4199,"updated":382,"__hash__":4200},"builds\u002Fbuilds\u002Fmetool\u002F2025-10-12-back-after-silence.md","停了五个月，回来发现要改的全是底层",{"type":8,"value":4035,"toc":4164},[4036,4039,4042,4045,4048,4052,4055,4062,4065,4069,4072,4093,4096,4099,4102,4124,4127,4130,4133,4155,4158,4161],[11,4037,4038],{"id":4038},"五个月的空白",[16,4040,4041],{},"从 2025 年 3 月到 10 月。中间只在 8 月份改了一次去背景工具的代码。",[16,4043,4044],{},"不是放弃了，就是没想到要做什么。工具站不像 SaaS 产品有持续的业务驱动力，个人项目的节奏就是这样：有需求就做，没需求就停。",[16,4046,4047],{},"10 月份回来再看这个项目，发现要改的不是功能，而是底层。",[11,4049,4051],{"id":4050},"ai-去背景大升级","AI 去背景大升级",[16,4053,4054],{},"第一版的图片去背景是纯手动方案：用 Canvas 笔刷一点点涂抹。能用，但效率很低。",[16,4056,4057,4058,4061],{},"这次升级到了 ",[26,4059,4060],{},"ONNX Runtime"," 方案——在浏览器端直接运行 AI 模型，一键自动去背景。精度和速度都大幅提升，而且模型在本地推理，文件还是不会离开设备。",[16,4063,4064],{},"这个升级让我意识到，前端能做的事情比我想象的多。AI 模型跑在浏览器端已经不是实验性的技术了。",[11,4066,4068],{"id":4067},"seo-补课","SEO 补课",[16,4070,4071],{},"停更期间，metool 在搜索引擎上几乎没有存在感。回来后我认真补了一次 SEO：",[143,4073,4074,4084,4087,4090],{},[36,4075,4076,4077,1229,4080,4083],{},"重构了 ",[73,4078,4079],{},"usePageMeta",[73,4081,4082],{},"useSimpleSEO","，让每个工具页自动生成规范的 meta 信息",[36,4085,4086],{},"补全了 Open Graph 标签和 JSON-LD 结构化数据",[36,4088,4089],{},"加了 SEO 客户端插件处理动态结构化数据注入",[36,4091,4092],{},"重写了 robots.txt",[16,4094,4095],{},"SEO 是那种\"不做不会死，做了慢慢见效\"的事情。但对工具站来说，搜索引擎是最重要的流量来源，不做就等于放弃了用户主动找到你的可能性。",[11,4097,4098],{"id":4098},"开发者工具首发",[16,4100,4101],{},"这次回来还上线了第一批开发者工具：",[143,4103,4104,4114],{},[36,4105,4106,4113],{},[26,4107,4108],{},[99,4109,4112],{"href":4110,"rel":4111,"target":1390},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fdev\u002FjsonBeautify\u002F",[103],"JSON 美化\u002F格式化"," — 带语法高亮和可折叠的树形视图",[36,4115,4116,4123],{},[26,4117,4118],{},[99,4119,4122],{"href":4120,"rel":4121,"target":1390},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fdev\u002FurlEncodeDecode\u002F",[103],"URL 编码\u002F解码"," — 简单但高频的需求",[16,4125,4126],{},"自己在开发中天天用这类工具，做进 metool 顺理成章。后面这个品类会持续扩展。",[11,4128,4129],{"id":4129},"新的图片工具",[16,4131,4132],{},"还上线了两个新的图片工具：",[143,4134,4135,4145],{},[36,4136,4137,4144],{},[26,4138,4139],{},[99,4140,4143],{"href":4141,"rel":4142,"target":1390},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fimages\u002FiphoneLongImageStitch\u002F",[103],"iPhone 长图拼接"," — 把多张 iPhone 截图拼成一张长图",[36,4146,4147,4154],{},[26,4148,4149],{},[99,4150,4153],{"href":4151,"rel":4152,"target":1390},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fimages\u002FresizeIosAppDistribution\u002F",[103],"iOS 应用图标裁剪"," — 一键生成 App Store 需要的全套尺寸",[16,4156,4157],{},"都是做移动端开发时的真实需求。",[11,4159,4160],{"id":4160},"停了五个月不是坏事",[16,4162,4163],{},"停更的五个月让我有了新的视角。如果一直在加功能，可能不会注意到底层该升级了。有时候停下来，再回来看，反而能看清该做什么。",{"title":336,"searchDepth":337,"depth":337,"links":4165},[4166,4167,4168,4169,4170,4171],{"id":4038,"depth":340,"text":4038},{"id":4050,"depth":340,"text":4051},{"id":4067,"depth":340,"text":4068},{"id":4098,"depth":340,"text":4098},{"id":4129,"depth":340,"text":4129},{"id":4160,"depth":340,"text":4160},"2025-10-12","从 3 月到 10 月，metool 停更了五个月。不是放弃了，是没想到要做什么。回来后发现需要升级的不是功能，而是底层能力。",[4175,4178,4181,4184],{"q":4176,"a":4177},"为什么停了五个月？","没有特别的原因，就是积压的需求做完了，没想到还要做什么。工具站不像 SaaS 产品有持续的业务驱动力，个人项目的节奏就是这样——有灵感就做，没灵感就停。",{"q":4179,"a":4180},"AI 去背景升级到 ONNX 模型有什么变化？","第一版去背景是 Canvas 笔刷方案，需要手动涂抹。升级后用 ONNX Runtime 在浏览器端运行 AI 模型，一键自动去背景，精度和速度都大幅提升。模型在本地推理，文件依然不会上传到服务器。",{"q":4182,"a":4183},"这次升级了哪些 SEO 能力？","补全了 meta tags、Open Graph 标签和 JSON-LD 结构化数据。重构了 usePageMeta 和 useSimpleSEO 两个组合式函数，让每个工具页面自动生成规范的 SEO 信息。还加了 SEO 插件处理客户端渲染的结构化数据注入。",{"q":4185,"a":4186},"为什么开始做开发者工具？","自己在开发过程中经常需要格式化 JSON、编解码 URL 这类小操作。之前都在其他网站上做，现在 metool 的架构已经很成熟，加一个新工具很快，干脆自己做了。后面开发者工具会成为 metool 的一个重要品类。",{},"\u002Fbuilds\u002Fmetool\u002F2025-10-12-back-after-silence",{"title":4033,"description":4173},[4191,4192,4193,4194,4195,4143,4196],"独立开发项目停更","ONNX Runtime 去背景","Nuxt Image 优化","SEO 结构化数据","开发者工具 JSON 美化","在线工具性能优化","builds\u002Fmetool\u002F2025-10-12-back-after-silence","metool 停更五个月后回归，发现要改的不是功能而是底层：AI 去背景升级到 ONNX 模型、图片加载用 Nuxt Image 优化、SEO 从零补全结构化数据和 meta 信息、上线了第一批开发者工具（JSON 美化、URL 编解码），还做了 iPhone 长图拼接和 iOS 应用图标裁剪。",[380,1595],"iiptoayqNzPYX0rh1rHYBLmxt007FNGkwdZhg9DuhvM",{"id":4202,"title":4203,"body":4204,"date":4321,"description":4322,"draft":347,"extension":348,"faq":4323,"meta":4336,"navigation":363,"path":4337,"project":365,"readingTime":573,"seo":4338,"seoKeywords":4339,"stem":4346,"summary":4347,"tags":4348,"updated":382,"__hash__":4349},"builds\u002Fbuilds\u002Fmetool\u002F2025-03-01-video-tools-and-easter-eggs.md","视频处理也做了，顺手还做了几个节日彩蛋",{"type":8,"value":4205,"toc":4315},[4206,4209,4212,4215,4218,4224,4227,4259,4262,4265,4268,4279,4290,4293,4297,4306,4309,4312],[11,4207,4208],{"id":4208},"补齐视频处理",[16,4210,4211],{},"图片工具和文档工具做完之后，视频处理是一个自然的延伸。",[16,4213,4214],{},"我日常也有视频处理的需求：压缩一下视频发邮件、转个格式、截一段视频做成 GIF。和图片工具一样，网上的视频处理工具不是要上传到服务器就是要付费。",[16,4216,4217],{},"这次的方案是用 FFmpeg 的 WebAssembly 版本，直接在浏览器端跑视频处理。不需要服务器，不需要安装软件。",[16,4219,4220],{},[61,4221],{"alt":4222,"src":4223},"视频工具三件套","\u002Fb\u002Fmetool\u002Fvideo-tools.png",[16,4225,4226],{},"两周内上线了三个视频工具：",[143,4228,4229,4239,4249],{},[36,4230,4231,4238],{},[26,4232,4233],{},[99,4234,4237],{"href":4235,"rel":4236,"target":1390},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fvideos\u002Fcompress\u002F",[103],"视频压缩"," — 调整分辨率和码率，减小文件大小",[36,4240,4241,4248],{},[26,4242,4243],{},[99,4244,4247],{"href":4245,"rel":4246,"target":1390},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fvideos\u002FformatConvert\u002F",[103],"视频格式转换"," — MP4\u002FWebM\u002FAVI 互转",[36,4250,4251,4258],{},[26,4252,4253],{},[99,4254,4257],{"href":4255,"rel":4256,"target":1390},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fvideos\u002FvideoToGif\u002F",[103],"视频转 GIF"," — 支持自定义分辨率、帧率和时间段截取",[16,4260,4261],{},"同时还做了微信公众号 Markdown 文章转换的雏形，不过这个工具后面会有大升级，这里先不展开。",[11,4263,4264],{"id":4264},"节日彩蛋和趣味工具",[16,4266,4267],{},"工具站不一定全是\"正经\"工具。",[16,4269,4270,4271,4278],{},"3 月初正好临近清明节，我做了一个 ",[26,4272,4273],{},[99,4274,4277],{"href":4275,"rel":4276,"target":1390},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fmagics\u002Fqingming\u002F",[103],"清明节纪念页"," ——可以编辑纪念文字、选择背景，生成一张可以分享的纪念图片。技术上验证了文字编辑和图片合成的能力，情感上也算给工具站加了一点温度。",[16,4280,4281,4282,4289],{},"还做了一个 ",[26,4283,4284],{},[99,4285,4288],{"href":4286,"rel":4287,"target":1390},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fmagics\u002Flottery\u002F",[103],"抽奖工具","，动画效果比较花哨，纯粹是觉得好玩。",[16,4291,4292],{},"这些趣味工具的开发时间不长，但让我意识到一件事：工具站的边界不只是\"文件处理\"。只要是用户会在手机或电脑上临时需要的功能，都可以做。",[11,4294,4296],{"id":4295},"图片-resize-也补上了","图片 resize 也补上了",[16,4298,4299,4300,4305],{},"这个阶段还补了一个",[99,4301,4304],{"href":4302,"rel":4303,"target":1390},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fimages\u002Fresize\u002F",[103],"图片 resize"," 工具，支持自定义尺寸调整。功能简单但使用频率很高，是之前漏掉的基础需求。",[11,4307,4308],{"id":4308},"品类在扩展",[16,4310,4311],{},"回头看这两周，metool 的工具品类从\"图片+文档\"扩展到了\"图片+文档+视频+趣味\"。工具站的定位也从\"文件处理\"慢慢变成了\"在线工具集\"。",[16,4313,4314],{},"接下来应该继续加工具，还是停下来优化体验？我当时没想清楚。事实上，后面我停了很久。",{"title":336,"searchDepth":337,"depth":337,"links":4316},[4317,4318,4319,4320],{"id":4208,"depth":340,"text":4208},{"id":4264,"depth":340,"text":4264},{"id":4295,"depth":340,"text":4296},{"id":4308,"depth":340,"text":4308},"2025-03-01","视频压缩、格式转换、视频转 GIF，把视频处理需求补齐了。清明节纪念页和抽奖工具是兴趣驱动，验证可行性。",[4324,4327,4330,4333],{"q":4325,"a":4326},"浏览器端能做视频压缩和格式转换吗？","可以。用 FFmpeg 的 WebAssembly 版本在浏览器端运行，支持视频压缩、格式转换（MP4\u002FWebM\u002FAVI 互转）和视频转 GIF。处理速度取决于设备性能，但中等长度的视频完全够用，且不需要上传到服务器。",{"q":4328,"a":4329},"视频转 GIF 工具有什么特色？","支持自定义分辨率（多档可选）、帧率调整和时间段截取。GIF 的尺寸优化是难点，提供了多种分辨率选项让用户在清晰度和文件大小之间取舍。",{"q":4331,"a":4332},"为什么要做清明节纪念页和抽奖工具？","纯粹是兴趣驱动和技术验证。清明节纪念页验证了动态文字编辑和背景合成的能力，抽奖工具验证了动画交互效果。这类趣味工具虽然不是核心功能，但能让工具站更有温度。",{"q":4334,"a":4335},"微信公众号 Markdown 转换工具是怎么回事？","第一版的微信公众号文章转换在这个阶段就做了雏形，把 Markdown 渲染成公众号兼容的富文本格式。后来在 2026 年 3 月做了大幅升级和高度定制化。",{},"\u002Fbuilds\u002Fmetool\u002F2025-03-01-video-tools-and-easter-eggs",{"title":4203,"description":4322},[4340,4257,4341,4342,4343,4344,4345],"在线视频压缩","前端视频处理","FFmpeg WASM","微信公众号文章转换","浏览器端视频转换","在线工具开发","builds\u002Fmetool\u002F2025-03-01-video-tools-and-easter-eggs","图片和文档工具做完后，视频处理是下一个自然需求。两周内上线了视频压缩、格式转换和视频转 GIF 三个工具，同时做了微信公众号文章转换、清明节纪念页和抽奖工具。工具站的品类从文件处理扩展到了内容创作和趣味工具。",[380,1595],"mqYPYxMP9M5vITnR0pz8FrsbGuDd-a7ZEo0hukqQzqk",{"id":4351,"title":4352,"body":4353,"date":4454,"description":4455,"draft":347,"extension":348,"faq":4456,"meta":4469,"navigation":363,"path":4470,"project":365,"readingTime":573,"seo":4471,"seoKeywords":4472,"stem":4480,"summary":4481,"tags":4482,"updated":382,"__hash__":4483},"builds\u002Fbuilds\u002Fmetool\u002F2025-02-24-go-international.md","AI 把做国际站的门槛降到了最低",{"type":8,"value":4354,"toc":4448},[4355,4359,4362,4365,4368,4371,4374,4402,4408,4419,4423,4426,4432,4435,4438,4442,4445],[11,4356,4358],{"id":4357},"ai-把翻译成本打下来了","AI 把翻译成本打下来了",[16,4360,4361],{},"做了一个月的工具站，工具数量已经不少了。这时候一个想法自然冒了出来：要不要做成国际站？",[16,4363,4364],{},"以前做多语言网站是一件成本很高的事——翻译、校对、维护，每多一种语言就多一份工作量。但 AI 改变了这个等式。翻译成本降到了接近零，一段中文丢给 AI，几秒钟就能拿到质量不错的英文。",[16,4366,4367],{},"我决定用 metool 来验证做国际站的标准方案。",[11,4369,4370],{"id":4370},"中英双语架构",[16,4372,4373],{},"技术方案用了 Nuxt i18n 模块：",[143,4375,4376,4389,4392,4399],{},[36,4377,4378,4379,4382,4383,1229,4386],{},"翻译文件放在 ",[73,4380,4381],{},"locales\u002F"," 目录，",[73,4384,4385],{},"en.json",[73,4387,4388],{},"zh.json",[36,4390,4391],{},"所有工具的标题、描述、按钮文案抽取到翻译文件中",[36,4393,4394,4395,4398],{},"页面组件通过 ",[73,4396,4397],{},"$t()"," 函数引用，不再硬编码中文",[36,4400,4401],{},"路由支持语言前缀切换",[16,4403,4404],{},[61,4405],{"alt":4406,"src":4407},"3D GLB 模型在线预览","\u002Fb\u002Fmetool\u002F3d-preview.png",[16,4409,4410,4411,4418],{},"同一时期还上线了 ",[26,4412,4413],{},[99,4414,4417],{"href":4415,"rel":4416,"target":1390},"https:\u002F\u002Fmetool.online\u002Fzh\u002F3d\u002FglbPreview\u002F",[103],"3D GLB 模型预览工具","，用 Three.js 做的。支持拖拽上传 GLB 文件，实时预览、缩放旋转、背景色切换、自动旋转。算是拓展了工具的品类边界，从纯文件处理扩展到了 3D 领域。",[11,4420,4422],{"id":4421},"试了日韩语然后砍掉了","试了日韩语，然后砍掉了",[16,4424,4425],{},"做国际化的时候，顺手加了日语和韩语的支持。",[16,4427,4428,4429],{},"但很快发现一个问题：",[26,4430,4431],{},"翻译容易，维护难。",[16,4433,4434],{},"每次新增一个工具或者改一个文案，要同步更新四种语言的翻译文件。在没有真实用户数据证明日韩用户有需求的情况下，这个维护成本完全不值得。",[16,4436,4437],{},"果断砍掉，只保留中英文。有了用户数据再决定要不要加。",[11,4439,4441],{"id":4440},"经验先做减法","经验：先做减法",[16,4443,4444],{},"国际化不是\"支持的语言越多越好\"，而是要验证：有没有人用、用了之后体验是否完整。",[16,4446,4447],{},"中英双语是投入产出比最高的选择。英语覆盖了全球大部分互联网用户，维护成本可控，也足以验证国际化方案是否跑得通。",{"title":336,"searchDepth":337,"depth":337,"links":4449},[4450,4451,4452,4453],{"id":4357,"depth":340,"text":4358},{"id":4370,"depth":340,"text":4370},{"id":4421,"depth":340,"text":4422},{"id":4440,"depth":340,"text":4441},"2025-02-24","有了 AI，翻译不再是瓶颈。正好趁这个机会验证做国际站的标准方案，顺便把 3D 模型预览工具也做了。",[4457,4460,4463,4466],{"q":4458,"a":4459},"为什么选择在这个时候做国际化？","AI 翻译能力的提升让多语言内容的生产成本大幅降低，以前需要专人翻译的工作现在 AI 几秒钟就能完成。正好用这个项目验证一下做国际站的标准方案，积累经验。",{"q":4461,"a":4462},"国际化的技术方案是什么？","使用 Nuxt i18n 模块，翻译文件用 JSON 格式存放在 locales 目录（en.json 和 zh.json）。所有工具的标题、描述、操作按钮文案都抽取到翻译文件中，页面组件通过 $t() 函数引用。路由支持语言前缀切换。",{"q":4464,"a":4465},"为什么砍掉了日语和韩语支持？","最初尝试加了日语和韩语，但很快发现：翻译容易，维护难。每次新增或修改一个工具，要同步更新四种语言的翻译文件。在没有明确用户需求的情况下，维护成本远高于收益，果断砍掉只保留中英文。",{"q":4467,"a":4468},"3D 模型预览工具是怎么做的？","用 Three.js 构建 3D 场景，支持 GLB 格式模型的拖拽上传和实时预览。功能包括缩放旋转、网格显示、背景色切换、自动旋转。所有渲染在浏览器端完成，不需要安装任何软件。",{},"\u002Fbuilds\u002Fmetool\u002F2025-02-24-go-international",{"title":4352,"description":4455},[4473,4474,4475,4476,4477,4478,4479],"Nuxt i18n 国际化","AI 辅助翻译","在线 3D 模型预览","Three.js GLB 预览","多语言网站开发","国际化工具站","前端 i18n 架构","builds\u002Fmetool\u002F2025-02-24-go-international","AI 让翻译成本降到接近零，做国际站不再是大公司才能干的事。用 Nuxt i18n 搭建了中英双语架构，同时上线了 3D GLB 模型预览工具。曾尝试日韩语支持，发现维护成本高于收益后果断砍掉。",[380,381],"o4vphR82AQXe1eS-PrkTEb8KWq-BAuA2MYsxYEf1P8c",{"id":4485,"title":4486,"body":4487,"date":4632,"description":4633,"draft":347,"extension":348,"faq":4634,"meta":4647,"navigation":363,"path":4648,"project":365,"readingTime":573,"seo":4649,"seoKeywords":4650,"stem":4655,"summary":4656,"tags":4657,"updated":382,"__hash__":4658},"builds\u002Fbuilds\u002Fmetool\u002F2025-02-08-tool-explosion.md","积压的需求一起爆发，两周上线了十几个工具",{"type":8,"value":4488,"toc":4626},[4489,4492,4495,4498,4502,4505,4510,4556,4561,4578,4583,4593,4599,4602,4605,4608,4611,4614,4620,4623],[11,4490,4491],{"id":4491},"积压的需求清单",[16,4493,4494],{},"基础架构搭好之后，我脑子里积压的需求开始一个接一个往外冒。",[16,4496,4497],{},"这些都是我日常工作中反复遇到的场景：图片要转格式、要压缩、要生成二维码、要去背景。文档要从 Word 转 PDF、Markdown 要转成其他格式。每次都在网上找工具，现在终于可以一口气做完了。",[11,4499,4501],{"id":4500},"两周十几个工具","两周，十几个工具",[16,4503,4504],{},"从 2 月 8 日到 2 月 20 日，密集上线了这些工具：",[16,4506,4507],{},[26,4508,4509],{},"图片工具全家桶：",[143,4511,4512,4520,4526,4534,4542,4549],{},[36,4513,4514,4519],{},[99,4515,4518],{"href":4516,"rel":4517,"target":1390},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fimages\u002FimageFormatConvert\u002F",[103],"图片格式转换","（JPG\u002FPNG\u002FWebP\u002FICO 互转）",[36,4521,4522],{},[99,4523,2488],{"href":4524,"rel":4525,"target":1390},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fimages\u002Fcompress\u002F",[103],[36,4527,4528,4533],{},[99,4529,4532],{"href":4530,"rel":4531,"target":1390},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fimages\u002FqrCodeGenerate\u002F",[103],"QR 码生成器","（支持自定义锚点和数据点样式）",[36,4535,4536,4541],{},[99,4537,4540],{"href":4538,"rel":4539,"target":1390},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fimages\u002FremoveBackground\u002F",[103],"图片去背景","（Canvas 笔刷方案）",[36,4543,4544],{},[99,4545,4548],{"href":4546,"rel":4547,"target":1390},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fimages\u002FlongImageSplit\u002F",[103],"长图分割",[36,4550,4551],{},[99,4552,4555],{"href":4553,"rel":4554,"target":1390},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fimages\u002FmovieSubtitleCrop\u002F",[103],"电影字幕裁剪",[16,4557,4558],{},[26,4559,4560],{},"文档工具：",[143,4562,4563,4570],{},[36,4564,4565],{},[99,4566,4569],{"href":4567,"rel":4568,"target":1390},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fdocs\u002FwordToPDF\u002F",[103],"Word 转 PDF",[36,4571,4572,4577],{},[99,4573,4576],{"href":4574,"rel":4575,"target":1390},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fdocs\u002FmarkdownConvert\u002F",[103],"Markdown 格式转换","（支持导出 HTML）",[16,4579,4580],{},[26,4581,4582],{},"趣味工具：",[143,4584,4585],{},[36,4586,4587,4592],{},[99,4588,4591],{"href":4589,"rel":4590,"target":1390},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fmagics\u002FheartBeat\u002F",[103],"心跳表白页","（带微信分享适配）",[16,4594,4595],{},[61,4596],{"alt":4597,"src":4598},"图片工具全家桶","\u002Fb\u002Fmetool\u002Fimage-tools.png",[16,4600,4601],{},"速度能这么快，核心原因是第一天搭的架构：工具卡片组件、分类体系、页面模板全是复用的，新增一个工具只需要写核心逻辑。图片处理用 Canvas API，文档转换用 mammoth.js，每个工具的核心代码量其实不大。",[11,4603,4604],{"id":4604},"数据基础也搭好了",[16,4606,4607],{},"2 月 14 日接入了 Google Analytics，虽然这时候几乎没有外部流量，但尽早有数据追踪比后面补要好得多。",[16,4609,4610],{},"2 月 17 日配置了 sitemap 和 robots.txt，加了 404 错误页面。SEO 基础设施越早搭好越省事，搜索引擎需要时间爬取和收录。",[11,4612,4613],{"id":4613},"所有处理都在本地",[16,4615,4616,4617,1243],{},"有一个原则从第一天就没变过：",[26,4618,4619],{},"所有文件处理都在浏览器端完成",[16,4621,4622],{},"图片压缩用 Canvas API，格式转换用 Blob 操作，文档解析用 JavaScript 库。用户的文件不会上传到任何服务器。这不只是隐私保障，也意味着没有服务器成本，工具可以无限免费用。",[16,4624,4625],{},"两周下来，metool 已经从\"三个工具\"变成了\"十几个工具\"。积压的需求基本清完了，但新的想法又开始冒出来。",{"title":336,"searchDepth":337,"depth":337,"links":4627},[4628,4629,4630,4631],{"id":4491,"depth":340,"text":4491},{"id":4500,"depth":340,"text":4501},{"id":4604,"depth":340,"text":4604},{"id":4613,"depth":340,"text":4613},"2025-02-08","图片格式转换、压缩、QR 码生成、去背景、Word 转 PDF、Markdown 转换。把日常文件处理的需求全都做成了在线工具。",[4635,4638,4641,4644],{"q":4636,"a":4637},"两周内是怎么做到上线十几个工具的？","关键在于第一天搭好的架构：分类体系、工具卡片组件、页面模板都是复用的，新增一个工具只需要写核心处理逻辑。图片格式转换用 Canvas API，压缩用 OffscreenCanvas，QR 码用开源库，文档转换用 mammoth.js，每个工具的核心代码量并不大。",{"q":4639,"a":4640},"这些工具的文件处理在哪里完成？","全部在浏览器端完成，不需要上传到服务器。图片处理用 Canvas API 和 Web Worker，文档转换用 JavaScript 库在本地解析。用户的文件不会离开设备，隐私安全有保障。",{"q":4642,"a":4643},"为什么要做图片去背景工具？","日常做素材时经常需要抠图，在线去背景工具要么要付费，要么效果差。用前端 Canvas 配合笔刷工具做了一个本地版，虽然不如 AI 模型精准，但够用且免费。后来在 8 月升级成了 ONNX 模型方案。",{"q":4645,"a":4646},"Google Analytics 和 SEO 在这个阶段就接入了吗？","是的。GA 在 2 月 14 日接入，sitemap 和 robots 在 2 月 17 日配置完成。虽然这时候流量很少，但尽早接入数据追踪能帮助后面分析用户行为。SEO 基础设施（sitemap、robots.txt、错误页面）也是越早搭好越省事。",{},"\u002Fbuilds\u002Fmetool\u002F2025-02-08-tool-explosion",{"title":4486,"description":4633},[4651,4652,4532,4540,4569,4653,4654],"在线图片处理工具","在线文档转换","前端文件处理","浏览器端图片压缩","builds\u002Fmetool\u002F2025-02-08-tool-explosion","基础架构搭好后，两周内密集上线了十几个工具：图片全家桶（格式转换、压缩、QR 码生成、去背景、长图分割）、文档工具（Word 转 PDF、Markdown 转换）、心跳魔法工具，同时接入了 Google Analytics 和基础 SEO。",[380,1595],"fw6xObA62S7sQ5Tf0Xvu8pCMRptFYfiu3gj1gPqoWhY",{"id":4660,"title":4661,"body":4662,"date":4765,"description":4766,"draft":347,"extension":348,"faq":4767,"meta":4780,"navigation":363,"path":4781,"project":365,"readingTime":573,"seo":4782,"seoKeywords":4783,"stem":4789,"summary":4790,"tags":4791,"updated":382,"__hash__":4792},"builds\u002Fbuilds\u002Fmetool\u002F2025-01-23-start-from-scratch.md","网上找不到称手的工具，我决定自己做一个",{"type":8,"value":4663,"toc":4759},[4664,4667,4670,4673,4676,4679,4682,4685,4688,4718,4721,4725,4731,4734,4743,4749,4753,4756],[11,4665,4666],{"id":4666},"找不到称手的工具",[16,4668,4669],{},"我的日常工作里，经常需要临时处理一些文件：裁剪图片、转换格式、给视频截字幕区域。",[16,4671,4672],{},"每次都要在网上翻一圈找在线工具。找到的要么功能不对，要么满屏广告，要么要注册才能用，要么要把文件上传到别人的服务器。",[16,4674,4675],{},"这种事情经历多了，我就想：这些操作前端完全能做，为什么不自己做一个？",[11,4677,4678],{"id":4678},"一天搭起来",[16,4680,4681],{},"2025 年 1 月 23 日，我花了一天时间把基础架构搭好了。",[16,4683,4684],{},"技术栈选了 Nuxt 3 + TypeScript + Tailwind CSS。Nuxt 的 SSG 模式可以生成纯静态页面，加载快，部署简单。文件处理全部在浏览器端完成，数据不会离开用户的设备。",[16,4686,4687],{},"第一天上线的工具：",[143,4689,4690,4700,4710],{},[36,4691,4692,4699],{},[26,4693,4694],{},[99,4695,4698],{"href":4696,"rel":4697,"target":1390},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fgames\u002Fsnake\u002F",[103],"贪吃蛇"," — 用来验证游戏交互能力",[36,4701,4702,4709],{},[26,4703,4704],{},[99,4705,4708],{"href":4706,"rel":4707,"target":1390},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fgames\u002Fmaze\u002F",[103],"迷宫游戏"," — 带音效和移动端控制",[36,4711,4712,4717],{},[26,4713,4714],{},[99,4715,4555],{"href":4553,"rel":4716,"target":1390},[103]," — 真实需求，批量裁剪视频截图中的字幕区域",[16,4719,4720],{},"同时搭好了整个工具框架：导航栏、侧边菜单、工具卡片组件、分类体系。后面加新工具只需要写页面逻辑，框架层的事情不用再操心。",[11,4722,4724],{"id":4723},"随时随地手机也能用","随时随地，手机也能用",[16,4726,4727,4728,1243],{},"做这个工具箱有一个重要的前提：",[26,4729,4730],{},"手机也能用",[16,4732,4733],{},"我不是总在电脑前，很多时候是在手机上临时需要处理个文件。所以从第一天起，移动端适配就是必须的，不是\"以后再说\"的事。",[16,4735,4736,4737,4742],{},"贪吃蛇和迷宫游戏都做了移动端触控操作，字幕裁剪支持拖拽选区。在手机浏览器里打开 ",[99,4738,4741],{"href":4739,"rel":4740,"target":1390},"https:\u002F\u002Fmetool.online",[103],"metool.online"," 就能直接用。",[16,4744,4745],{},[61,4746],{"alt":4747,"src":4748},"metool.online 首页","\u002Fb\u002Fmetool\u002Fhomepage.png",[11,4750,4752],{"id":4751},"起步很轻但框架要对","起步很轻，但框架要对",[16,4754,4755],{},"回头看，第一天最重要的不是上线了几个工具，而是把架构搭对了：分类体系、组件复用、路由规范。这些决定了后面能不能快速扩充工具，而不是每次都从头写。",[16,4757,4758],{},"工具箱刚刚开始，积压的需求还有一堆。",{"title":336,"searchDepth":337,"depth":337,"links":4760},[4761,4762,4763,4764],{"id":4666,"depth":340,"text":4666},{"id":4678,"depth":340,"text":4678},{"id":4723,"depth":340,"text":4724},{"id":4751,"depth":340,"text":4752},"2025-01-23","每次需要处理图片、裁剪字幕都要在网上翻半天，找到的工具不是功能不对就是体验太差。干脆自己做一个在线工具箱，随时随地能用。",[4768,4771,4774,4777],{"q":4769,"a":4770},"为什么要自己做在线工具箱？","日常工作中经常需要临时处理图片、裁剪视频字幕等，但网上的在线工具要么功能不匹配，要么广告太多体验差。自己做一个工具集，既能完全满足自己的需求，还能随时随地通过手机访问。",{"q":4772,"a":4773},"metool.online 用了什么技术栈？","Nuxt 3 + TypeScript + Tailwind CSS，SSG 静态生成部署。选择 Nuxt 是因为 Vue 生态成熟，SSG 模式加载快且 SEO 友好，前端能力足以处理图片、音视频等文件操作。",{"q":4775,"a":4776},"第一天做了哪些工具？","第一天上线了三个工具：贪吃蛇游戏、迷宫游戏和电影字幕裁剪。游戏是用来验证交互能力的，字幕裁剪是真实需求驱动。同时搭好了导航栏、侧边菜单、工具卡片等基础组件架构。",{"q":4778,"a":4779},"为什么不直接用现成的在线工具？","现成工具有几个痛点：功能不完全匹配自己的需求、广告干扰体验、部分工具需要上传到服务器有隐私风险。自建工具全部在浏览器端处理，数据不离开本地，而且可以按自己的习惯定制功能。",{},"\u002Fbuilds\u002Fmetool\u002F2025-01-23-start-from-scratch",{"title":4661,"description":4766},[4784,4785,4786,4653,4787,4741,4788],"在线工具箱","独立开发在线工具","Nuxt 3 工具站","自建工具集","移动端在线工具","builds\u002Fmetool\u002F2025-01-23-start-from-scratch","经常在网上找在线工具，但总找不到刚好合适的。用 Nuxt 3 + TypeScript + Tailwind CSS 从零搭建了一个在线工具箱 metool.online，第一天就上线了贪吃蛇、迷宫游戏和电影字幕裁剪三个工具。",[380,1595],"Fnr1PEBjKKQH6aW3oegh7BDch75TqUVOxrwcGFSIfSI",{"id":5,"title":6,"body":4794,"date":345,"description":346,"draft":347,"extension":348,"faq":5012,"meta":5017,"navigation":363,"path":364,"project":365,"readingTime":366,"seo":5018,"seoKeywords":5019,"stem":377,"summary":378,"tags":5020,"updated":382,"__hash__":383},{"type":8,"value":4795,"toc":5005},[4796,4798,4800,4802,4806,4808,4818,4820,4824,4828,4830,4834,4836,4840,4844,4846,4851,4855,4857,4861,4865,4869,4873,4875,4893,4895,4897,4899,4953,4957,4970,4972,4974,4988,4990,4994,4996,4998,5000],[11,4797,14],{"id":13},[16,4799,18],{},[16,4801,21],{},[16,4803,24,4804],{},[26,4805,28],{},[16,4807,31],{},[33,4809,4810,4812,4814,4816],{},[36,4811,38],{},[36,4813,41],{},[36,4815,44],{},[36,4817,47],{},[16,4819,50],{},[16,4821,53,4822,57],{},[26,4823,56],{},[16,4825,4826],{},[61,4827],{"alt":63,"src":64},[11,4829,68],{"id":67},[16,4831,71,4832,76],{},[73,4833,75],{},[16,4835,79],{},[16,4837,82,4838],{},[26,4839,85],{},[16,4841,88,4842,92],{},[26,4843,91],{},[11,4845,95],{"id":95},[16,4847,4848,105],{},[99,4849,104],{"href":101,"rel":4850},[103],[16,4852,108,4853,111],{},[73,4854,75],{},[16,4856,114],{},[16,4858,4859,120],{},[26,4860,119],{},[16,4862,4863,126],{},[26,4864,125],{},[16,4866,4867,132],{},[26,4868,131],{},[16,4870,4871,138],{},[26,4872,137],{},[16,4874,141],{},[143,4876,4877,4881,4885,4889],{},[36,4878,4879,150],{},[26,4880,149],{},[36,4882,4883,156],{},[26,4884,155],{},[36,4886,4887,162],{},[26,4888,161],{},[36,4890,4891,168],{},[26,4892,167],{},[16,4894,171],{},[11,4896,175],{"id":174},[16,4898,178],{},[180,4900,4901,4911],{},[183,4902,4903],{},[186,4904,4905,4907,4909],{},[189,4906,191],{},[189,4908,194],{},[189,4910,197],{},[199,4912,4913,4921,4929,4937,4945],{},[186,4914,4915,4917,4919],{},[204,4916,206],{},[204,4918,209],{},[204,4920,212],{},[186,4922,4923,4925,4927],{},[204,4924,217],{},[204,4926,209],{},[204,4928,222],{},[186,4930,4931,4933,4935],{},[204,4932,227],{},[204,4934,209],{},[204,4936,232],{},[186,4938,4939,4941,4943],{},[204,4940,237],{},[204,4942,240],{},[204,4944,243],{},[186,4946,4947,4949,4951],{},[204,4948,248],{},[204,4950,240],{},[204,4952,253],{},[16,4954,256,4955,260],{},[26,4956,259],{},[16,4958,263,4959,268,4962,274,4965,280,4968,285],{},[99,4960,267],{"href":101,"rel":4961},[103],[99,4963,273],{"href":271,"rel":4964},[103],[99,4966,279],{"href":277,"rel":4967},[103],[99,4969,284],{"href":283},[11,4971,288],{"id":288},[16,4973,291],{},[33,4975,4976,4980,4982,4984,4986],{},[36,4977,296,4978,299],{},[73,4979,75],{},[36,4981,302],{},[36,4983,305],{},[36,4985,308],{},[36,4987,311],{},[16,4989,314],{},[16,4991,4992],{},[26,4993,319],{},[321,4995],{},[16,4997,325],{},[16,4999,328],{},[16,5001,5002],{},[99,5003,334],{"href":101,"rel":5004},[103],{"title":336,"searchDepth":337,"depth":337,"links":5006},[5007,5008,5009,5010,5011],{"id":13,"depth":340,"text":14},{"id":67,"depth":340,"text":68},{"id":95,"depth":340,"text":95},{"id":174,"depth":340,"text":175},{"id":288,"depth":340,"text":288},[5013,5014,5015,5016],{"q":351,"a":352},{"q":354,"a":355},{"q":357,"a":358},{"q":360,"a":361},{},{"title":6,"description":346},[369,370,371,372,373,374,375,376],[380,381],1782320781062]