[{"data":1,"prerenderedAt":3421},["ShallowReactive",2],{"build-logs-metool":3,"build-log-metool-2026-04-12-capability-first-ux":3230},[4,330,604,834,1072,1413,1582,1713,1977,2163,2327,2468,2638,2787,2921,3096],{"id":5,"title":6,"body":7,"date":292,"description":293,"draft":294,"extension":295,"faq":296,"meta":309,"navigation":310,"path":311,"project":312,"readingTime":313,"seo":314,"seoKeywords":315,"stem":323,"summary":324,"tags":325,"updated":328,"__hash__":329},"builds\u002Fbuilds\u002Fmetool\u002F2026-04-12-capability-first-ux.md","用数据发现了用户在哪里流失，然后我重写了自己的 UX 准则",{"type":8,"value":9,"toc":276},"minimark",[10,14,27,34,37,43,46,49,53,56,61,67,70,92,96,102,104,124,128,137,141,144,151,156,171,174,178,181,187,192,224,228,231,238,249,252,258,261,264,267,270,273],[11,12,13],"h2",{"id":13},"用自己做的工具分析自己的工具",[15,16,17,18,26],"p",{},"最近用自己的 ",[19,20,25],"a",{"href":21,"rel":22,"target":24},"https:\u002F\u002Fgithub.com\u002FMorvanZhou\u002Fgoogle-analytics-and-search-improve",[23],"nofollow","_blank","GA4 + GSC 分析技能"," 做了一次 metool 的完整数据审查。这个技能会自动拉取 Google Analytics 和 Search Console 的数据，分析用户行为路径，找出实际用户行为和预期目标之间的落差。",[15,28,29,30],{},"数据里有一个细节让我停下来认真想了很久：",[31,32,33],"strong",{},"工具页面的跳出率比我预期的高很多，而且用户停留时间集中在前 10 秒。",[15,35,36],{},"10 秒。用户打开了工具页面，扫了一眼，然后就离开了。",[15,38,39,40],{},"我重新打开了几个自己做的工具页面，第一次以\"用户\"而不是\"作者\"的视角去看。结论让我有点不舒服：",[31,41,42],{},"很多工具页面，在我没有上传任何文件之前，页面几乎是空的。",[15,44,45],{},"一个上传框，一段描述文字，仅此而已。用户不知道上传之后会发生什么，不知道有哪些配置选项，不知道最终结果长什么样子。唯一的选择是上传并等待——这需要一定的信任成本。",[15,47,48],{},"而用户不愿意在信任成本上赌注的时候，他们就直接离开了。",[11,50,52],{"id":51},"提炼两条-ux-准则","提炼两条 UX 准则",[15,54,55],{},"这次体验让我重新想了工具类产品的交互逻辑，最后沉淀成两条准则。",[57,58,60],"h3",{"id":59},"能力先于数据capability-first-ux","能力先于数据（Capability-First UX）",[15,62,63,66],{},[31,64,65],{},"界面的结构与能力应独立于用户数据而完整存在。"," 数据的有无只改变状态，不改变界面的骨架与可见范围。",[15,68,69],{},"具体来说：",[71,72,73,80,86],"ul",{},[74,75,76,79],"li",{},[31,77,78],{},"零数据可读性","：即使没有任何用户输入，界面本身就是工具能力的完整说明书",[74,81,82,85],{},[31,83,84],{},"结构恒定，状态渐进","：页面不因数据到达而从一种布局跳变为另一种布局",[74,87,88,91],{},[31,89,90],{},"入口即全貌","：用户首次进入时所见 ≈ 工作中所见，消除「上传后才知道能做什么」的认知黑箱",[57,93,95],{"id":94},"因果并列cause-effect-juxtaposition","因果并列（Cause-Effect Juxtaposition）",[15,97,98,101],{},[31,99,100],{},"输入区与输出区在桌面端应并列放置，让用户一眼感知因果关系。"," 上下堆叠的布局迫使用户滚动才能看到操作的结果，打断了「操作 → 反馈」的认知流。",[15,103,69],{},[71,105,106,112,118],{},[74,107,108,111],{},[31,109,110],{},"空间换认知","：桌面端屏幕宽度充裕时，优先用横向空间并列展示「输入 → 输出」",[74,113,114,117],{},[31,115,116],{},"结果常驻可见","：输出区域使用 sticky 定位，在用户调整配置或滚动时始终停留在视口内",[74,119,120,123],{},[31,121,122],{},"Demo 与正式态视觉分离","：示例内容必须在视觉上与正式操作态有明确区分，避免用户误判",[11,125,127],{"id":126},"拿-iphone-拼长图工具做验证","拿 iPhone 拼长图工具做验证",[15,129,130,131,136],{},"想清楚这两条准则之后，我选了 metool 上的 ",[19,132,135],{"href":133,"rel":134,"target":24},"https:\u002F\u002Fmetool.online\u002Fimages\u002FiphoneLongImageStitch\u002F",[23],"iPhone 拼长图"," 工具来做重构验证，因为这个工具的原始版本是一个典型的反例。",[57,138,140],{"id":139},"老版本上传之后才能看见","老版本：上传之后才能看见",[15,142,143],{},"下面是老版本在用户没有上传任何图片时的页面：",[15,145,146],{},[147,148],"img",{"alt":149,"src":150},"老版本空状态：只有上传框，看不到任何功能结构","\u002Fb\u002Fmetool\u002Fux-compare-old-empty.png",[15,152,153],{},[31,154,155],{},"老版本的问题：",[157,158,159,162,165,168],"ol",{},[74,160,161],{},"上传区域之下的设置项（格式、品质、是否保持比例）和结果预览，只有上传图片之后才会出现",[74,163,164],{},"用户在上传前完全无法判断这个工具「有多少配置项」「结果长什么样」",[74,166,167],{},"整个页面是典型的垂直堆叠：上传 → 设置 → 结果，用户需要滚动才能看到操作结果",[74,169,170],{},"点击「开始拼接」之后，需要向下滚动才能看到结果",[15,172,173],{},"这是一个用户必须「先投入，才能了解」的工具。信任门槛很高。",[57,175,177],{"id":176},"新版本首屏即全貌","新版本：首屏即全貌",[15,179,180],{},"下面是新版本在用户没有上传任何图片时的页面：",[15,182,183],{},[147,184],{"alt":185,"src":186},"新版本空状态：界面骨架完整，设置和结果区始终可见","\u002Fb\u002Fmetool\u002Fux-compare-new-empty.png",[15,188,189],{},[31,190,191],{},"新版本的变化：",[157,193,194,200,206,212,218],{},[74,195,196,199],{},[31,197,198],{},"桌面端并列布局","：左侧是上传区 + 设置栏，右侧是结果预览区，不需要滚动就能同时看到",[74,201,202,205],{},[31,203,204],{},"设置栏始终可见","：格式选择、品质滑块、自动去重叠开关，在上传前就能看见（视觉上淡化但结构完整）",[74,207,208,211],{},[31,209,210],{},"结果区始终可见","：右侧结果区在无数据时以占位图展示，sticky 定位固定在视口内",[74,213,214,217],{},[31,215,216],{},"Demo 模式","：首次进入时自动加载示例图片并展示拼接结果，用户一进门就能看到完整的「输入 → 结果」链路",[74,219,220,223],{},[31,221,222],{},"Demo 视觉分离","：示例内容用虚线边框、降低饱和度、灰色 sparkle 标签标注，明确与正式操作态区分；上传入口始终保持可见",[57,225,227],{"id":226},"关键细节demo-上方保留上传入口","关键细节：Demo 上方保留上传入口",[15,229,230],{},"这里有一个微妙的设计决策：Demo 内容和上传入口不能相互遮挡。",[15,232,233,234,237],{},"如果 Demo 内容填满了上传区，用户反而找不到「我要上传自己的图片」入口。所以新版本的处理是：Demo 状态下，",[31,235,236],{},"上传 FileDropZone 在上，Demo 缩略图展示在下","，用户随时都能直接拖拽上传，不需要先\"退出\"Demo 模式。",[239,240,245],"pre",{"className":241,"code":243,"language":244},[242],"language-text","┌─────────────────┐  ┌──────────────────┐\n│  📁 拖拽上传    │  │  ✦ Demo 结果预览 │\n│                 │  │                  │\n│  [FileDropZone] │  │  [stitched img]  │\n│                 │  │                  │\n├─────────────────┤  │  ↑ sticky 固定   │\n│  ✦ DEMO         │  └──────────────────┘\n│  [示例缩略图]   │\n│  → Demo 结果   │\n├─────────────────┤\n│  格式  品质  □  │  ← 设置栏始终可见\n└─────────────────┘\n","text",[246,247,243],"code",{"__ignoreMap":248},"",[11,250,251],{"id":251},"这两条准则的本质",[15,253,254,255],{},"回头看，这两条准则本质上在解决同一个问题：",[31,256,257],{},"降低用户的认知税。",[15,259,260],{},"用户的认知资源是有限的。如果用户需要先上传、先等待，才能推断出「这个工具大概能做什么」，这个推断过程本身就是认知税。而工具类产品的用户通常是来解决具体问题的，他们不愿意把认知资源花在搞清楚界面上。",[15,262,263],{},"「能力先于数据」把这份认知税降为零——界面自己就是说明书。\n「因果并列」把操作反馈的延迟降为零——结果就在输入旁边。",[15,265,266],{},"两者加在一起，用户的\"我能做什么？\"\"做完之后是什么样？\"这两个问题，在进入页面的第一秒就有了答案。",[11,268,269],{"id":269},"接下来的节奏",[15,271,272],{},"这次重构完成了拼长图工具，接下来会陆续把这两条准则应用到 metool 上其他的工具页面。优先处理那些「零数据状态下几乎是空白页」的工具。",[15,274,275],{},"同时继续用 GA4 数据来验证假设——这次改动是否真的降低了跳出率，用户停留时间是否有变化。数据说了算。",{"title":248,"searchDepth":277,"depth":277,"links":278},3,[279,281,285,290,291],{"id":13,"depth":280,"text":13},2,{"id":51,"depth":280,"text":52,"children":282},[283,284],{"id":59,"depth":277,"text":60},{"id":94,"depth":277,"text":95},{"id":126,"depth":280,"text":127,"children":286},[287,288,289],{"id":139,"depth":277,"text":140},{"id":176,"depth":277,"text":177},{"id":226,"depth":277,"text":227},{"id":251,"depth":280,"text":251},{"id":269,"depth":280,"text":269},"2026-04-12","用自己做的 GA4 + GSC 分析工具审查 metool 的用户行为数据，发现用户在工具页面的一个关键流失点——不知道能做什么就离开了。这让我重新审视了整个交互逻辑，提炼出两条核心 UX 准则，并用 iPhone 拼长图工具做了一次完整的重构。",false,"md",[297,300,303,306],{"q":298,"a":299},"什么是「能力先于数据」UX 原则？","界面的结构与功能区域应该独立于用户数据而完整存在。数据的有无只改变控件状态（启用\u002F禁用、填充\u002F占位），不改变界面的骨架与可见范围。用户第一眼看到的界面，就已经是工具能做什么的完整说明书。",{"q":301,"a":302},"什么是「因果并列」UX 原则？","在桌面端宽度充裕时，把输入区（操作\u002F配置）和输出区（结果\u002F预览）并列放置，让用户一眼就能感知因果关系。输出区使用 sticky 定位，在用户操作时始终停留在视口内，提供即时反馈。",{"q":304,"a":305},"为什么 Demo 内容要和正式操作态视觉上区分开？","如果 Demo 数据和用户实际操作结果在视觉上没有区别，用户容易误以为「数据已经预填了」或者「页面有 Bug」。使用降低饱和度、虚线边框、灰色调、标签标注等手段明确区分，同时 Demo 展示区始终保持上传入口可见，避免用户找不到操作入口。",{"q":307,"a":308},"这次 UX 重构具体改了什么？","把原来「先上传才能看到设置和结果区」的垂直堆叠布局，改为「设置和结果预览始终可见，数据到来前以占位\u002F禁用态展示」的并列布局。同时加入 Demo 模式，用户首次进入就能看到完整的输入 + 结果展示，消除了「上传后才知道能做什么」的认知黑箱。",{},true,"\u002Fbuilds\u002Fmetool\u002F2026-04-12-capability-first-ux","metool",6,{"title":6,"description":293},[316,317,318,319,320,321,322],"独立开发 UX 设计","工具类产品交互设计","能力先于数据 UX","因果并列布局","用户留存优化","Google Analytics 用户行为分析","在线工具交互优化","builds\u002Fmetool\u002F2026-04-12-capability-first-ux","通过 GA4 数据分析发现工具页面的高跳出率根源在于「数据到来前界面是空的」，提炼出「能力先于数据」和「因果并列」两条 UX 准则，并在 iPhone 拼长图工具上完成了完整重构，新版本在首屏即展示完整的界面骨架和 Demo 结果。",[326,327],"独立开发","产品思考",null,"4xRt7OTQ-Eb2TfiUQvHXYGeDYvUFh9V6f-mS56bDP-U",{"id":331,"title":332,"body":333,"date":574,"description":575,"draft":294,"extension":295,"faq":576,"meta":589,"navigation":310,"path":590,"project":312,"readingTime":591,"seo":592,"seoKeywords":593,"stem":600,"summary":601,"tags":602,"updated":328,"__hash__":603},"builds\u002Fbuilds\u002Fmetool\u002F2026-04-06-screen-editor.md","录了个产品演示，观众说看不清我点了哪里",{"type":8,"value":334,"toc":564},[335,341,344,347,350,356,359,363,370,373,379,382,389,392,405,410,413,419,422,425,428,442,445,448,454,457,460,473,483,490,494,497,504,507,510,513,527,539,542,546,552,555,558,561],[15,336,337],{},[147,338],{"alt":339,"src":340},"metool editor","\u002Fb\u002Fmetool\u002Fvideo-editor-cover.png",[11,342,343],{"id":343},"录屏视频的老问题",[15,345,346],{},"做独立开发这一年多，产品演示视频是绕不开的事。",[15,348,349],{},"不管是在 Product Hunt 上发布新工具、在 metool 官网展示功能，还是录一段教程发到 B站，都需要录屏。录屏本身不难，macOS 自带的录屏就够用。但录完之后看回放，总觉得哪里不对。",[15,351,352,353],{},"问题很明确：",[31,354,355],{},"观众看不清我到底点了哪里。",[15,357,358],{},"光标在 1080p 的全屏画面里移动，菜单上某个选项被选中了，终端里跑出了一行关键输出。这些对我来说很清楚，因为我知道自己在干什么。但对观众来说，他们不是在\"看\"演示，而是在满屏幕\"找\"我点了哪里。",[11,360,362],{"id":361},"openscreen-解决了问题但带来了新问题","OpenScreen 解决了问题，但带来了新问题",[15,364,365,366,369],{},"之前我一直在用 OpenScreen 做录屏视频的后期处理。它最核心的功能就是",[31,367,368],{},"动态聚焦","：在录屏视频的任意时间点，画面自动放大到你指定的操作区域，停留一会儿后平滑缩回全景。",[15,371,372],{},"效果很好，观众的视线被自然引导到关键操作，不需要加红框、画箭头、配旁白说\"请注意看右上角\"。",[15,374,375,376],{},"但用了一段时间后，有一个持续困扰我的问题：",[31,377,378],{},"OpenScreen 的操作逻辑和我习惯的剪辑软件差太远了。",[15,380,381],{},"我日常用剪映和 iMovie，已经形成了肌肉记忆。播放头定位、快捷键分割、拖拽修剪、时间线操作，这些在剪映里是一套非常直觉的流程。但 OpenScreen 是 Electron 桌面应用，它的快捷键体系、界面交互、操作逻辑都是自成一套的。",[15,383,384,385,388],{},"每次打开 OpenScreen，我都需要一个\"切换脑子\"的过程。不是说它不好用，而是我用得",[31,386,387],{},"不顺手","。对一个偶尔才用一次的工具来说，这个切换成本太高了。",[11,390,391],{"id":391},"自己做一个",[15,393,394,395,398,399,404],{},"既然痛点这么明确，思路也很清楚：",[31,396,397],{},"做一个操作习惯对标剪映的录屏视频编辑器，把动态聚焦作为核心功能，跑在浏览器里。"," 于是就有了 metool 的 ",[19,400,403],{"href":401,"rel":402,"target":24},"https:\u002F\u002Fmetool.online\u002Fvideos\u002FscreenEditor\u002F",[23],"录屏视频编辑器","。",[406,407],"video-player",{"alt":408,"src":409},"演示视频","\u002Fb\u002Fmetool\u002Feditor-demo_edited_compressed.mp4",[15,411,412],{},"不需要安装，不限平台，打开网页就能用。操作逻辑不需要重新学，⌘B 分割、拖拽修剪、时间线多片段管理，和剪映一模一样。",[15,414,415,416],{},"核心差异点只有一个：",[31,417,418],{},"动态聚焦是一等公民。",[15,420,421],{},"在剪映或 iMovie 里，如果你想做类似的效果，需要手动打关键帧、调缩放参数、算坐标位置。能做，但流程很长。在这个编辑器里，按 Z 键，在预览画面上框选一个区域，就完成了。视频会以 ease-in-out 动画自动放大到那个区域，停留设定时间后平滑缩回。",[11,423,424],{"id":424},"动态聚焦怎么用",[15,426,427],{},"具体的操作流程是这样的：",[157,429,430,433,436,439],{},[74,431,432],{},"上传一段录屏视频（MP4\u002FMOV\u002FM4V，200MB 以内）",[74,434,435],{},"在时间线上定位到需要聚焦的时间点",[74,437,438],{},"按 Z 键，在预览画面上框选关键操作区域",[74,440,441],{},"视频就会在那个时间点自动放大到框选区域",[15,443,444],{},"每个 Zoom 的进入和退出都有过渡动画，默认 1 秒，可以调。如果片段时长不够，系统会自动适配过渡参数，不会出现动画卡顿的情况。",[15,446,447],{},"在时间线上，Zoom 关键帧是可以直接拖拽的，调整位置和时长都很直观。",[15,449,450,453],{},[31,451,452],{},"这个功能让录屏视频从\"裸录屏\"变成\"有引导的专业演示\"。"," 观众不需要自己找重点，画面会自动带着他们看。",[11,455,456],{"id":456},"不只是动态聚焦",[15,458,459],{},"既然做了编辑器，剪辑的基本功能也不能少。",[15,461,462,465,466,469,470,404],{},[31,463,464],{},"时间线剪辑","完全对标剪映的操作方式：播放头定位 → ⌘B 分割 → 拖拽修剪头尾 → 拖拽重排序。每个片段可以独立设置 ",[31,467,468],{},"0.25x 到 4x 的变速","（慢放关键步骤、快进重复操作），以及 ",[31,471,472],{},"0 到 200% 的音量调节",[15,474,475,478,479,482],{},[31,476,477],{},"视觉效果","是另一个加分项。准备了 ",[31,480,481],{},"16 款 macOS 风格壁纸","作为背景（深空紫、日落、海洋蓝、极光绿等），加上渐变和纯色选项。圆角、阴影强度、内边距、背景模糊都可以调。录屏画面套上这些效果，瞬间从\"截屏录像\"变成\"产品宣传片\"的质感。",[15,484,485,486,489],{},"还做了",[31,487,488],{},"编辑进度持久化","。所有编辑状态自动保存到 IndexedDB，下次上传同一个视频，片段分割、Zoom 关键帧、变速、音量、样式配置全部恢复。不用担心浏览器关了就白干了。",[11,491,493],{"id":492},"导出浏览器也能做","导出：浏览器也能做",[15,495,496],{},"导出是我最担心的环节。视频编码在浏览器里跑，性能够吗？",[15,498,499,500,503],{},"答案是够的。用了浏览器原生的 ",[31,501,502],{},"WebCodecs API","，H.264 视频编码 + AAC 音频编码，GPU 加速。支持原始分辨率、1080p、720p、480p 多档输出。最关键的是，动态聚焦效果、变速、音量调节、视觉样式，在导出的视频里全部完整保留。",[15,505,506],{},"不需要上传到服务器，所有处理都在本地完成。",[11,508,509],{"id":509},"和其他工具的定位区别",[15,511,512],{},"市面上做录屏和编辑的工具不少，但定位各有不同。",[15,514,515,518,519,522,523,526],{},[31,516,517],{},"Screen Studio"," 是 macOS 上的标杆，月费 $29，录屏+编辑一体化，动画效果丰富。但它是付费的、macOS 专属的。",[31,520,521],{},"OpenScreen"," 是开源替代品，免费但需要下载 Electron 应用，操作方式自成一套。",[31,524,525],{},"Cap"," 是开源 Loom 替代品，核心是录屏+分享，编辑功能比较基础。",[15,528,529,530,534,535,538],{},"metool 的 ",[19,531,533],{"href":401,"rel":532,"target":24},[23],"录屏编辑器"," 不做录屏，",[31,536,537],{},"只做录屏的后期编辑","。定位很窄，但在这个窄赛道上做得更深：动态聚焦是一等公民、操作习惯对标主流编辑器、16 款壁纸背景一键配置、变速和音量精细控制、纯浏览器零安装。",[15,540,541],{},"对于 3 到 15 分钟的录屏视频后期，这个工具比全功能编辑器快得多。",[11,543,545],{"id":544},"自己用的工具做起来最有底气","自己用的工具，做起来最有底气",[15,547,548,549],{},"回头看 metool 上做过的所有工具，",[31,550,551],{},"自己是重度用户的工具，做起来方向感最强。",[15,553,554],{},"公众号 Markdown 转换是这样，音频编辑器是这样，这个录屏编辑器也是这样。需求不是调研来的，是自己用的时候觉得\"这里不对\"然后去解决的。",[15,556,557],{},"OpenScreen 的操作逻辑让我每次都要\"切换脑子\"，这不是一个产品评测意义上的缺点，是我个人工作流里的真实摩擦。这种摩擦只有自己用的时候才能感受到，别人的需求文档里不会写。",[15,559,560],{},"接下来要做的是把这个工具和之前的 GEO 策略结合起来：在工具页底部注入详细的使用场景文章，让 AI 搜索引擎也能理解\"这是一个带动态聚焦功能的在线录屏编辑器\"。",[15,562,563],{},"工具和内容的结合，是 metool 现在的主要打法。",{"title":248,"searchDepth":277,"depth":277,"links":565},[566,567,568,569,570,571,572,573],{"id":343,"depth":280,"text":343},{"id":361,"depth":280,"text":362},{"id":391,"depth":280,"text":391},{"id":424,"depth":280,"text":424},{"id":456,"depth":280,"text":456},{"id":492,"depth":280,"text":493},{"id":509,"depth":280,"text":509},{"id":544,"depth":280,"text":545},"2026-04-06","一直在用 OpenScreen 做产品演示视频的动态聚焦，但它的操作逻辑和剪映、iMovie 差太远，每次用都得重新适应。既然痛点这么明确，不如自己做一个。于是在 metool 上做了一个纯浏览器的录屏视频编辑器，核心功能就是动态聚焦。",[577,580,583,586],{"q":578,"a":579},"什么是动态聚焦（Smooth Zoom）？","动态聚焦是一种录屏视频的后期编辑技术。在视频的任意时间点，画面以丝滑动画自动放大到你框选的关键操作区域，停留设定时间后平滑缩回全景。这样观众的视线会被自然引导到操作重点，不需要红框标注或语音提示'请看右上角'。",{"q":581,"a":582},"这个编辑器和 Screen Studio、OpenScreen 有什么区别？","Screen Studio 是 macOS 专属付费应用（月费 $29），OpenScreen 是需要下载的 Electron 桌面应用且操作方式与主流编辑器差异大。MeTool 的编辑器是纯浏览器在线工具，零安装、跨平台、完全免费，操作习惯对标剪映和 iMovie（⌘B 分割、Z 添加 Zoom、拖拽修剪）。",{"q":584,"a":585},"这个编辑器除了动态聚焦还有什么功能？","包括剪映式时间线剪辑（分割、修剪、重排序）、0.25x-4x 变速控制、0-200% 音量调节、16 款 macOS 风格壁纸背景、可调圆角和阴影、背景模糊、编辑进度自动保存到 IndexedDB、WebCodecs GPU 加速导出。",{"q":587,"a":588},"浏览器里能做视频编辑和导出吗？","可以。使用浏览器原生的 WebCodecs API 进行 H.264 视频编码和 AAC 音频编码，GPU 加速渲染。支持原始分辨率、1080p、720p、480p 导出，动态聚焦效果和视觉样式在导出中完整保留。所有处理都在本地完成，不需要上传到服务器。",{},"\u002Fbuilds\u002Fmetool\u002F2026-04-06-screen-editor",5,{"title":332,"description":575},[403,594,595,596,597,598,599],"动态聚焦视频","Screen Studio 替代品","OpenScreen 替代品","在线视频编辑器","产品演示视频制作","Smooth Zoom 录屏","builds\u002Fmetool\u002F2026-04-06-screen-editor","因为 OpenScreen 的操作逻辑和主流剪辑软件差异太大，自己在 metool 上做了一个纯浏览器的录屏视频编辑器。核心功能是动态聚焦（Smooth Zoom），让录屏视频自动放大到关键操作区域，操作习惯完全对标剪映和 iMovie，零安装、跨平台、完全免费。",[326,327],"2EFMus60db2ekLagwzCI-PSBBHGV_YfvYna5X6_hodQ",{"id":605,"title":606,"body":607,"date":802,"description":803,"draft":294,"extension":295,"faq":804,"meta":817,"navigation":310,"path":818,"project":312,"readingTime":819,"seo":820,"seoKeywords":821,"stem":829,"summary":830,"tags":831,"updated":328,"__hash__":833},"builds\u002Fbuilds\u002Fmetool\u002F2026-04-04-content-meets-tool.md","尝到 SEO 甜头后，我开始琢磨怎么让 AI 也能找到我",{"type":8,"value":608,"toc":794},[609,613,616,622,625,628,634,637,640,643,646,651,654,660,663,666,669,675,678,684,689,692,695,701,707,745,751,758,761,764,767,773,776,780,783,786,791],[11,610,612],{"id":611},"seo-见效了然后呢","SEO 见效了，然后呢",[15,614,615],{},"上一篇写到，metool 的日活从不到 100 一下子涨到了 300。SEO 持续优化了几个月，终于看到了正反馈。",[15,617,618,619],{},"这种\"做了就有效果\"的感觉让人上头。自然而然地，我开始想下一个问题：",[31,620,621],{},"还有什么增长渠道是我没覆盖到的？",[15,623,624],{},"答案几乎是立刻浮现的：AI 搜索引擎。",[15,626,627],{},"越来越多的人不再打开 Google 输入关键词了。他们直接问 ChatGPT、Perplexity、Google AI Overview。AI 直接给答案，用户甚至不需要点进任何网站。",[15,629,630,631],{},"我自己就是这样。日常遇到问题，第一反应已经不是 Google，而是问 AI。那反过来想，",[31,632,633],{},"如果我的工具不能出现在 AI 的回答里，就等于在一个越来越大的流量入口前隐身了。",[11,635,636],{"id":636},"纯工具页的致命问题",[15,638,639],{},"想象一下 AI 搜索引擎在抓取 metool 的一个工具页。",[15,641,642],{},"页面上有什么？一个标题、几个按钮、一个上传区域、一些交互控件。对人类来说，一眼就知道这是个图片压缩工具。但对 LLM 来说，页面上几乎没有可供\"理解\"的文本内容。",[15,644,645],{},"当用户问 AI：\"有什么好用的在线图片压缩工具？\"AI 需要的是一段可引用的文字描述，而不是一堆 HTML 按钮。",[15,647,648],{},[31,649,650],{},"纯工具页，对 AI 搜索引擎来说几乎是隐形的。",[11,652,653],{"id":653},"把内容和工具捆在一起",[15,655,656,657],{},"解决思路很直接：",[31,658,659],{},"给每个工具页都写一篇文章。",[15,661,662],{},"不是单独写一个博客页面，而是直接把文章注入到工具页的底部。用户打开页面，首屏还是工具本身，交互区在最上面，不影响使用。但如果用户想了解更多，比如\"这个工具支持哪些格式\"\"压缩算法是怎么回事\"\"和其他工具比有什么区别\"，往下滑就能找到。",[15,664,665],{},"同时，当 AI 搜索引擎抓取这个页面时，它不仅能看到工具的标题和按钮，还能看到一篇完整的、结构化的文章。这就给了 AI 足够的上下文去理解：\"这个页面是一个在线图片压缩工具，支持 PNG\u002FJPG\u002FWebP，无需上传到服务器，本地浏览器处理...\"",[15,667,668],{},"以 Word 转 PDF 这个工具页为例，改之前页面底部到\"相关工具推荐\"就结束了：",[15,670,671],{},[147,672],{"alt":673,"src":674},"改版前：工具页底部只有 FAQ 和相关推荐，没有正文内容","\u002Fb\u002Fmetool\u002F2026-04-04_before_insert_article.jpeg",[15,676,677],{},"改之后，FAQ 和相关推荐下面多了一整篇文章，介绍这个工具的使用场景、核心优势、技术原理：",[15,679,680],{},[147,681],{"alt":682,"src":683},"改版后：工具页底部注入了一篇完整的 GEO 文章","\u002Fb\u002Fmetool\u002F2026-04-04_after_insert_article.jpeg",[15,685,686],{},[31,687,688],{},"一个页面，同时服务两类读者：人类用户和 AI 模型。",[11,690,691],{"id":691},"重新设计页面结构",[15,693,694],{},"为了让工具和内容自然共存，我和 AI 一起重新规划了页面结构：",[15,696,697],{},[147,698],{"alt":699,"src":700},"工具页的新页面结构","\u002Fb\u002Fmetool\u002F2026-04-04_geo_artical_section.png",[15,702,703,706],{},[31,704,705],{},"单工具页","从上到下分六层：",[157,708,709,715,721,727,733,739],{},[74,710,711,714],{},[31,712,713],{},"Header"," — 面包屑导航、工具标题、一句话描述",[74,716,717,720],{},[31,718,719],{},"工具交互区"," — 首屏核心，用户打开就能直接用",[74,722,723,726],{},[31,724,725],{},"Feature Highlights"," — 功能亮点，快速建立信任感",[74,728,729,732],{},[31,730,731],{},"Related Tools"," — 相关工具推荐，引导用户探索更多",[74,734,735,738],{},[31,736,737],{},"FAQ Section"," — 常见问题，覆盖用户最可能搜索的问题",[74,740,741,744],{},[31,742,743],{},"SEO\u002FGEO 长文章"," — 给搜索引擎和 AI 模型的深度内容",[15,746,747,750],{},[31,748,749],{},"分类集合页","也类似，在工具卡片网格下面加了分类级的 FAQ 和介绍文章。",[15,752,753,754,757],{},"关键设计原则是：",[31,755,756],{},"工具功能在上，内容在下，互不干扰。"," 对着急用工具的人，首屏就是交互区；对想深入了解的人，向下滑就有完整信息；对 AI 爬虫，整个页面都是可理解的结构化内容。",[11,759,760],{"id":760},"为什么我觉得这个方向很重要",[15,762,763],{},"这不只是一个 SEO 技巧，而是一个对未来的判断。",[15,765,766],{},"传统搜索引擎的逻辑是：用户搜关键词 → 看到结果列表 → 点进网站。在这个模式里，你只需要排名靠前就行。",[15,768,769,770],{},"AI 问答的逻辑完全不同：用户提问 → AI 综合多个来源生成答案 → 可能附上引用链接。在这个模式里，",[31,771,772],{},"你的内容需要足够好、足够结构化，才能被 AI \"选中\"作为答案来源。",[15,774,775],{},"一个只有按钮和交互控件的工具页，在 AI 问答的世界里是不存在的。但一个工具页加上一篇高质量文章，就有可能在用户问\"best online audio editor\"的时候被 AI 引用。",[11,777,779],{"id":778},"geo-的实验继续","GEO 的实验继续",[15,781,782],{},"从之前加 llms.txt、FAQ Schema、HowTo 结构化数据，到现在给每个工具页注入长文章，metool 一直在做 GEO（Generative Engine Optimization）的实验。",[15,784,785],{},"这些尝试能不能带来效果，还需要时间验证。但逻辑链条是清晰的：",[15,787,788],{},[31,789,790],{},"更多可被 AI 理解的内容 → AI 搜索引擎更容易引用 → 在 AI 问答时代获得更多曝光",[15,792,793],{},"传统 SEO 让你在 Google 结果页出现，GEO 让你在 AI 的回答里出现。两条路都得走。",{"title":248,"searchDepth":277,"depth":277,"links":795},[796,797,798,799,800,801],{"id":611,"depth":280,"text":612},{"id":636,"depth":280,"text":636},{"id":653,"depth":280,"text":653},{"id":691,"depth":280,"text":691},{"id":760,"depth":280,"text":760},{"id":778,"depth":280,"text":779},"2026-04-04","用户量涨了三倍，SEO 是见效了。但我意识到光靠 Google 排名不够，还得让 ChatGPT、Perplexity 这些 AI 搜索引擎也能推荐你。问题是纯工具页对 AI 几乎是隐形的。于是我在每个工具页底部注入了一篇文章，让工具和内容捆绑。",[805,808,811,814],{"q":806,"a":807},"为什么要在工具页里写文章？","纯工具页几乎没有文本内容，LLM 抓取后无法理解这个页面是做什么的。当用户问 AI'有什么在线工具可以压缩图片'时，AI 没有足够的文本信息来引用你的工具页。在工具页注入一篇文章，等于给 AI 搜索引擎提供了可引用的内容。",{"q":809,"a":810},"这对用户体验有影响吗？","文章放在页面底部，工具交互区仍然在首屏。用户打开页面就能直接使用工具，不受影响。但如果用户想了解更多（比如使用技巧、格式对比、常见问题），向下滑就能找到。这种'工具在上、内容在下'的布局同时服务了两类需求。",{"q":812,"a":813},"什么是 GEO（Generative Engine Optimization）？","GEO 是针对 AI 搜索引擎（ChatGPT、Perplexity、Google AI Overview 等）的优化策略。传统 SEO 优化的是 Google 排名，GEO 优化的是'AI 回答问题时是否引用你的内容'。核心手段包括：提供结构化的高质量文本、FAQ、使用步骤说明、llms.txt 等，让 LLM 更容易理解和引用你的页面。",{"q":815,"a":816},"工具页的新页面结构是怎样的？","单工具页从上到下分六层：Header（面包屑\u002F标题\u002F描述）、工具交互区（首屏核心）、Feature Highlights（功能亮点信任信号）、Related Tools（相关工具推荐）、FAQ Section（常见问题）、SEO\u002FGEO 长文章（给搜索引擎和 AI 模型）。分类集合页则是：Header、工具卡片网格、FAQ、分类级介绍文章。",{},"\u002Fbuilds\u002Fmetool\u002F2026-04-04-content-meets-tool",4,{"title":606,"description":803},[822,823,824,825,826,827,828],"GEO 优化策略","AI 搜索引擎优化","工具页内容注入","LLM 检索增强","Generative Engine Optimization","工具站内容策略","AI 问答时代 SEO","builds\u002Fmetool\u002F2026-04-04-content-meets-tool","SEO 见效、用户涨了三倍后，开始琢磨下一个增长渠道：AI 搜索引擎。发现纯工具页对 LLM 几乎是隐形的，没有文本内容就没有检索有效性。于是在每个工具页底部注入了长文章，让工具和内容深度捆绑，同时服务人类用户和 AI 模型。",[326,832],"AI 应用","4m_V9B7pBnSr7zFPgd5BFaVEP2UB1HjkdSvteBao61Q",{"id":835,"title":836,"body":837,"date":1043,"description":1044,"draft":294,"extension":295,"faq":1045,"meta":1058,"navigation":310,"path":1059,"project":312,"readingTime":819,"seo":1060,"seoKeywords":1061,"stem":1068,"summary":1069,"tags":1070,"updated":328,"__hash__":1071},"builds\u002Fbuilds\u002Fmetool\u002F2026-04-03-user-growth-and-quality.md","用户突然变多了，我慌了",{"type":8,"value":838,"toc":1035},[839,842,845,851,854,857,863,867,870,873,879,882,888,891,894,897,903,906,938,944,948,951,954,958,963,966,969,972,978,981,987,993,999,1002,1006,1009,1016,1022,1025,1032],[11,840,841],{"id":841},"数据开始动了",[15,843,844],{},"打开 Google Analytics，我差点没反应过来。",[15,846,847],{},[147,848],{"alt":849,"src":850},"metool 活跃用户增长趋势","\u002Fb\u002Fmetool\u002Fuser-boot.png",[15,852,853],{},"过去 28 天，活跃用户 880，涨了 67.9%。新用户 818，涨了 66.3%。但最让我兴奋的是那条曲线的尾巴：最近两天，日活跃用户从不到 100 一下子拉到了 300 左右。",[15,855,856],{},"前几篇文章一直在讲 SEO 优化、数据驱动、扩展 3D 品类。说实话，做这些事的时候心里是没底的，因为 SEO 是一个滞后反馈的游戏，你做了优化，可能要等几周甚至几个月才能看到效果。",[15,858,859,860],{},"现在数据给了一个正反馈：",[31,861,862],{},"方向是对的。",[11,864,866],{"id":865},"兴奋了三秒然后开始焦虑","兴奋了三秒，然后开始焦虑",[15,868,869],{},"高兴了一会儿之后，一个新的担忧浮上来。",[15,871,872],{},"这大半年来，我的策略一直是\"快速上线\"。借助 AI Coding 的速度，很多工具从想法到上线只用了一两个小时。几十个工具就是这么铺出来的。",[15,874,875,876],{},"但\"快速上线\"的代价是：",[31,877,878],{},"很多工具没有经过认真测试。",[15,880,881],{},"用户少的时候，问题不明显。反正也没几个人用，有 bug 也没人发现。但现在日活 300 了，如果用户点进来发现工具不好用、功能太单薄、甚至有 bug，第一印象就毁了。",[15,883,884,885,404],{},"做工具站最怕的不是没人来，而是",[31,886,887],{},"人来了，用了一次，再也不来了",[11,889,890],{"id":890},"从最热门的页面开始",[15,892,893],{},"焦虑归焦虑，解决问题还是得靠数据。",[15,895,896],{},"打开 Google Analytics 的页面报告，看昨天哪些工具页面访问量最高：",[15,898,899],{},[147,900],{"alt":901,"src":902},"昨日访问量 Top 5 的工具页面","\u002Fb\u002Fmetool\u002F20260403-top-tools.png",[15,904,905],{},"排名很清晰：",[157,907,908,914,920,926,932],{},[74,909,910,913],{},[31,911,912],{},"3D 模型格式转换"," — 92 次浏览，79 个活跃用户",[74,915,916,919],{},[31,917,918],{},"音频编辑器"," — 36 次浏览，29 个活跃用户",[74,921,922,925],{},[31,923,924],{},"图片压缩"," — 33 次浏览，20 个活跃用户",[74,927,928,931],{},[31,929,930],{},"JSON 格式化"," — 26 次浏览，21 个活跃用户",[74,933,934,937],{},[31,935,936],{},"Markdown 转换器"," — 23 次浏览，20 个活跃用户",[15,939,940,941],{},"逻辑很简单：",[31,942,943],{},"用户最多的地方，最值得先修。",[11,945,947],{"id":946},"_3d-格式转换意料之中的第一名","3D 格式转换：意料之中的第一名",[15,949,950],{},"3D 模型格式转换排第一，不意外。上一篇文章里分析过，3D 工具是 metool 唯一有自然搜索流量的品类。这次用户增长，3D 工具应该贡献了不少。",[15,952,953],{},"我把这个工具从头到尾跑了一遍，测试了各种格式之间的互转。修复了几个边界情况的问题，确保核心流程是通的。",[11,955,957],{"id":956},"音频编辑器老工具的新问题","音频编辑器：老工具的新问题",[15,959,960,961,404],{},"让我真正停下来思考的是排第二的",[31,962,918],{},[15,964,965],{},"这个工具是很久之前做的，当时只做了最基本的功能：上传音频、简单裁剪、导出。能用，但仅此而已。",[15,967,968],{},"29 个活跃用户，对一个功能单薄的工具来说，其实不少了。这说明\"在线音频编辑\"这个需求是真实存在的。但如果用户进来发现只能做简单裁剪，大概率会失望离开。",[15,970,971],{},"我和 AI 做了一轮对话，梳理了音频编辑器真正需要的功能：",[15,973,974],{},[147,975],{"alt":976,"src":977},"和 AI 一起规划音频编辑器的功能增强","\u002Fb\u002Fmetool\u002F20260403-audio-editor-plan.png",[15,979,980],{},"梳理下来，功能可以分成三个梯队：",[15,982,983,986],{},[31,984,985],{},"第一梯队，高频刚需","：淡入淡出（避免裁剪后的爆音）、MP3\u002FOGG 导出（不要只能导出巨大的 WAV）、音量调节、键盘快捷键、精确时间输入。这些不是\"加分项\"，而是\"没有就不好用\"。",[15,988,989,992],{},[31,990,991],{},"第二梯队，差异化竞争力","：静音检测自动裁切（播客和录课用户的刚需）、片段边界拖拽调整、片段分割、变速播放。这些功能在大多数在线音频编辑器上都没有，做出来就是竞争力。",[15,994,995,998],{},[31,996,997],{},"第三梯队，锦上添花","：波形\u002F频谱图切换、简易降噪、片段重叠检测、项目保存恢复。",[15,1000,1001],{},"思路很清楚：先把第一梯队做完，让工具从\"能用\"变成\"好用\"。",[11,1003,1005],{"id":1004},"从快速上线到让人用得住","从\"快速上线\"到\"让人用得住\"",[15,1007,1008],{},"回头看，这其实是一个自然的阶段切换。",[15,1010,1011,1012,1015],{},"前面大半年，核心命题是",[31,1013,1014],{},"覆盖面","：做更多工具、覆盖更多品类、占据更多搜索入口。速度是第一优先级。",[15,1017,1018,1019,404],{},"但当用户真的开始来了，核心命题就变了：",[31,1020,1021],{},"质量",[15,1023,1024],{},"一个工具好不好，不是我自己觉得好就行，而是用户用了之后愿不愿意再来。覆盖面解决的是\"让人发现你\"，质量解决的是\"让人留下来\"。",[15,1026,1027,1028,1031],{},"现在的策略是：",[31,1029,1030],{},"用数据找到用户最常用的工具，集中精力把它们做到真正好用。"," 不再追求工具数量的增长，而是把已有工具的深度做上去。",[15,1033,1034],{},"先从 3D 格式转换和音频编辑器开始。",{"title":248,"searchDepth":277,"depth":277,"links":1036},[1037,1038,1039,1040,1041,1042],{"id":841,"depth":280,"text":841},{"id":865,"depth":280,"text":866},{"id":890,"depth":280,"text":890},{"id":946,"depth":280,"text":947},{"id":956,"depth":280,"text":957},{"id":1004,"depth":280,"text":1005},"2026-04-03","SEO 持续优化后，metool 的活跃用户从日均不到 100 涨到了 300。兴奋之后是焦虑：很多工具没经过认真测试，用户真的能用吗？我决定从访问量最高的页面开始，逐个把质量关补上。",[1046,1049,1052,1055],{"q":1047,"a":1048},"metool 的用户增长是怎么实现的？","主要靠持续的 SEO 优化：默认语言切英文覆盖国际用户、全站加 FAQ 和 HowTo 结构化数据、基于搜索数据扩展 3D 工具品类、提交 IndexNow 加速收录。没有投广告，纯粹靠搜索引擎的自然流量增长。",{"q":1050,"a":1051},"用户变多后为什么会焦虑？","因为之前的策略是'快速上线'，借助 AI Coding 的速度，很多工具从开发到上线只用了一两个小时，没有做充分的功能测试。用户少的时候问题不明显，用户多了之后，功能不完善或存在 bug 会直接影响口碑和留存。",{"q":1053,"a":1054},"怎么决定优先测试和优化哪些工具？","看 Google Analytics 的页面浏览数据。昨天访问量最高的五个工具页面是：3D 模型格式转换（92 次浏览）、音频编辑器（36 次）、图片压缩（33 次）、JSON 格式化（26 次）、Markdown 转换器（23 次）。优先从访问量最高的开始测试和优化。",{"q":1056,"a":1057},"音频编辑器打算增强哪些功能？","分三个优先级：第一梯队是高频刚需（淡入淡出、MP3\u002FOGG 导出、音量调节、键盘快捷键）；第二梯队是差异化竞争力（静音检测自动裁切、片段边界拖拽调整、变速播放）；第三梯队是锦上添花（波形\u002F频谱图切换、简易降噪、项目保存恢复）。",{},"\u002Fbuilds\u002Fmetool\u002F2026-04-03-user-growth-and-quality",{"title":836,"description":1044},[1062,1063,1064,1065,1066,321,1067],"工具站用户增长","产品质量与用户体验","数据驱动功能优化","在线音频编辑器功能规划","独立开发产品测试","工具站功能迭代优先级","builds\u002Fmetool\u002F2026-04-03-user-growth-and-quality","metool 的 SEO 优化开始见效，活跃用户从日均不到 100 涨到 300。但用户变多带来了新的焦虑：很多工具是快速上线的，没有经过认真测试。通过 Google Analytics 找到访问量最高的工具页面，优先测试和增强 3D 模型格式转换和音频编辑器，从'快速上线'转向'让人用得住'。",[326,327],"BAltcFwRZ4So0Xjk-p8jOA2QfMGxN9df1AzCgd_7XrI",{"id":1073,"title":1074,"body":1075,"date":1382,"description":1383,"draft":294,"extension":295,"faq":1384,"meta":1397,"navigation":310,"path":1398,"project":312,"readingTime":591,"seo":1399,"seoKeywords":1400,"stem":1409,"summary":1410,"tags":1411,"updated":328,"__hash__":1412},"builds\u002Fbuilds\u002Fmetool\u002F2026-04-01-data-driven-building.md","接入 Google Search Console，用搜索数据决定下一步做什么",{"type":8,"value":1076,"toc":1372},[1077,1080,1083,1086,1092,1095,1098,1101,1104,1118,1121,1125,1128,1148,1154,1157,1160,1163,1166,1170,1173,1176,1208,1214,1217,1221,1224,1227,1270,1273,1279,1285,1288,1291,1294,1297,1328,1331,1334,1337,1363,1369],[11,1078,1079],{"id":1079},"从搜索数据开始",[15,1081,1082],{},"上一篇聊了 URL 迁移导致检索量断崖式下跌。跌完之后呢？等恢复的同时，我开始认真看数据。",[15,1084,1085],{},"把 Google Search Console 的搜索词数据拉出来，终于看到了用户是怎么找到 metool 的：",[15,1087,1088],{},[147,1089],{"alt":1090,"src":1091},"Google Search Console 搜索词数据","\u002Fb\u002Fmetool\u002Fgoogle-search-queries.png",[15,1093,1094],{},"这张图里藏了很多信息。",[11,1096,1097],{"id":1097},"品牌词占主导",[15,1099,1100],{},"前四条搜索词全是品牌词的变体：me tool、metool、me tools、metools。加起来 49 次点击、1273 次展现。",[15,1102,1103],{},"这说明两件事：",[157,1105,1106,1112],{},[74,1107,1108,1111],{},[31,1109,1110],{},"目前大部分用户是\"知道 metool 才来的\"","，而不是搜某个具体需求然后发现了 metool。换句话说，自然搜索带来的新用户还很少。",[74,1113,1114,1117],{},[31,1115,1116],{},"品牌词的点击率不高","。metool 这个词 743 次展现只有 19 次点击，说明搜索结果页上的标题和描述还不够吸引人，或者排名位置不够靠前。",[15,1119,1120],{},"品牌搜索是基本盘，但不能只靠基本盘。要增长，必须让非品牌搜索也能带来流量。",[11,1122,1124],{"id":1123},"_3d-查看器是唯一的自然流量信号","3D 查看器是唯一的自然流量信号",[15,1126,1127],{},"往下看，终于看到了非品牌词：",[71,1129,1130,1136,1142],{},[74,1131,1132,1135],{},[31,1133,1134],{},"glb viewer"," — 1 次点击，97 次展现",[74,1137,1138,1141],{},[31,1139,1140],{},"glb viewer online"," — 1 次点击，20 次展现",[74,1143,1144,1147],{},[31,1145,1146],{},"gltf viewer online"," — 1 次点击，14 次展现",[15,1149,1150,1151],{},"点击量虽然只有个位数，但展现量说明了问题：",[31,1152,1153],{},"有人在搜这些词，而且 Google 认为 metool 的页面和这些搜索词相关。",[15,1155,1156],{},"97 次展现意味着 Google 已经把 metool 的 3D 查看器页面展示给了将近 100 个搜索用户。只是排名可能还不够高，用户没有点进来。",[15,1158,1159],{},"这是一个信号：3D 在线查看器是一个有真实需求的品类，而且 metool 已经有了初步的搜索基础。",[11,1161,1162],{"id":1162},"游戏也有微弱信号",[15,1164,1165],{},"最后两条：五子棋ai（11 次展现）、围棋在线（8 次展现）。量很小，但说明游戏品类也有一些自然搜索曝光。不过游戏市场的竞争格局和工具市场完全不同，暂时不作为重点。",[11,1167,1169],{"id":1168},"和-ai-一起做用户调研","和 AI 一起做用户调研",[15,1171,1172],{},"光看搜索词还不够。搜索「glb viewer」的人到底是谁，他们真正需要什么？",[15,1174,1175],{},"我和 AI 一起做了一轮用户需求分析，拆解出了几类典型用户：",[71,1177,1178,1184,1190,1196,1202],{},[74,1179,1180,1183],{},[31,1181,1182],{},"3D 设计师","：快速预览模型效果，不想打开 Blender 或 Maya。metool 的 GLB Viewer 基本满足。",[74,1185,1186,1189],{},[31,1187,1188],{},"游戏开发者","：检查导出的模型是否正确，查看动画和材质。当前只能看，缺少模型信息面板。",[74,1191,1192,1195],{},[31,1193,1194],{},"3D 打印爱好者","：检查模型尺寸和可打印性。这部分完全没覆盖。",[74,1197,1198,1201],{},[31,1199,1200],{},"前端\u002FWeb 开发者","：预览要嵌入网页的 3D 资源，关心性能指标。也没覆盖。",[74,1203,1204,1207],{},[31,1205,1206],{},"采购和 PM","：收到 3D 资产后快速查看，不想装软件。基本满足。",[15,1209,1210,1211,404],{},"这个分析很有价值。它告诉我两件事：第一，3D 查看器的用户群比我想象的宽得多；第二，",[31,1212,1213],{},"不同用户需要的不只是\"查看\"，还有格式转换、模型优化、信息检查这些周边能力",[15,1215,1216],{},"围绕这些需求，新的工具方向就清晰了：不同格式的查看器覆盖更多搜索入口，模型优化器和格式转换器满足深层需求。每个新页面都是一个独立的长尾关键词入口。",[11,1218,1220],{"id":1219},"用数据做决策一口气强化整个-3d-品类","用数据做决策：一口气强化整个 3D 品类",[15,1222,1223],{},"不是只加一个工具，而是把整个 3D 品类做厚。",[15,1225,1226],{},"metool 之前只有 GLB\u002FglTF Viewer、STL Viewer 和 Text to 3D 三个 3D 相关工具。这次基于数据信号和用户调研，一口气补上了四个：",[71,1228,1229,1239,1249,1259],{},[74,1230,1231,1238],{},[31,1232,1233],{},[19,1234,1237],{"href":1235,"rel":1236,"target":24},"https:\u002F\u002Fmetool.online\u002F3d\u002FfbxViewer\u002F",[23],"FBX Viewer"," — 游戏开发和动画领域的主流格式，覆盖 fbx viewer online、fbx file viewer 等搜索词",[74,1240,1241,1248],{},[31,1242,1243],{},[19,1244,1247],{"href":1245,"rel":1246,"target":24},"https:\u002F\u002Fmetool.online\u002F3d\u002FusdzViewer\u002F",[23],"USDZ\u002FUSD Viewer"," — Apple AR 生态的标准格式，iOS 开发者和设计师的刚需",[74,1250,1251,1258],{},[31,1252,1253],{},[19,1254,1257],{"href":1255,"rel":1256,"target":24},"https:\u002F\u002Fmetool.online\u002F3d\u002FmodelOptimizer\u002F",[23],"3D Model Optimizer"," — 在线减面、压缩贴图，覆盖 reduce 3d model size、optimize glb file 等搜索词",[74,1260,1261,1269],{},[31,1262,1263,1264],{},"增强了 ",[19,1265,1268],{"href":1266,"rel":1267,"target":24},"https:\u002F\u002Fmetool.online\u002F3d\u002FmodelConvert\u002F",[23],"3D Model Format Converter"," — 支持 STL、OBJ、GLB、glTF、PLY、FBX、DAE 等格式互转",[15,1271,1272],{},"加上原有的三个，metool 的 3D 工具品类从 3 个扩展到了 7 个。",[15,1274,1275],{},[147,1276],{"alt":1277,"src":1278},"metool 的 3D 工具矩阵","\u002Fb\u002Fmetool\u002F3d-tools-matrix.png",[15,1280,1281,1282],{},"这就是数据驱动和凭感觉做的区别：",[31,1283,1284],{},"不是\"我觉得某个工具有用所以做\"，而是\"数据显示 3D 查看器有需求 → 调研发现用户群比想象的宽 → 围绕整个品类做厚\"。",[11,1286,1287],{"id":1287},"一个实验田",[15,1289,1290],{},"我想把 metool 做成数据驱动型构建的实验田。",[15,1292,1293],{},"之前做了大半年工具，模式是\"有什么想法就做什么\"。工具做了几十个，但哪些有人用、哪些没人用，心里没数。",[15,1295,1296],{},"现在的模式是一个循环：",[157,1298,1299,1305,1311,1317,1323],{},[74,1300,1301,1304],{},[31,1302,1303],{},"收集数据"," — Google Search Console 看搜索词，Google Analytics 看用户行为",[74,1306,1307,1310],{},[31,1308,1309],{},"分析信号"," — 哪些品类有自然需求，哪些搜索词有潜力",[74,1312,1313,1316],{},[31,1314,1315],{},"做出决策"," — 优先做数据验证过的方向",[74,1318,1319,1322],{},[31,1320,1321],{},"上线验证"," — 看新工具的搜索表现",[74,1324,1325],{},[31,1326,1327],{},"回到第一步",[15,1329,1330],{},"这个循环听起来简单，但和之前的工作方式完全不同。之前是\"做完就忘\"，现在是\"做完还要看数据反馈\"。",[11,1332,1333],{"id":1333},"下一步",[15,1335,1336],{},"3D 品类已经铺开了，接下来要做的是深耕和验证：",[71,1338,1339,1345,1351,1357],{},[74,1340,1341,1344],{},[31,1342,1343],{},"增强现有查看器的深度功能","：模型信息面板（顶点数、面数、材质列表）、截图导出、环境贴图切换、URL 直接加载。这些功能能提升用户停留时间和回访率。",[74,1346,1347,1350],{},[31,1348,1349],{},"优化品牌词的点击率","：743 次展现只有 19 次点击，搜索结果的标题和描述需要更有吸引力。",[74,1352,1353,1356],{},[31,1354,1355],{},"追踪新工具的搜索表现","：这批 3D 工具上线后，观察 Google 何时开始收录、展现量和点击量的变化趋势。这是验证\"数据驱动\"循环是否有效的关键一步。",[74,1358,1359,1362],{},[31,1360,1361],{},"观察 URL 迁移后的恢复速度","：上次切默认语言导致索引断崖，需要持续追踪。",[15,1364,1365,1366],{},"长期来看，我想验证一个假设：",[31,1367,1368],{},"一个工具站，能不能完全靠数据驱动来决定做什么、优化什么、放弃什么。",[15,1370,1371],{},"不靠直觉，不靠\"我觉得\"，只靠数据说话。metool 就是这个实验。",{"title":248,"searchDepth":277,"depth":277,"links":1373},[1374,1375,1376,1377,1378,1379,1380,1381],{"id":1079,"depth":280,"text":1079},{"id":1097,"depth":280,"text":1097},{"id":1123,"depth":280,"text":1124},{"id":1162,"depth":280,"text":1162},{"id":1168,"depth":280,"text":1169},{"id":1219,"depth":280,"text":1220},{"id":1287,"depth":280,"text":1287},{"id":1333,"depth":280,"text":1333},"2026-04-01","不再凭感觉做工具了。把 Google Search Console 接入工作流，看到真实的搜索词后发现 3D 查看器有自然流量潜力。和 AI 一起做了用户调研，一口气补上了 FBX Viewer、USDZ Viewer、3D 模型优化器。这是 metool 转向数据驱动型构建的第一步。",[1385,1388,1391,1394],{"q":1386,"a":1387},"为什么要用 Google Search Console 来指导工具开发？","Google Search Console 能看到用户是通过什么搜索词找到你的网站的，包括展现量和点击量。这比 Google Analytics 更直接地反映用户需求——用户在搜什么，说明他们需要什么。用这些数据来决定下一步做什么工具，比凭感觉靠谱得多。",{"q":1389,"a":1390},"搜索数据里发现了什么有价值的信号？","品牌词（metool、me tool 等）占了大部分点击，说明自然搜索带来的新用户还很少。但非品牌词中，glb viewer 有 97 次展现、gltf viewer online 有 14 次展现，说明 3D 在线查看器有真实的搜索需求，而且 Google 已经认为 metool 的页面与这些搜索词相关。",{"q":1392,"a":1393},"基于数据分析，这次做了哪些 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":1395,"a":1396},"什么是数据驱动型构建？","不再凭直觉决定做什么功能，而是通过搜索数据和用户行为数据发现真实需求，用 AI 辅助做深度调研，然后决定优先做什么。核心循环是：收集数据 → 分析信号 → AI 辅助调研 → 做出决策 → 上线验证 → 再看数据。metool 正在成为这种模式的实验田。",{},"\u002Fbuilds\u002Fmetool\u002F2026-04-01-data-driven-building",{"title":1074,"description":1383},[1401,1402,1403,1404,1405,1406,1407,1408],"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 个。这是从'凭感觉做工具'到'用数据决定做什么'的转变。",[326,327],"Pc5ArqDao5dfNG0TZmiUUo3Vq_NoOgAAuJWYzvhlGug",{"id":1414,"title":1415,"body":1416,"date":1552,"description":1553,"draft":294,"extension":295,"faq":1554,"meta":1567,"navigation":310,"path":1568,"project":312,"readingTime":819,"seo":1569,"seoKeywords":1570,"stem":1578,"summary":1579,"tags":1580,"updated":328,"__hash__":1581},"builds\u002Fbuilds\u002Fmetool\u002F2026-03-31-url-restructure-cost.md","切换默认语言后，检索量断崖式下跌",{"type":8,"value":1417,"toc":1545},[1418,1421,1424,1430,1433,1436,1439,1445,1448,1451,1458,1478,1483,1486,1489,1492,1495,1498,1501,1504,1524,1527,1530,1533,1536,1539,1542],[11,1419,1420],{"id":1420},"数据说话",[15,1422,1423],{},"先看 Google Search Console 的数据：",[15,1425,1426],{},[147,1427],{"alt":1428,"src":1429},"切换 URL 路径后检索量断崖式下跌","\u002Fb\u002Fmetool\u002Findex-optimize.png",[15,1431,1432],{},"从 1 月到 3 月中旬，metool.online 的 Impressions（展现量）和 Clicks（点击量）一直在稳步增长。Impressions 从每天几十涨到了 300+，Clicks 从 0 涨到了日均 20+。",[15,1434,1435],{},"三个月的积累，一个决定，几乎归零。",[11,1437,1438],{"id":1438},"发生了什么",[15,1440,1441,1442],{},"3 月 19 日，我做了一个决定：",[31,1443,1444],{},"把 metool.online 的默认语言从中文切成英文。",[15,1446,1447],{},"原因很简单：工具站的使用场景是全球通用的。图片压缩、视频转 GIF、JSON 格式化，这些需求不分国界。英文覆盖的潜在用户群远大于中文。",[15,1449,1450],{},"但我低估了这个改动对 SEO 的冲击。",[15,1452,1453,1454,1457],{},"metool 用的是 Nuxt i18n 的 ",[246,1455,1456],{},"prefix_except_default"," 策略——默认语言不带路径前缀，其他语言带前缀。切换默认语言意味着：",[71,1459,1460,1470],{},[74,1461,1462,1463,1466,1467],{},"之前的中文页面 ",[246,1464,1465],{},"\u002Fimages\u002Fcompress\u002F"," → 变成了 ",[246,1468,1469],{},"\u002Fzh\u002Fimages\u002Fcompress\u002F",[74,1471,1472,1473,1466,1476],{},"之前的英文页面 ",[246,1474,1475],{},"\u002Fen\u002Fimages\u002Fcompress\u002F",[246,1477,1465],{},[15,1479,1480],{},[31,1481,1482],{},"全站几十个工具的 URL 全部变了。",[15,1484,1485],{},"紧接着 3 月 26 日，我又做了一轮 trailing slash 统一和 sitemap 重建。双重打击。",[11,1487,1488],{"id":1488},"代价",[15,1490,1491],{},"Google 已经索引的所有旧 URL 全部失效。搜索引擎不知道这些页面\"搬家\"了，它只看到旧 URL 返回了不同的内容（英文版），或者根本找不到了。",[15,1493,1494],{},"结果就是图表上看到的：Impressions 从日均 300+ 跌到不足 80，Clicks 从日均 20+ 跌到接近 0。",[15,1496,1497],{},"三个月的 SEO 积累，几天之内几乎清零。",[11,1499,1500],{"id":1500},"本可以做得更好",[15,1502,1503],{},"回头看，这次迁移本可以更平滑：",[71,1505,1506,1512,1518],{},[74,1507,1508,1511],{},[31,1509,1510],{},"301 重定向","：把旧 URL 301 到新 URL，告诉搜索引擎\"页面搬家了\"而不是\"页面消失了\"。SSG 静态站做 301 需要在部署层配置，当时没有做。",[74,1513,1514,1517],{},[31,1515,1516],{},"过渡期 sitemap","：新旧 URL 同时提交，用 canonical 标签指向新 URL，给搜索引擎过渡时间。",[74,1519,1520,1523],{},[31,1521,1522],{},"分步迁移","：先切语言，等索引稳定了再统一 trailing slash，避免双重打击。",[15,1525,1526],{},"这些都是标准的 URL 迁移方案，但我当时只想着\"赶紧改完\"，没有给搜索引擎留缓冲。",[11,1528,1529],{"id":1529},"为什么我认为长期是对的",[15,1531,1532],{},"短期阵痛是确定的，但我依然认为这个决定是对的。",[15,1534,1535],{},"中文互联网的工具站竞争激烈，而且中文用户获取成本高。英文作为默认语言，每一个工具页面都在面向全球用户。\"online image compressor\"的搜索量是\"在线图片压缩\"的几十倍。",[15,1537,1538],{},"按照 Google 的重新索引周期，新 URL 被完全爬取和收录通常需要 2-4 周，恢复到之前的排名水平可能需要 1-2 个月。前提是新 sitemap 已正确提交、内容质量没有下降。",[15,1540,1541],{},"现在能做的就是：确保新 sitemap 正确、补上 301 重定向、然后等待。",[15,1543,1544],{},"SEO 是一个长期游戏。有时候你必须接受短期的损失，去换一个更大的可能性。",{"title":248,"searchDepth":277,"depth":277,"links":1546},[1547,1548,1549,1550,1551],{"id":1420,"depth":280,"text":1420},{"id":1438,"depth":280,"text":1438},{"id":1488,"depth":280,"text":1488},{"id":1500,"depth":280,"text":1500},{"id":1529,"depth":280,"text":1529},"2026-03-31","为了面向国际用户把默认语言从中文切成英文，所有 URL 路径全变了。Google 索引一夜清零，三个月积累的检索量几乎归零。短期阵痛，但我认为长期是对的。",[1555,1558,1561,1564],{"q":1556,"a":1557},"为什么切换默认语言会导致检索量下跌？","Nuxt i18n 的 prefix_except_default 策略下，默认语言的页面不带语言前缀。把默认语言从中文切成英文后，原来的 \u002Fimages\u002Fcompress\u002F（中文页）变成了 \u002Fzh\u002Fimages\u002Fcompress\u002F，而 \u002Fimages\u002Fcompress\u002F 现在指向英文页。Google 已经索引的所有旧 URL 全部失效，需要重新爬取和建立索引。",{"q":1559,"a":1560},"有没有办法避免这种检索量损失？","可以通过 301 重定向将旧 URL 映射到新 URL，告诉搜索引擎页面搬家了而不是消失了。但 SSG 静态站实现 301 重定向比较复杂，需要在部署层（Nginx\u002FCloudflare）配置规则。另一个方案是在 sitemap 中同时提交新旧 URL 并标注 canonical，给搜索引擎过渡时间。",{"q":1562,"a":1563},"检索量预计多久能恢复？","根据 Google 的重新索引周期，通常需要 2-4 周让新 URL 被完全爬取和收录，1-2 个月恢复到之前的排名水平。前提是新 sitemap 已正确提交、robots.txt 没有阻拦、页面内容质量没有下降。如果做了 301 重定向，恢复速度会更快。",{"q":1565,"a":1566},"切换默认语言的长期收益是什么？","英文作为默认语言意味着全球用户访问时默认看到英文界面，搜索引擎也优先索引英文内容。工具站的使用场景（图片压缩、格式转换等）是全球通用的，英文覆盖的潜在用户群远大于中文。长期来看，国际流量的天花板比中文流量高得多。",{},"\u002Fbuilds\u002Fmetool\u002F2026-03-31-url-restructure-cost",{"title":1415,"description":1553},[1571,1572,1573,1574,1575,1576,1577],"网站 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。这是一次有意识的短期牺牲，押注长期的国际化收益。",[326,327],"JiLBHivnJLiSY1PmK_E_QtuRab70pGpC0z_ZoZPpYBo",{"id":1583,"title":1584,"body":1585,"date":1686,"description":1687,"draft":294,"extension":295,"faq":1688,"meta":1701,"navigation":310,"path":1702,"project":312,"readingTime":819,"seo":1703,"seoKeywords":1704,"stem":1709,"summary":1710,"tags":1711,"updated":328,"__hash__":1712},"builds\u002Fbuilds\u002Fmetool\u002F2026-03-19-seo-geo-breakthrough.md","做了大半年流量还是很少，我决定认真做 SEO",{"type":8,"value":1586,"toc":1680},[1587,1590,1593,1596,1599,1602,1605,1611,1617,1623,1627,1630,1641,1644,1647,1661,1665,1671,1674,1677],[11,1588,1589],{"id":1589},"流量困局",[15,1591,1592],{},"metool 做了大半年，工具已经有几十个了，覆盖了图片、视频、文档、3D、开发者工具、游戏、AI Skills 等品类。",[15,1594,1595],{},"但流量一直上不去。",[15,1597,1598],{},"Google Analytics 的数据很诚实：每天的访问量很少，大部分还是自己测试产生的。工具做得再多，没人知道它存在，就等于没做。",[11,1600,1601],{"id":1601},"数据驱动的优化",[15,1603,1604],{},"这次不是凭感觉优化了。我从 Google Analytics 的数据出发，让 AI 协助分析和执行。",[15,1606,1607,1610],{},[31,1608,1609],{},"默认语言切英文","：GA 数据显示，英文搜索的流量潜力远大于中文。工具站的使用场景是全球通用的——图片压缩、格式转换这些需求不分国界。把默认语言切成英文，能覆盖更多国际用户。",[15,1612,1613,1616],{},[31,1614,1615],{},"全站 FAQ 结构化数据","：给每个工具页都加了 FAQ Schema。搜索引擎会在结果中直接展示问答内容，占据更大的面积，提升点击率。",[15,1618,1619,1622],{},[31,1620,1621],{},"HowTo 结构化数据","：把每个工具的使用步骤结构化，让搜索引擎理解\"这个工具怎么用\"。当用户搜索\"how to compress video online\"时，搜索结果里就能直接展示操作步骤。",[11,1624,1626],{"id":1625},"让-ai-搜索引擎也能找到你","让 AI 搜索引擎也能找到你",[15,1628,1629],{},"传统 SEO 优化的是 Google 排名，但 2026 年了，越来越多人通过 ChatGPT、Perplexity 这些 AI 搜索引擎找信息。",[15,1631,1632,1633,1636,1637,1640],{},"我加了 ",[31,1634,1635],{},"llms.txt"," 和 ",[31,1638,1639],{},"llms-full.txt","——类似 robots.txt 之于传统爬虫，它告诉 AI 搜索引擎：\"关于 metool.online，这些是最值得引用的信息。\"",[15,1642,1643],{},"文件里列出了所有工具的名称、功能描述和 URL。当用户问 AI\"有什么在线工具可以压缩图片\"的时候，AI 就有可能引用 metool。",[15,1645,1646],{},"还做了一些技术层面的统一：",[71,1648,1649,1655],{},[74,1650,1651,1654],{},[31,1652,1653],{},"Trailing slash 处理"," — 统一 URL 格式，避免搜索引擎把带斜杠和不带斜杠的 URL 当作两个页面",[74,1656,1657,1660],{},[31,1658,1659],{},"robots.txt 优化"," — 允许 AI 爬虫（GPTBot、Anthropic 等）访问",[11,1662,1664],{"id":1663},"从做工具到做增长","从\"做工具\"到\"做增长\"",[15,1666,1667,1668],{},"这一轮优化让我意识到一件事：",[31,1669,1670],{},"做产品和做增长是两件完全不同的事。",[15,1672,1673],{},"前面大半年，我一直在\"做工具\"——有需求就做，做完就上线。但\"做增长\"需要的是另一套思维：数据分析、搜索优化、内容策略。",[15,1675,1676],{},"metool 现在有了几十个工具，架构也足够成熟。下一步不是继续加工具，而是让已有的工具被更多人发现和使用。",[15,1678,1679],{},"这个故事还在继续。",{"title":248,"searchDepth":277,"depth":277,"links":1681},[1682,1683,1684,1685],{"id":1589,"depth":280,"text":1589},{"id":1601,"depth":280,"text":1601},{"id":1625,"depth":280,"text":1626},{"id":1663,"depth":280,"text":1664},"2026-03-19","metool 做了大半年，工具几十个了，但流量一直上不去。借着 AI 能力提升，用 Google Analytics 数据反馈 + AI 协助，系统性地做了一轮 SEO 和 GEO 优化。",[1689,1692,1695,1698],{"q":1690,"a":1691},"为什么默认语言要从中文切成英文？","Google Analytics 数据显示，英文搜索带来的流量潜力远大于中文。工具站的使用场景是全球通用的（图片压缩、格式转换等），英文作为默认语言能覆盖更多国际用户，中文用户可以手动切换。",{"q":1693,"a":1694},"什么是 GEO 优化？","GEO（Generative Engine Optimization）是针对 AI 搜索引擎的优化。现在越来越多人通过 ChatGPT、Perplexity 等 AI 搜索信息，如果你的网站不能被 AI 引用，就等于失去了新的流量入口。GEO 包括添加 llms.txt、结构化数据、清晰的产品描述等。",{"q":1696,"a":1697},"llms.txt 是什么？","类似 robots.txt 之于传统爬虫，llms.txt 告诉 AI 搜索引擎'关于这个网站的核心信息'。metool 的 llms.txt 列出了所有工具的名称、功能描述和 URL，让 AI 在回答用户'有什么在线工具可以...'类型的问题时能引用 metool。",{"q":1699,"a":1700},"FAQ 和 HowTo 结构化数据有什么作用？","FAQ Schema 让搜索引擎在搜索结果中直接展示常见问题和回答，占据更大的结果面积。HowTo Schema 把工具的使用步骤结构化，让搜索引擎理解每个工具的操作流程。两者都能提升搜索结果的点击率和可见性。",{},"\u002Fbuilds\u002Fmetool\u002F2026-03-19-seo-geo-breakthrough",{"title":1584,"description":1687},[1705,1706,1635,1707,1621,1708,823],"工具站 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。",[326,832],"HVOKaXEceQ2DIID9meIXaR9TvaR2ws7zvMyDVcU90pg",{"id":1714,"title":1715,"body":1716,"date":1947,"description":1948,"draft":294,"extension":295,"faq":1949,"meta":1962,"navigation":310,"path":1963,"project":312,"readingTime":591,"seo":1964,"seoKeywords":1965,"stem":1973,"summary":1974,"tags":1975,"updated":328,"__hash__":1976},"builds\u002Fbuilds\u002Fmetool\u002F2026-03-12-dev-tools-and-ai-skills.md","三天上线十几个开发者工具，还做了 AI Skills 板块",{"type":8,"value":1717,"toc":1941},[1718,1722,1725,1734,1741,1745,1748,1758,1761,1766,1812,1817,1855,1860,1871,1877,1881,1884,1925,1929,1935,1938],[11,1719,1721],{"id":1720},"agent-skill-的摸索","Agent Skill 的摸索",[15,1723,1724],{},"2026 年初，我花了大量时间研究 AI Agent Skill 模式——让 AI 助手通过安装技能来扩展能力。",[15,1726,1727,1728,1733],{},"在这个过程中积累了不少经验：怎么设计 Skill 的接口、怎么处理跨平台兼容性、怎么让非技术用户也能安装使用。这些经验后来也应用到了 ",[19,1729,1732],{"href":1730,"rel":1731,"target":24},"https:\u002F\u002Fwhoamiagent.com",[23],"whoami"," 等项目中。",[15,1735,1736,1737,1740],{},"既然有了经验，不如在 metool 上做一个 ",[31,1738,1739],{},"AI Skills 展示板块","，把我做的各种 Skill 都放上来。",[11,1742,1744],{"id":1743},"三天十几个新工具","三天，十几个新工具",[15,1746,1747],{},"3 月 12 日到 3 月 18 日，可能是 metool 开发密度最高的一段时间。",[15,1749,1750,1753,1754,1757],{},[31,1751,1752],{},"先做了统一设计系统","。之前每个工具页面各写各的，风格不统一，重复代码多。这次抽象出了 ",[246,1755,1756],{},"ToolPageLayout"," 组件——新工具只需要传入标题和核心内容，布局、动画、SEO 信息、相关工具推荐都自动处理。",[15,1759,1760],{},"有了统一架构，加工具的速度就上来了：",[15,1762,1763],{},[31,1764,1765],{},"开发者工具：",[71,1767,1768,1775,1782,1790,1797,1804],{},[74,1769,1770],{},[19,1771,1774],{"href":1772,"rel":1773,"target":24},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fdev\u002Fbase64\u002F",[23],"Base64 编解码",[74,1776,1777],{},[19,1778,1781],{"href":1779,"rel":1780,"target":24},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fdev\u002FregexTest\u002F",[23],"正则表达式测试器",[74,1783,1784,1789],{},[19,1785,1788],{"href":1786,"rel":1787,"target":24},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fdev\u002FhashGenerator\u002F",[23],"哈希生成器","（MD5、SHA-1、SHA-256 等）",[74,1791,1792],{},[19,1793,1796],{"href":1794,"rel":1795,"target":24},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fdev\u002FpasswordGenerator\u002F",[23],"随机密码生成器",[74,1798,1799],{},[19,1800,1803],{"href":1801,"rel":1802,"target":24},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fdev\u002FtextDiff\u002F",[23],"文本差异对比",[74,1805,1806,1811],{},[19,1807,1810],{"href":1808,"rel":1809,"target":24},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fdev\u002FdataFormatConvert\u002F",[23],"数据格式转换","（JSON\u002FYAML\u002FTOML 互转）",[15,1813,1814],{},[31,1815,1816],{},"文档和媒体工具：",[71,1818,1819,1827,1834,1840,1848],{},[74,1820,1821,1826],{},[19,1822,1825],{"href":1823,"rel":1824,"target":24},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fdocs\u002FpdfTools\u002F",[23],"PDF 工具","（预览、拆分）",[74,1828,1829],{},[19,1830,1833],{"href":1831,"rel":1832,"target":24},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fimages\u002Fwatermark\u002F",[23],"图片水印",[74,1835,1836],{},[19,1837,912],{"href":1838,"rel":1839,"target":24},"https:\u002F\u002Fmetool.online\u002Fzh\u002F3d\u002FmodelConvert\u002F",[23],[74,1841,1842,1847],{},[19,1843,1846],{"href":1844,"rel":1845,"target":24},"https:\u002F\u002Fmetool.online\u002Fzh\u002F3d\u002FtextTo3d\u002F",[23],"Text to 3D","（文字生成 3D 模型）",[74,1849,1850],{},[19,1851,1854],{"href":1852,"rel":1853,"target":24},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fdocs\u002FweixinToMarkdown\u002F",[23],"微信文章反向转 Markdown",[15,1856,1857],{},[31,1858,1859],{},"基础组件：",[71,1861,1862,1865,1868],{},[74,1863,1864],{},"FAQ 组件（每个工具页自动展示常见问题）",[74,1866,1867],{},"Toast 通知系统",[74,1869,1870],{},"vue-json-pretty 替换自制的 JSON 查看器",[15,1872,1873],{},[147,1874],{"alt":1875,"src":1876},"AI Skills 板块","\u002Fb\u002Fmetool\u002Fskills.png",[11,1878,1880],{"id":1879},"ai-skills-板块上线","AI Skills 板块上线",[15,1882,1883],{},"同时上线了 AI Skills 展示板块，每个 Skill 有独立的介绍页面：",[71,1885,1886,1895,1905,1915],{},[74,1887,1888,1894],{},[31,1889,1890],{},[19,1891,1732],{"href":1892,"rel":1893,"target":24},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fskills\u002Fwhoami\u002F",[23]," — 跨 AI 身份同步",[74,1896,1897,1904],{},[31,1898,1899],{},[19,1900,1903],{"href":1901,"rel":1902,"target":24},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fskills\u002Fzhongjie\u002F",[23],"中介哥"," — AI 买房参谋",[74,1906,1907,1914],{},[31,1908,1909],{},[19,1910,1913],{"href":1911,"rel":1912,"target":24},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fskills\u002Fidea2mvp\u002F",[23],"idea2mvp"," — 从创意到产品",[74,1916,1917,1924],{},[31,1918,1919],{},[19,1920,1923],{"href":1921,"rel":1922,"target":24},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fskills\u002FgaImprove\u002F",[23],"GA 优化"," — Google Analytics 数据驱动优化",[11,1926,1928],{"id":1927},"ai-coding-改变了什么","AI Coding 改变了什么",[15,1930,1931,1932,404],{},"这三天能做这么多，核心原因是 ",[31,1933,1934],{},"AI Coding",[15,1936,1937],{},"每个工具的开发周期从\"半天\"缩短到了\"一两个小时\"。我负责定需求和验收，AI 负责写代码。统一的架构加上 AI 的速度，工具的边际成本几乎为零。",[15,1939,1940],{},"这也是我在探索 Agent Skill 过程中最深的体会：AI 不只是能帮你写代码，它改变的是你做事的规模和速度。",{"title":248,"searchDepth":277,"depth":277,"links":1942},[1943,1944,1945,1946],{"id":1720,"depth":280,"text":1721},{"id":1743,"depth":280,"text":1744},{"id":1879,"depth":280,"text":1880},{"id":1927,"depth":280,"text":1928},"2026-03-12","大量摸索 Agent Skill 模式积累了经验，借 AI Coding 的速度，三天内密集上线了十几个开发者工具和 AI Skills 展示板块。",[1950,1953,1956,1959],{"q":1951,"a":1952},"三天内是怎么做到上线这么多工具的？","两个关键因素：一是 metool 的架构已经很成熟，新增工具只需写核心逻辑；二是 AI Coding 的效率极高，每个工具的开发周期从'半天'缩短到了'一两个小时'。统一的 ToolPageLayout 组件让页面布局、SEO、FAQ 都是自动化的。",{"q":1954,"a":1955},"这次上线了哪些开发者工具？","Base64 编解码、正则表达式测试器、哈希生成器（MD5\u002FSHA 等）、随机密码生成器、文本差异对比、数据格式转换（JSON\u002FYAML\u002FTOML 互转）。此外还有 PDF 工具、图片水印、3D 模型格式转换和 Text to 3D。",{"q":1957,"a":1958},"AI Skills 板块是什么？","展示我开发的 AI Agent Skills 的专区，包括 whoami（跨 AI 身份同步）、中介哥（买房参谋）、idea2mvp（创意到产品）、GA 优化（Google Analytics 数据驱动）等。每个 Skill 有独立的介绍页面，包含功能说明、安装方式和使用演示。",{"q":1960,"a":1961},"统一设计系统（ToolPageLayout）解决了什么问题？","之前每个工具页面的布局、标题区域、描述文案、SEO 信息都是各写各的，风格不统一且重复代码多。ToolPageLayout 把这些全部抽象成一个统一组件，新工具只需传入标题和内容，布局、动画、SEO、相关工具推荐都自动处理。",{},"\u002Fbuilds\u002Fmetool\u002F2026-03-12-dev-tools-and-ai-skills",{"title":1715,"description":1948},[1966,1967,1968,1969,1774,1970,1971,1972],"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 展示板块。",[326,832],"hihzr5kpiZrcsafARUi4Ir4QvNVm8xwB2k6CfqqQfew",{"id":1978,"title":1979,"body":1980,"date":2133,"description":2134,"draft":294,"extension":295,"faq":2135,"meta":2148,"navigation":310,"path":2149,"project":312,"readingTime":819,"seo":2150,"seoKeywords":2151,"stem":2159,"summary":2160,"tags":2161,"updated":328,"__hash__":2162},"builds\u002Fbuilds\u002Fmetool\u002F2026-02-10-content-creation-tools.md","用 AI 写文章，一键转成公众号和小红书格式",{"type":8,"value":1981,"toc":2127},[1982,1986,1989,1995,1998,2001,2004,2007,2013,2023,2043,2049,2057,2071,2074,2077,2103,2107,2110,2124],[11,1983,1985],{"id":1984},"ai-写作的最后一公里","AI 写作的最后一公里",[15,1987,1988],{},"2026 年初，AI 的写作能力又提升了一大截。我开始认真写公众号，用 AI 辅助产出 Markdown 格式的文章。",[15,1990,1991,1992,404],{},"写作效率提上来了，但有一个环节特别痛苦：",[31,1993,1994],{},"从 Markdown 到公众号发布",[15,1996,1997],{},"微信公众号编辑器不支持 Markdown，也不能直接粘贴 HTML。网上有一些 Markdown 转公众号的工具，但样式太固定、兼容性问题多。每次发文章，我都要花大量时间调排版。",[15,1999,2000],{},"同样的问题在小红书上更严重——小红书是图文格式，长文要拆成多张图片卡片。",[11,2002,2003],{"id":2003},"高度定制化的转换工具",[15,2005,2006],{},"2025 年 3 月做过一个微信文章转换的雏形，但功能很粗糙。这次我重写了整个工具。",[15,2008,2009],{},[147,2010],{"alt":2011,"src":2012},"Markdown 转微信公众号文章","\u002Fb\u002Fmetool\u002Fwechat-converter.png",[15,2014,2015,2022],{},[31,2016,2017],{},[19,2018,2021],{"href":2019,"rel":2020,"target":24},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fdocs\u002FmdToWeixinArtical\u002F",[23],"Markdown 转公众号","：",[71,2024,2025,2028,2031,2034,2037,2040],{},[74,2026,2027],{},"自定义排版风格（标题、正文、引用、代码块各有独立样式）",[74,2029,2030],{},"代码高亮渲染",[74,2032,2033],{},"嵌套列表正确缩进（微信编辑器的经典坑）",[74,2035,2036],{},"HTML 注释自动清理",[74,2038,2039],{},"图片适配（圆角、阴影、居中）",[74,2041,2042],{},"一键复制到剪贴板，粘贴到微信编辑器直接可用",[15,2044,2045],{},[147,2046],{"alt":2047,"src":2048},"Markdown 转小红书卡片","\u002Fb\u002Fmetool\u002Fxiaohongshu-converter.png",[15,2050,2051,2022],{},[31,2052,2053],{},[19,2054,2047],{"href":2055,"rel":2056,"target":24},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fdocs\u002FmdToXiaohongshu\u002F",[23],[71,2058,2059,2062,2065,2068],{},[74,2060,2061],{},"把长文渲染成小红书风格的图文卡片",[74,2063,2064],{},"支持字体大小调节",[74,2066,2067],{},"精准分页，每页内容自动适配小红书图片比例",[74,2069,2070],{},"直接截图就能发",[11,2072,2073],{"id":2073},"全站设计系统也重塑了",[15,2075,2076],{},"做内容工具的同时，我也对 metool 的整体设计做了一次升级：",[71,2078,2079,2085,2092],{},[74,2080,2081,2082],{},"统一了全站的图标系统，从散落各处的 SVG\u002FPNG 图标切换到 ",[31,2083,2084],{},"Iconify",[74,2086,2087,2088,2091],{},"加了 ",[31,2089,2090],{},"全局搜索功能","，工具多了之后靠导航找太慢",[74,2093,2094,2095,2102],{},"做了 ",[31,2096,2097],{},[19,2098,2101],{"href":2099,"rel":2100,"target":24},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fgames\u002FsolarInHand\u002F",[23],"太阳系手势交互游戏","，儿子可以在手机上用手势旋转缩放太阳系",[11,2104,2106],{"id":2105},"一篇文章多平台分发","一篇文章，多平台分发",[15,2108,2109],{},"现在我的内容创作工作流是这样的：",[157,2111,2112,2115,2118,2121],{},[74,2113,2114],{},"用 AI 辅助撰写 Markdown 格式的文章",[74,2116,2117],{},"在 metool 上实时预览公众号效果",[74,2119,2120],{},"一键复制 HTML，粘贴到微信编辑器",[74,2122,2123],{},"用转小红书工具生成图文卡片截图",[15,2125,2126],{},"一篇文章，多平台分发，全程不需要手动排版。这就是\"自己做工具\"的好处：完全按自己的工作流定制。",{"title":248,"searchDepth":277,"depth":277,"links":2128},[2129,2130,2131,2132],{"id":1984,"depth":280,"text":1985},{"id":2003,"depth":280,"text":2003},{"id":2073,"depth":280,"text":2073},{"id":2105,"depth":280,"text":2106},"2026-02-10","AI 写作能力大提升，我开始写公众号。但从 Markdown 到公众号发布的最后一公里很痛苦。网上的工具不够用，我做了高度定制化的转换工具。",[2136,2139,2142,2145],{"q":2137,"a":2138},"为什么 Markdown 转公众号需要专门的工具？","微信公众号编辑器不支持 Markdown，而且对 HTML\u002FCSS 有严格限制（不支持外部样式表、不支持 class）。需要把 Markdown 渲染成内联样式的 HTML，还要处理代码高亮、图片适配、列表嵌套等公众号特有的兼容问题。",{"q":2140,"a":2141},"和网上已有的 Markdown 转公众号工具比，有什么不同？","网上的工具大多是通用方案，样式固定。metool 的版本做了高度定制化：自定义排版风格、代码块样式、标题层级样式、图片圆角和阴影效果等，还针对微信编辑器的各种坑做了兼容处理（如 HTML 注释清理、嵌套列表缩进修复）。",{"q":2143,"a":2144},"Markdown 转小红书工具是怎么工作的？","把 Markdown 内容渲染成小红书风格的图文卡片，支持字体大小调节和精准分页。每页内容自动适配小红书的图片比例，可以直接截图发布。适合把长文拆分成小红书的多图内容格式。",{"q":2146,"a":2147},"整个内容创作工作流是什么样的？","用 AI 辅助撰写 Markdown 格式的文章，在 metool 上实时预览效果，一键复制公众号格式的 HTML 粘贴到微信编辑器，同时用转小红书工具生成图文卡片。一篇文章，多平台分发，全程不需要手动排版。",{},"\u002Fbuilds\u002Fmetool\u002F2026-02-10-content-creation-tools",{"title":1979,"description":2134},[2152,2153,2154,2155,2156,2157,2158],"Markdown 转微信公众号","Markdown 转小红书","AI 写作工具","公众号排版工具","内容分发工具","微信文章格式转换","小红书图文卡片","builds\u002Fmetool\u002F2026-02-10-content-creation-tools","AI 能力提升后开始写公众号，发现从 Markdown 到公众号发布的最后一公里很痛苦。网上的转换工具不够用，在 metool 上做了高度定制化的 Markdown 转公众号和转小红书工具，实现 AI 辅助产出内容后一键分发到多个平台。",[326,832],"wss3sw3VhSQdFnFFEEZBvOfAiN67lGRhbtrz2a2gtuI",{"id":2164,"title":2165,"body":2166,"date":2298,"description":2299,"draft":294,"extension":295,"faq":2300,"meta":2313,"navigation":310,"path":2314,"project":312,"readingTime":591,"seo":2315,"seoKeywords":2316,"stem":2323,"summary":2324,"tags":2325,"updated":328,"__hash__":2326},"builds\u002Fbuilds\u002Fmetool\u002F2025-11-12-lan-transfer.md","iPhone 和安卓之间传文件，怎么就这么难",{"type":8,"value":2167,"toc":2292},[2168,2171,2174,2188,2191,2201,2205,2208,2214,2217,2231,2234,2238,2241,2247,2253,2259,2265,2271,2277,2280,2286,2289],[11,2169,2170],{"id":2170},"传个文件怎么就这么难",[15,2172,2173],{},"做移动端开发的时候，我经常需要在电脑和手机之间传文件。在 Mac 和 iPhone 之间有 AirDrop，还算方便。但如果是 iPhone 和安卓之间呢？",[71,2175,2176,2179,2182,2185],{},[74,2177,2178],{},"蓝牙太慢",[74,2180,2181],{},"微信传文件有大小限制，还会压缩",[74,2183,2184],{},"邮件附件也有限制",[74,2186,2187],{},"USB 线在手边不一定有",[15,2189,2190],{},"每次遇到这个场景我都很烦。明明两台设备就在手边，传个文件却要折腾半天。",[15,2192,2193,2194,404],{},"我决定在 metool 上做一个 ",[31,2195,2196],{},[19,2197,2200],{"href":2198,"rel":2199,"target":24},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fdev\u002FlanTransfer\u002F",[23],"局域网文件传输工具",[11,2202,2204],{"id":2203},"浏览器端-p2p-传输","浏览器端 P2P 传输",[15,2206,2207],{},"技术方案用了 WebRTC：两台设备打开同一个网页，通过邀请码建立点对点连接，文件直接在设备之间传输，不经过服务器。",[15,2209,2210],{},[147,2211],{"alt":2212,"src":2213},"跨设备文件互传工具","\u002Fb\u002Fmetool\u002Flan-transfer.png",[15,2215,2216],{},"第一版做了基础功能：",[71,2218,2219,2222,2225,2228],{},[74,2220,2221],{},"4 位数字邀请码配对",[74,2223,2224],{},"二维码扫码连接（手机扫一下就行）",[74,2226,2227],{},"文件和文本都能传",[74,2229,2230],{},"传输过程加密",[15,2232,2233],{},"但发布后发现，真实场景比想象的复杂得多。",[11,2235,2237],{"id":2236},"两周18-个-commit","两周，18 个 commit",[15,2239,2240],{},"从 11 月 12 日到 11 月 21 日，这个功能我迭代了 18 个 commit。是 metool 里单个功能迭代密度最高的一次。",[15,2242,2243,2246],{},[31,2244,2245],{},"大文件分块传输"," — 大文件不能一次性发送，要分块。每块用 Map 追踪接收状态，某一块失败了自动重传，不用重发整个文件。",[15,2248,2249,2252],{},[31,2250,2251],{},"批量文件支持"," — 不只传一个文件，要能一次选多个文件发送。",[15,2254,2255,2258],{},[31,2256,2257],{},"iOS 兼容"," — iOS Safari 对多文件传输有限制，需要特殊处理。还要提示用户调整浏览器的自动下载设置。",[15,2260,2261,2264],{},[31,2262,2263],{},"校园网\u002F办公网"," — 这类网络可能限制 P2P 连接。加了网络限制检测和提示，建议用户开手机热点作为替代方案。",[15,2266,2267,2270],{},[31,2268,2269],{},"代理环境"," — 开了代理的设备连接行为不同，加了说明。",[15,2272,2273,2276],{},[31,2274,2275],{},"连接体验"," — 邀请码从 6 位简化到 4 位纯数字，合并了扫码和手动输入的 UI，优化了连接状态的实时反馈。",[11,2278,2279],{"id":2279},"一个功能的极致打磨",[15,2281,2282,2283],{},"这两周的经历让我体会到一个道理：",[31,2284,2285],{},"做一个功能\"能用\"很快，做到\"好用\"要花十倍的时间。",[15,2287,2288],{},"初版半天就做完了，但覆盖各种边界场景、各种设备兼容性、各种网络环境，花了两周。每次觉得\"应该差不多了\"，真实使用的时候又会冒出新问题。",[15,2290,2291],{},"但这也是个人项目的好处：没有人催进度，可以把一个功能打磨到自己满意为止。",{"title":248,"searchDepth":277,"depth":277,"links":2293},[2294,2295,2296,2297],{"id":2170,"depth":280,"text":2170},{"id":2203,"depth":280,"text":2204},{"id":2236,"depth":280,"text":2237},{"id":2279,"depth":280,"text":2279},"2025-11-12","做移动端开发时经常需要跨设备传文件，iPhone 和安卓之间传文件特别痛苦。用 WebRTC 做了一个局域网 P2P 传输工具，两周迭代了 18 个 commit。",[2301,2304,2307,2310],{"q":2302,"a":2303},"为什么不用现有的文件传输工具？","AirDrop 只在苹果设备之间用，蓝牙传输太慢，微信传文件有大小限制和压缩，邮件附件也有限制。最简单的局域网传输方案需要两台设备在同一个网络下，但浏览器端的方案不需要安装任何软件，打开网页就能用。",{"q":2305,"a":2306},"WebRTC P2P 传输是怎么工作的？","两台设备打开同一个网页，通过邀请码（4 位数字）或二维码建立 WebRTC 点对点连接。文件直接在两台设备之间传输，不经过服务器。传输过程加密，数据不会被中间人截获。",{"q":2308,"a":2309},"大文件传输怎么处理？","大文件会自动分块传输，每块的接收状态用 Map 追踪。如果某一块传输失败，会自动重传而不是重新发送整个文件。这个机制在网络不稳定的环境下特别重要。",{"q":2311,"a":2312},"遇到了哪些边界场景？","校园网\u002F办公网可能限制 P2P 连接，加了使用限制提示和手机热点的解决方案建议。iOS Safari 对多文件传输有限制，做了特殊处理和提示。还有代理环境下的连接问题、自动下载的浏览器兼容性问题等，两周内覆盖了十几种边界场景。",{},"\u002Fbuilds\u002Fmetool\u002F2025-11-12-lan-transfer",{"title":2165,"description":2299},[2317,2318,2319,2320,2321,2245,2322],"局域网文件传输","WebRTC P2P","iPhone 安卓传文件","跨设备文件传输","浏览器端文件传输","在线局域网传输工具","builds\u002Fmetool\u002F2025-11-12-lan-transfer","移动端开发中 iPhone 和安卓之间传文件是一件极其痛苦的事。用 WebRTC 做了浏览器端 P2P 加密传输，支持二维码扫码连接、大文件分块传输和重传机制。两周内从初版迭代到覆盖校园网\u002F代理\u002FiOS 多文件等各种边界场景。",[326,327],"3cGzuWpv-48beUzZ8_2W9usNWZv7Bs5wLJnbMUbBLO4",{"id":2328,"title":2329,"body":2330,"date":2438,"description":2439,"draft":294,"extension":295,"faq":2440,"meta":2453,"navigation":310,"path":2454,"project":312,"readingTime":819,"seo":2455,"seoKeywords":2456,"stem":2464,"summary":2465,"tags":2466,"updated":328,"__hash__":2467},"builds\u002Fbuilds\u002Fmetool\u002F2025-11-02-games-for-my-son.md","孩子一玩迷宫就是半小时，我又给他做了四个游戏",{"type":8,"value":2331,"toc":2432},[2332,2335,2338,2341,2344,2347,2350,2353,2359,2362,2372,2382,2392,2402,2405,2411,2414,2417,2419,2422,2425],[11,2333,2334],{"id":2334},"孩子的编程启蒙",[15,2336,2337],{},"我孩子很小就开始对我的电脑感兴趣。每次我在写代码，他就凑过来看。",[15,2339,2340],{},"之前在 metool 上做过一个迷宫游戏，带音效、带移动端触控操作。有一次我在手机上测试，孩子看到了，拿过去就开始玩。",[15,2342,2343],{},"一玩就是半小时。",[15,2345,2346],{},"从那以后，每次出门吃饭排队，他就问我：\"爸爸，可以玩迷宫吗？\" 我打开手机浏览器，进 metool，递给他。",[15,2348,2349],{},"这让我想到：既然迷宫他这么喜欢，我再做几个游戏给他。做成在线版，随时能打开。",[11,2351,2352],{"id":2352},"一天做了四个",[15,2354,2355],{},[147,2356],{"alt":2357,"src":2358},"给儿子做的游戏合集","\u002Fb\u002Fmetool\u002Fgames.png",[15,2360,2361],{},"2025 年 11 月 2 日，一天之内上线了：",[15,2363,2364,2371],{},[31,2365,2366],{},[19,2367,2370],{"href":2368,"rel":2369,"target":24},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fgames\u002Fgo\u002F",[23],"围棋"," — 带一个启发式 AI 对手。算法考虑了领地控制、棋子连接和眼位判断，不靠深度学习模型，但在小棋盘上能提供有一定挑战性的对局。支持 9x9 和 13x13 两种棋盘。",[15,2373,2374,2381],{},[31,2375,2376],{},[19,2377,2380],{"href":2378,"rel":2379,"target":24},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fgames\u002Fgomoku\u002F",[23],"五子棋"," — 同样带 AI 对手，配了胜利烟花动画。AI 的算法会评估棋型（活三、冲四等），对小朋友来说难度刚好。",[15,2383,2384,2391],{},[31,2385,2386],{},[19,2387,2390],{"href":2388,"rel":2389,"target":24},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fgames\u002Ftetris\u002F",[23],"俄罗斯方块"," — 专门为移动端做了长按控制，方块能快速左右移动和加速下落。还做了悬浮分数面板和下一个方块预览，移动端体验接近桌面端。",[15,2393,2394,2401],{},[31,2395,2396],{},[19,2397,2400],{"href":2398,"rel":2399,"target":24},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fvideos\u002FaudioEditor\u002F",[23],"音频波形编辑器"," — 这个不是游戏，但顺手做了。支持波形可视化、片段选择和裁剪。",[11,2403,2404],{"id":2404},"为什么做在线版",[15,2406,2407,2408,404],{},"做 App 当然也行，但在线版有一个不可替代的优势：",[31,2409,2410],{},"不需要安装",[15,2412,2413],{},"孩子想玩的时候，我打开浏览器就行了。不用去 App Store 下载，不用等更新。我改了代码部署完，下一次打开就是最新版。",[15,2415,2416],{},"对于这种\"随时可能想用一下\"的场景，网页比 App 更合适。",[11,2418,2357],{"id":2357},[15,2420,2421],{},"后来我把游戏分类的标题改成了\"给儿子做的游戏合集\"。",[15,2423,2424],{},"这不是一个商业决策，是一个爸爸的决策。metool 上的工具大多是为我自己的工作需求做的，但游戏这个品类，是为我孩子做的。",[15,2426,2427,2428,2431],{},"后来又陆续加了",[19,2429,2101],{"href":2099,"rel":2430,"target":24},[23],"，让他在手机上用手势旋转缩放太阳系。不过那是一个月之后的事了。",{"title":248,"searchDepth":277,"depth":277,"links":2433},[2434,2435,2436,2437],{"id":2334,"depth":280,"text":2334},{"id":2352,"depth":280,"text":2352},{"id":2404,"depth":280,"text":2404},{"id":2357,"depth":280,"text":2357},"2025-11-02","孩子看我编程很感兴趣，尤其迷宫游戏他一玩就是半小时。做成在线版，随时掏出手机就能给他玩。一天之内做了围棋、五子棋、俄罗斯方块和音频编辑器。",[2441,2444,2447,2450],{"q":2442,"a":2443},"围棋的 AI 对手是怎么实现的？","用启发式算法实现，不依赖深度学习模型。算法考虑了领地控制、棋子连接、眼位判断等围棋基本策略，在 9x9 和 13x13 棋盘上能提供有一定挑战性的对局体验。全部在浏览器端运行，不需要服务器计算。",{"q":2445,"a":2446},"为什么俄罗斯方块要做移动端长按控制？","在手机上玩俄罗斯方块，传统的虚拟按键体验很差。长按控制让方块能快速左右移动和加速下落，操作更流畅。还做了悬浮分数面板和下一个方块预览，让移动端的游戏体验接近桌面端。",{"q":2448,"a":2449},"这些游戏为什么做成在线版而不是 App？","在线版的优势是随时随地能用：掏出手机打开浏览器就能玩，不需要下载安装。对孩子来说，在等餐、坐车的时候想玩，打开网页比打开 App 更快。而且在线版更新不需要用户手动升级。",{"q":2451,"a":2452},"音频编辑器是做什么用的？","支持音频波形可视化、片段选择、裁剪和播放控制。可以在浏览器里直接编辑音频文件，截取需要的片段。虽然和游戏是同一天做的，但它属于工具而不是游戏。",{},"\u002Fbuilds\u002Fmetool\u002F2025-11-02-games-for-my-son",{"title":2329,"description":2439},[2457,2458,2459,2460,2461,2462,2463],"给孩子做的游戏","在线围棋 AI 对手","在线五子棋","在线俄罗斯方块","移动端网页游戏","前端游戏开发","启发式 AI 算法","builds\u002Fmetool\u002F2025-11-02-games-for-my-son","孩子看编程很感兴趣，之前做的迷宫游戏他一玩就是半小时。一天之内在 metool 上线了围棋（带启发式 AI 对手）、五子棋（带 AI）、俄罗斯方块（移动端长按控制），还顺手做了一个音频波形编辑器。",[326,327],"sdnRuCOzhZjRsJiLHYmOHoSrVUv1pu-bpmx4SCnd2P4",{"id":2469,"title":2470,"body":2471,"date":2609,"description":2610,"draft":294,"extension":295,"faq":2611,"meta":2624,"navigation":310,"path":2625,"project":312,"readingTime":819,"seo":2626,"seoKeywords":2627,"stem":2634,"summary":2635,"tags":2636,"updated":328,"__hash__":2637},"builds\u002Fbuilds\u002Fmetool\u002F2025-10-12-back-after-silence.md","停了五个月，回来发现要改的全是底层",{"type":8,"value":2472,"toc":2601},[2473,2476,2479,2482,2485,2489,2492,2499,2502,2506,2509,2530,2533,2536,2539,2561,2564,2567,2570,2592,2595,2598],[11,2474,2475],{"id":2475},"五个月的空白",[15,2477,2478],{},"从 2025 年 3 月到 10 月。中间只在 8 月份改了一次去背景工具的代码。",[15,2480,2481],{},"不是放弃了，就是没想到要做什么。工具站不像 SaaS 产品有持续的业务驱动力，个人项目的节奏就是这样：有需求就做，没需求就停。",[15,2483,2484],{},"10 月份回来再看这个项目，发现要改的不是功能，而是底层。",[11,2486,2488],{"id":2487},"ai-去背景大升级","AI 去背景大升级",[15,2490,2491],{},"第一版的图片去背景是纯手动方案：用 Canvas 笔刷一点点涂抹。能用，但效率很低。",[15,2493,2494,2495,2498],{},"这次升级到了 ",[31,2496,2497],{},"ONNX Runtime"," 方案——在浏览器端直接运行 AI 模型，一键自动去背景。精度和速度都大幅提升，而且模型在本地推理，文件还是不会离开设备。",[15,2500,2501],{},"这个升级让我意识到，前端能做的事情比我想象的多。AI 模型跑在浏览器端已经不是实验性的技术了。",[11,2503,2505],{"id":2504},"seo-补课","SEO 补课",[15,2507,2508],{},"停更期间，metool 在搜索引擎上几乎没有存在感。回来后我认真补了一次 SEO：",[71,2510,2511,2521,2524,2527],{},[74,2512,2513,2514,1636,2517,2520],{},"重构了 ",[246,2515,2516],{},"usePageMeta",[246,2518,2519],{},"useSimpleSEO","，让每个工具页自动生成规范的 meta 信息",[74,2522,2523],{},"补全了 Open Graph 标签和 JSON-LD 结构化数据",[74,2525,2526],{},"加了 SEO 客户端插件处理动态结构化数据注入",[74,2528,2529],{},"重写了 robots.txt",[15,2531,2532],{},"SEO 是那种\"不做不会死，做了慢慢见效\"的事情。但对工具站来说，搜索引擎是最重要的流量来源，不做就等于放弃了用户主动找到你的可能性。",[11,2534,2535],{"id":2535},"开发者工具首发",[15,2537,2538],{},"这次回来还上线了第一批开发者工具：",[71,2540,2541,2551],{},[74,2542,2543,2550],{},[31,2544,2545],{},[19,2546,2549],{"href":2547,"rel":2548,"target":24},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fdev\u002FjsonBeautify\u002F",[23],"JSON 美化\u002F格式化"," — 带语法高亮和可折叠的树形视图",[74,2552,2553,2560],{},[31,2554,2555],{},[19,2556,2559],{"href":2557,"rel":2558,"target":24},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fdev\u002FurlEncodeDecode\u002F",[23],"URL 编码\u002F解码"," — 简单但高频的需求",[15,2562,2563],{},"自己在开发中天天用这类工具，做进 metool 顺理成章。后面这个品类会持续扩展。",[11,2565,2566],{"id":2566},"新的图片工具",[15,2568,2569],{},"还上线了两个新的图片工具：",[71,2571,2572,2582],{},[74,2573,2574,2581],{},[31,2575,2576],{},[19,2577,2580],{"href":2578,"rel":2579,"target":24},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fimages\u002FiphoneLongImageStitch\u002F",[23],"iPhone 长图拼接"," — 把多张 iPhone 截图拼成一张长图",[74,2583,2584,2591],{},[31,2585,2586],{},[19,2587,2590],{"href":2588,"rel":2589,"target":24},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fimages\u002FresizeIosAppDistribution\u002F",[23],"iOS 应用图标裁剪"," — 一键生成 App Store 需要的全套尺寸",[15,2593,2594],{},"都是做移动端开发时的真实需求。",[11,2596,2597],{"id":2597},"停了五个月不是坏事",[15,2599,2600],{},"停更的五个月让我有了新的视角。如果一直在加功能，可能不会注意到底层该升级了。有时候停下来，再回来看，反而能看清该做什么。",{"title":248,"searchDepth":277,"depth":277,"links":2602},[2603,2604,2605,2606,2607,2608],{"id":2475,"depth":280,"text":2475},{"id":2487,"depth":280,"text":2488},{"id":2504,"depth":280,"text":2505},{"id":2535,"depth":280,"text":2535},{"id":2566,"depth":280,"text":2566},{"id":2597,"depth":280,"text":2597},"2025-10-12","从 3 月到 10 月，metool 停更了五个月。不是放弃了，是没想到要做什么。回来后发现需要升级的不是功能，而是底层能力。",[2612,2615,2618,2621],{"q":2613,"a":2614},"为什么停了五个月？","没有特别的原因，就是积压的需求做完了，没想到还要做什么。工具站不像 SaaS 产品有持续的业务驱动力，个人项目的节奏就是这样——有灵感就做，没灵感就停。",{"q":2616,"a":2617},"AI 去背景升级到 ONNX 模型有什么变化？","第一版去背景是 Canvas 笔刷方案，需要手动涂抹。升级后用 ONNX Runtime 在浏览器端运行 AI 模型，一键自动去背景，精度和速度都大幅提升。模型在本地推理，文件依然不会上传到服务器。",{"q":2619,"a":2620},"这次升级了哪些 SEO 能力？","补全了 meta tags、Open Graph 标签和 JSON-LD 结构化数据。重构了 usePageMeta 和 useSimpleSEO 两个组合式函数，让每个工具页面自动生成规范的 SEO 信息。还加了 SEO 插件处理客户端渲染的结构化数据注入。",{"q":2622,"a":2623},"为什么开始做开发者工具？","自己在开发过程中经常需要格式化 JSON、编解码 URL 这类小操作。之前都在其他网站上做，现在 metool 的架构已经很成熟，加一个新工具很快，干脆自己做了。后面开发者工具会成为 metool 的一个重要品类。",{},"\u002Fbuilds\u002Fmetool\u002F2025-10-12-back-after-silence",{"title":2470,"description":2610},[2628,2629,2630,2631,2632,2580,2633],"独立开发项目停更","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 应用图标裁剪。",[326,327],"iiptoayqNzPYX0rh1rHYBLmxt007FNGkwdZhg9DuhvM",{"id":2639,"title":2640,"body":2641,"date":2758,"description":2759,"draft":294,"extension":295,"faq":2760,"meta":2773,"navigation":310,"path":2774,"project":312,"readingTime":819,"seo":2775,"seoKeywords":2776,"stem":2783,"summary":2784,"tags":2785,"updated":328,"__hash__":2786},"builds\u002Fbuilds\u002Fmetool\u002F2025-03-01-video-tools-and-easter-eggs.md","视频处理也做了，顺手还做了几个节日彩蛋",{"type":8,"value":2642,"toc":2752},[2643,2646,2649,2652,2655,2661,2664,2696,2699,2702,2705,2716,2727,2730,2734,2743,2746,2749],[11,2644,2645],{"id":2645},"补齐视频处理",[15,2647,2648],{},"图片工具和文档工具做完之后，视频处理是一个自然的延伸。",[15,2650,2651],{},"我日常也有视频处理的需求：压缩一下视频发邮件、转个格式、截一段视频做成 GIF。和图片工具一样，网上的视频处理工具不是要上传到服务器就是要付费。",[15,2653,2654],{},"这次的方案是用 FFmpeg 的 WebAssembly 版本，直接在浏览器端跑视频处理。不需要服务器，不需要安装软件。",[15,2656,2657],{},[147,2658],{"alt":2659,"src":2660},"视频工具三件套","\u002Fb\u002Fmetool\u002Fvideo-tools.png",[15,2662,2663],{},"两周内上线了三个视频工具：",[71,2665,2666,2676,2686],{},[74,2667,2668,2675],{},[31,2669,2670],{},[19,2671,2674],{"href":2672,"rel":2673,"target":24},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fvideos\u002Fcompress\u002F",[23],"视频压缩"," — 调整分辨率和码率，减小文件大小",[74,2677,2678,2685],{},[31,2679,2680],{},[19,2681,2684],{"href":2682,"rel":2683,"target":24},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fvideos\u002FformatConvert\u002F",[23],"视频格式转换"," — MP4\u002FWebM\u002FAVI 互转",[74,2687,2688,2695],{},[31,2689,2690],{},[19,2691,2694],{"href":2692,"rel":2693,"target":24},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fvideos\u002FvideoToGif\u002F",[23],"视频转 GIF"," — 支持自定义分辨率、帧率和时间段截取",[15,2697,2698],{},"同时还做了微信公众号 Markdown 文章转换的雏形，不过这个工具后面会有大升级，这里先不展开。",[11,2700,2701],{"id":2701},"节日彩蛋和趣味工具",[15,2703,2704],{},"工具站不一定全是\"正经\"工具。",[15,2706,2707,2708,2715],{},"3 月初正好临近清明节，我做了一个 ",[31,2709,2710],{},[19,2711,2714],{"href":2712,"rel":2713,"target":24},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fmagics\u002Fqingming\u002F",[23],"清明节纪念页"," ——可以编辑纪念文字、选择背景，生成一张可以分享的纪念图片。技术上验证了文字编辑和图片合成的能力，情感上也算给工具站加了一点温度。",[15,2717,2718,2719,2726],{},"还做了一个 ",[31,2720,2721],{},[19,2722,2725],{"href":2723,"rel":2724,"target":24},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fmagics\u002Flottery\u002F",[23],"抽奖工具","，动画效果比较花哨，纯粹是觉得好玩。",[15,2728,2729],{},"这些趣味工具的开发时间不长，但让我意识到一件事：工具站的边界不只是\"文件处理\"。只要是用户会在手机或电脑上临时需要的功能，都可以做。",[11,2731,2733],{"id":2732},"图片-resize-也补上了","图片 resize 也补上了",[15,2735,2736,2737,2742],{},"这个阶段还补了一个",[19,2738,2741],{"href":2739,"rel":2740,"target":24},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fimages\u002Fresize\u002F",[23],"图片 resize"," 工具，支持自定义尺寸调整。功能简单但使用频率很高，是之前漏掉的基础需求。",[11,2744,2745],{"id":2745},"品类在扩展",[15,2747,2748],{},"回头看这两周，metool 的工具品类从\"图片+文档\"扩展到了\"图片+文档+视频+趣味\"。工具站的定位也从\"文件处理\"慢慢变成了\"在线工具集\"。",[15,2750,2751],{},"接下来应该继续加工具，还是停下来优化体验？我当时没想清楚。事实上，后面我停了很久。",{"title":248,"searchDepth":277,"depth":277,"links":2753},[2754,2755,2756,2757],{"id":2645,"depth":280,"text":2645},{"id":2701,"depth":280,"text":2701},{"id":2732,"depth":280,"text":2733},{"id":2745,"depth":280,"text":2745},"2025-03-01","视频压缩、格式转换、视频转 GIF，把视频处理需求补齐了。清明节纪念页和抽奖工具是兴趣驱动，验证可行性。",[2761,2764,2767,2770],{"q":2762,"a":2763},"浏览器端能做视频压缩和格式转换吗？","可以。用 FFmpeg 的 WebAssembly 版本在浏览器端运行，支持视频压缩、格式转换（MP4\u002FWebM\u002FAVI 互转）和视频转 GIF。处理速度取决于设备性能，但中等长度的视频完全够用，且不需要上传到服务器。",{"q":2765,"a":2766},"视频转 GIF 工具有什么特色？","支持自定义分辨率（多档可选）、帧率调整和时间段截取。GIF 的尺寸优化是难点，提供了多种分辨率选项让用户在清晰度和文件大小之间取舍。",{"q":2768,"a":2769},"为什么要做清明节纪念页和抽奖工具？","纯粹是兴趣驱动和技术验证。清明节纪念页验证了动态文字编辑和背景合成的能力，抽奖工具验证了动画交互效果。这类趣味工具虽然不是核心功能，但能让工具站更有温度。",{"q":2771,"a":2772},"微信公众号 Markdown 转换工具是怎么回事？","第一版的微信公众号文章转换在这个阶段就做了雏形，把 Markdown 渲染成公众号兼容的富文本格式。后来在 2026 年 3 月做了大幅升级和高度定制化。",{},"\u002Fbuilds\u002Fmetool\u002F2025-03-01-video-tools-and-easter-eggs",{"title":2640,"description":2759},[2777,2694,2778,2779,2780,2781,2782],"在线视频压缩","前端视频处理","FFmpeg WASM","微信公众号文章转换","浏览器端视频转换","在线工具开发","builds\u002Fmetool\u002F2025-03-01-video-tools-and-easter-eggs","图片和文档工具做完后，视频处理是下一个自然需求。两周内上线了视频压缩、格式转换和视频转 GIF 三个工具，同时做了微信公众号文章转换、清明节纪念页和抽奖工具。工具站的品类从文件处理扩展到了内容创作和趣味工具。",[326,327],"mqYPYxMP9M5vITnR0pz8FrsbGuDd-a7ZEo0hukqQzqk",{"id":2788,"title":2789,"body":2790,"date":2891,"description":2892,"draft":294,"extension":295,"faq":2893,"meta":2906,"navigation":310,"path":2907,"project":312,"readingTime":819,"seo":2908,"seoKeywords":2909,"stem":2917,"summary":2918,"tags":2919,"updated":328,"__hash__":2920},"builds\u002Fbuilds\u002Fmetool\u002F2025-02-24-go-international.md","AI 把做国际站的门槛降到了最低",{"type":8,"value":2791,"toc":2885},[2792,2796,2799,2802,2805,2808,2811,2839,2845,2856,2860,2863,2869,2872,2875,2879,2882],[11,2793,2795],{"id":2794},"ai-把翻译成本打下来了","AI 把翻译成本打下来了",[15,2797,2798],{},"做了一个月的工具站，工具数量已经不少了。这时候一个想法自然冒了出来：要不要做成国际站？",[15,2800,2801],{},"以前做多语言网站是一件成本很高的事——翻译、校对、维护，每多一种语言就多一份工作量。但 AI 改变了这个等式。翻译成本降到了接近零，一段中文丢给 AI，几秒钟就能拿到质量不错的英文。",[15,2803,2804],{},"我决定用 metool 来验证做国际站的标准方案。",[11,2806,2807],{"id":2807},"中英双语架构",[15,2809,2810],{},"技术方案用了 Nuxt i18n 模块：",[71,2812,2813,2826,2829,2836],{},[74,2814,2815,2816,2819,2820,1636,2823],{},"翻译文件放在 ",[246,2817,2818],{},"locales\u002F"," 目录，",[246,2821,2822],{},"en.json",[246,2824,2825],{},"zh.json",[74,2827,2828],{},"所有工具的标题、描述、按钮文案抽取到翻译文件中",[74,2830,2831,2832,2835],{},"页面组件通过 ",[246,2833,2834],{},"$t()"," 函数引用，不再硬编码中文",[74,2837,2838],{},"路由支持语言前缀切换",[15,2840,2841],{},[147,2842],{"alt":2843,"src":2844},"3D GLB 模型在线预览","\u002Fb\u002Fmetool\u002F3d-preview.png",[15,2846,2847,2848,2855],{},"同一时期还上线了 ",[31,2849,2850],{},[19,2851,2854],{"href":2852,"rel":2853,"target":24},"https:\u002F\u002Fmetool.online\u002Fzh\u002F3d\u002FglbPreview\u002F",[23],"3D GLB 模型预览工具","，用 Three.js 做的。支持拖拽上传 GLB 文件，实时预览、缩放旋转、背景色切换、自动旋转。算是拓展了工具的品类边界，从纯文件处理扩展到了 3D 领域。",[11,2857,2859],{"id":2858},"试了日韩语然后砍掉了","试了日韩语，然后砍掉了",[15,2861,2862],{},"做国际化的时候，顺手加了日语和韩语的支持。",[15,2864,2865,2866],{},"但很快发现一个问题：",[31,2867,2868],{},"翻译容易，维护难。",[15,2870,2871],{},"每次新增一个工具或者改一个文案，要同步更新四种语言的翻译文件。在没有真实用户数据证明日韩用户有需求的情况下，这个维护成本完全不值得。",[15,2873,2874],{},"果断砍掉，只保留中英文。有了用户数据再决定要不要加。",[11,2876,2878],{"id":2877},"经验先做减法","经验：先做减法",[15,2880,2881],{},"国际化不是\"支持的语言越多越好\"，而是要验证：有没有人用、用了之后体验是否完整。",[15,2883,2884],{},"中英双语是投入产出比最高的选择。英语覆盖了全球大部分互联网用户，维护成本可控，也足以验证国际化方案是否跑得通。",{"title":248,"searchDepth":277,"depth":277,"links":2886},[2887,2888,2889,2890],{"id":2794,"depth":280,"text":2795},{"id":2807,"depth":280,"text":2807},{"id":2858,"depth":280,"text":2859},{"id":2877,"depth":280,"text":2878},"2025-02-24","有了 AI，翻译不再是瓶颈。正好趁这个机会验证做国际站的标准方案，顺便把 3D 模型预览工具也做了。",[2894,2897,2900,2903],{"q":2895,"a":2896},"为什么选择在这个时候做国际化？","AI 翻译能力的提升让多语言内容的生产成本大幅降低，以前需要专人翻译的工作现在 AI 几秒钟就能完成。正好用这个项目验证一下做国际站的标准方案，积累经验。",{"q":2898,"a":2899},"国际化的技术方案是什么？","使用 Nuxt i18n 模块，翻译文件用 JSON 格式存放在 locales 目录（en.json 和 zh.json）。所有工具的标题、描述、操作按钮文案都抽取到翻译文件中，页面组件通过 $t() 函数引用。路由支持语言前缀切换。",{"q":2901,"a":2902},"为什么砍掉了日语和韩语支持？","最初尝试加了日语和韩语，但很快发现：翻译容易，维护难。每次新增或修改一个工具，要同步更新四种语言的翻译文件。在没有明确用户需求的情况下，维护成本远高于收益，果断砍掉只保留中英文。",{"q":2904,"a":2905},"3D 模型预览工具是怎么做的？","用 Three.js 构建 3D 场景，支持 GLB 格式模型的拖拽上传和实时预览。功能包括缩放旋转、网格显示、背景色切换、自动旋转。所有渲染在浏览器端完成，不需要安装任何软件。",{},"\u002Fbuilds\u002Fmetool\u002F2025-02-24-go-international",{"title":2789,"description":2892},[2910,2911,2912,2913,2914,2915,2916],"Nuxt i18n 国际化","AI 辅助翻译","在线 3D 模型预览","Three.js GLB 预览","多语言网站开发","国际化工具站","前端 i18n 架构","builds\u002Fmetool\u002F2025-02-24-go-international","AI 让翻译成本降到接近零，做国际站不再是大公司才能干的事。用 Nuxt i18n 搭建了中英双语架构，同时上线了 3D GLB 模型预览工具。曾尝试日韩语支持，发现维护成本高于收益后果断砍掉。",[326,832],"o4vphR82AQXe1eS-PrkTEb8KWq-BAuA2MYsxYEf1P8c",{"id":2922,"title":2923,"body":2924,"date":3069,"description":3070,"draft":294,"extension":295,"faq":3071,"meta":3084,"navigation":310,"path":3085,"project":312,"readingTime":819,"seo":3086,"seoKeywords":3087,"stem":3092,"summary":3093,"tags":3094,"updated":328,"__hash__":3095},"builds\u002Fbuilds\u002Fmetool\u002F2025-02-08-tool-explosion.md","积压的需求一起爆发，两周上线了十几个工具",{"type":8,"value":2925,"toc":3063},[2926,2929,2932,2935,2939,2942,2947,2993,2998,3015,3020,3030,3036,3039,3042,3045,3048,3051,3057,3060],[11,2927,2928],{"id":2928},"积压的需求清单",[15,2930,2931],{},"基础架构搭好之后，我脑子里积压的需求开始一个接一个往外冒。",[15,2933,2934],{},"这些都是我日常工作中反复遇到的场景：图片要转格式、要压缩、要生成二维码、要去背景。文档要从 Word 转 PDF、Markdown 要转成其他格式。每次都在网上找工具，现在终于可以一口气做完了。",[11,2936,2938],{"id":2937},"两周十几个工具","两周，十几个工具",[15,2940,2941],{},"从 2 月 8 日到 2 月 20 日，密集上线了这些工具：",[15,2943,2944],{},[31,2945,2946],{},"图片工具全家桶：",[71,2948,2949,2957,2963,2971,2979,2986],{},[74,2950,2951,2956],{},[19,2952,2955],{"href":2953,"rel":2954,"target":24},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fimages\u002FimageFormatConvert\u002F",[23],"图片格式转换","（JPG\u002FPNG\u002FWebP\u002FICO 互转）",[74,2958,2959],{},[19,2960,924],{"href":2961,"rel":2962,"target":24},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fimages\u002Fcompress\u002F",[23],[74,2964,2965,2970],{},[19,2966,2969],{"href":2967,"rel":2968,"target":24},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fimages\u002FqrCodeGenerate\u002F",[23],"QR 码生成器","（支持自定义锚点和数据点样式）",[74,2972,2973,2978],{},[19,2974,2977],{"href":2975,"rel":2976,"target":24},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fimages\u002FremoveBackground\u002F",[23],"图片去背景","（Canvas 笔刷方案）",[74,2980,2981],{},[19,2982,2985],{"href":2983,"rel":2984,"target":24},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fimages\u002FlongImageSplit\u002F",[23],"长图分割",[74,2987,2988],{},[19,2989,2992],{"href":2990,"rel":2991,"target":24},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fimages\u002FmovieSubtitleCrop\u002F",[23],"电影字幕裁剪",[15,2994,2995],{},[31,2996,2997],{},"文档工具：",[71,2999,3000,3007],{},[74,3001,3002],{},[19,3003,3006],{"href":3004,"rel":3005,"target":24},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fdocs\u002FwordToPDF\u002F",[23],"Word 转 PDF",[74,3008,3009,3014],{},[19,3010,3013],{"href":3011,"rel":3012,"target":24},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fdocs\u002FmarkdownConvert\u002F",[23],"Markdown 格式转换","（支持导出 HTML）",[15,3016,3017],{},[31,3018,3019],{},"趣味工具：",[71,3021,3022],{},[74,3023,3024,3029],{},[19,3025,3028],{"href":3026,"rel":3027,"target":24},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fmagics\u002FheartBeat\u002F",[23],"心跳表白页","（带微信分享适配）",[15,3031,3032],{},[147,3033],{"alt":3034,"src":3035},"图片工具全家桶","\u002Fb\u002Fmetool\u002Fimage-tools.png",[15,3037,3038],{},"速度能这么快，核心原因是第一天搭的架构：工具卡片组件、分类体系、页面模板全是复用的，新增一个工具只需要写核心逻辑。图片处理用 Canvas API，文档转换用 mammoth.js，每个工具的核心代码量其实不大。",[11,3040,3041],{"id":3041},"数据基础也搭好了",[15,3043,3044],{},"2 月 14 日接入了 Google Analytics，虽然这时候几乎没有外部流量，但尽早有数据追踪比后面补要好得多。",[15,3046,3047],{},"2 月 17 日配置了 sitemap 和 robots.txt，加了 404 错误页面。SEO 基础设施越早搭好越省事，搜索引擎需要时间爬取和收录。",[11,3049,3050],{"id":3050},"所有处理都在本地",[15,3052,3053,3054,404],{},"有一个原则从第一天就没变过：",[31,3055,3056],{},"所有文件处理都在浏览器端完成",[15,3058,3059],{},"图片压缩用 Canvas API，格式转换用 Blob 操作，文档解析用 JavaScript 库。用户的文件不会上传到任何服务器。这不只是隐私保障，也意味着没有服务器成本，工具可以无限免费用。",[15,3061,3062],{},"两周下来，metool 已经从\"三个工具\"变成了\"十几个工具\"。积压的需求基本清完了，但新的想法又开始冒出来。",{"title":248,"searchDepth":277,"depth":277,"links":3064},[3065,3066,3067,3068],{"id":2928,"depth":280,"text":2928},{"id":2937,"depth":280,"text":2938},{"id":3041,"depth":280,"text":3041},{"id":3050,"depth":280,"text":3050},"2025-02-08","图片格式转换、压缩、QR 码生成、去背景、Word 转 PDF、Markdown 转换。把日常文件处理的需求全都做成了在线工具。",[3072,3075,3078,3081],{"q":3073,"a":3074},"两周内是怎么做到上线十几个工具的？","关键在于第一天搭好的架构：分类体系、工具卡片组件、页面模板都是复用的，新增一个工具只需要写核心处理逻辑。图片格式转换用 Canvas API，压缩用 OffscreenCanvas，QR 码用开源库，文档转换用 mammoth.js，每个工具的核心代码量并不大。",{"q":3076,"a":3077},"这些工具的文件处理在哪里完成？","全部在浏览器端完成，不需要上传到服务器。图片处理用 Canvas API 和 Web Worker，文档转换用 JavaScript 库在本地解析。用户的文件不会离开设备，隐私安全有保障。",{"q":3079,"a":3080},"为什么要做图片去背景工具？","日常做素材时经常需要抠图，在线去背景工具要么要付费，要么效果差。用前端 Canvas 配合笔刷工具做了一个本地版，虽然不如 AI 模型精准，但够用且免费。后来在 8 月升级成了 ONNX 模型方案。",{"q":3082,"a":3083},"Google Analytics 和 SEO 在这个阶段就接入了吗？","是的。GA 在 2 月 14 日接入，sitemap 和 robots 在 2 月 17 日配置完成。虽然这时候流量很少，但尽早接入数据追踪能帮助后面分析用户行为。SEO 基础设施（sitemap、robots.txt、错误页面）也是越早搭好越省事。",{},"\u002Fbuilds\u002Fmetool\u002F2025-02-08-tool-explosion",{"title":2923,"description":3070},[3088,3089,2969,2977,3006,3090,3091],"在线图片处理工具","在线文档转换","前端文件处理","浏览器端图片压缩","builds\u002Fmetool\u002F2025-02-08-tool-explosion","基础架构搭好后，两周内密集上线了十几个工具：图片全家桶（格式转换、压缩、QR 码生成、去背景、长图分割）、文档工具（Word 转 PDF、Markdown 转换）、心跳魔法工具，同时接入了 Google Analytics 和基础 SEO。",[326,327],"fw6xObA62S7sQ5Tf0Xvu8pCMRptFYfiu3gj1gPqoWhY",{"id":3097,"title":3098,"body":3099,"date":3202,"description":3203,"draft":294,"extension":295,"faq":3204,"meta":3217,"navigation":310,"path":3218,"project":312,"readingTime":819,"seo":3219,"seoKeywords":3220,"stem":3226,"summary":3227,"tags":3228,"updated":328,"__hash__":3229},"builds\u002Fbuilds\u002Fmetool\u002F2025-01-23-start-from-scratch.md","网上找不到称手的工具，我决定自己做一个",{"type":8,"value":3100,"toc":3196},[3101,3104,3107,3110,3113,3116,3119,3122,3125,3155,3158,3162,3168,3171,3180,3186,3190,3193],[11,3102,3103],{"id":3103},"找不到称手的工具",[15,3105,3106],{},"我的日常工作里，经常需要临时处理一些文件：裁剪图片、转换格式、给视频截字幕区域。",[15,3108,3109],{},"每次都要在网上翻一圈找在线工具。找到的要么功能不对，要么满屏广告，要么要注册才能用，要么要把文件上传到别人的服务器。",[15,3111,3112],{},"这种事情经历多了，我就想：这些操作前端完全能做，为什么不自己做一个？",[11,3114,3115],{"id":3115},"一天搭起来",[15,3117,3118],{},"2025 年 1 月 23 日，我花了一天时间把基础架构搭好了。",[15,3120,3121],{},"技术栈选了 Nuxt 3 + TypeScript + Tailwind CSS。Nuxt 的 SSG 模式可以生成纯静态页面，加载快，部署简单。文件处理全部在浏览器端完成，数据不会离开用户的设备。",[15,3123,3124],{},"第一天上线的工具：",[71,3126,3127,3137,3147],{},[74,3128,3129,3136],{},[31,3130,3131],{},[19,3132,3135],{"href":3133,"rel":3134,"target":24},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fgames\u002Fsnake\u002F",[23],"贪吃蛇"," — 用来验证游戏交互能力",[74,3138,3139,3146],{},[31,3140,3141],{},[19,3142,3145],{"href":3143,"rel":3144,"target":24},"https:\u002F\u002Fmetool.online\u002Fzh\u002Fgames\u002Fmaze\u002F",[23],"迷宫游戏"," — 带音效和移动端控制",[74,3148,3149,3154],{},[31,3150,3151],{},[19,3152,2992],{"href":2990,"rel":3153,"target":24},[23]," — 真实需求，批量裁剪视频截图中的字幕区域",[15,3156,3157],{},"同时搭好了整个工具框架：导航栏、侧边菜单、工具卡片组件、分类体系。后面加新工具只需要写页面逻辑，框架层的事情不用再操心。",[11,3159,3161],{"id":3160},"随时随地手机也能用","随时随地，手机也能用",[15,3163,3164,3165,404],{},"做这个工具箱有一个重要的前提：",[31,3166,3167],{},"手机也能用",[15,3169,3170],{},"我不是总在电脑前，很多时候是在手机上临时需要处理个文件。所以从第一天起，移动端适配就是必须的，不是\"以后再说\"的事。",[15,3172,3173,3174,3179],{},"贪吃蛇和迷宫游戏都做了移动端触控操作，字幕裁剪支持拖拽选区。在手机浏览器里打开 ",[19,3175,3178],{"href":3176,"rel":3177,"target":24},"https:\u002F\u002Fmetool.online",[23],"metool.online"," 就能直接用。",[15,3181,3182],{},[147,3183],{"alt":3184,"src":3185},"metool.online 首页","\u002Fb\u002Fmetool\u002Fhomepage.png",[11,3187,3189],{"id":3188},"起步很轻但框架要对","起步很轻，但框架要对",[15,3191,3192],{},"回头看，第一天最重要的不是上线了几个工具，而是把架构搭对了：分类体系、组件复用、路由规范。这些决定了后面能不能快速扩充工具，而不是每次都从头写。",[15,3194,3195],{},"工具箱刚刚开始，积压的需求还有一堆。",{"title":248,"searchDepth":277,"depth":277,"links":3197},[3198,3199,3200,3201],{"id":3103,"depth":280,"text":3103},{"id":3115,"depth":280,"text":3115},{"id":3160,"depth":280,"text":3161},{"id":3188,"depth":280,"text":3189},"2025-01-23","每次需要处理图片、裁剪字幕都要在网上翻半天，找到的工具不是功能不对就是体验太差。干脆自己做一个在线工具箱，随时随地能用。",[3205,3208,3211,3214],{"q":3206,"a":3207},"为什么要自己做在线工具箱？","日常工作中经常需要临时处理图片、裁剪视频字幕等，但网上的在线工具要么功能不匹配，要么广告太多体验差。自己做一个工具集，既能完全满足自己的需求，还能随时随地通过手机访问。",{"q":3209,"a":3210},"metool.online 用了什么技术栈？","Nuxt 3 + TypeScript + Tailwind CSS，SSG 静态生成部署。选择 Nuxt 是因为 Vue 生态成熟，SSG 模式加载快且 SEO 友好，前端能力足以处理图片、音视频等文件操作。",{"q":3212,"a":3213},"第一天做了哪些工具？","第一天上线了三个工具：贪吃蛇游戏、迷宫游戏和电影字幕裁剪。游戏是用来验证交互能力的，字幕裁剪是真实需求驱动。同时搭好了导航栏、侧边菜单、工具卡片等基础组件架构。",{"q":3215,"a":3216},"为什么不直接用现成的在线工具？","现成工具有几个痛点：功能不完全匹配自己的需求、广告干扰体验、部分工具需要上传到服务器有隐私风险。自建工具全部在浏览器端处理，数据不离开本地，而且可以按自己的习惯定制功能。",{},"\u002Fbuilds\u002Fmetool\u002F2025-01-23-start-from-scratch",{"title":3098,"description":3203},[3221,3222,3223,3090,3224,3178,3225],"在线工具箱","独立开发在线工具","Nuxt 3 工具站","自建工具集","移动端在线工具","builds\u002Fmetool\u002F2025-01-23-start-from-scratch","经常在网上找在线工具，但总找不到刚好合适的。用 Nuxt 3 + TypeScript + Tailwind CSS 从零搭建了一个在线工具箱 metool.online，第一天就上线了贪吃蛇、迷宫游戏和电影字幕裁剪三个工具。",[326,327],"Fnr1PEBjKKQH6aW3oegh7BDch75TqUVOxrwcGFSIfSI",{"id":5,"title":6,"body":3231,"date":292,"description":293,"draft":294,"extension":295,"faq":3412,"meta":3417,"navigation":310,"path":311,"project":312,"readingTime":313,"seo":3418,"seoKeywords":3419,"stem":323,"summary":324,"tags":3420,"updated":328,"__hash__":329},{"type":8,"value":3232,"toc":3398},[3233,3235,3240,3244,3246,3250,3252,3254,3256,3258,3260,3264,3266,3280,3282,3286,3288,3302,3304,3309,3311,3313,3317,3321,3331,3333,3335,3337,3341,3345,3367,3369,3371,3375,3380,3382,3386,3388,3390,3392,3394,3396],[11,3234,13],{"id":13},[15,3236,17,3237,26],{},[19,3238,25],{"href":21,"rel":3239,"target":24},[23],[15,3241,29,3242],{},[31,3243,33],{},[15,3245,36],{},[15,3247,39,3248],{},[31,3249,42],{},[15,3251,45],{},[15,3253,48],{},[11,3255,52],{"id":51},[15,3257,55],{},[57,3259,60],{"id":59},[15,3261,3262,66],{},[31,3263,65],{},[15,3265,69],{},[71,3267,3268,3272,3276],{},[74,3269,3270,79],{},[31,3271,78],{},[74,3273,3274,85],{},[31,3275,84],{},[74,3277,3278,91],{},[31,3279,90],{},[57,3281,95],{"id":94},[15,3283,3284,101],{},[31,3285,100],{},[15,3287,69],{},[71,3289,3290,3294,3298],{},[74,3291,3292,111],{},[31,3293,110],{},[74,3295,3296,117],{},[31,3297,116],{},[74,3299,3300,123],{},[31,3301,122],{},[11,3303,127],{"id":126},[15,3305,130,3306,136],{},[19,3307,135],{"href":133,"rel":3308,"target":24},[23],[57,3310,140],{"id":139},[15,3312,143],{},[15,3314,3315],{},[147,3316],{"alt":149,"src":150},[15,3318,3319],{},[31,3320,155],{},[157,3322,3323,3325,3327,3329],{},[74,3324,161],{},[74,3326,164],{},[74,3328,167],{},[74,3330,170],{},[15,3332,173],{},[57,3334,177],{"id":176},[15,3336,180],{},[15,3338,3339],{},[147,3340],{"alt":185,"src":186},[15,3342,3343],{},[31,3344,191],{},[157,3346,3347,3351,3355,3359,3363],{},[74,3348,3349,199],{},[31,3350,198],{},[74,3352,3353,205],{},[31,3354,204],{},[74,3356,3357,211],{},[31,3358,210],{},[74,3360,3361,217],{},[31,3362,216],{},[74,3364,3365,223],{},[31,3366,222],{},[57,3368,227],{"id":226},[15,3370,230],{},[15,3372,233,3373,237],{},[31,3374,236],{},[239,3376,3378],{"className":3377,"code":243,"language":244},[242],[246,3379,243],{"__ignoreMap":248},[11,3381,251],{"id":251},[15,3383,254,3384],{},[31,3385,257],{},[15,3387,260],{},[15,3389,263],{},[15,3391,266],{},[11,3393,269],{"id":269},[15,3395,272],{},[15,3397,275],{},{"title":248,"searchDepth":277,"depth":277,"links":3399},[3400,3401,3405,3410,3411],{"id":13,"depth":280,"text":13},{"id":51,"depth":280,"text":52,"children":3402},[3403,3404],{"id":59,"depth":277,"text":60},{"id":94,"depth":277,"text":95},{"id":126,"depth":280,"text":127,"children":3406},[3407,3408,3409],{"id":139,"depth":277,"text":140},{"id":176,"depth":277,"text":177},{"id":226,"depth":277,"text":227},{"id":251,"depth":280,"text":251},{"id":269,"depth":280,"text":269},[3413,3414,3415,3416],{"q":298,"a":299},{"q":301,"a":302},{"q":304,"a":305},{"q":307,"a":308},{},{"title":6,"description":293},[316,317,318,319,320,321,322],[326,327],1775940824464]