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