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