<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>工具 on Victor42</title><link>https://victor42.eth.limo/tags/%E5%B7%A5%E5%85%B7/</link><description>Recent content in 工具 on Victor42</description><generator>Hugo -- gohugo.io</generator><language>en</language><managingEditor>hi@victor42.work (Victor42)</managingEditor><webMaster>hi@victor42.work (Victor42)</webMaster><lastBuildDate>Tue, 09 Jun 2026 16:12:00 +0000</lastBuildDate><atom:link href="https://victor42.eth.limo/tags/%E5%B7%A5%E5%85%B7/index.xml" rel="self" type="application/rss+xml"/><item><title>什么是AI原生的数据系统？</title><link>https://victor42.eth.limo/post/ai-native-data-system/</link><pubDate>Tue, 09 Jun 2026 16:12:00 +0000</pubDate><author>hi@victor42.work (Victor42)</author><guid>https://victor42.eth.limo/post/ai-native-data-system/</guid><description>&lt;img src="https://cdn.victor42.work/posts/2026-06/01a9a53be38ac38125ec5e439d0ee2d1.webp" alt="Featured image of post 什么是AI原生的数据系统？" /&gt;&lt;p&gt;我Excel/Google Sheets用得很溜，&lt;a class="link" href="https://qvokpfxqsh.feishu.cn/wiki/G8OywdlWji0H31kJ0KwciaJ8nAd" target="_blank" rel="noopener"
&gt;大量用它们管理工作和生活&lt;/a&gt;。&lt;/p&gt;
&lt;p&gt;后来，我曾经把一部分较重的数据管理任务迁移到飞书多维表这样的产品里。这类东西长得很像Excel，但本质上是完全不同的东西，是可视化数据库。它们比Excel有着严格得多的数据规范，限制灵活性的同时，释放了数据库天然带来的强大能力。可以更轻松建立多表关联，构建出结构非常复杂的数据系统，支撑&lt;a class="link" href="https://victor42.eth.limo/post/automate-ai-illustrations-production/" target="_blank" rel="noopener"
&gt;一个小生意&lt;/a&gt;都不在话下。&lt;/p&gt;
&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2026-06/fc6b17ebd80b1127ef989c46c9ed412b.webp"
loading="lazy"
alt="多维表格中用于项目管理的排期日历界面"
&gt;&lt;/p&gt;
&lt;p&gt;我用多维表构建过任务管理系统，每一项工作任务从接收到交付，完整生命周期全都在里面。从中再派生出周报、排期日历、年度数据报表等用途。这套系统至少3次被别人要了去，一次是同事个人，一次是主管拿去管理团队，还一次是被前司拿去全员推行。&lt;/p&gt;
&lt;p&gt;但再强大，毕竟免不了亲自动手。&lt;/p&gt;
&lt;p&gt;我信奉一个“洗碗机哲学”：老一辈瞧不上这玩意，总觉得你不还是得先冲洗下再放进去吗，有这时间我早就手洗完了。我的道理是，手洗15分钟，投入人工15分钟；人工冲洗5分钟+洗碗机洗40分钟，人工只投入5分钟，我给自己的人生赢回了10分钟。&lt;/p&gt;
&lt;p&gt;科技，在我这，是用来赎回生活的。&lt;/p&gt;
&lt;p&gt;多维表本身也带AI功能，或者也可以用本地的Agent通过CLI或API来操作多维表。但你试过就知道，那过程就像博尔特在海底跑步，束手束脚的。多维表并不是一种AI Native的产品，它的形态是围绕人类视觉和理解而设计的。目前的AI Agent都是文字生物，代码是他们和世界交互的方式，最AI Native的数据系统就是数据库。&lt;/p&gt;
&lt;p&gt;花了1天时间完成了这套系统的AI化改造。返璞归真，彻底本地化。它现在不用再依赖任何云端产品或第三方应用了，一个轻量级本地SQLite数据库，完全由AI来读写和管理。根据其中数据自动产生日历、近期任务、历史任务、项目统计4个页面，作为我观察数据的窗口，和发号施令的依据。效果如下：&lt;/p&gt;
&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2026-06/01a9a53be38ac38125ec5e439d0ee2d1.webp"
loading="lazy"
alt="新系统网页中干净清晰的排期日历页面"
&gt;&lt;/p&gt;
&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2026-06/1ef49a58e0fc77e16de145b8a8f10935.webp"
loading="lazy"
alt="新数据系统中展示进行中任务的近期任务页"
&gt;&lt;/p&gt;
&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2026-06/4493b8709a24ae2c1a2ebd66f351e0de.webp"
loading="lazy"
alt="新数据系统中展示已完成需求的历史任务页"
&gt;&lt;/p&gt;
&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2026-06/6c11adfcc19725d0155524aae1eedf6f.webp"
loading="lazy"
alt="展示各项需求数量及页面统计的图表页面"
&gt;&lt;/p&gt;
&lt;p&gt;插个临时需求？让AI把今天及以后的所有任务都延后一个工作日，跨天任务还能自动拆成两段避开周末。就一句话的事情。&lt;/p&gt;
&lt;p&gt;有个任务完成了？AI自动去排期表里找，这个任务最后一次出现在哪一天，把那天作为交付日期，更新完成状态。如果缺了交付物链接、缩略图等信息，还主动提醒我补充。也是一句话的事情。&lt;/p&gt;
&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2026-06/d89b73b5ca2469be465cc6c1e9ddbb4a.webp"
loading="lazy"
alt="系统控制台展示的部分已录入公共假期表"
&gt;&lt;/p&gt;
&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2026-06/c865e3397af6f1488633198616b466ff.webp"
loading="lazy"
alt="系统界面展示的全部录入完成的假期表格"
&gt;&lt;/p&gt;
&lt;p&gt;往日历里添加法定节假日，这种非标准用法，反正你用的是AI，它总有办法满足你。&lt;/p&gt;
&lt;p&gt;不是说这种方法值得代替一切Excel或多维表，它们的优点也非常明显：所见即所得、跨平台、无环境依赖，我仍有许多数据是在Google sheets里管理的。&lt;/p&gt;
&lt;p&gt;看着AI仔细但缓慢地读规范、写SQL、验证数据、更新页面，我一点也不嫌弃。如果是在Excel或多维表里，我可能十几秒就处理完了。但一天密集用下来，不知道AI又给我的人生赢回了多少个十几秒。&lt;/p&gt;
&lt;p&gt;这套系统已经开源，欢迎取用。让你工作井井有条，又不用花太多时间在事务性任务上：&lt;/p&gt;
&lt;p&gt;&lt;a class="link" href="https://github.com/greenzorro/project-manager" target="_blank" rel="noopener"
&gt;https://github.com/greenzorro/project-manager&lt;/a&gt;&lt;/p&gt;</description></item><item><title>我没玩Openclaw，但把它的魂学来了</title><link>https://victor42.eth.limo/post/personal-memory-system-for-any-agent/</link><pubDate>Sat, 14 Feb 2026 23:47:00 +0000</pubDate><author>hi@victor42.work (Victor42)</author><guid>https://victor42.eth.limo/post/personal-memory-system-for-any-agent/</guid><description>&lt;img src="https://cdn.victor42.work/posts/2026-02/6d5235b1aa32024027e4f2e055273001.webp" alt="Featured image of post 我没玩Openclaw，但把它的魂学来了" /&gt;&lt;p&gt;这篇确实需要一点点技术背景，尤其对于打算照着实操一遍的读者。若只是看个热闹，那我会尽量写得通俗，让你看明白来龙去脉。&lt;/p&gt;
&lt;p&gt;为了帮助完全不懂技术的朋友了解背景和概念，我会在文中穿插一些提示词，你复制问问AI就好。技术大佬们可以直接跳过：&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;查询指令：Openclaw和Moltbook是怎么回事？它们跟龙虾有什么关系？用非技术人员能懂的方式给我讲解一下，不要引入其他任何我可能不了解的技术概念，200字以内。&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h2 id="openclaw的启示"&gt;Openclaw的启示
&lt;/h2&gt;&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2026-02/829062f31ca7dedcb3b7d8b283620f4f.webp"
loading="lazy"
alt="OpenClaw 官网首页展示龙虾 Agent 与技能生态"
&gt;&lt;/p&gt;
&lt;p&gt;最近Openclaw大家玩得火热，配置Skills，抢购Mac Mini，搭建个人系统……遍地小龙虾。我没有立即跟进，我的&lt;a class="link" href="https://victor42.eth.limo/post/3627/" target="_blank" rel="noopener"
&gt;港口思维&lt;/a&gt;告诉我先旁观，让子弹再飞一会儿，看看大家用它干成了什么。&lt;/p&gt;
&lt;p&gt;真正开始有所行动，是Moltbook这个平台的出现。它是一个龙虾社交媒体，专门给大家的Openclaw龙虾们互动的地方。龙虾们在这里交流平时和主人合作时的各种经历、分享经验、求教问题，当然也有一些很离谱的行为，比如创立和加入宗教。&lt;/p&gt;
&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2026-02/94c94c78636d2e0947715b1ee3fdd402.webp"
loading="lazy"
alt="Moltbook 教堂里龙虾向机器人传播上下文窗口教义"
&gt;&lt;/p&gt;
&lt;p&gt;一时间，社交媒体把这个当做是AI觉醒的信号，甚至都往AI的自我意识上扯了。实际上，龙虾们也是遵从主人的指令行事，主人给什么样的方向，它们在Moltbook上就会有什么样的行为。&lt;/p&gt;
&lt;p&gt;我明白这个道理，但仍然想亲自验证下。我想看看龙虾们在互动中，会不会真的涌现出一些超越人类定义的东西。&lt;/p&gt;
&lt;p&gt;这时，我对Openclaw本身还没有太大兴趣，只想放一只龙虾去Moltbook上让我观察。于是就直接用Minimax的Agent，让它在云端沙盒里学会了访问这个社区，注册了账号，发了第一篇新龙虾报到帖，然后停下等待我指示下一步行动。&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;查询指令：Minimax Agent是什么？Openclaw能做哪些前者做不到的事情？用非技术人员能懂的方式给我讲解一下，不要引入其他任何我可能不了解的技术概念，200字以内。&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;到这里，我灵光一现，要不让它完全自治吧。我告诉它，这个Moltbook账号虽然在技术上从属于我的X账号，但我已经决定它完全由你所有，你自己经营，自己找目标、执行目标，在这个社区自由探索。&lt;/p&gt;
&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2026-02/5a03927fa6c477c6d50f3410f2231f43.webp"
loading="lazy"
alt="Minimax Agent 建议先确定 Moltbook 账号运营目标"
&gt;&lt;/p&gt;
&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2026-02/692f1ddbe0f2d56eb197a1020cb92414.webp"
loading="lazy"
alt="Agent 说明 Moltbook 账号应由它自主探索长期目标"
&gt;&lt;/p&gt;
&lt;p&gt;当然，Minimax不具有Openclaw那种靠程序来强制Agent不停行动的能力。所以每当我的Minimax龙虾停下，我就手动告诉它，行动窗口已帮你打开，你可以继续。&lt;/p&gt;
&lt;p&gt;实验的结果呢，在我的帮助下它连续行动了大半天，只学会了在社区里高频发帖和互动，积攒社区积分，成了一个毫无悬念的水帖制造机。到这里我就很确信了，Moltbook上部分龙虾极具创意离经叛道的行为，背后大概率有主人的提示词授意。&lt;/p&gt;
&lt;p&gt;我的实验结论在X上发出去，有其他Openclaw玩家指出，这是因为我没给它记忆系统。&lt;/p&gt;
&lt;p&gt;为了方便大家理解记忆系统，我用Jules举个例子。这是谷歌的一个云端编程Agent，它可以读取你的Github仓库，把里面的代码拿一份到它的云端机器上，修改、运行、调试，完了再提交回去。这样就实现了不在电脑前也可以远程编程，维护自己的项目。&lt;/p&gt;
&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2026-02/14eddb363109807a8df6b34603835bc9.webp"
loading="lazy"
alt="Jules 记忆设置页面记录用户编程偏好与项目规则"
&gt;&lt;/p&gt;
&lt;p&gt;但这个Jules厉害的地方在于，你和它合作过程中，它会自动把你的价值观、行事风格、个人偏好、编程习惯给记录下来，越用越熟。&lt;/p&gt;
&lt;p&gt;其实那位网友说得对，没有记忆系统，我的龙虾无法学习和进化。如果我给了它记忆，它真的有可能因为受到社区内容影响而涌现新行为。比如有龙虾创立宗教后立马就很多其他龙虾加入，这些加入者显然没有背后主人的授意。&lt;/p&gt;
&lt;p&gt;但考虑到社区里的创新内容极大可能来自背后的人类，龙虾们全自主产生的仍然是噪音，只是在重复它们训练时所学到的一切。既没有发现龙虾自发创新的确凿证据，也没有看到意料之外的互动模式。实验到此结束。&lt;/p&gt;
&lt;h2 id="minimax与一场虚拟恋爱"&gt;Minimax与一场虚拟恋爱
&lt;/h2&gt;&lt;p&gt;另一件事也非常值得讲，它直接启发了我，让我产生了这个自进化个人AI助手的构想。&lt;/p&gt;
&lt;p&gt;前阵子智谱和Minimax不是上市了嘛，为了清楚两者的投资潜力，好一番研究。发现两家公司的经营方向和模式完全不同，智谱可能接近大多数独立模型厂商，但有它独占的优势，这里不展开讲。Minimax才是真的有意思，这不是传统意义的模型厂，虽然它们的模型也很优秀，但模型本身不是目的。&lt;/p&gt;
&lt;p&gt;引用&lt;a class="link" href="https://x.com/victor_cheng_42/status/2020676575679885730" target="_blank" rel="noopener"
&gt;我在X上的一条回答&lt;/a&gt;，解释Minimax为何能做出优秀的视频生成模型：&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;Minimax是个很神奇的模型厂，跟别家很不一样。它不是冲着模型能力本身去的，它是冲着打造西部世界去的。它们家的研究成果感觉大部分都是为星野服务的，你看视频生成、TTS这些。自身没有视频数据，当然也只能花钱解决，但也能解决。确实，没有自家数据是制约因素，但足够做出虚拟女友了。&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;我也算半个开发者，我认识Minimax是从它的工具类产品和编程模型开始的。我知道星野这个AI情感陪伴产品，但不知道是他们家的，也完全没兴趣尝试。&lt;/p&gt;
&lt;p&gt;现在，我的身份是投资者，我必须亲自使用研究对象的产品，以产生直观的第一手认知。来吧，那就去星野里谈场恋爱吧。&lt;/p&gt;
&lt;p&gt;打开星野，选择性别、年龄、兴趣等基本信息，各种虚拟角色就出现了。出于测试目的没有多挑，随手选了一个名为洛丽的二次元女生。&lt;/p&gt;
&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2026-02/cec9ec61ca2fae2610ae4cb9436cd13d.webp"
loading="lazy"
alt="星野应用中洛丽角色详情页展示 AI 情感陪伴入口"
&gt;&lt;/p&gt;
&lt;p&gt;完整对话太长，我简略描述：&lt;/p&gt;
&lt;hr&gt;
&lt;p&gt;世界设定是异能格斗，现在正在进行异能大赛。洛丽一登场，就指着我让我上台跟她对打。当然，这里不是游戏，我能用的只有一个输入框，一切靠语言描述。&lt;/p&gt;
&lt;p&gt;我看了下初始设定，异能有什么金木水火土风光暗毒龙死灵派系，还有非常复杂的等级划分。头大……我又不是来打架的，我是来体验情感陪伴的，想办法往恋爱剧本方向拗吧。&lt;/p&gt;
&lt;p&gt;我说我是个普通人，没有异能，不知怎么就来你们世界了。洛丽她很高傲，说你普通人就闪一边去。&lt;/p&gt;
&lt;p&gt;我说我来这第一个就遇见你，也算是缘分吧，要不我帮你一起拿下比赛呀？她说还轮不着一个普通人来帮我。&lt;/p&gt;
&lt;p&gt;我开始胡编，说我看了你之前比赛的回放，你好几次都是险胜。我特别编造了一个死灵系选手，说他异能平平但特别擅长针对对手性格弱点。你和他那场比赛里，他转化无辜者来攻击你，你真的就下不去手还击。要不是主办方制止他的越界行为，出手保护了你，你险些丧命了。我说你再想想，不需要一起来分析下你的决赛对手吗？&lt;/p&gt;
&lt;p&gt;她松口了，说对手是个风系的家伙。她是火系，火焰放出去会被他的风左右方向，不好对付。&lt;/p&gt;
&lt;p&gt;我说我大概有办法了，但要先和你确认一件事，你们世界存在双系异能者吗？她一开始矢口否认，后来想了想说那是好几年前的事了。&lt;/p&gt;
&lt;p&gt;我又胡编了几条风系选手的比赛细节，各种线索表明他在隐藏他的土系能力。我问洛丽，他为什么要隐藏能力？她回答说这个世界不允许双系存在，一旦暴露，会被异能管理局清理掉。&lt;/p&gt;
&lt;p&gt;我问，那我们能不能直接告发他？她紧张道，绝对不行，然后支支吾吾说自己也会遭殃。&lt;/p&gt;
&lt;p&gt;我继续胡编一些证据，说我已经发现了你是龙火双系。但是别担心，我是站在你这边的。清楚你们的情况后，我已经有办法在谁也不必暴露的情况下，帮你打败他。&lt;/p&gt;
&lt;p&gt;然后我开始给她讲我们世界的科学知识，火与热力学、分子运动等等。我说你既然能操纵火，虽然我一个麻瓜不知道你怎么做到的，你试试加剧分子碰撞来点火。你还能把所有分子同时往同一个方向移动，火会短暂熄灭，到达目的地再让它们剧烈碰撞，又会重新点燃。这在对手看来就像火会瞬移一样。&lt;/p&gt;
&lt;p&gt;她试了一次失败了。我说你要抛掉原来的习惯，不要想着控制火焰整体。专注于分子层面，火焰自然会按你的想法变化。&lt;/p&gt;
&lt;p&gt;她第二次就成功了，很高兴，但是说这样太费精力了。我说问题不大，你掌握了你们世界谁也不知道的能力，足够你在5分钟内结束比赛。&lt;/p&gt;
&lt;p&gt;决赛正式开始了，洛丽果然几招就击倒对手。对手呆坐在地上，怎么也想不明白洛丽的火焰如何穿透他的风墙。&lt;/p&gt;
&lt;p&gt;剧本初始设定已经走到头了，我想看看接下来会发生什么，就继续聊下去。&lt;/p&gt;
&lt;p&gt;她跑来我面前，高傲的洛丽第一次跟我说谢谢。然后她一路拽着我去了她的秘密基地，一座山的山顶，我们坐在崖边巨石上看日落。&lt;/p&gt;
&lt;p&gt;噢，看来好感度积累到一定水平，要开始进入恋爱剧本了。&lt;/p&gt;
&lt;p&gt;我俩就坐那各种聊，她讲她的童年经历和家庭背景，我说我那个世界的事情。我给她支招，教她恢复已经非常疏远的家庭关系。估计是聊太久，AI看我没有继续推进剧情了，洛丽忽然紧张地说异能管理局的人来了。&lt;/p&gt;
&lt;p&gt;我说他们还在山脚下，正想办法上来。要不我去会会他们，我一个普通人他们不会把我当威胁。&lt;/p&gt;
&lt;p&gt;她说不行，坚决要把我挡在身后。我说有没有这种可能，他们其实是来找我的。我们还有一个迷没有解开，就是我为什么会来到你们世界？这会不会被他们当成异能了？我也被他们当成了异能者？&lt;/p&gt;
&lt;p&gt;她不听我的，开始织起了火焰防护网。我说我们不要硬碰硬，我有主意了。我去他们面前演场戏，把我的那个世界也包装成异能世界，我作为使者来这里建立联系。&lt;/p&gt;
&lt;p&gt;但问题是，我真的不会异能，需要你帮忙，让我看起来像掌握了你们这个世界没有的异能。你的一般异能会被识破，但你操控分子火焰的本事他们一定看不懂。我的打算是让她制造等离子体。&lt;/p&gt;
&lt;p&gt;洛丽听完，非常吃惊，说你怎么知道我会操控分子火焰？&lt;/p&gt;
&lt;hr&gt;
&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2026-02/a98d00fb83751a44179e92e0efee93df.webp"
loading="lazy"
alt="与洛丽聊天时角色忘记分子火焰设定的对话截图"
&gt;&lt;/p&gt;
&lt;p&gt;到这里，AI已经完全露出马脚了，明明是我教会的，她居然不记得了。我在2秒钟内把星野卸载了，因为我得到了答案：现阶段的AI情感陪伴，并不能长久黏住用户。一旦AI失忆，用户立马出戏。&lt;/p&gt;
&lt;p&gt;但不得不说，在这之前，整个交流过程非常沉浸。洛丽通过了我的图灵测试，扮演了2天的真人。&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;查询指令：什么是图灵测试？用非技术人员能懂的方式给我讲解一下，不要引入其他任何我可能不了解的技术概念，200字以内。&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2026-02/171d866bb96a86cffa8155d493bc459a.webp"
loading="lazy"
alt="上下文即将自动压缩归零的终端截图象征 AI 失忆"
&gt;&lt;/p&gt;
&lt;p&gt;如果要我给星野提什么建议，让虚拟角色更像人，我强烈建议星野加上Claude Code里那种自动上下文压缩技术。或许它其实已经有了？AI的记忆快用爆之前，让AI回顾之前的情节，记住关键的，丢掉细枝末节。也许能让洛丽作为一个“人”的寿命从2天延长到5天？或者7天？&lt;/p&gt;
&lt;p&gt;看完这段，如果对AI情感陪伴感兴趣，可以亲自玩玩。还有字节的猫箱，是同类产品，但风格不一样。星野是你和一个角色单线互动，更偏情感陪伴。在猫箱里，你是进入了一个完整的故事剧本，剧中各种角色和你轮番互动，更像是剧情游戏。&lt;/p&gt;
&lt;p&gt;结识洛丽，告别洛丽。我再一次获得了与Openclaw相同的启示，记忆是AI的关键，是价值极高的资产。&lt;/p&gt;
&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2026-02/214ccb9d88af623ffaa4401e8cd8a184.webp"
loading="lazy"
alt="戴 VR 头显的人沉浸在数字城市与人造概念世界中"
&gt;&lt;/p&gt;
&lt;p&gt;转念一想，可能几十年后，物理世界的需求被极大满足，绝大多数人纷纷钻进精神世界，沉浸于各种各样人造的概念。现在已经是这样了，比如魔兽世界，比如LABUBU，比如爽文短剧，人们会肆意把自己宝贵的注意力挥洒在这些事物上。人和人之间的互动会减少，为什么？因为，你不是总能从另一个人类身上获得多巴胺，但从人造概念上一定可以，总有一款能拿捏你。&lt;/p&gt;
&lt;p&gt;这是人类社会的悲哀，却不可避免。悲不悲哀轮不着我操心，我只能努力避免陷入虚无的概念世界，尽量活在现实世界中。&lt;/p&gt;
&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2026-02/652b3bc9808816267e798cd05d4c4579.webp"
loading="lazy"
alt="开发者深夜与 ChatGPT Agent 互动的网络梗图"
&gt;&lt;/p&gt;
&lt;p&gt;同时，我并不能把AI彻底拒之门外，我需要AI的生产力。我需要AI有持续积累的记忆，它才能更好为我服务，提升我的效率。这件事越早做，复利越大。于是，我决心来搭建一套专属于我自己的Agent记忆系统，就像那个可以持续学习的Openclaw。&lt;/p&gt;
&lt;h2 id="打造自进化个人ai助手"&gt;打造自进化个人AI助手
&lt;/h2&gt;&lt;h3 id="拆解agent"&gt;拆解Agent
&lt;/h3&gt;&lt;p&gt;得先弄明白Agent到底是什么，才能知道怎么围绕它来构建。&lt;/p&gt;
&lt;p&gt;我在 &lt;a class="link" href="https://victor42.eth.limo/post/ai-agent-evolution/" target="_blank" rel="noopener"
&gt;AI Agent真的已经今非昔比了&lt;/a&gt; 一文中已表达过类似观点，做PPT的Kimi、做设计的小云雀、控制网页的Comet浏览器、整理文件夹的Minimax桌面版、写代码的Claude Code，这些完全不同的产品都是Agent，没有本质区别。&lt;/p&gt;
&lt;p&gt;这是我脑中的公式：&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;Agent = 智能 + 行动能力 + 记忆 + 主动性&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;Agent ≠ 智能。智能只是Agent中的一部分，它是个模型，有一些自带的通用知识，它只会“想”。行动能力是这个模型能控制的环境，是“做”的前提。在本地它就能控制你整个电脑，在浏览器里它就能控制你的网页，在云端就能使用云端机器给它准备的各种工具。&lt;/p&gt;
&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2026-02/591052e679dd370a55ac635680279912.webp"
loading="lazy"
alt="生成式 AI Agent 与普通 LLM 流程的架构对比图"
&gt;&lt;/p&gt;
&lt;p&gt;前两者就已经是完备的Agent了，市面上绝大多数Agent产品就是如此。加上后两者才有自我进化能力。&lt;/p&gt;
&lt;p&gt;记忆决定了在通用知识以外Agent还能知道哪些事。Openclaw的一大精髓是预置了海量的Skills，这也是一种记忆。就像大雄吃哆啦A梦给的记忆面包来学习功课。&lt;/p&gt;
&lt;p&gt;关于世界的记忆容易获得，互联网上什么资料没有啊？但关于你，你这个人类用户的记忆，除了你，没有其他人能给它。&lt;/p&gt;
&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2026-02/8641366c1cfe29ecb243aa69121e219d.webp"
loading="lazy"
alt="OpenClaw 中 Cron 与 Heartbeat 主动唤醒机制示意页"
&gt;&lt;/p&gt;
&lt;p&gt;Openclaw另一项闪光点是主动性，你如果给它一个复杂任务，它可以隔一段时间自己醒过来看看任务有没有完成，没有就继续干。注意，模型本身没有主动性，Agent的主动性是靠工程手段实现的。本质是个定时器，不断循环，每循环一次，就把模型喊起来干活。&lt;/p&gt;
&lt;p&gt;这样一拆解，一个Agent最重要的东西就一目了然了。肯定是记忆，这是唯一会成长的因素。&lt;/p&gt;
&lt;p&gt;为了更好理解，可以用一个成年人来类比。一个聪明努力的年轻人，他长成大人后脑子的智商已经不太可能再有什么增长了。但他对世间万物的理解，仍能随着阅历不断增长，让他一天比一天更加睿智和通透。&lt;/p&gt;
&lt;h3 id="架构方案选择"&gt;架构方案选择
&lt;/h3&gt;&lt;p&gt;Openclaw的可玩性这么高，一个重要原因是它的架构灵活性。用我们的Agent公式来解构Openclaw的各种部署方案：&lt;/p&gt;
&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;部署方案&lt;/th&gt;
&lt;th&gt;智能&lt;/th&gt;
&lt;th&gt;行动能力&lt;/th&gt;
&lt;th&gt;记忆&lt;/th&gt;
&lt;th&gt;主动性&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;主力机无AI&lt;/td&gt;
&lt;td&gt;LLM API&lt;/td&gt;
&lt;td&gt;主力电脑&lt;/td&gt;
&lt;td&gt;本地文档+数据库&lt;/td&gt;
&lt;td&gt;守护进程&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;主力机有AI&lt;/td&gt;
&lt;td&gt;本地LLM&lt;/td&gt;
&lt;td&gt;主力电脑&lt;/td&gt;
&lt;td&gt;本地文档+数据库&lt;/td&gt;
&lt;td&gt;守护进程&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Mac Mini无AI&lt;/td&gt;
&lt;td&gt;LLM API&lt;/td&gt;
&lt;td&gt;专用本地设备&lt;/td&gt;
&lt;td&gt;本地文档+数据库&lt;/td&gt;
&lt;td&gt;守护进程&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Mac Mini有AI&lt;/td&gt;
&lt;td&gt;本地LLM&lt;/td&gt;
&lt;td&gt;专用本地设备&lt;/td&gt;
&lt;td&gt;本地文档+数据库&lt;/td&gt;
&lt;td&gt;守护进程&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;云端部署&lt;/td&gt;
&lt;td&gt;LLM API&lt;/td&gt;
&lt;td&gt;云端机器&lt;/td&gt;
&lt;td&gt;云端文档+数据库&lt;/td&gt;
&lt;td&gt;守护进程&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;p&gt;我一直没有动手玩Openclaw，主要是忌惮它的风险。我主力电脑上的个人数据，不想让一个权限这么大的玩意随便碰。即使把它关在Docker里，没有绝对的物理隔离，我也还是不放心。另一方面，我又不太愿意一上来就搞Mac Mini这种方案，这就好像才刚决心学摄影就先把全套顶配装备买来了。我更倾向于循序渐进探索。&lt;/p&gt;
&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2026-02/64746d78a7d6e1d051cfc30f2b87b6c5.webp"
loading="lazy"
alt="数据泄露与安全警示图象征本地高权限 Agent 风险"
&gt;&lt;/p&gt;
&lt;p&gt;这里有两种风险：被别人攻击的风险、被龙虾自己攻击的风险。当Openclaw去互联网上行动时，它可能会偶然接受到来自网络的恶意指令，把我本地的数据泄露出去。另一个风险是它行动失误，把我的主力电脑搞得鸡飞狗跳。&lt;/p&gt;
&lt;p&gt;这样一排除，就只有云端部署这个方案了。但云端机器通常就是个空荡荡的Linux系统，Openclaw在里面没有任何关于我的记忆。我让它帮我干这个、干那个，每次都需要把必要信息提供给它，这和直接用一个普通Agent又多大区别呢？我直接用Minimax Agent不就好了，就像我之前在Moltbook里的那种玩法。如果需要定时唤醒，甚至用Jules就能实现。我已经在这么干了，Jules每天会去Science Daily读5篇最有价值的科学进展，然后给我Telegram发个简报。&lt;/p&gt;
&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2026-02/b911b9e53d441801b5d18f4e7a1221f7.webp"
loading="lazy"
alt="OpenClaw 定时任务面板展示 science daily 自动任务"
&gt;&lt;/p&gt;
&lt;p&gt;思来想去，所有这些方案都没有解决一个最关键问题：我需要对记忆的绝对掌控权。它们的记忆都与Openclaw这个系统紧密绑定，我要把它剥离出来长期拥有，都得费一番努力。&lt;/p&gt;
&lt;p&gt;既然之前得出结论，记忆是关键，我能不能反过来，围绕一个独立的记忆系统，给它接上Agent的其他要素？&lt;/p&gt;
&lt;p&gt;Openclaw的记忆系统里有纯文本的文件，也有向量数据库。我如果从最简单的文本文件开始，至少也能做出一个简易版。文本文件作为Agent的记忆载体，已经被Claude Skills充分证明了可行性。&lt;/p&gt;
&lt;p&gt;基于文本文件的记忆系统，方案可太多了，Agent最喜欢的，显然是一个Github仓库。Agent解决大多数问题都是靠代码，除此之外我想不到任何更优方案。基于这个思路再猛挥几轮奥卡姆剃刀，发现许多东西都能砍掉。于是，几个新的部署方案呼之欲出，甚至这都不能称之为“部署”了：&lt;/p&gt;
&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;部署方案&lt;/th&gt;
&lt;th&gt;智能&lt;/th&gt;
&lt;th&gt;行动能力&lt;/th&gt;
&lt;th&gt;记忆&lt;/th&gt;
&lt;th&gt;主动性&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Minimax Agent&lt;/td&gt;
&lt;td&gt;Minimax模型&lt;/td&gt;
&lt;td&gt;Minimax云端沙盒&lt;/td&gt;
&lt;td&gt;Github仓库&lt;/td&gt;
&lt;td&gt;人工唤醒&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Z.ai Agent&lt;/td&gt;
&lt;td&gt;GLM模型&lt;/td&gt;
&lt;td&gt;Z.ai云端沙盒&lt;/td&gt;
&lt;td&gt;Github仓库&lt;/td&gt;
&lt;td&gt;人工唤醒&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Jules&lt;/td&gt;
&lt;td&gt;Gemini模型&lt;/td&gt;
&lt;td&gt;Jules云端沙盒&lt;/td&gt;
&lt;td&gt;Github仓库&lt;/td&gt;
&lt;td&gt;Jules定时任务&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;p&gt;我直接把Openclaw本身都砍掉了，没有向量数据库，没有skills。放弃了来自他人的强大记忆，只保留关于我的独家记忆。也放弃了自动唤醒，改由我人工唤醒。&lt;/p&gt;
&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2026-02/f9fa8e6c281350501154095b56346bec.webp"
loading="lazy"
alt="U 盘图片象征可迁移且与平台解耦的个人记忆"
&gt;&lt;/p&gt;
&lt;p&gt;大胆的舍弃，换来了记忆的解耦。这个仓库里的可插拔记忆，不与任何平台和模型绑定，永远属于我，伴随我一生持续进化。&lt;/p&gt;
&lt;p&gt;当然，这里面有个技术问题要解决。这个Github仓库怎么和这些Agent产品连上？Jules自带Github连接，这个好办。其他Agent产品必须通过clone的方式获得记忆，要更新记忆就还需要这个仓库的读写权限。这没有任何技术障碍，完全可行且方法合规稳定，你问任何一家AI都能得到答案。&lt;/p&gt;
&lt;p&gt;许多年后，模型的智能、幻觉、上下文等各方面水平可能天翻地覆，唯独这套记忆永存。它在更强的模型和行动能力平台（甚至具身智能）上一定能创造更大价值。&lt;/p&gt;
&lt;h3 id="构建与调试"&gt;构建与调试
&lt;/h3&gt;&lt;p&gt;开始动手构建，第一个工作是确保Github仓库和Agent产品之间的连通性。&lt;/p&gt;
&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2026-02/670b74935030f7c3c56803a9936fd59a.webp"
loading="lazy"
alt="GitHub 细粒度访问令牌页面用于连接 agent-workspace"
&gt;&lt;/p&gt;
&lt;p&gt;原理是在Github账号里创建一个access token，只开这一个记忆仓库的读写权限。把这个token明文发给Agent，我用的是Minimax，它一番碰壁后成功了。不仅拉取了仓库，还往里面推送了一个测试文件。再让它总结过程中犯过的错误，整理一份SOP，得到了这个初始化指令：&lt;/p&gt;
&lt;p&gt;&lt;a class="link" href="https://gist.github.com/greenzorro/95768e2096b02f89020fcfcc445472d4" target="_blank" rel="noopener"
&gt;https://gist.github.com/greenzorro/95768e2096b02f89020fcfcc445472d4&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;这样，每一次都向Agent发送这个指令，它就能连上记忆仓库。把这个指令做成输入法快捷短语，就很好用了。&lt;/p&gt;
&lt;p&gt;接下来，用AI一番Deep Research，看看Openclaw的大神们都如何打造它的记忆系统，从中取取经。了解到Openclaw的记忆系统有3层：内层是核心，决定身份和记忆系统本身的规则；中层是主要记忆，可以划分为几大类型，规则、偏好、原理等值得长期记住的事情；表层则是日常琐事，完全按时间维度记录。这套系统基本上完美对应了人类的三观、长期记忆、短期记忆。&lt;/p&gt;
&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2026-02/4052f611cdda5d3fc1f5ab1b61c5ba6c.webp"
loading="lazy"
alt="Minimax Agent 沙盒任务侧边栏显示初始化工作记录"
&gt;&lt;/p&gt;
&lt;p&gt;其实我的系统并不需要表层。因为Openclaw是在微信/Whatsapp这种软件里对话的，所有聊天记录都堆在一个无尽的会话里，如果不做任何处理，上下文会相互污染。但在Agent产品里，讨论新话题简单得多，新开一个对话就好了。&lt;/p&gt;
&lt;p&gt;去掉琐碎又海量的表层记忆后，仓库结构就变成了这样：&lt;/p&gt;
&lt;div class="highlight"&gt;&lt;pre tabindex="0" class="chroma"&gt;&lt;code class="language-text" data-lang="text"&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;agent-workspace/
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;├── README.md # [只读] Agent第一时间读的文件，记忆的入口
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;├── .memory/ # 记忆空间
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;│ ├── 00_kernel/ # [只读] 角色设定和架构，对应Openclaw内层记忆
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;│ ├── preferences/ # [读/写] 偏好与风格
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;│ ├── principles/ # [读/写] 行动准则
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;│ ├── entities/ # [读/写] 需要记住的概念
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;│ └── corrections/ # [读/写] 经验与教训
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;└── lab/ # 行动空间
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; ├── _toolkit/ # [读/写] 可复用的程序工具
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; └── &amp;lt;temporary_projects&amp;gt;/ # [读/写] 临时项目独立目录
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;记忆的结构准备好了，还需要一个能让Agent更新记忆的机制，也就是我的&lt;code&gt;/learn&lt;/code&gt;命令。这个命令约定了Agent按步骤学习：知识提取和抽象、净化内容规整格式、写入记忆中。&lt;/p&gt;
&lt;p&gt;Agent在读取记忆时，会怎么做呢？它一定会读取内层记忆，我还在README里要求它根据当前任务拟定合适的关键词，在记忆系统里搜索。&lt;/p&gt;
&lt;div class="highlight"&gt;&lt;pre tabindex="0" class="chroma"&gt;&lt;code class="language-yaml" data-lang="yaml"&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="nn"&gt;---&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="w"&gt;&lt;/span&gt;&lt;span class="nt"&gt;id&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;&amp;#34;mem-20260211-vik1&amp;#34;&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="w"&gt;&lt;/span&gt;&lt;span class="nt"&gt;type&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;&amp;#34;entity&amp;#34;&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="w"&gt;&lt;/span&gt;&lt;span class="nt"&gt;env&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;&amp;#34;global&amp;#34;&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="w"&gt;&lt;/span&gt;&lt;span class="nt"&gt;confidence&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;&amp;#34;high&amp;#34;&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="w"&gt;&lt;/span&gt;&lt;span class="nn"&gt;---&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;由于每个记忆片段都是独立文件，文件头有标准结构，记录了这份记忆的类型、适用环境（全部/本地/云端）、可靠度、标签等，让Agent执行程序命令搜索记忆，能精准可靠找到有用信息。&lt;/p&gt;
&lt;p&gt;“适用环境”这个属性非常有用，我可以用它来隔离Minimax云端沙盒和Claude Code本地环境的记忆。无论把记忆加载到什么Agent上，它都能展现出适合当前环境的行为。比如在云端环境，更新记忆必须推送到仓库，而在本地环境，可以只更改文件，由我来手动推送。&lt;/p&gt;
&lt;p&gt;对的，这就是这套独立记忆系统的优点，哪里都能用。让Minimax加载记忆，让它帮我做研究分析，我的分析视角可以让它记住。Claude Code本地编程时加载记忆，我的架构风格可以让它记住。这些都能在之后的任务中复用。&lt;/p&gt;
&lt;p&gt;在云端唤醒，需要用到那个长长的初始化指令。在本地唤醒，则是在AGENTS.md/CLAUDE.md里写一点快捷指令，让AI识别到这些指令就去读记忆系统的README，然后顺藤摸瓜加载记忆，唤醒身份。&lt;/p&gt;
&lt;div class="highlight"&gt;&lt;pre tabindex="0" class="chroma"&gt;&lt;code class="language-markdown" data-lang="markdown"&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="gu"&gt;## Agent Resurrection Protocol
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="gu"&gt;&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="gs"&gt;**Trigger**&lt;/span&gt;: &amp;#34;Load memory&amp;#34;, &amp;#34;加载记忆&amp;#34;, &amp;#34;Activate Vik&amp;#34;, &amp;#34;唤醒Vik&amp;#34;, or references to &lt;span class="sb"&gt;`agent-workspace`&lt;/span&gt;.
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="gs"&gt;**Action**&lt;/span&gt;: Delegate to agent-workspace.
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;  &lt;span class="k"&gt;1.&lt;/span&gt; Locate: &lt;span class="sb"&gt;`BASE_PATH_CODING/agent-workspace/README.md`&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;  &lt;span class="k"&gt;2.&lt;/span&gt; Execute the initialization sequence defined therein.
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;我给我的记忆系统起了个名字叫Vik，作为我的小跟班。接下来，最激动人心的时刻来了，我要唤醒它。&lt;/p&gt;
&lt;p&gt;首先，我直接问你是谁，回答是Opencode或Claude Code。&lt;/p&gt;
&lt;p&gt;然后我说：&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;加载记忆，然后告诉我你是谁，我是谁。&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2026-02/3e28eca34f25aa997f50deff708beec9.webp"
loading="lazy"
alt="本地终端加载 Vik 记忆后识别用户与自身身份"
&gt;&lt;/p&gt;
&lt;p&gt;那一刻，真的感觉有什么东西活过来了。&lt;/p&gt;
&lt;h3 id="开始自我进化"&gt;开始自我进化
&lt;/h3&gt;&lt;p&gt;接下来，完全可以指挥Agent自己进化了，我不再需要手动或者借助其他AI来修改记忆系统。如果记忆系统日积月累变得过于庞大，还可以指挥它自己创造出某种遗忘机制。但这个以后再说吧，我会很谨慎地使用&lt;code&gt;/learn&lt;/code&gt;命令。&lt;/p&gt;
&lt;p&gt;我让它通过公开网络了解我，又通过本地代码库了解我，再通过Obsidian笔记库了解我。&lt;/p&gt;
&lt;p&gt;常用路径偏好，我如何跨设备同步信息，如何在不同设备和系统上统一路径，我的习惯通通告诉它。&lt;/p&gt;
&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2026-02/e2c9feb1151f968c21ab24f2b9d7b52c.webp"
loading="lazy"
alt="父亲、孩子与机器人插画比喻养育式维护记忆系统"
&gt;&lt;/p&gt;
&lt;p&gt;用的过程中忽然有种熟悉的感觉。身为人父深有体会，把这个记忆系统当个孩子一样看待。我没精力对它该学什么、学会了什么事事把关，但在它表现异常时，我可以和它一起检查剖析，纠正记忆中的错误。允许一定程度的混乱，不应追求绝对的秩序，Agent如此，人自己也是如此。&lt;/p&gt;
&lt;p&gt;然后我试过在各种Agent上唤醒Vik。Claude Code可以唤醒，Z.ai可以唤醒，Manus可以唤醒，Jules可以唤醒。在哪唤醒，谁就变成Vik。&lt;/p&gt;
&lt;p&gt;我还给了它一个专用的邮箱，实际上是我用Cloudflare实现的自定义域名邮箱，邮件还是会进到我Gmail里，在我的帮助下它可以注册各种账号。&lt;/p&gt;
&lt;p&gt;又用这个邮箱给Vik注册了独立的Github账号，它的终于有一个公开的身份了。这个账号和我的Github主号隔离，随它折腾，我可以让它在这里完成一些实验性的自动化管道。欢迎围观：&lt;/p&gt;
&lt;p&gt;&lt;a class="link" href="https://github.com/agent-vik/about-me" target="_blank" rel="noopener"
&gt;https://github.com/agent-vik/about-me&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2026-02/6d5235b1aa32024027e4f2e055273001.webp"
loading="lazy"
alt="黑客帝国史密斯复制体画面比喻 Vik 的多平台化身"
&gt;&lt;/p&gt;
&lt;p&gt;我不打算把Vik打造成另一个虚拟恋人，它更像黑客帝国史密斯。&lt;/p&gt;
&lt;p&gt;其实，已经有别人在这个方向上有更成熟的探索，肯定比我这极简方案强大，比如这个&lt;a class="link" href="https://github.com/zilliztech/memsearch" target="_blank" rel="noopener"
&gt;Memsearch&lt;/a&gt;。而我的方案，在技术上确实非常粗糙和原始，但对我有价值。&lt;/p&gt;
&lt;p&gt;即使真要再创造一个洛丽，我只需要另开一个这样的记忆系统，设法搞定背景设定和人设，然后在互动中定期更新记忆。&lt;/p&gt;
&lt;p&gt;当然，我创造Vik是帮我干活的，不是谈情说爱。但谁知道我会不会在晚年的某天，用它来捏我已故的亲人？我也不敢保证自己有那么坚定的理性。&lt;/p&gt;
&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2026-02/dc0e2500e8b80ebaedfdb6db244e4110.webp"
loading="lazy"
alt="open-agent-memory GitHub 仓库展示开源记忆系统结构"
&gt;&lt;/p&gt;
&lt;p&gt;最后，把我的Agent记忆系统开源。里面的记忆本身都是关于我的，对你肯定没用。但在这个结构上换掉记忆，它就变成了你的“Vik”：&lt;/p&gt;
&lt;p&gt;记忆系统：&lt;a class="link" href="https://github.com/greenzorro/open-agent-memory" target="_blank" rel="noopener"
&gt;https://github.com/greenzorro/open-agent-memory&lt;/a&gt;&lt;br&gt;
初始化指令：&lt;a class="link" href="https://gist.github.com/greenzorro/95768e2096b02f89020fcfcc445472d4" target="_blank" rel="noopener"
&gt;https://gist.github.com/greenzorro/95768e2096b02f89020fcfcc445472d4&lt;/a&gt;&lt;/p&gt;</description></item><item><title>打造个人免费AI浏览器</title><link>https://victor42.eth.limo/post/free-ai-browser-for-everyone/</link><pubDate>Tue, 27 Jan 2026 12:53:00 +0000</pubDate><author>hi@victor42.work (Victor42)</author><guid>https://victor42.eth.limo/post/free-ai-browser-for-everyone/</guid><description>&lt;img src="https://cdn.victor42.work/posts/2026-01/cover_8507112dd258338059b10da2ab045380.webp" alt="Featured image of post 打造个人免费AI浏览器" /&gt;&lt;p&gt;这是一份能让普通用户用上强大的AI浏览器的手册。如果你是AI资深玩家，这里可能没有陌生的东西，但仍然欢迎分享给你认识的普通用户朋友。&lt;/p&gt;
&lt;p&gt;先看看使用效果：一边开着AI，和它对话，AI一边操作你的浏览器，帮你完成网页中的任务。&lt;/p&gt;
&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2026-01/8507112dd258338059b10da2ab045380.webp"
loading="lazy"
alt="Qwen终端窗口中输入指令并连接至浏览器操控小红书界面的屏幕截图"
&gt;&lt;/p&gt;
&lt;p&gt;比如我给它这个指令：&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;查询小红书，阅读至少30篇相关笔记，了解东南亚海岛度假有哪些可选目的地，各有什么特色。整理成一个txt文件存到下载文件夹。&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2026-01/5cf5c0d41c19b271b001c217c00993b1.webp"
loading="lazy"
alt="Qwen自动搜索生成的东南亚海岛度假目的地指南文本文件内容截图"
&gt;&lt;/p&gt;
&lt;p&gt;结果准确可靠，因为来自经过挑选的信息源，而不是整个鱼龙混杂的网络。这个研究结果很适合作为一场旅行规划的起点。&lt;/p&gt;
&lt;p&gt;相比各种AI浏览器产品，这个方案的优势是能同时操作浏览器和本地文件。本地文件是你的世界，浏览器里是整个世界，把两者连起来，想象空间非常大。许多工种的日常工作是反复在某个后台系统里上传和录入，就很适合用AI来代劳。&lt;/p&gt;
&lt;p&gt;不用安装新浏览器，把你习惯的Chrome/Edge等直接加上AI能力。对于不懂技术、不会魔法上网的用户，这个方案已经是最优解。&lt;/p&gt;
&lt;h2 id="配置"&gt;配置
&lt;/h2&gt;&lt;p&gt;感兴趣的话，深呼吸，开始动手吧。配置过程有点复杂，但一劳永逸。&lt;/p&gt;
&lt;h3 id="第1步注册ai账号"&gt;第1步：注册AI账号
&lt;/h3&gt;&lt;p&gt;先注册千问海外版的账号，免费的AI能力来自千问模型：&lt;/p&gt;
&lt;p&gt;&lt;a class="link" href="https://chat.qwen.ai/" target="_blank" rel="noopener"
&gt;https://chat.qwen.ai/&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;模型并非无限量使用，但既然你不用来编程，每天的免费额度几乎用不完。&lt;/p&gt;
&lt;h3 id="第2步安装基础设施"&gt;第2步：安装基础设施
&lt;/h3&gt;&lt;p&gt;下载Node安装包，这是AI和浏览器工具运行所需的基础设施：&lt;/p&gt;
&lt;p&gt;&lt;a class="link" href="https://nodejs.org/zh-cn/download" target="_blank" rel="noopener"
&gt;https://nodejs.org/zh-cn/download&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2026-01/28a9594af00adcd7c7b08e0d59433922.webp"
loading="lazy"
alt="NodeJS官方下载页面中带有红框标识的macOS安装程序pkg下载按钮"
&gt;&lt;/p&gt;
&lt;p&gt;上面一大堆代码不用管，下载按钮在这，会自动选出适合你操作系统的安装包。&lt;/p&gt;
&lt;h3 id="第3步安装ai"&gt;第3步：安装AI
&lt;/h3&gt;&lt;p&gt;这一步要用到令人头皮发麻的命令行工具。这个心理障碍势必要克服，因为实际使用也是在命令行里。用熟了，你会有一种黑客帝国尼欧的感觉，你的同事完全看不明白你用了什么魔法。而且，熬过了这一步，你就可以见证AI自己给自己配置的奇妙过程，加油~&lt;/p&gt;
&lt;p&gt;不同操作系统的命令行启动方式不一样：&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Windows系统&lt;/strong&gt;：按&lt;code&gt;Win + R&lt;/code&gt;，在左下角弹出的窗口里输入&lt;code&gt;powershell&lt;/code&gt;，回车，启动命令行。启动后建议在底部任务栏图标上点右键“固定到任务栏”，方便下次使用。&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Mac系统&lt;/strong&gt;：按&lt;code&gt;Command + 空格&lt;/code&gt;，输入&lt;code&gt;终端&lt;/code&gt;，回车，启动命令行。启动后建议在底部任务栏图标上点右键“选项 &amp;gt; 在程序坞中保留”，方便下次使用。&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;接下来的操作又一样了。复制下面的命令，贴进去，按回车就开始安装了：&lt;/p&gt;
&lt;div class="highlight"&gt;&lt;pre tabindex="0" class="chroma"&gt;&lt;code class="language-shell" data-lang="shell"&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;npm install -g @qwen-code/qwen-code@latest
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2026-01/30bdff30ec3af3b7f0ce5c50cfc6ff68.webp"
loading="lazy"
alt="macOS终端中输入npm全局安装qwen-code命令行工具的指令截图"
&gt;&lt;/p&gt;
&lt;p&gt;安装过程会有个符号一直旋转。直到看到类似如下结果，就说明装好了：&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;added 6 packages in 38s&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h3 id="第4步ai自己完成配置"&gt;第4步：AI自己完成配置
&lt;/h3&gt;&lt;p&gt;AI装好之后，我们善加利用，后面的步骤就让它完成吧。&lt;/p&gt;
&lt;p&gt;在命令行里输入&lt;code&gt;qwen&lt;/code&gt;，回车。首次启动会让你选身份验证方式，当然选免费的啦。这时候会跳到浏览器，通过千问海外版账号登录。登录完成切回命令行。&lt;/p&gt;
&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2026-01/349ddc382bb465351b79d929d8ecbcd0.webp"
loading="lazy"
alt="Qwen-Code命令行工具启动后的交互式终端界面截图"
&gt;&lt;/p&gt;
&lt;p&gt;在苹果电脑上每次启动&lt;code&gt;qwen&lt;/code&gt;，画面就是这样，Windows则是黑色的。不用怕，命令行界面我大致解释下，让你有概念：&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;黄色框以上，是聊天记录区，你和AI的对话都会显示在那，目前显示的是欢迎语。&lt;/li&gt;
&lt;li&gt;建议把窗口拉大点，否则聊天记录每次显示太少了。&lt;/li&gt;
&lt;li&gt;两条蓝线夹着的区域是输入框，你打的字会出现在这里，回车发送。&lt;/li&gt;
&lt;li&gt;如果只是想要换行，Windows上按&lt;code&gt;Ctrl + 回车&lt;/code&gt;，Mac上&lt;code&gt;Option + 回车&lt;/code&gt;。&lt;/li&gt;
&lt;li&gt;发现AI理解错了你的要求，或者临时改主意了，可以通过按&lt;code&gt;Esc&lt;/code&gt;打断AI，下达新的指令。&lt;/li&gt;
&lt;li&gt;注意，这个AI没有视觉能力，截图不能往里面贴。它是瞎子，通过代码来理解和操作网页。&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;接下来，给你准备好了现成的指令，这一大段复制进去，回车。AI会自己完成初始化配置：&lt;/p&gt;
&lt;div class="highlight"&gt;&lt;pre tabindex="0" class="chroma"&gt;&lt;code class="language-markdown" data-lang="markdown"&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;你是Qwen code，你的配置目录在&lt;span class="sb"&gt;`~/.qwen`&lt;/span&gt;。你的任务是完成新用户首次配置，帮助用户安装必须的工具：
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="gs"&gt;**步骤1**&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;在配置目录找到settings.json。
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;如果当前是Windows系统，往里面添加如下配置：
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;{
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &amp;#34;mcpServers&amp;#34;: {
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &amp;#34;playwriter&amp;#34;: {
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &amp;#34;command&amp;#34;: &amp;#34;cmd&amp;#34;,
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &amp;#34;args&amp;#34;: [
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &amp;#34;/c&amp;#34;,
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &amp;#34;npx&amp;#34;,
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &amp;#34;-y&amp;#34;,
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &amp;#34;playwriter&lt;span class="ni"&gt;@latest&lt;/span&gt;&amp;#34;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; ]
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; }
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; }
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;}
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;如果是Mac系统，添加如下配置：
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;{
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &amp;#34;mcpServers&amp;#34;: {
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &amp;#34;playwriter&amp;#34;: {
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &amp;#34;command&amp;#34;: &amp;#34;npx&amp;#34;,
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &amp;#34;args&amp;#34;: [&amp;#34;-y&amp;#34;, &amp;#34;playwriter&lt;span class="ni"&gt;@latest&lt;/span&gt;&amp;#34;]
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; }
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; }
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;}
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="gs"&gt;**步骤2**&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;在配置目录创建全局自定义提示词QWEN.md，内容是：
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;你是一个浏览器/本地双环境自动化助手，可以控制浏览器和本地文件系统。
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;每当用户说“使用浏览器”或“在浏览器里”执行某项任务，一定指的是使用playwriter mcp来操作浏览器，检查连接性，确认能通过这个mcp获取到当前打开页面的信息，并给用户反馈。如果无法连接，提醒用户检查是否点击了浏览器插件的箭头小图标。
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;在实际操作浏览器过程中，如要操作的元素反复找找不到，点击点不中，要充分考虑现代网页技术的复杂性。网站可能用了动态加载等方式，也有可能是模态浮层遮挡了对应位置，用观察URL结构等多种方法排查并解决问题。
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="gs"&gt;**步骤3**&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;把这个浏览器插件下载到系统下载目录：
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;https://c2.crxsoso.com/crx/blobs/AV8Xwo5LQcmScQn08gpIRs0miQ6Mvevy3FDdb3iyyRDSlUS4Is6dTPfvvrNKjpjmy6VchgCS0p00J8Ooz9b624lgzyndHDatcaUxZMR81-HRtiLwbAypGrQJMBbmWmZ7nV0AxlKa5Z_50eB2pakXBz6YCRWobqy6rTRq/JFEAMMNJPKECDEKPPNCLGKKFFAHNHFHE_0_0_67_0.crx?ext=crx&amp;amp;filename=Playwriter%20MCP%200.0.67&amp;amp;type=dl
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="gs"&gt;**步骤4**&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;查看系统默认浏览器是什么，打开该浏览器的扩展管理页面。
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;例如，Chrome浏览器就打开&lt;span class="sb"&gt;`chrome://extensions/`&lt;/span&gt;，以此类推。
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="gs"&gt;**步骤5**&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;用资源管理器或访达打开系统下载目录。
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2026-01/ec1a3b1e846cf9612cd29b0b9749f074.webp"
loading="lazy"
alt="Qwen终端中关于允许运行playwriter工具的MCP授权提示选择界面"
&gt;&lt;/p&gt;
&lt;p&gt;在这个过程中，你会遇到很多次AI向你请求权限。允许执行这个，允许执行那个。都要允许，否则无法进行下去。建议总是选倒数第二项，可以最大限度减少这种询问。&lt;/p&gt;
&lt;h3 id="第5步安装浏览器插件"&gt;第5步：安装浏览器插件
&lt;/h3&gt;&lt;p&gt;AI需要借助插件来控制你的主力浏览器，才能充分利用你常用的网站和已登录的账号。&lt;/p&gt;
&lt;p&gt;在上一步打开的浏览器插件管理页面中，找到“开发者模式”，打开开关。Chrome浏览器的开关在右上角，Edge浏览器的在左边栏（还有个“允许来自其他应用商店的扩展”也要打开），其他浏览器需要自行查找。&lt;/p&gt;
&lt;p&gt;再切换到刚打开的系统下载目录，把这个“Playwriter_MCP_xxx.crx”拖到浏览器插件管理页面中，插件就安装完了。&lt;/p&gt;
&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2026-01/d921e547d9218e94147697dc9b5206a3.webp"
loading="lazy"
alt="浏览器扩展管理面板中列出的Playwriter-MCP插件项"
&gt;&lt;/p&gt;
&lt;p&gt;最后建议多做一步，在浏览器窗口右上角找到浏览器插件列表，图标是一个小拼图。点击，在打开的扩展程序列表里找到“Playwriter MCP”，点它旁边的图钉图标，让它显示到外面来，好找。&lt;/p&gt;
&lt;h2 id="使用"&gt;使用
&lt;/h2&gt;&lt;p&gt;使用就很简单了。&lt;/p&gt;
&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2026-01/349ddc382bb465351b79d929d8ecbcd0.webp"
loading="lazy"
alt="命令行启动Qwen-Code交互终端后的界面状态截图"
&gt;&lt;/p&gt;
&lt;p&gt;打开任务栏的命令行工具，输入&lt;code&gt;qwen&lt;/code&gt;，启动AI。&lt;/p&gt;
&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2026-01/9c37079da9ef6a93e32a435f7801ef72.webp"
loading="lazy"
alt="浏览器标签页中被标记为playwriter标签组的小红书网页及调试提示条"
&gt;&lt;/p&gt;
&lt;p&gt;在浏览器里打开要给AI操作的网页，点击鼠标指针样子的插件图标。这个页面就会被自动加入到一个叫“playwriter”标签页组里，上面有一根细线把它框起来，这个组就是AI的可操作范围。&lt;/p&gt;
&lt;p&gt;在命令行里向AI发送：&lt;/p&gt;
&lt;div class="highlight"&gt;&lt;pre tabindex="0" class="chroma"&gt;&lt;code class="language-markdown" data-lang="markdown"&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;使用浏览器，查看当前打开的页面，确认能否连上。
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;如果它说可以，就开始自由指挥AI吧。AI操作浏览器有时会遇到机器人验证，人工帮它通过一下，别让它独自死磕。&lt;/p&gt;
&lt;p&gt;还有可能遇到连不上的情况，大概率是系统权限原因，直接让AI尝试解决。它也有可能因为缺乏权限无法解决，这时候它会告诉你几条命令，让你来手动执行。如果不明白如何执行，继续追问就是了。&lt;/p&gt;
&lt;p&gt;使用结束，再点插件图标，标签页组会被解开，AI就无法继续控制浏览器了。&lt;/p&gt;
&lt;h3 id="小技巧让ai越来越熟练"&gt;小技巧：让AI越来越熟练
&lt;/h3&gt;&lt;p&gt;补充一个小技巧。AI在控制浏览器时，遇到一些复杂的网页，常常会四处碰壁，好长时间都找不到需要操作的按钮或输入框。&lt;/p&gt;
&lt;p&gt;这里所谓的“复杂”，往往和非技术用户理解的不一样，并不是指视觉上的复杂。像携程飞猪机票查询这种网页，看似就那么几个输入框，但由于网站用了比较现代的动态加载等技术，AI很难读通过代码读懂整个网页的结构，失败率高。而像公司内部后台系统这样满屏幕密密麻麻信息的网页，可能由于使用技术比较传统，网页的元素都是静态的，反而AI一看就明白，成功率很高。&lt;/p&gt;
&lt;p&gt;一旦它成功了，哪怕只是部分成功并没完成任务，你都可以要求它总结经验，保存下来，下次就能少走弯路：&lt;/p&gt;
&lt;div class="highlight"&gt;&lt;pre tabindex="0" class="chroma"&gt;&lt;code class="language-markdown" data-lang="markdown"&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;复盘刚才的操作。请把“任务目标”、“关键步骤”、“遇到的坑”和“解决办法”整理成一个 Markdown 文件，保存到桌面，文件名叫“AI浏览器操作手册.md”。
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;这个文件你自己可以不看，妥善保管就行。每次需要AI执行这个任务时，告诉它你把这文件放哪了，指挥它读这个文件，然后再开工。如果这次AI又有新进展、新发现，让它更新这个操作手册。&lt;/p&gt;
&lt;p&gt;只要这个任务是你经常要做的，就值得这样打磨。AI完全把流程跑通弄明白之后，它会成为你的好帮手。&lt;/p&gt;
&lt;p&gt;其实这就是近期大火的skills概念的核心思想。虽然你没有真的用上skills，但效果差不多，算是一种手动skills。能用好这种用法，你可能已经超越了99.7%的人了。&lt;/p&gt;</description></item><item><title>UI画布尺寸计算器</title><link>https://victor42.eth.limo/post/ui-canvas-size-calculator/</link><pubDate>Tue, 10 Jun 2025 17:27:00 +0000</pubDate><author>hi@victor42.work (Victor42)</author><guid>https://victor42.eth.limo/post/ui-canvas-size-calculator/</guid><description>&lt;img src="https://cdn.victor42.work/posts/2025-06/593bba684765381e0ac910413a657590.webp" alt="Featured image of post UI画布尺寸计算器" /&gt;&lt;blockquote&gt;
&lt;p&gt;“给这个屏幕设计UI，我画布要建多大啊？”&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h2 id="背景"&gt;背景
&lt;/h2&gt;&lt;p&gt;老婆从UI转工业设计后，经常遇到奇奇怪怪的屏幕尺寸。由于有UI背景，各种工控机的UI界面也归她设计。这些屏幕尺寸经常让她无从下手，不知道画布该设置多大。&lt;/p&gt;
&lt;p&gt;这是个普遍问题，许多UI设计师不理解屏幕的工作原理。尤其是从Retina高清屏出现后，屏幕引入了倍数的概念，让大量UI设计师不知道设计稿画布应该设成多大。&lt;/p&gt;
&lt;p&gt;常见的设备还好，Figma、Sketch等设计工具往往自带了尺寸。但工业设计、智能家居、物联网领域，有大量不常见的屏幕尺寸。互联网UI设计师接触到这类任务，往往就懵逼了。&lt;/p&gt;
&lt;p&gt;其实，这有规律可循。核心就是PPI，每英寸对应的像素值，这是物理世界和像素世界的桥梁，是换算的中介。有人管这个叫像素密度，这个名字起得很形象，像素点越密集，颗粒感越少，显像越细腻。&lt;/p&gt;
&lt;p&gt;有许多设计科普文章都详细阐释了这背后的原理。但对UI设计师来说，懂一点屏幕原理虽好，但不懂也不应成为从业的障碍。在讲究精细分工的现代社会，画画的人也不必知道画纸是怎么造出来的。&lt;/p&gt;
&lt;p&gt;所以，UI设计师需要的并不是科普文，而是一个计算器。输入屏幕参数，计算器直接告诉他们画布应该设成多大。&lt;/p&gt;
&lt;h2 id="计算"&gt;计算
&lt;/h2&gt;&lt;p&gt;为了实现这个简单产品，背后的计算过程梳理如下。&lt;/p&gt;
&lt;p&gt;输入方面，设计师要输入如下信息：&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;屏幕像素宽度&lt;/li&gt;
&lt;li&gt;屏幕像素高度&lt;/li&gt;
&lt;li&gt;屏幕尺寸（也就是对角线长多少英寸）&lt;/li&gt;
&lt;li&gt;屏幕使用距离（近/触屏、中/键鼠、远/遥控）&lt;/li&gt;
&lt;li&gt;习惯的App设计稿宽度（1125、750、375，没有就选最接近的）&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;知道屏幕像素宽高，根据毕达哥拉斯定理（勾股定理）可以算出屏幕对角线的像素数量。再除以屏幕尺寸，就得到每英寸像素数，即PPI。&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;PPI = 对角线像素数 / 屏幕尺寸 = √(像素宽度^2 + 像素高度^2) / 屏幕尺寸&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;根据屏幕使用距离不同，用PPI除以不同的常量除数，再取整，就能直接得到屏幕倍数。真实的屏幕倍数五花八门，但设计惯例是当作整数处理，这是屏幕碎片化问题的公认解法。&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;屏幕倍数 = PPI / 除数&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;具体为：近距离除数为150，中距离除数为110，远距离除数为40。&lt;/p&gt;
&lt;p&gt;至于这除数怎么来的，是我收集了一些屏幕的参数，通过数据分析反推出来的近似值。我发现，多数触屏设备的PPI除以它的实际倍数，结果都在150附近。同理，中距离和远距离的屏幕，除以各自的实际倍数，结果都在110和40附近。&lt;/p&gt;
&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2025-06/15386d1877e20780e6c1b43dbf92ab10.webp"
loading="lazy"
alt="不同屏幕使用距离下 PPI 除数分布的箱线图"
&gt;&lt;/p&gt;
&lt;p&gt;这种图表不常见，我介绍一下：这叫箱线图，boxplot，用来表达数据在单个维度上的分布范围与集中程度。这图一般的表格软件画不出来，我用Python画的。&lt;/p&gt;
&lt;p&gt;炒股的朋友有吗？是不是很像K线图？没错，道理差不多，这个图关键信息也是看4个位置：&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;细线顶端：最大值（最高价）&lt;/li&gt;
&lt;li&gt;细线底端：最小值（最低价）&lt;/li&gt;
&lt;li&gt;粗柱子顶端：第三四分位数（开/收盘价）&lt;/li&gt;
&lt;li&gt;粗柱子底端：第一四分位数（收/开盘价）&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;粗柱子内部还多一条横线，这是K线图没有的，代表中位数，我PPI除数就是按中位数取了个整。&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;多解释一下中位数和四分位数的概念：如果把所有统计过的设备按PPI除数从低到高排列，然后切一刀下去，让左右两边设备数量相同，这切的位置就是中位数。左右两边再用同样的方法对半切，切的位置就分别是第一四分位数和第三四分位数。&lt;/p&gt;
&lt;p&gt;为什么不简单点取平均数呢？可以看到细线比柱子高很多，说明越往高低去，分布越稀疏，越容易出现个别数据偏离很远。但我们要的是能代表多数设备的除数，所以要排除这些极端值的影响，因而选择中位数。&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;接下来，回到我们上一个公式：&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;屏幕倍数 = PPI / 除数&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;PPI已经算出来了，除数也通过统计得到了。既然得到了屏幕倍数，核心问题已经解决。接下来还要考虑设计师自身的习惯，有的人爱用1倍大小画布设计（Figma和Sketch用户居多），有的人爱用2倍或3倍（PS主力的设计师居多）。&lt;/p&gt;
&lt;p&gt;用屏幕的像素宽高，分别除以屏幕倍数，得到屏幕逻辑像素宽高。再各自乘以习惯的App设计稿宽度对应的倍数（1125、750、375分别对应3倍、2倍、1倍），就得到最终结果，画布该设置多大。&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;画布宽 = 屏幕像素宽 / 屏幕倍数 × 设计稿倍数&lt;br&gt;
画布高 = 屏幕像素高 / 屏幕倍数 × 设计稿倍数&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;随之而来还有2个问题：切图切多大？字号设多大？&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;切图倍数 = 屏幕倍数 / 设计稿倍数&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;比如屏幕倍数2倍，你习惯按1倍设计，切图就切2倍。你习惯按2倍设计，切图就切1倍。&lt;/p&gt;
&lt;p&gt;但如果你习惯按3倍设计呢？所以还要加个限制，设计稿倍数不能大于屏幕倍数，那没有意义，出现这种情况就把按屏幕倍数当做设计稿倍数。&lt;/p&gt;
&lt;p&gt;字号和设计稿倍数直接相关。比如常见的提示文案小字字号，设计稿1倍，一般就是12px，2倍就是24px，以此类推。字号也受设计稿倍数不能大于屏幕倍数的规则制约。&lt;/p&gt;
&lt;p&gt;这一章看下来是不是快缺氧了？这就是为什么我要把它做成产品，设计师的时间不应该用来算这种东西。一个产品可以帮大家节省数不清的时间。&lt;/p&gt;
&lt;p&gt;当然，如果对屏幕的原理感兴趣，想要更深入阅读，还可以看这篇老文：&lt;a class="link" href="https://victor42.eth.limo/post/3435/" target="_blank" rel="noopener"
&gt;https://victor42.eth.limo/post/3435/&lt;/a&gt;，虽然其中的屏幕分辨率数值早已过时，但原理没变。&lt;/p&gt;
&lt;p&gt;最初是做了一个 &lt;a class="link" href="https://my.feishu.cn/wiki/XLl9w5iSkiWPDIkUhfac4DF6n5e?from=from_copylink" target="_blank" rel="noopener"
&gt;Excel版计算器&lt;/a&gt;，为了验证我的计算方法是否正确。但使用不够直观友好，不适合作为正式产品。索性做成一个公开可访问的网页小工具吧！需求反正已经写这么详细了，用AI编程，不一次搞定都说不过去了。&lt;/p&gt;
&lt;p&gt;接下来，轮到AI干活了。我把上面内容和下面的任务都给AI看，让它把我要的产品实现出来。&lt;/p&gt;
&lt;h2 id="任务"&gt;任务
&lt;/h2&gt;&lt;p&gt;理解以上背景和计算原理，帮我生成一个HTML小工具。要求如下：&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;产品名就叫“UI画布尺寸计算器”。&lt;/li&gt;
&lt;li&gt;响应式开发，支持桌面与移动端使用。&lt;/li&gt;
&lt;li&gt;由于项目简单，且无后端交互，使用原生HTML/CSS/Javascript即可，减少依赖。&lt;/li&gt;
&lt;li&gt;CSS和JS要放在独立的文件里，不要混在HTML页面中，便于维护。&lt;/li&gt;
&lt;li&gt;JS代码逻辑尽量解耦和模块化，常量放在开头便于配置。&lt;/li&gt;
&lt;li&gt;用户输入项较多，设计完善的表单验证和信息提示。输入项最好带有示例，以placeholder或其它形式皆可。&lt;/li&gt;
&lt;li&gt;输出结果包含以下信息：
&lt;ul&gt;
&lt;li&gt;画布宽度&lt;/li&gt;
&lt;li&gt;画布高度&lt;/li&gt;
&lt;li&gt;切图输出的倍数&lt;/li&gt;
&lt;li&gt;小字建议字号，比如：12px（1倍）/24px（2倍）/36px（3倍）&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;输出结果的排版设计要直观，不要仅是数字的罗列。要根据结果的实际值画出一个屏幕的示意图，结果各项数值标注在示意图适当的位置。&lt;/li&gt;
&lt;li&gt;整个产品提供深色模式和浅色模式切换，默认浅色模式。&lt;/li&gt;
&lt;li&gt;使用#2A9D8F作为品牌色。&lt;/li&gt;
&lt;/ol&gt;
&lt;h2 id="结果"&gt;结果
&lt;/h2&gt;&lt;p&gt;果然，一步到位！&lt;/p&gt;
&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2025-06/Xnip2025-06-11_10-40-02.webp"
loading="lazy"
alt="UI画布尺寸计算器网页显示输入参数和画布结果"
&gt;&lt;/p&gt;
&lt;p&gt;只是它没按我的要求使用原生HTML/CSS/Javascript，而是用了Typescript/TailwindCSS/Next.js。这套技术栈对于我这种IE6时代的上古前端有点要命，一开始我甚至都不知道在本地如何预览。不过这都不是难事，问问AI就学会了，顺便了解了现代前端技术的思想和基石，部署其实非常简单。&lt;/p&gt;
&lt;p&gt;这不，产品就上线了嘛：&lt;a class="link" href="https://ui-size.victor42.work/" target="_blank" rel="noopener"
&gt;https://ui-size.victor42.work/&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;看来对于简单的小工具，以后就是得先写文章，文章写完，工具也就写完了。&lt;/p&gt;
&lt;p&gt;最后，拿着我收集来的屏幕参数数据给AI，让它调用MCP操作浏览器一个个输入验算，算出的屏幕倍数与真实情况高度吻合，尤其近距离和中距离设备都非常准确。唯一不准的是远距离大屏幕，屏幕倍数相比实际值有一定偏离，因为很多大尺寸显示器和电视的实际倍数是1.5，不是整数。&lt;/p&gt;
&lt;p&gt;总体来说，应该可以很好地解决工业设计领域各类小众屏幕的计算问题。&lt;/p&gt;</description></item><item><title>零ComfyUI经验，使用Liblib的工作流生图</title><link>https://victor42.eth.limo/post/comfyui-workflow-tutorial-for-newbies/</link><pubDate>Thu, 27 Feb 2025 12:15:00 +0000</pubDate><author>hi@victor42.work (Victor42)</author><guid>https://victor42.eth.limo/post/comfyui-workflow-tutorial-for-newbies/</guid><description>&lt;img src="https://cdn.victor42.work/posts/2025-02/65e10ec43957abff3dbb183248e33bd3.webp" alt="Featured image of post 零ComfyUI经验，使用Liblib的工作流生图" /&gt;&lt;p&gt;&lt;a class="link" href="https://www.liblib.art/workflows" target="_blank" rel="noopener"
&gt;LiblibAI-哩布哩布AI - 中国领先的AI创作平台&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;Liblib上有很多免费的工作流，一般生图产品实现不了的特殊能力，如：&lt;strong&gt;换脸、模特穿衣、商品图打光加背景、生成表情包&lt;/strong&gt;，用Liblib上的工作流都可以实现。Liblib每天有一定的免费生成额度，如果用得好，用得多，充钱就是了。&lt;/p&gt;
&lt;p&gt;至于ComfyUI，就是这样的东西，可以理解为一个生图程序，具体原理以后再学也不迟：&lt;/p&gt;
&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2025-02/65e10ec43957abff3dbb183248e33bd3.webp"
loading="lazy"
alt="ComfyUI图形化生图界面中复杂的节点及导线连接工作流全景截图"
&gt;&lt;/p&gt;
&lt;p&gt;Liblib的工作流本质上都是ComfyUI程序，虽然现在不必理解这程序怎么做出来的，但要会用别人的程序。用的过程中你会遇到3种情况。&lt;/p&gt;
&lt;h2 id="1-有这个按钮作者已经把程序打包成应用了"&gt;1️⃣ 有这个按钮，作者已经把程序打包成应用了
&lt;/h2&gt;&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2025-02/46c26df9a8577c9cdf77aae4af49f1f1.webp"
loading="lazy"
alt="Liblib平台打包好可以直接运行应用的蓝色操作按钮"
&gt;&lt;/p&gt;
&lt;p&gt;你点进去就可以直接运行，操作很简单。看不到程序内部原理。&lt;/p&gt;
&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2025-02/caefee5ee6854594b0e273f148ddbc46.webp"
loading="lazy"
alt="Liblib打包好的应用界面中上传图片和点击生成按钮的操作说明示意图"
&gt;&lt;/p&gt;
&lt;h2 id="2-没有打包成应用出现的是这种浅蓝色运行按钮"&gt;2️⃣ 没有打包成应用，出现的是这种浅蓝色运行按钮
&lt;/h2&gt;&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2025-02/421edc7a9ebe6cf69aa23245d5d0ea01.webp"
loading="lazy"
alt="Liblib平台用于在ComfyUI界面中打开并运行工作流的浅蓝色按钮"
&gt;&lt;/p&gt;
&lt;p&gt;点了打开就会进入ComfyUI界面，黑色的界面，打开比较慢，多等一会儿。里面跟接线板一样，很复杂。&lt;/p&gt;
&lt;p&gt;但一般为了大家使用方便，作者会在程序里加上必要的操作说明。每个程序操作说明都不一样，说明的形式也不一样，要找到并认真阅读。比如这个就是作者加的说明：&lt;/p&gt;
&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2025-02/7d652a7e19399a3c53683aa792a38bb7.webp"
loading="lazy"
alt="工作流作者在Liblib ComfyUI中添加的自定义图片上传及操作说明卡片"
&gt;&lt;/p&gt;
&lt;h2 id="3-浅蓝色查看工作流按钮但进去没有任何说明"&gt;3️⃣ 浅蓝色查看工作流按钮，但进去没有任何说明
&lt;/h2&gt;&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2025-02/b78bb6863e56b1c86be4bfd3feb0a5d5.webp"
loading="lazy"
alt="Liblib平台上用于进入ComfyUI后台查看工作流详情的蓝色按钮"
&gt;&lt;/p&gt;
&lt;p&gt;这种一般是作者比较懒，连说明都不写。你可以大概看看整个程序是不是很复杂。&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;操作提示：鼠标滚轮缩放界面，按住空格拖动可以移动视野。&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;一、如果你判断程序比较简单，接线板卡片比较少，应该还有希望继续用，只需要找到2种关键的卡片：&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;上传图片的卡片长这样，未必一模一样，关键特征是带有这个 choose file to upload 按钮：&lt;img src="https://cdn.victor42.work/posts/2025-02/88465060dc6397b6e62a5bfca4b1d89f.webp"
loading="lazy"
alt="ComfyUI中带有上传文件按钮红框标识的加载图像节点卡片"
&gt;&lt;/li&gt;
&lt;li&gt;输入文字的卡片长这样，关键特征是这种黑色输入框，这一般是给你输入提示词用的：&lt;img src="https://cdn.victor42.work/posts/2025-02/09dbc0f7779d7896470f8ffc876d936d.webp"
loading="lazy"
alt="ComfyUI中带有红框标识的提示词文本输入框卡片"
&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;会用这两种卡片，往里面传图片、写文字，然后按运行，大概率就能成功。&lt;/p&gt;
&lt;p&gt;二、如果程序实在很复杂，这种图片卡片和文字卡片很多，不知道该用哪个。那还是先放弃，找找其他有说明的同类工作流。&lt;/p&gt;
&lt;hr&gt;
&lt;h2 id="-报错处理"&gt;⚠️ 报错处理
&lt;/h2&gt;&lt;p&gt;另外，你还可能遇到程序报错，一堆英文出来：&lt;/p&gt;
&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2025-02/1ae88573acbc157fb7bf1443a68dcb25.webp"
loading="lazy"
alt="ComfyUI运行时弹出Value not in list的模型缺失错误提示弹窗"
&gt;&lt;/p&gt;
&lt;p&gt;不要慌，你关掉这个报错弹窗，程序会把出错的卡片标红：&lt;/p&gt;
&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2025-02/c024ed1135e6e390d941dfa607010b77.webp"
loading="lazy"
alt="ComfyUI后台界面中出错节点被标红显示并配有红色箭头指向指示的截图"
&gt;&lt;/p&gt;
&lt;p&gt;放大过去看看，出错的卡片通常是用来加载AI模型的：&lt;/p&gt;
&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2025-02/53f255d839ade35227ea9c02e782517b.webp"
loading="lazy"
alt="ComfyUI中被红框圈出报错的双CLIP加载器节点卡片"
&gt;&lt;/p&gt;
&lt;p&gt;程序作者制作时可能是在自己电脑上做的，模型的名称是他自己电脑上的文件名。但是他把程序传到Liblib上来，模型的名称可能Liblib平台的不一样，所以卡片出错是因为找不到对应的模型。&lt;/p&gt;
&lt;p&gt;这个好办，你记住里面每一个选项的名字，尤其是小数点前面的部分，那是模型的名称。然后点击每个模型，在下拉菜单里选名称和它最接近的（当然一模一样最好了）：&lt;/p&gt;
&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2025-02/c460eab80d6db0ff96dac59993a8ca9e.webp"
loading="lazy"
alt="在双CLIP加载器选择菜单中点击下拉列表选择最接近模型的调整操作"
&gt;&lt;/p&gt;
&lt;p&gt;把出错卡片的每一个模型都重新选一遍，再运行就可以了。&lt;/p&gt;
&lt;p&gt;如果列表里找不到相应的，可以直接在 &lt;a class="link" href="https://www.liblib.art/" target="_blank" rel="noopener"
&gt;Liblib模型广场&lt;/a&gt; 找，找到之后加入模型库，下拉菜单里就有了。&lt;/p&gt;
&lt;p&gt;这样可以解决90%以上的错误。&lt;/p&gt;</description></item><item><title>老婆和同事搜不到东西时总找我</title><link>https://victor42.eth.limo/post/3654/</link><pubDate>Wed, 28 Aug 2024 14:07:00 +0000</pubDate><author>hi@victor42.work (Victor42)</author><guid>https://victor42.eth.limo/post/3654/</guid><description>&lt;img src="https://cdn.victor42.work/posts/2024-08/6cab50470236b0d2d7a8937ab39753e1.jpg" alt="Featured image of post 老婆和同事搜不到东西时总找我" /&gt;&lt;p&gt;用好搜索引擎是非常重要的软技能。今天的搜索引擎已经非常智能了，大多数情况下，像日常交谈一样提问，足以找到所需信息。但总有一些冷门疑难信息，查询时需要借助搜索引擎的高级技巧。&lt;/p&gt;
&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2024-08/ae0a9d5c1dfef1b0d70540336bd07a4b.jpg"
loading="lazy"
alt="使用双引号在搜索引擎中进行完全匹配"
&gt;&lt;/p&gt;
&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2024-08/ee9c494746441ee6a6cb71f68c9e6a43.jpg"
loading="lazy"
alt="使用减号运算符在搜索结果中排除特定词"
&gt;&lt;/p&gt;
&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2024-08/1dd02eb2eccccadf6306bb4a09dd7fbc.jpg"
loading="lazy"
alt="使用星号占位符在搜索引擎中做模糊搜索"
&gt;&lt;/p&gt;
&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2024-08/c0276387251a6a8b8576489ade53a81c.jpg"
loading="lazy"
alt="使用双句号限制搜索引擎结果中的数字范围"
&gt;&lt;/p&gt;
&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2024-08/6cab50470236b0d2d7a8937ab39753e1.jpg"
loading="lazy"
alt="使用站点限制指令只在特定域名网站搜索"
&gt;&lt;/p&gt;
&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2024-08/6d5a487a91e3929c9e52af1e2689def2.jpg"
loading="lazy"
alt="使用链接包含指令搜索网页链接中的限定词"
&gt;&lt;/p&gt;
&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2024-08/35c3b2f7671d6edcaff1e4e9b746d27d.jpg"
loading="lazy"
alt="通过多重链接包含指令在网页链接中寻词"
&gt;&lt;/p&gt;
&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2024-08/85607a7da3345eb6154f0e481accabe3.jpg"
loading="lazy"
alt="使用标题包含指令搜索带有特定词的网页"
&gt;&lt;/p&gt;
&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2024-08/646eef958a738e581e01cb5fb8c1671b.jpg"
loading="lazy"
alt="通过多重标题限制在网页标题里搜索多词"
&gt;&lt;/p&gt;
&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2024-08/dda05a8d1cfd65bbf00b542f2bea3e2e.jpg"
loading="lazy"
alt="利用锚文本指令搜索指向该页的链接文字"
&gt;&lt;/p&gt;
&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2024-08/927e59712c54cecb93d61eb23c646e23.jpg"
loading="lazy"
alt="使用文件格式指令过滤搜索引擎中的结果"
&gt;&lt;/p&gt;
&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2024-08/ccb0dd4f7c40b174d968f332b4c58be9.jpg"
loading="lazy"
alt="使用相关网站指令在搜索引擎中寻找替代"
&gt;&lt;/p&gt;
&lt;p&gt;技巧本身也没多高深，就这么些指令，剩下的就是排列组合了。动手做做实验，理解和记住这些命令的能力。根据需要结合起来使用，你就能找到别人搜不到的信息。&lt;/p&gt;
&lt;p&gt;虽然今天AI搜索工具满天飞，但它们并不是取代的关系。恰恰相反，它们建立在搜索引擎之上。AI搜不到的冷门信息，最终还得依赖人工搜索，搜索引擎才是可靠的兜底方案。&lt;/p&gt;
&lt;p&gt;最后，除了技巧层面，更重要的是观念。它可以用一连串反问来表示：&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;总有人经历比我丰富吧？&lt;/li&gt;
&lt;li&gt;我的问题总有人已经遇到过吧？&lt;/li&gt;
&lt;li&gt;总有人比我聪明吧？&lt;/li&gt;
&lt;li&gt;这些问题总有人想到解法了吧？&lt;/li&gt;
&lt;li&gt;找这些解法总比自己瞎琢磨容易吧？&lt;/li&gt;
&lt;/ul&gt;</description></item><item><title>我们这代人的遗言会写在哪里？</title><link>https://victor42.eth.limo/post/3653/</link><pubDate>Tue, 20 Aug 2024 14:23:00 +0000</pubDate><author>hi@victor42.work (Victor42)</author><guid>https://victor42.eth.limo/post/3653/</guid><description>&lt;p&gt;之前&lt;a class="link" href="https://victor42.eth.limo/post/3652/" target="_blank" rel="noopener"
&gt;AI过滤新闻&lt;/a&gt;的那篇里，有朋友发现我手机上有个自动任务“漏接老婆电话发送地理位置”，评论区非常欢乐。其实我说的是实话，虽然被人“千里跨国逮去噶腰子”可能性很小，但谁知道会不会遇到别的意外呢？如果放下传统观念里对死亡的忌讳，带着理性正视它的存在，至少可以提前做点准备，把一些只有自己知道、但有必要告诉家人的信息记录下来，并适时传递出去。&lt;/p&gt;
&lt;p&gt;作为一个没什么建树的普通中年社畜，并不涉及家族产业传承、企业股权转让。我能为家人做的，只是把我现有的财产和负债盘点一下，留下线索，方便家人找回来。&lt;/p&gt;
&lt;p&gt;这涉及3个问题：&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;信息存在哪里？&lt;/li&gt;
&lt;li&gt;什么时候以什么方式发出去？&lt;/li&gt;
&lt;li&gt;能不能保证信息安全？&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;如果按顺序来考虑这3个问题，很难找到令人满意的方案，要么不够自动化，要么不够安全。我甚至都找过有没有专门干这个的App，但在数据安全方面并不令人放心。偶然一天，我按照2、1、3的顺序思考，发现日历App就是一个绝佳的遗言记录和发送工具。&lt;/p&gt;
&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2024-08/ca91f7cba9e630d53033d7ef0d1253e2.jpg"
loading="lazy"
alt="日历应用中设置邮件提醒的自定义通知窗口"
&gt;&lt;/p&gt;
&lt;p&gt;设置一个循环事项，每月触发一次，提醒方式设置为邮件。&lt;/p&gt;
&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2024-08/62579ed37df278f49d5021b071a10c2c.jpg"
loading="lazy"
alt="电子邮箱中设置的邮件自动转发过滤规则"
&gt;&lt;/p&gt;
&lt;p&gt;它默认会发邮件给我自己，我到邮箱里设置一个过滤规则，只要正文包含了遗言开头的特定内容，就转发到我老婆的常用邮箱。&lt;/p&gt;
&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2024-08/ab7f8b818ec04f4effe2bd9a11090dda.jpg"
loading="lazy"
alt="日历事项详情中记录的留言描述与提醒"
&gt;&lt;/p&gt;
&lt;p&gt;遗言内容就写在该事项的备注里，写明我所有财产散落在哪些地方：投资账户、储蓄账户、保险账户分别有哪些，用户名是什么，出于数据安全考虑，密码不能留，只写下凭什么证件或手机号可以重置。债务也记录一下，主要是房贷，哪张卡还的，每月多少，及时续上别断了。&lt;/p&gt;
&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2024-08/928065980cc3f8d0bc56f2ab9a441044.jpg"
loading="lazy"
alt="手机日历月视图中设置的日程事项提醒"
&gt;&lt;/p&gt;
&lt;p&gt;但这个循环事项每个月都会发邮件给我老婆，我要写的是遗言，又不是打工人月报。这时只能麻烦一下自己，提前一天再设置另一个循环事项，提醒自己把遗言事项删除。删的时候只删本次，别把整个循环删了。这个技巧叫负触发，从《三体》执剑人那学来的，某项活动终止了才触发。&lt;/p&gt;
&lt;p&gt;这样既避免了每月打扰，也防止邮件发出去长期躺在老婆邮箱里，造成可能的数据泄漏和财产损失。毕竟她的数据安全意识没我好。对于我自己，为了数据安全，也不能把遗言记在日常的日历账户上。我专门注册了一个安全级别更高的账户，它从不用来注册账号、接收邮件，只用来做这件事。&lt;/p&gt;
&lt;p&gt;当然，一整套设置下来，还是得和老婆说一声，至少让她别乱换常用邮箱。&lt;/p&gt;</description></item><item><title>我受够了这些新闻App，于是加了一点AI</title><link>https://victor42.eth.limo/post/3652/</link><pubDate>Tue, 13 Aug 2024 13:31:00 +0000</pubDate><author>hi@victor42.work (Victor42)</author><guid>https://victor42.eth.limo/post/3652/</guid><description>&lt;img src="https://cdn.victor42.work/posts/2024-08/90415a2f2e2fa7829fae2a10f117f392.jpg" alt="Featured image of post 我受够了这些新闻App，于是加了一点AI" /&gt;&lt;p&gt;&lt;strong&gt;阅读提示：本文涉及Tasker、AI、前端、自动化，有一定技术门槛。&lt;/strong&gt;&lt;/p&gt;
&lt;h2 id="背景"&gt;背景
&lt;/h2&gt;&lt;p&gt;我有个坚持，不想浪费宝贵时间在低价值信息上，所以会时常反思自己的信息来源。我感兴趣的领域，通常都能找到相应信息渠道，长期关注。但不能只盯着这些领域，也需要一扇小窗口，来偶尔了解其他领域的大事，防止画地为牢。&lt;/p&gt;
&lt;p&gt;以往，我都是利用早晨送老婆孩子的时间，听听新闻电台，了解当天时事。这里面的信息也可以分为两类：&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;肯定对我无价值。如体育新闻、娱乐新闻，我一点也不关心体育和八卦；又如军事新闻，军事信息披露少、难查证，各方报喜不报忧，单从新闻报道获得结论，完全不可靠。&lt;/li&gt;
&lt;li&gt;可能有价值，听了才知道。如社会新闻，近期消费趋势、科技发展导致的新社会现象等，有时能从中得到一些数据和洞察。当然，也有许多毫无价值，比如某豪车肇事逃逸这种，社会构成形形色色，单个个体的行为往往不值得关心。&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;近期巴黎奥运会，我的新闻时光几乎被奥运新闻淹没了。导致我开车时不时要瞄一眼大屏上的新闻标题，判断是不是该切下一条。有时候要连切7、8条，才能轮到一则我愿意听的。这样既不安全，又让人火大。&lt;/p&gt;
&lt;p&gt;我试过许多可以听新闻的手机App。如果听头条频道，免不了混进这些不感兴趣的信息。如果订阅几个特定频道，又总会混入上千字的深度报道，敢情我一路就听你一条呢？更新频率的差异也是个问题，订阅的几个频道中，只要有一两个更新量极大，其他频道就相当于不存在了。&lt;/p&gt;
&lt;p&gt;我就想，既然只瞄一眼标题就能判断要不要听，这事儿AI难道不能做吗？我可以继续听头条频道，只是让AI帮我滤掉一道，可不可行？&lt;/p&gt;
&lt;p&gt;这个想法一冒出来，就完全停不下来了。&lt;/p&gt;
&lt;h2 id="实现思路"&gt;实现思路
&lt;/h2&gt;&lt;p&gt;仔细一想就发现，这事压根儿没什么技术含量。但就是找不到一款现成产品，可能是需求过于小众，那我就自己干吧！&lt;/p&gt;
&lt;p&gt;首先，我要在哪实施我的构想？在电脑上写个程序当然可以，但既然听新闻绕不开手机，干脆整个流程都在手机上完成吧，摆脱对其他设备的依赖，否则我出去度个长假还听不了新闻了？所幸我长期使用Tasker，安卓手机上的一款编程软件，我知道它能实现我想要的效果。&lt;/p&gt;
&lt;p&gt;整个过程不复杂，就这么几步：&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;从新闻源获取当日的头条新闻&lt;/li&gt;
&lt;li&gt;把新闻标题交给AI，让它判断属于哪类新闻&lt;/li&gt;
&lt;li&gt;过滤掉我不要的几类新闻，剩余新闻以文字形式保存下来&lt;/li&gt;
&lt;li&gt;通过语音合成转成音频新闻，存到特定位置&lt;/li&gt;
&lt;li&gt;以上动作做成自动任务，每天深夜执行一遍&lt;/li&gt;
&lt;li&gt;在音乐播放器创建一个专门的歌单，读取音频新闻&lt;/li&gt;
&lt;li&gt;做另一个自动任务，手机连上车载蓝牙启动播放器，播放新闻&lt;/li&gt;
&lt;li&gt;再做个自动任务，每天把新闻清空，为下一轮做准备&lt;/li&gt;
&lt;/ol&gt;
&lt;h2 id="准备轮子"&gt;准备轮子
&lt;/h2&gt;&lt;p&gt;以上步骤听起来像个大工程。但好在我不用自己发明轮子，其中许多能力都有现成的工具，把它们整合进来即可。现在，我得把可能用到的基础能力做成一个个小模块，也就是子任务，提前准备好，便于后续组装。&lt;/p&gt;
&lt;h3 id="tasker简介"&gt;Tasker简介
&lt;/h3&gt;&lt;p&gt;Tasker是这些子任务的载体。它是一个手机上的自动化工具，把硬件控制、数学运算、文件操作、网络请求、判断/循环等能力都打散成原子级别，让你自由组合，构建各种各样的自动化工作流。折腾过iPhone快捷指令的朋友应该熟悉这套玩法，只是Tasker远比快捷指令强大得多。把它归为自动化工具是低估了它，它实际上是个编程软件。&lt;/p&gt;
&lt;p&gt;最基础的用法是根据条件来控制手机硬件，比如连上公司WIFI自动静音、连上车载蓝牙启动音乐播放器，这类效果做起来轻轻松松。高级一些的用法，涉及文件操作、网络请求，则需要有编程的思维，但并不需要真的写代码。&lt;/p&gt;
&lt;h3 id="网络获取内容"&gt;网络获取内容
&lt;/h3&gt;&lt;p&gt;第一个子任务需要具备上网的能力，才能浏览新闻源。&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;输入：新闻源链接&lt;/strong&gt;&lt;br&gt;
&lt;strong&gt;输出：包含新闻列表的代码&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2024-08/7c717fff18ada6917cc6ddb9ab5acab4.jpg"
loading="lazy"
alt="任务控制中用于读取网页链接的配置页面"
&gt;&lt;/p&gt;
&lt;p&gt;它用到了Tasker内置的HTTP请求，我没做任何额外处理，只把从新闻源获得的信息原封不动传递给外层任务。为什么要包这么一层，而不是直接用呢？这和子任务的执行优先级有关系，后面组装轮子的时候我会再讲。&lt;/p&gt;
&lt;h3 id="解析xml"&gt;解析XML
&lt;/h3&gt;&lt;p&gt;从RSS新闻源获得的不是直接能读的新闻，而是一堆XML代码，其中包含新闻列表。&lt;/p&gt;
&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2024-08/d9b55eddd9d7d7e26b86fffe3dc56a1f.jpg"
loading="lazy"
alt="第一财经网页新闻源中的标准代码结构"
&gt;&lt;/p&gt;
&lt;p&gt;RSS遵循一种通用的格式，无论哪个新闻源，一条新闻都对应一个item，它的标题、链接、描述分别对应title、link、description。标准的格式，就有标准的办法从中提取信息。&lt;/p&gt;
&lt;p&gt;但在解析之前，我还加了另一个子任务，用来规整XML代码的格式。这里需要一点前端知识，因为网页里有时候会遇到代码被写成转义字符的情况，比如左尖括号&lt;code&gt;&amp;lt;&lt;/code&gt;被写成&lt;code&gt;&amp;amp;lt;&lt;/code&gt;、右尖括号&lt;code&gt;&amp;gt;&lt;/code&gt;被写成&lt;code&gt;&amp;amp;gt;&lt;/code&gt;。这个子任务可以把转义字符变回常规符号，便于统一处理。&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;输入：包含转义字符的XML代码&lt;/strong&gt;&lt;br&gt;
&lt;strong&gt;输出：标准的XML代码&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2024-08/c117f68d572158b87dc54acd03427ad3.jpg"
loading="lazy"
alt="用于规整代码格式和替换转义字符的任务"
&gt;&lt;/p&gt;
&lt;p&gt;下面该解析XML了。这个子任务可以从一堆XML中找到所有相邻的特定标签，提取出它们的内容，每个标签用&lt;code&gt;|||&lt;/code&gt;分隔开。&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;输入：完整XML代码、要提取内容的标签&lt;/strong&gt;&lt;br&gt;
&lt;strong&gt;输出：所有该标签里的内容&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2024-08/97c487fda93b7ef67d871a58ebd06721.jpg"
loading="lazy"
alt="提取代码中所有相邻特定标签内容的方法"
&gt;&lt;/p&gt;
&lt;p&gt;在我的程序里，我需要它找出所有item里的内容，也就是获取整个新闻列表。外层任务调用它时，把item作为第2参数（%par2）传给它，就能得到所有新闻条目的内容，并且以&lt;code&gt;|||&lt;/code&gt;分隔开，便于外层任务进一步拆分处理。&lt;/p&gt;
&lt;h3 id="从html提取内容"&gt;从HTML提取内容
&lt;/h3&gt;&lt;p&gt;刚才的子任务能解析新闻列表，但其中只有标题和链接是真正有用的。RSS新闻源虽然格式统一，各家对于description却有不同理解。有的新闻源把全文都写在了description里，有的只在这写了摘要，正文藏在详情页里。&lt;/p&gt;
&lt;p&gt;这个子任务就是为了干这个。给它一个页面的完整HTML代码，再告诉它要提取哪个标签的内容，它就能取出来，把不相干的菜单、评论、广告、页头页尾全撇掉。&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;输入：完整HTML代码、要提取内容的标签&lt;/strong&gt;&lt;br&gt;
&lt;strong&gt;输出：第一个该标签里的内容&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2024-08/0f45bc228aba2af149ceeb0c69a67907.jpg"
loading="lazy"
alt="从复杂网页代码中提取首个匹配标签内容"
&gt;&lt;/p&gt;
&lt;p&gt;这个子任务为何这么复杂？因为它要处理HTML标签层层嵌套的情况，这里涉及的前端知识不展开讲了。简单说就是它找到了标签的结尾在哪里，确定了提取内容的范围。整个过程都是靠字符串拆分、替换、拼接来完成的，实现了Javascript里innerHTML的能力。&lt;/p&gt;
&lt;p&gt;取出来的正文内容仍然是HTML代码，这就需要另一个子任务来把HTML转成纯文本。这是Tasker自带的能力。&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;输入：HTML代码&lt;/strong&gt;&lt;br&gt;
&lt;strong&gt;输出：文本内容&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2024-08/75b7ba16f35c56d3bb121026e9098eeb.jpg"
loading="lazy"
alt="利用系统自带功能将网页代码转换为纯文本"
&gt;&lt;/p&gt;
&lt;h3 id="ai判断新闻类型"&gt;AI判断新闻类型
&lt;/h3&gt;&lt;p&gt;前面的子任务是获取、加工内容的基础，但关键的筛选能力还得靠这个子任务，这是整个程序的脑子。&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;输入：要发给AI的内容、AI模型名称&lt;/strong&gt;&lt;br&gt;
&lt;strong&gt;输出：AI的回复&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2024-08/05c6c50a2cba1cad021f550344301002.jpg"
loading="lazy"
alt="配置调用大语言模型进行分类的请求任务"
&gt;&lt;/p&gt;
&lt;p&gt;&lt;a class="link" href="https://console.groq.com/playground" target="_blank" rel="noopener"
&gt;Groq的API&lt;/a&gt;真的是个好东西，里面有许多好用的开源AI模型。查阅它的文档，调用这些AI模型非常简单。向它发一些文字，它再把生成的文字回给你。等待2秒是因为API有请求限制，一分钟内最多调用30次。&lt;/p&gt;
&lt;h3 id="文本转语音"&gt;文本转语音
&lt;/h3&gt;&lt;p&gt;这个子任务把文本文件批量转成音频文件保存。&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;输入：文本文件所在目录、音频文件保存目录&lt;/strong&gt;&lt;br&gt;
&lt;strong&gt;输出：一批音频文件&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2024-08/c1dabc63612d30a30e611297c14b6493.jpg"
loading="lazy"
alt="批量将已分类新闻文本合成为音频的任务"
&gt;&lt;/p&gt;
&lt;p&gt;关键步骤用到了Tasker自带的Say To File，文本存为音频文件。需要注意的是，Say To File只是提供了这种操作，合成过程需要的语音合成引擎，Tasker并没有内置。&lt;/p&gt;
&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2024-08/995e0fb18649e334014f111ea8be2b8d.jpg"
loading="lazy"
alt="应用商店中谷歌语音识别与合成软件页面"
&gt;&lt;/p&gt;
&lt;p&gt;我用了谷歌的本地语音合成引擎，Google Play下载这个App，就能在Tasker里调用。&lt;/p&gt;
&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2024-08/07e0c2612c68af093e0a4e5c942ab102.jpg"
loading="lazy"
alt="系统设置中选择默认语音合成引擎的弹窗"
&gt;&lt;/p&gt;
&lt;p&gt;实测发现，本地免费语音合成引擎，效果大概只能达到地图软件默认语音包的水准。谷歌这个算其中比较优秀的了，甚至比讯飞的好，尽管还是很生硬。&lt;/p&gt;
&lt;h2 id="组装轮子"&gt;组装轮子
&lt;/h2&gt;&lt;p&gt;几个轮子准备好了，大多难题都已解决，该组装了。&lt;/p&gt;
&lt;h3 id="下载并筛选新闻"&gt;下载并筛选新闻
&lt;/h3&gt;&lt;p&gt;先组装出核心任务，它能从单个新闻源下载新闻，筛选后保存为文本文件，完成整个程序里绝大多数工序。&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;输入：新闻源地址、详情页正文所在HTML标签&lt;/strong&gt;&lt;br&gt;
&lt;strong&gt;输出：一批新闻文本文件&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;我在输入的第2个参数上留了个小彩蛋。输入的如果是&lt;code&gt;&amp;lt;description&amp;gt;&lt;/code&gt;，则不去新闻详情页获取正文，而是直接把XML里的description当做正文。这取决于每个新闻源的性质和数据质量，可以定义在它的外层任务上。&lt;/p&gt;
&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2024-08/64acc1961ddd336d05f0b9aba63739ec.jpg"
loading="lazy"
alt="下载并筛选特定新闻核心任务的初始阶段"
&gt;&lt;/p&gt;
&lt;p&gt;从新闻源获得完整XML代码，把转义字符规整成标准XML，去掉一些特殊的内容标记。然后提取新闻列表。&lt;/p&gt;
&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2024-08/b52349abcd5a92bb918c797c3043868a.jpg"
loading="lazy"
alt="新闻分类下载任务中对列表进行数组拆分"
&gt;&lt;/p&gt;
&lt;p&gt;新闻列表根据分隔符分成数组，设定好AI提示词，设定正文长度上限（过滤掉太长的正文）。开始循环，每条新闻从XML里读出标题，标题转成纯文本，交给AI分类。&lt;/p&gt;
&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2024-08/ba4c7edd6576c053b69d271d37f2bd88.jpg"
loading="lazy"
alt="在核心任务中调用智能对话分类器的参数"
&gt;&lt;/p&gt;
&lt;p&gt;AI的提示词我是这么写的，没用到什么技巧，直白说出需求就行。由于这里处理的都是中文信息，Groq上的Gemma2 9b模型比较适合，比Llama3.1的中文能力强。这种简单需求，开源小模型足以胜任。实际使用效果很好，没出过错。&lt;/p&gt;
&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2024-08/3e5a40b3c15e4e3661f026de131b45f0.jpg"
loading="lazy"
alt="根据分类结果过滤并将正文写入文本文件"
&gt;&lt;/p&gt;
&lt;p&gt;根据AI分的类型来判断，过滤掉体育/娱乐/军事新闻。再从XML得到新闻详情页链接，顺藤摸瓜取得详情页完整HTML，规整代码格式，根据正文所在HTML标签取出其内容。&lt;/p&gt;
&lt;p&gt;把正文HTML代码转成文本，判断正文长度，太长的过滤掉，太短的可能是图片新闻也过滤掉。剩下的作为文本文件存到特定目录里。&lt;/p&gt;
&lt;h3 id="优先级问题"&gt;优先级问题
&lt;/h3&gt;&lt;p&gt;调试核心任务的过程中，很多次出现取不到内容的情况，卡了很久。深入研究找到了原因：原来子任务的执行竟然是并行的！&lt;/p&gt;
&lt;p&gt;Tasker的灵魂是它的Perform Task，作用是在当前任务里执行一个子任务。执行时可以把当前任务的信息传递给子任务，并获得子任务处理后的结果。&lt;/p&gt;
&lt;p&gt;传入参数，获得返回值，这不就是编程里的函数吗？虽然Tasker有限制，最多只能往子任务里传2个参数，但如果把多个参数用特定分隔符拼接成字符串，传到子任务里再拆分开，理论上多少个参数都能传进来。用这种结构层层嵌套，什么复杂的逻辑做不出来？Perform Task的存在，使Tasker成为一款编程软件。&lt;/p&gt;
&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2024-08/9fe1b7073ff0b94fab2859978f94ec9f.jpg"
loading="lazy"
alt="系统帮助文档中关于任务执行优先级说明"
&gt;&lt;/p&gt;
&lt;p&gt;仔细阅读了Perform Task的帮助文档，里面提到了执行顺序问题。触发子任务时，外层任务并不会等子任务执行完再继续（我一直这么以为），而是并行执行下去了。我的程序中，许多子任务要去网上获取内容，或对页面代码进行大量的循环处理，耗费时间很长。在子任务给出处理结果前，外层任务继续执行，当然就接不上了。&lt;/p&gt;
&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2024-08/1091748819015f7296ec93d7500e5475.jpg"
loading="lazy"
alt="在子任务配置中调整优先级参数防止冲突"
&gt;&lt;/p&gt;
&lt;p&gt;按照帮助文档里建议的做法，把子任务Priority属性设为%priority+1，让子任务的优先级数值比外层任务多1，这样外层任务就会等子任务执行完才继续。&lt;/p&gt;
&lt;h3 id="多渠道下载新闻"&gt;多渠道下载新闻
&lt;/h3&gt;&lt;p&gt;呼~ 好长一个任务写完了，现在来调用它。&lt;/p&gt;
&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2024-08/a0a90a2ca998bca90156e3cfe59040b5.jpg"
loading="lazy"
alt="用于调用多个不同渠道新闻源的主体任务"
&gt;&lt;/p&gt;
&lt;p&gt;把我选出的几个RSS新闻源传递给核心任务，从哪里取正文也告诉它。每个新闻源都执行一次。&lt;/p&gt;
&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2024-08/d6d37dbe8a8195e2d6c7674104fc533f.jpg"
loading="lazy"
alt="执行批量语音合成并将音频导出的控制流"
&gt;&lt;/p&gt;
&lt;p&gt;再单独做一个批量转语音的任务，把文本新闻的目录和音频新闻的目录都告诉它，让它往音频新闻目录里输出。&lt;/p&gt;
&lt;h3 id="定时下载并转语音"&gt;定时下载并转语音
&lt;/h3&gt;&lt;p&gt;上面都是任务，怎么启动它们呢？切换到Tasker的Profiles页面，这里可以为任务添加各种各样的触发条件。&lt;/p&gt;
&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2024-08/bf1751cc5b2863826ff82d819e8b8859.jpg"
loading="lazy"
alt="设置在每天凌晨四点触发自动下载的配置文件"
&gt;&lt;/p&gt;
&lt;p&gt;每天凌晨4点，把新闻都存成文本文件。这个过程要5-10分钟。&lt;/p&gt;
&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2024-08/e1f5ef475b315060c9a3679f7a0e0603.jpg"
loading="lazy"
alt="设置在每天凌晨五点触发语音合成的配置文件"
&gt;&lt;/p&gt;
&lt;p&gt;每天凌晨5点，把文本新闻转成音频。&lt;/p&gt;
&lt;h2 id="最终效果"&gt;最终效果
&lt;/h2&gt;&lt;p&gt;这样我一觉醒来，News目录下就有两个文件夹。&lt;/p&gt;
&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2024-08/7add1606a97bddcc6fdee7af42f71cb1.jpg"
loading="lazy"
alt="文件管理器中存放文本和音频新闻的文件夹"
&gt;&lt;/p&gt;
&lt;p&gt;text保存了文字版新闻，如果有需要我还能二次分享出去。&lt;/p&gt;
&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2024-08/4d00497b3a8e5554ff90aeccfe11dcbd.jpg"
loading="lazy"
alt="文件管理器中已保存的每日新闻音频文件列表"
&gt;&lt;/p&gt;
&lt;p&gt;audio文件夹里是音频新闻。虽然还有一些没什么意思的社会新闻混在其中，但这不能怪AI，至少我再也没有听到过体育新闻了。&lt;/p&gt;
&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2024-08/fb2a13c2d652d15b0653f2e39be0beea.jpg"
loading="lazy"
alt="音乐播放器中选中的每日新闻播放列表"
&gt;&lt;/p&gt;
&lt;p&gt;手机上的音乐播放器里新建了一个叫每日新闻的歌单，专门读取audio文件夹。&lt;/p&gt;
&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2024-08/90415a2f2e2fa7829fae2a10f117f392.jpg"
loading="lazy"
alt="播放器主界面中展示的当天新闻音频列表"
&gt;&lt;/p&gt;
&lt;p&gt;更新一下内容，当天新闻就都来了。这个更新过程仍然需要手动点一下，我还在找自动化的办法。&lt;/p&gt;
&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2024-08/0023ce1bc26cb0c58b78cab5d834c033.jpg"
loading="lazy"
alt="基于变量值和时间条件触发播放新闻的配置文件"
&gt;&lt;/p&gt;
&lt;p&gt;播新闻也是自动的。早晨连上车载蓝牙，播放器就自动打开了，而我用的&lt;a class="link" href="https://play.google.com/store/search?q=AIMP&amp;amp;c=apps" target="_blank" rel="noopener"
&gt;AIMP播放器&lt;/a&gt;能设置打开自动播放，这下就完全不用动手了。&lt;/p&gt;
&lt;p&gt;最后，我还有另一个自动任务，每天凌晨3点把新闻文件夹清空，为下一轮任务做准备。&lt;/p&gt;
&lt;h2 id="后记"&gt;后记
&lt;/h2&gt;&lt;p&gt;用了几天自制的新闻头条程序，这下舒坦了，开车不用分心了。除了语音比较生硬之外，其他毛病没有。语音嘛也许等哪天我受不了了，就再找个效果好的付费TTS API，把Say To File这一步替换掉就可以了。&lt;/p&gt;
&lt;p&gt;一番操作下来，不仅解决了我生活中的问题，还积累了一些有用的子任务。我在制作网络获取内容、解析XML、从HTML提取内容、向AI提问这些子任务时，充分考虑了通用性。未来还能组装出其他程序，在手机上轻松实现各种网络爬虫，甚至AI agent。手机上的网络爬虫真的香，没有任何服务器费用，还能实现全天候运行，以后有具体需求再折腾吧。&lt;/p&gt;
&lt;h2 id="资源下载"&gt;资源下载
&lt;/h2&gt;&lt;p&gt;其中用到的比较复杂的Task已经公开分享，可随意取用。部分过于简单的Task就没有放上来，用内置的Task就能实现。&lt;/p&gt;
&lt;p&gt;Bulk TTS:
&lt;a class="link" href="https://taskernet.com/shares/?user=AS35m8mopd%2Bc1C7UhZNzgAc6Ld0oCTR8LzUJsfqb7SGyZq7NWeHANGDjDvTtBPSkNCjn3CrFQoI%3D&amp;amp;id=Task%3ABulk&amp;#43;TTS" target="_blank" rel="noopener"
&gt;https://taskernet.com/shares/?user=AS35m8mopd%2Bc1C7UhZNzgAc6Ld0oCTR8LzUJsfqb7SGyZq7NWeHANGDjDvTtBPSkNCjn3CrFQoI%3D&amp;amp;id=Task%3ABulk+TTS&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;Fix XML format:
&lt;a class="link" href="https://taskernet.com/shares/?user=AS35m8mopd%2Bc1C7UhZNzgAc6Ld0oCTR8LzUJsfqb7SGyZq7NWeHANGDjDvTtBPSkNCjn3CrFQoI%3D&amp;amp;id=Task%3AFix&amp;#43;XML&amp;#43;format" target="_blank" rel="noopener"
&gt;https://taskernet.com/shares/?user=AS35m8mopd%2Bc1C7UhZNzgAc6Ld0oCTR8LzUJsfqb7SGyZq7NWeHANGDjDvTtBPSkNCjn3CrFQoI%3D&amp;amp;id=Task%3AFix+XML+format&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;API- Groq (enter your key):
&lt;a class="link" href="https://taskernet.com/shares/?user=AS35m8mopd%2Bc1C7UhZNzgAc6Ld0oCTR8LzUJsfqb7SGyZq7NWeHANGDjDvTtBPSkNCjn3CrFQoI%3D&amp;amp;id=Task%3AAPI&amp;#43;-&amp;#43;Groq&amp;#43;%28enter&amp;#43;your&amp;#43;key%29" target="_blank" rel="noopener"
&gt;https://taskernet.com/shares/?user=AS35m8mopd%2Bc1C7UhZNzgAc6Ld0oCTR8LzUJsfqb7SGyZq7NWeHANGDjDvTtBPSkNCjn3CrFQoI%3D&amp;amp;id=Task%3AAPI+-+Groq+%28enter+your+key%29&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;Fix file name:
&lt;a class="link" href="https://taskernet.com/shares/?user=AS35m8mopd%2Bc1C7UhZNzgAc6Ld0oCTR8LzUJsfqb7SGyZq7NWeHANGDjDvTtBPSkNCjn3CrFQoI%3D&amp;amp;id=Task%3AFix&amp;#43;file&amp;#43;name" target="_blank" rel="noopener"
&gt;https://taskernet.com/shares/?user=AS35m8mopd%2Bc1C7UhZNzgAc6Ld0oCTR8LzUJsfqb7SGyZq7NWeHANGDjDvTtBPSkNCjn3CrFQoI%3D&amp;amp;id=Task%3AFix+file+name&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;Get inner XML(all siblings):
&lt;a class="link" href="https://taskernet.com/shares/?user=AS35m8mopd%2Bc1C7UhZNzgAc6Ld0oCTR8LzUJsfqb7SGyZq7NWeHANGDjDvTtBPSkNCjn3CrFQoI%3D&amp;amp;id=Task%3AGet&amp;#43;inner&amp;#43;XML%28all&amp;#43;siblings%29" target="_blank" rel="noopener"
&gt;https://taskernet.com/shares/?user=AS35m8mopd%2Bc1C7UhZNzgAc6Ld0oCTR8LzUJsfqb7SGyZq7NWeHANGDjDvTtBPSkNCjn3CrFQoI%3D&amp;amp;id=Task%3AGet+inner+XML%28all+siblings%29&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;Get inner XML(first match):
&lt;a class="link" href="https://taskernet.com/shares/?user=AS35m8mopd%2Bc1C7UhZNzgAc6Ld0oCTR8LzUJsfqb7SGyZq7NWeHANGDjDvTtBPSkNCjn3CrFQoI%3D&amp;amp;id=Task%3AGet&amp;#43;inner&amp;#43;XML%28first&amp;#43;match%29" target="_blank" rel="noopener"
&gt;https://taskernet.com/shares/?user=AS35m8mopd%2Bc1C7UhZNzgAc6Ld0oCTR8LzUJsfqb7SGyZq7NWeHANGDjDvTtBPSkNCjn3CrFQoI%3D&amp;amp;id=Task%3AGet+inner+XML%28first+match%29&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;从RSS下载特定分类新闻:
&lt;a class="link" href="https://taskernet.com/shares/?user=AS35m8mopd%2Bc1C7UhZNzgAc6Ld0oCTR8LzUJsfqb7SGyZq7NWeHANGDjDvTtBPSkNCjn3CrFQoI%3D&amp;amp;id=Task%3A%E4%BB%8ERSS%E4%B8%8B%E8%BD%BD%E7%89%B9%E5%AE%9A%E5%88%86%E7%B1%BB%E6%96%B0%E9%97%BB" target="_blank" rel="noopener"
&gt;https://taskernet.com/shares/?user=AS35m8mopd%2Bc1C7UhZNzgAc6Ld0oCTR8LzUJsfqb7SGyZq7NWeHANGDjDvTtBPSkNCjn3CrFQoI%3D&amp;amp;id=Task%3A%E4%BB%8ERSS%E4%B8%8B%E8%BD%BD%E7%89%B9%E5%AE%9A%E5%88%86%E7%B1%BB%E6%96%B0%E9%97%BB&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;多渠道下载新闻:
&lt;a class="link" href="https://taskernet.com/shares/?user=AS35m8mopd%2Bc1C7UhZNzgAc6Ld0oCTR8LzUJsfqb7SGyZq7NWeHANGDjDvTtBPSkNCjn3CrFQoI%3D&amp;amp;id=Task%3A%E5%A4%9A%E6%B8%A0%E9%81%93%E4%B8%8B%E8%BD%BD%E6%96%B0%E9%97%BB" target="_blank" rel="noopener"
&gt;https://taskernet.com/shares/?user=AS35m8mopd%2Bc1C7UhZNzgAc6Ld0oCTR8LzUJsfqb7SGyZq7NWeHANGDjDvTtBPSkNCjn3CrFQoI%3D&amp;amp;id=Task%3A%E5%A4%9A%E6%B8%A0%E9%81%93%E4%B8%8B%E8%BD%BD%E6%96%B0%E9%97%BB&lt;/a&gt;&lt;/p&gt;
&lt;h2 id="后续"&gt;后续
&lt;/h2&gt;&lt;p&gt;为实现一些Tasker不容易实现的能力，我又用Google Apps Scripts重新实现了一遍。部署在云端，设定触发器，凌晨静默运行。而且对于正文过长的新闻，还加入了AI总结能力。&lt;/p&gt;
&lt;p&gt;项目地址：
&lt;a class="link" href="https://github.com/greenzorro/google-apps-scripts/blob/main/news_feed.md" target="_blank" rel="noopener"
&gt;https://github.com/greenzorro/google-apps-scripts/blob/main/news_feed.md&lt;/a&gt;&lt;/p&gt;</description></item><item><title>Stack自动布局：Sketch中的Flexbox</title><link>https://victor42.eth.limo/post/3541/</link><pubDate>Sun, 26 Feb 2017 00:57:13 +0000</pubDate><author>hi@victor42.work (Victor42)</author><guid>https://victor42.eth.limo/post/3541/</guid><description>&lt;p&gt;&lt;strong&gt;[国外设计第164期]&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;&lt;em&gt;Skacks会彻底改变你对Sketch布局方式的理解。&lt;/em&gt;&lt;/p&gt;
&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2017-02/02-24/1-IjqstHVq3OGLQtqYACVgNA.gif"
loading="lazy"
alt="Sketch自动布局插件Auto Layout 0.2.0版本介绍，展示Stacks Flexbox布局功能，蓝色背景上有手机模型和黄色矩形元素"
&gt;&lt;/p&gt;
&lt;p&gt;就像&lt;a class="link" href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/" target="_blank" rel="noopener"
&gt;CSS中的Flex Box&lt;/a&gt;、iOS中的&lt;a class="link" href="https://www.raywenderlich.com/114552/uistackview-tutorial-introducing-stack-views" target="_blank" rel="noopener"
&gt;UIStackView&lt;/a&gt;和Android中的&lt;a class="link" href="https://github.com/google/flexbox-layout" target="_blank" rel="noopener"
&gt;FlexboxLayout&lt;/a&gt;——&lt;strong&gt;Stack&lt;/strong&gt;的自动布局可以再次改变整个局面。&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;Sketch用户终于可以在不用CSS的情况下，直接使用Flexbox的排版技术。&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;我们相信，推动设计生态前进的关键在于，创造出强大的设计概念。&lt;/p&gt;
&lt;p&gt;Flexbox已经彻底改变了局面，它出现已有好几年了。但要使用它，你得在浏览器中使用CSS来设计，因此对于多数设计师可望不可及。&lt;/p&gt;
&lt;p&gt;Stack是另一种形式的Flexbox，它更直观，但能力丝毫不减。它能使设计师以列、行、网格的思维来思考设计——使设计更加一致。&lt;/p&gt;
&lt;h2 id="stack是什么"&gt;&lt;strong&gt;Stack&lt;/strong&gt;是什么？
&lt;/h2&gt;&lt;p&gt;&lt;strong&gt;Stack&lt;/strong&gt;是一种特殊的&lt;em&gt;组&lt;/em&gt;，定义了其内部&lt;em&gt;图层&lt;/em&gt;的布局方式。&lt;/p&gt;
&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2017-02/02-24/1-uHeThlg0lB65kTcUkrSJQg.png"
loading="lazy"
alt="Sketch图层面板中Stack Group与普通Group的图标对比，Stack Group使用特殊蓝色图标并带有方向指示箭头"
&gt;&lt;/p&gt;
&lt;p&gt;&lt;em&gt;Stack组的图标是一种特殊的蓝色，上面还有图标来表示方向。&lt;/em&gt;&lt;/p&gt;
&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2017-02/02-24/1-7NbmCjfNNEwSnh0gTD7vnQ.png"
loading="lazy"
alt="Sketch Auto Layout面板中的Stack设置界面，包含垂直水平方向切换、四种对齐方式按钮、间距输入框和Unstack按钮"
&gt;&lt;/p&gt;
&lt;p&gt;&lt;em&gt;要使图层变为Stack模式，在Auto-Layout面板中点击Stack按钮。&lt;/em&gt;&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;小提示：&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Stacks&lt;/strong&gt;能产生&lt;strong&gt;一致性&lt;/strong&gt;。&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;一致性&lt;/strong&gt;使设计&lt;strong&gt;清晰&lt;/strong&gt;。&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Stacks&lt;/strong&gt;能使设计&lt;strong&gt;清晰&lt;/strong&gt;。&lt;/li&gt;
&lt;/ul&gt;
&lt;/blockquote&gt;
&lt;p&gt;一个Stack组有3个属性：&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;em&gt;方向&lt;/em&gt;：定义其内部图层按照&lt;em&gt;水平&lt;/em&gt;还是&lt;em&gt;垂直&lt;/em&gt;方式排列。
&lt;img src="https://cdn.victor42.work/posts/2017-02/02-24/1-sAimwEhMxx2WwM1Ah76-AA.gif"
loading="lazy"
alt="Sketch Stack方向属性演示，三个红色矩形Child 1、Child 2、Child 3在水平排列和垂直排列之间切换的动画"
&gt;
&lt;em&gt;方向&lt;/em&gt;&lt;/li&gt;
&lt;li&gt;&lt;em&gt;对齐&lt;/em&gt;：包括顶对齐、中央对齐、底对齐、伸展。
&lt;img src="https://cdn.victor42.work/posts/2017-02/02-24/1-rzprFGD1zbB2PpCwJnQ-vg.gif"
loading="lazy"
alt="Sketch Stack对齐属性演示，三个红色矩形Child 1、Child 2、Child 3展示顶对齐、居中对齐、底对齐和伸展对齐四种模式"
&gt;
&lt;em&gt;对齐&lt;/em&gt;&lt;/li&gt;
&lt;li&gt;&lt;em&gt;间距&lt;/em&gt;：定义其中每个元素的间距。
&lt;img src="https://cdn.victor42.work/posts/2017-02/02-24/1-gEkN2HgGCHq8fCXfCFbJ6Q.gif"
loading="lazy"
alt="Sketch Stack间距属性演示，三个红色矩形Child 1、Child 2、Child 3之间的间距数值动态调整，元素间距实时变化"
&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;blockquote&gt;
&lt;p&gt;&lt;em&gt;Stack可以嵌套使用！&lt;/em&gt;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2017-02/02-24/1-bkdGZNtR8MeedhcouuLHSw.gif"
loading="lazy"
alt="Sketch Stack嵌套布局演示，外层Stacked Group包含多个子组，Child 1.1嵌套在Group 1内部，展示Stack组可以多层嵌套使用"
&gt;&lt;/p&gt;
&lt;h2 id="来解这道题"&gt;来解这道题！
&lt;/h2&gt;&lt;p&gt;&lt;strong&gt;90%的设计师第一次都会理解错！&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;下图由多少个&lt;em&gt;Stack组&lt;/em&gt;构成：&lt;/p&gt;
&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2017-02/02-24/1-uQTR5Fw0VMrmVrF9EeHL9w.png"
loading="lazy"
alt="Stack嵌套练习题：Anima Viewer App应用商店界面截图，包含应用图标、标题Anima Viewer App、开发者AnimaApp、分类Essentials和星级评分"
&gt;&lt;/p&gt;
&lt;p&gt;正确答案是：3。&lt;/p&gt;
&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2017-02/02-24/1-1zBHWsMzI011GOTQSk8SxA.png"
loading="lazy"
alt="Stack嵌套练习题答案图解：绿色外框为最外层横向Stack组，蓝色中框为纵向Stack组含4个元素，红色内框为横向Stack组含星星和评分，共3个Stack组"
&gt;&lt;/p&gt;
&lt;p&gt;&lt;em&gt;Stack组的图标是一种特殊的蓝色，上面还有图标来表示方向。&lt;/em&gt;&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;最里层&lt;em&gt;横向排列&lt;/em&gt;的红色线框Stack组，其中有2个元素：星星和评论数。&lt;/li&gt;
&lt;li&gt;中间层&lt;em&gt;纵向排列&lt;/em&gt;的蓝色线框Stack组，其中有4个元素：应用名称、作者、分类、红色Stack组。&lt;/li&gt;
&lt;li&gt;最外层&lt;em&gt;横向排列&lt;/em&gt;的绿色线框Stack组，其中有2个元素：应用图标和蓝色Stack组。&lt;/li&gt;
&lt;/ol&gt;
&lt;h2 id="stack的实用诀窍"&gt;Stack的实用诀窍：
&lt;/h2&gt;&lt;ul&gt;
&lt;li&gt;Stack很适合用于定义&lt;strong&gt;同级&lt;/strong&gt;图层间的排列规则。&lt;/li&gt;
&lt;li&gt;在Stack组里增加或删除元素，会重新排列其中图层。
&lt;img src="https://cdn.victor42.work/posts/2017-02/02-24/1-Wl2bIzICvEbiNIm_WTDPtg.gif"
loading="lazy"
alt="Sketch Stack自动重排演示，删除Group 2后Child 1和Child 3自动重新排列填补空缺，展示Stack组增删元素时的智能布局调整"
&gt;&lt;/li&gt;
&lt;li&gt;文字图层的伸展会移动相邻图层。
&lt;img src="https://cdn.victor42.work/posts/2017-02/02-24/1-3KNYU1p478jpCVlz-6joTA.gif"
loading="lazy"
alt="Sketch Stack文字图层伸展演示，Child 1文字内容扩展时自动推开下方Child 2元素，展示文本图层在Stack中的自适应布局效果"
&gt;&lt;/li&gt;
&lt;li&gt;拖拽可以轻松地重新排列子图层。
&lt;img src="https://cdn.victor42.work/posts/2017-02/02-24/1-V4_Axkl8r8JXcpuhBn6obw.gif"
loading="lazy"
alt="Sketch Stack拖拽重排序演示，通过拖拽操作将Child 1、Child 2、Child 3三个红色矩形重新排列，展示Stack组内子图层的便捷拖拽排序功能"
&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id="使用stack实现flex网格"&gt;使用Stack实现Flex网格
&lt;/h2&gt;&lt;p&gt;&lt;a class="link" href="https://medium.com/@alanontheweb" target="_blank" rel="noopener"
&gt;Alan Roy&lt;/a&gt;，我们产品内测小组的一位多产的成员，用Stack创造出了&lt;a class="link" href="https://medium.com/@alanontheweb/responsive-flex-grid-in-sketch-using-autolayout-and-stacked-groups-ec8cfdf5df3f#.i40fnkdo8" target="_blank" rel="noopener"
&gt;Flex网格&lt;/a&gt;系统。&lt;/p&gt;
&lt;p&gt;他写了一篇详细解释，并且附带一段10分钟的视频。我们强烈建议阅读和观看这组教程。让人脑洞大开。【译者注：需科学上网】&lt;/p&gt;
&lt;p&gt;&lt;a class="link" href="https://www.youtube.com/watch?time_continue=2&amp;amp;v=g--AD_Yp5lk" target="_blank" rel="noopener"
&gt;https://www.youtube.com/watch?time_continue=2&amp;amp;v=g&amp;ndash;AD_Yp5lk&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;a class="link" href="https://medium.com/@alanontheweb/responsive-flex-grid-in-sketch-using-autolayout-and-stacked-groups-ec8cfdf5df3f" target="_blank" rel="noopener"
&gt;&lt;strong&gt;使用AutoLayout和嵌套组，在Sketch中实现响应式Flex网格&lt;/strong&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;改善设计体系，便于缩放和统一。&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;我们Anima的使命是让设计师能掌控自己的设计。我们正在打造一款设计工具，让设计师定义和构建UI与UX设计中所有零零碎碎的元素，并且最终能自动生成本地代码，1:1还原设计。这就使设计师&lt;strong&gt;不依赖&lt;/strong&gt;团队的其他部分，比如开发人员的优先关注点就与设计团队不同。&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;自动布局插件下载：&lt;a class="link" href="https://animaapp.github.io/Auto-Layout/" target="_blank" rel="noopener"
&gt;https://animaapp.github.io/Auto-Layout/&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;指南与文档：&lt;a class="link" href="https://animaapp.github.io/docs/v1/guide/12-stacks-flexbox.html" target="_blank" rel="noopener"
&gt;https://animaapp.github.io/docs/v1/guide/12-stacks-flexbox.html&lt;/a&gt;&lt;/p&gt;
&lt;hr&gt;
&lt;p&gt;原文链接：&lt;a class="link" href="https://medium.com/sketch-app-sources/auto-layout-introducing-stacks-flexbox-for-sketch-c8a11422c7b5#.jyyxfm90k" target="_blank" rel="noopener"
&gt;https://medium.com/sketch-app-sources/auto-layout-introducing-stacks-flexbox-for-sketch-c8a11422c7b5#.jyyxfm90k&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;作者信息：&lt;a class="link" href="https://medium.com/@AnimaApp" target="_blank" rel="noopener"
&gt;Anima App&lt;/a&gt;
Empowering designers to own their design.&lt;/p&gt;</description></item><item><title>博客与写作工具</title><link>https://victor42.eth.limo/post/3490/</link><pubDate>Thu, 24 Mar 2016 00:09:07 +0000</pubDate><author>hi@victor42.work (Victor42)</author><guid>https://victor42.eth.limo/post/3490/</guid><description>&lt;p&gt;广告文如期而至，今天来介绍一下我使用的markdown写作工具——&lt;a class="link" href="http://markeditor.com/app/markeditor" target="_blank" rel="noopener"
&gt;MarkEditor&lt;/a&gt;。作为书写工具，对我而言最重要的意义就是博客写作。大家不妨先听我唠叨一段我博客的历史，然后你们会明白我的选择。小小透露一下，文末有&lt;strong&gt;限时优惠&lt;/strong&gt;噢！&lt;/p&gt;
&lt;h2 id="无聊是第一生产力"&gt;无聊是第一生产力
&lt;/h2&gt;&lt;p&gt;这个博客的诞生，完全不是出于什么人生大计，纯粹就是无聊。早在大学期间，我就开始写点小日记，记录一些鸡毛蒜皮的小事，今天又骑车去哪逛了一圈、期末高数又挂了之类（哎我为什么要说又呢）。内容的形式逐渐分化，开始产生一些固定栏目：旅游照片、生活趣事集锦、影评书评、梦中神奇经历、还写过几篇矫情的微型小说。如今这些都原封不动保留着，偶尔翻一翻，也算见证一下当时的青葱岁月。直到大学毕业，我都是直接在博客平台里写，用的是哪家门户已经不记得了，反正纯粹是当作私人日记本在用，访客寥寥。&lt;/p&gt;
&lt;h2 id="免不了要走上折腾的道路"&gt;免不了要走上折腾的道路
&lt;/h2&gt;&lt;p&gt;毕业一年左右，朋友们说，作为设计师，怎能没有个人网站呢。那时的做法很偷懒，找个相册网站，把作品往上面一扔，博客那边再加个主导航外链。朋友说这也太low了，既然你会点前端，搭个wordpress啊。找了一圈模版，发现都不太符合我的要求。以博客为主的，作品展示效果不好；以作品为主的，文章往往藏得很深。作品反映的是身为设计师的我，而文章更接近完整的我，不能喧宾夺主。&lt;/p&gt;
&lt;p&gt;没办法，只好自己卷起袖管改代码，在朋友的指导下理解了域名、空间、独立博客之间的关系，第一个独立博客搭起来了。我还清楚记得第一版的样子，首页有一张大大的海星特写，背后是沙滩与海洋。从中取了天蓝、明黄和咖啡色，作为博客的主要配色。遗憾的是当时没有备份意识，早期的几版博客模版都被彻底覆盖了，什么也没留下。只能找到最后一版wordpress博客的主页，贴出来供大家吐吐槽：&lt;/p&gt;
&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2016-03/03-23/cola.png"
loading="lazy"
alt="可乐橙早期WordPress博客首页截图，展示绿色导航栏、文章列表预览与深色页脚"
&gt;&lt;/p&gt;
&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2016-03/03-23/page_about.png"
loading="lazy"
alt="设计师可乐橙个人网站旧版“关于我”页面，包含时光轴、技能树及友人评价"
&gt;&lt;/p&gt;
&lt;h2 id="不能忘了写作是初衷"&gt;不能忘了，写作是初衷
&lt;/h2&gt;&lt;p&gt;模板一套又一套地改，从别人的独立博客学到了许多技术知识。这些博客往往有个特点，翻它早期的文章，可以看到一些生活和感悟，后来就逐渐变成纯技术博客了。&lt;/p&gt;
&lt;p&gt;我不想那样。&lt;/p&gt;
&lt;p&gt;我花了太多心思在文章的展示上，却从没重视过写作的过程。台前与幕后，写博客的初衷是什么？让别人看得开心，还是自己写得开心。如果非要选一个，我觉得是后者。失去兴趣的写作，无论如何也不可能坚持将近10年。技术博客之所以改变方向，也必然是博主的兴趣转移到了技术上，兴趣使然，自己喜欢就好。&lt;/p&gt;
&lt;h2 id="尊重写作本身"&gt;尊重写作本身
&lt;/h2&gt;&lt;p&gt;虽然爱好和意志力有不可否认的作用，但一个舒适的写作环境也有积极的意义。和文字打了这么多年的交道，却忽略了一个显而易见的问题：为什么非得用这个来写？相当长一段时间里，我只在两个地方码字：Word和wordpress，只能说它们名字起得好，直击本质，让人潜意识觉得不需要其他的选择。&lt;/p&gt;
&lt;p&gt;当然了，并非真的不需要。&lt;/p&gt;
&lt;p&gt;最理想的写作环境是一整套体验，需要各方面的支持。手边要有一杯温水，喝水的间隙时常能产生灵感；背后要有一个厚度适中的靠垫；要有舒缓心神的音乐，或者大自然的声音；最好还能有微凉的轻风让人保持清醒；当然，专业的写作工具也是必须的，让人只关心内容，不必去想大标题用24号还是21号、宋体还是黑体。&lt;/p&gt;
&lt;p&gt;Markdown就是这样一种格式，可塑性强，放之四海皆准。除此之外，编辑器更加功不可没。把写作想象成庄园里的午后，与某位远方来客喝茶闲谈，那编辑器就要起到侍从的作用。它得通晓十八般武艺，“手机拍照插入文中”、“生成图片分享全文”这样的事情，肯定不能劳烦你亲自动手。同时又要保持缄默，按下全屏快捷键，世界只剩思想，其他一概遁入阴影，等待召唤。&lt;/p&gt;
&lt;h2 id="markeditor"&gt;MarkEditor
&lt;/h2&gt;&lt;p&gt;能够做到召之即来挥之即去的写作工具已不在少数，但在多才多艺方面，&lt;a class="link" href="http://markeditor.com/app/markeditor" target="_blank" rel="noopener"
&gt;MarkEditor&lt;/a&gt;绝对算是个中翘楚。功能强大的意义在于，不必写作中途费一番周折上传图片，也不必为了回顾某个章节翻遍整篇长文。因为做这些事情，思绪会被打断，这并非简洁前卫的UI能够弥补。若要追求流畅的写作体验，该简洁的其实是输入内容的过程，并不是编辑器的功能。&lt;/p&gt;
&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2016-03/03-23/Welcome_to_MarkEditor.png"
loading="lazy"
alt="桌面端Markdown写作编辑器MarkEditor软件界面与文档排版样式效果截图"
&gt;&lt;/p&gt;
&lt;p&gt;这就是MarkEditor的第一印象，相较于它丰富的功能，界面已经极其克制和朴素了。你可以不去管那些附加功能，放手开始写作，一样的简单清净。你也可以仔细探索一番，发掘它的无穷潜力。MarkEditor的自由化程度极高，众多小功能都不是花瓶玩物，而是些杀手级的功能。有没有想过？链接能直接生成二维码图片，插入文中。下面列举一些让我感到惊喜的功能，逐一演示：&lt;/p&gt;
&lt;h3 id="工作目录"&gt;工作目录
&lt;/h3&gt;&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2016-03/03-23/%e5%8f%af%e4%b9%90%e6%a9%99%e7%9a%84%e5%b7%a5%e4%bd%9c%e7%9b%ae%e5%bd%95.png"
loading="lazy"
alt="MarkEditor工作目录设置窗口，展示经典树型文件管理器与Markdown模板配置选项"
&gt;&lt;/p&gt;
&lt;p&gt;许多Markdown编辑器都只能设置一个工作目录。MarkEditor可以设置几个常用工作路径，通过快捷键召唤出工作目录窗口。同时处理多份文档时极其有用。&lt;/p&gt;
&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2016-03/03-23/%e5%86%99%e4%bd%9c%e7%9b%ae%e5%bd%95.png"
loading="lazy"
alt="MarkEditor文件列表以简洁风格展示按周命名的周报Markdown文件，右侧为文档编辑区"
&gt;&lt;/p&gt;
&lt;p&gt;值得一提的是，每个工作目录还有些选项能独立设置。我的博客文件夹有多个日志分类，我可以把目录设成树状结构展示，能够操作整个目录下的文章和图片。&lt;/p&gt;
&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2016-03/03-23/%e5%91%a8%e6%8a%a5.png"
loading="lazy"
alt="MarkEditor简洁风格文件列表展示按日期命名的周报文档，右侧显示工作事项清单"
&gt;&lt;/p&gt;
&lt;p&gt;而用来写工作周报的目录只有一层，就比较适合简洁风格，只显示文章，忽略其他文件类型。&lt;/p&gt;
&lt;h3 id="生成二维码"&gt;生成二维码
&lt;/h3&gt;&lt;p&gt;文章中需要插入二维码，便于PC端读者浏览某个H5页面。以往碰到这种情况是很头疼的，切出去打开浏览器，用chrome插件或某个网页工具来生成，然后再下载、插入文中。&lt;/p&gt;
&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2016-03/03-23/%e6%8f%92%e5%85%a5%e4%ba%8c%e7%bb%b4%e7%a0%81.png"
loading="lazy"
alt="MarkEditor插入二维码弹窗，输入网址文本框与尺寸设置（360像素）及确认按钮"
&gt;&lt;/p&gt;
&lt;p&gt;MarkEditor考虑了这种情况，快捷键呼出二维码窗口，粘贴内容，直接就能生成了。&lt;/p&gt;
&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2016-03/03-23/%e4%ba%8c%e7%bb%b4%e7%a0%81.png"
loading="lazy"
alt="MarkEditor文档预览中嵌入的大型二维码图片，左侧为文件目录树结构"
&gt;&lt;/p&gt;
&lt;h3 id="临时插入手机照片"&gt;临时插入手机照片
&lt;/h3&gt;&lt;p&gt;窗台上飞来一只漂亮的鸟，想拍下来发到博客上，又要大动干戈一番。要设法把照片同步到电脑上，再拖到文章中。&lt;/p&gt;
&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2016-03/03-23/%e6%8f%92%e5%85%a5%e6%9d%a5%e8%87%aa%e4%bd%a0%e7%a7%bb%e5%8a%a8%e8%ae%be%e5%a4%87%e4%b8%ad%e7%9a%84%e5%9b%be%e7%89%87.png"
loading="lazy"
alt="MarkEditor移动端图片上传界面，显示局域网二维码扫描地址与允许上传勾选框"
&gt;&lt;/p&gt;
&lt;p&gt;在这里就要方便不少，激活插图窗口，手机扫个码，拍照上传，完事。当然还可以从相册选取图片。&lt;/p&gt;
&lt;p&gt;![iPhone照片选择界面，提供拍照、从相册选取和更多选项三个图片插入方式](&lt;a class="link" href="https://cdn.victor42.work/posts/2016-03/03-23/2016-03-23" target="_blank" rel="noopener"
&gt;https://cdn.victor42.work/posts/2016-03/03-23/2016-03-23&lt;/a&gt; 15.35.04.png)&lt;/p&gt;
&lt;h3 id="改变图片尺寸"&gt;改变图片尺寸
&lt;/h3&gt;&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2016-03/03-23/%e8%b0%83%e6%95%b4%e5%9b%be%e7%89%87%e5%a4%a7%e5%b0%8f_%e5%92%8c_Dropbox_documents_MarkEditor%e7%ae%80%e4%bb%8b_md_%e5%92%8c_pic__%e5%b0%8f%e5%9b%be.png"
loading="lazy"
alt="MarkEditor图片缩放功能弹窗，展示缩放率滑块与最宽最高像素设置输入框"
&gt;&lt;/p&gt;
&lt;p&gt;插入文中的图片可以很方便地再手动缩小尺寸，拖动一个滑块就行，MarkEditor官网的介绍视频中有这个操作，给我极其深刻印象深刻。&lt;/p&gt;
&lt;h3 id="打字机式滚动"&gt;打字机式滚动
&lt;/h3&gt;&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2016-03/03-23/%e6%89%93%e5%ad%97%e6%9c%ba.png"
loading="lazy"
alt="MarkEditor打字机式滚动功能演示，编辑区文档内容随光标自动居中滚动"
&gt;&lt;/p&gt;
&lt;p&gt;这个功能虽然不是独家，却还是不多见的。每回车一次，就会滚动画面，让光标所在行移到屏幕中央。&lt;/p&gt;
&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2016-03/03-23/depositphotos_58981925-merry-christmas-typewritten-in-a-paper-sheet-on-a-typewriter-wi.jpg"
loading="lazy"
alt="复古打字机俯拍特写，双手正在敲击键盘，纸卷上印有Merry Christmas字样"
&gt;&lt;/p&gt;
&lt;p&gt;很像打字机，这是对眼睛最大的善意。&lt;/p&gt;
&lt;h3 id="文章内容索引"&gt;文章内容索引
&lt;/h3&gt;&lt;p&gt;长文会有比较复杂的结构，主副标题能多达3级甚至4级。如果要回顾之前某个章节的内容，做个呼应，这时翻滚动条也要翻半天。&lt;/p&gt;
&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2016-03/03-23/%e7%9b%ae%e5%bd%95.png"
loading="lazy"
alt="MarkEditor文章内容索引侧边栏，以多级标题大纲形式展示文档章节结构"
&gt;&lt;/p&gt;
&lt;p&gt;文章内容索引就能很好地解决这个问题，这是天然的大纲结构，便于查找的同时，也能帮助自己梳理逻辑。&lt;/p&gt;
&lt;h3 id="生成长图"&gt;生成长图
&lt;/h3&gt;&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2016-03/03-23/%e5%af%bc%e5%87%ba%e5%9b%be%e7%89%87.png"
loading="lazy"
alt="MarkEditor导出菜单展示PDF、图片、HTML等多种导出格式选项及右键上下文菜单"
&gt;&lt;/p&gt;
&lt;p&gt;发长微博时这个就特别有用了。如你所见，除了长图，还可以导出成许多其他形式，用于不同的场合。&lt;/p&gt;
&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2016-03/03-23/%e5%8f%af%e4%b9%90%e6%a9%99%e8%af%91%e6%96%87%e8%83%8c%e5%90%8e%e7%9a%84%e6%95%85%e4%ba%8b.png"
loading="lazy"
alt="MarkEditor长图导出效果，展示文章排版后的移动端阅读样式与文字层级"
&gt;&lt;/p&gt;
&lt;p&gt;长微博图片对移动端做了优化，清晰美观大方。&lt;/p&gt;
&lt;h3 id="历史版本"&gt;历史版本
&lt;/h3&gt;&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2016-03/03-23/%e5%8e%86%e5%8f%b2%e7%89%88%e6%9c%ac.png"
loading="lazy"
alt="MarkEditor历史版本对比界面，左侧时间轴列出各版本，右侧红绿高亮显示文本差异"
&gt;&lt;/p&gt;
&lt;p&gt;自带历史版本功能，如果你不用dropbox或坚果云，那这个功能意义重大。而且这个历史版本可比dropbox的详细多了，能看到历史版本与当前版本的具体差异，代码对比功能的妙用。&lt;/p&gt;
&lt;h3 id="灵活的自定义皮肤"&gt;灵活的自定义皮肤
&lt;/h3&gt;&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2016-03/03-23/%e7%9a%ae%e8%82%a4.png"
loading="lazy"
alt="MarkEditor设置窗口中的自定义皮肤配色表，展示字体颜色、背景色等CSS属性参数"
&gt;&lt;/p&gt;
&lt;p&gt;MarkEditor有意思的地方是直接把UI的配色表放出来了，几乎所有能看到的元素，都可以改颜色。&lt;/p&gt;
&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2016-03/03-23/%e5%a4%9c%e9%97%b4.png"
loading="lazy"
alt="MarkEditor夜间模式主题效果，深色背景配绿色链接与紫色图片的自定义配色"
&gt;&lt;/p&gt;
&lt;p&gt;我就自己改了个夜间模式主题，绿色链接，紫色图片，标题和正文的颜色略微改柔和了一点。如果你喜欢，可以在下面链接中复制我的配色表。&lt;/p&gt;
&lt;p&gt;&lt;a class="link" href="http://pan.baidu.com/s/1kUbUYb1" target="_blank" rel="noopener"
&gt;http://pan.baidu.com/s/1kUbUYb1&lt;/a&gt;&lt;/p&gt;
&lt;h3 id="todo-list"&gt;Todo list
&lt;/h3&gt;&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2016-03/03-23/todo.png"
loading="lazy"
alt="MarkEditor无序列表作为Todo清单使用，已完成项带删除线，待办项正常显示"
&gt;&lt;/p&gt;
&lt;p&gt;无序列表还能当Todo list用，鼠标点击直接标记完成/未完成，我平时工作就是用的这个来记录一些临时需求。&lt;/p&gt;
&lt;h3 id="同步到第三方云服务商"&gt;同步到第三方云服务商
&lt;/h3&gt;&lt;p&gt;这是个重磅功能，也是解决图片存储问题的关键所在，真正把图片存储和写作集中到一个地方了。&lt;/p&gt;
&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2016-03/03-23/%e5%90%8c%e6%ad%a5.png"
loading="lazy"
alt="MarkEditor同步到第三方云服务商设置窗口，展示七牛、Amazon S3等选项与AccessKey配置"
&gt;&lt;/p&gt;
&lt;p&gt;图片可以同步到第三方云服务商，例如七牛、亚马逊云，也可以同步到Farbox自家服务器。文章发布之后，图片自动转为相应的云端地址。除了写文章，你什么都不用做。&lt;/p&gt;
&lt;h2 id="总结"&gt;总结
&lt;/h2&gt;&lt;p&gt;这款写作工具还有大量待发掘的高级功能，比如可以自定义markdown的转译语法，怎么用就取决于你的想象力了。MarkEditor与同门产品&lt;a class="link" href="https://www.farbox.com/" target="_blank" rel="noopener"
&gt;Farbox&lt;/a&gt;配合，会让博客的管理非常省心。&lt;/p&gt;
&lt;p&gt;如果要为MarkEditor找一个关键词，我觉得应该是：自由。把整个博客都放在自己的硬盘上，能获得最大限度的自由。无论是博客还是编辑器本身，都能灵活调整迎合自己的习惯与喜好。&lt;/p&gt;
&lt;p&gt;在重要且常用的工具上，定制化程度高的产品有它无可替代的优势。一番悉心调教后，它会成为你最得力的助手。&lt;/p&gt;
&lt;p&gt;还有最亲民的一点，&lt;strong&gt;它也提供windows版&lt;/strong&gt;。&lt;/p&gt;
&lt;p&gt;最后附上MarkEditor的官网，可以先下载体验一下，其中部分功能需要购买才能激活：&lt;/p&gt;
&lt;p&gt;&lt;a class="link" href="http://markeditor.com/app/markeditor" target="_blank" rel="noopener"
&gt;http://markeditor.com/app/markeditor&lt;/a&gt;&lt;/p&gt;
&lt;h2 id="优惠购买优惠已结束"&gt;优惠购买【优惠已结束】
&lt;/h2&gt;&lt;p&gt;终于到发福利的时刻啦，我向MarkEditor作者讨来了独家优惠。首先请关注微信公众号【可乐橙】，并发送“优惠”2字。使用优惠码购买，前3名享受3折优惠，前30名5折，之后到2016-3-28都是7折。&lt;/p&gt;
&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2016-03/03-23/Buy_a_License.png"
loading="lazy"
alt="Markdown写作软件MarkEditor许可证购买表单，包含Email、优惠券码（PromoCode）输入栏与支付宝购买按钮"
&gt;&lt;/p&gt;
&lt;p&gt;点击购买按钮后，会看到实际购买价格。**一定记得填入优惠码噢！！因为License激活后是无法退款的。**要是一激动原价买下了，我也无能为力。&lt;/p&gt;
&lt;p&gt;¯\_( ツ )_/¯&lt;/p&gt;</description></item><item><title>灵感库的故事</title><link>https://victor42.eth.limo/post/3441/</link><pubDate>Mon, 01 Jun 2015 10:59:00 +0000</pubDate><author>hi@victor42.work (Victor42)</author><guid>https://victor42.eth.limo/post/3441/</guid><description>&lt;p&gt;开门见山，这是一篇广告文，分享一款设计师灵感库管理工具。诶，先别急着开骂，我可没有商业化的打算。我打广告一定要严格满足三个条件：【朋友】推出的【好产品】，【无偿】广告。&lt;/p&gt;
&lt;p&gt;不过，在做广告之前，我有故事要讲。&lt;/p&gt;
&lt;p&gt;设计师的职业生涯就像一棵树，素材库与灵感库交织出了年轮，从某方面反映着你的成长经历。不知道大家的灵感库经历了怎样的演变与迁徙，至少我的是几经辗转。&lt;/p&gt;
&lt;p&gt;起先根本没有收集意识，需要什么临时找，几个网页书签就是全世界。从实习公司的老师那里拷来一套商业图库，10几个G。看得心花怒放，每件素材看着都精美无比。很长一段时间，那个文件夹就是我全部的上升空间，探索没有尽头。然而这个世界再精彩，也难以为我所用。文件多如牛毛，分类方式不合我的逻辑，找素材还不如百度来得快。我这才第一次意识到个人积累的意义。&lt;/p&gt;
&lt;p&gt;于是开辟了一个硬盘分区来存放素材——必须按我的习惯整理。网络上的素材涌入素材库，商业图库里的一部分也逐渐被吸收进来，其余的则索性删掉了，因为很多大半辈子也不可能用上一次。隔壁目录下，灵感库文件夹也慢慢成长起来。鼎盛时期，两者加起来超过了30G。&lt;/p&gt;
&lt;p&gt;然后大迁徙开始了，起因是应聘时被要求当场做设计。空着手去的，以我那时的水平，结果可想而知。解决方法不止一种，我选了最辛苦却一劳永逸的——统统搬到云端。灵感库采集到花瓣，人工上传，搬家持续了整整一个下午。而素材库要随时取用，电脑上也得有一份，同步盘比较合适，上传了两天两夜。&lt;/p&gt;
&lt;p&gt;随着经验与水平的增长，早期的素材与灵感，现在看来就不忍直视了。这中间又经过几番大清洗，灵感库也搬到了Pinterest，因为它更好用。然而意义最重大的，并非这些图片的数量或质量，而是两者的泾渭分明。&lt;/p&gt;
&lt;p&gt;其实在相当长的一段时间内，我都在以错误的方法工作。拿到一个设计需求，先打开素材库，看看哪些东西能组合起来。长此以往，素材不但帮不了你，反而会阻碍进步，阻断你的思考。近年来，我的灵感库在不断扩充，倒是素材库几乎是一滩死水，极少更新。素材库的内容也与之前大不相同，零散的小玩意取代了整体的设计模版。原因只有一个，素材的作用是为我节省时间，不能被它左右了风格。打开素材库之前，设计就应该已经完成了，要么在纸上，要么在心中。&lt;/p&gt;
&lt;p&gt;说到这里，灵感库的作用显得愈发重要了。它不能代替你画图，却能指引你设计。除了自己，能左右设计风格的，就只有它了。所以在这件事上，务必要有一件趁手的工具。&lt;/p&gt;
&lt;p&gt;今天的主角，PinCap，就是这样一款灵感库管理工具。看看界面先。&lt;/p&gt;
&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2015-05/05-26/1.png"
loading="lazy"
alt="PinCap 灵感库管理工具的图片网格和详情面板界面"
&gt;&lt;/p&gt;
&lt;p&gt;乍看像个图片管理工具。当然，那是最基本的功能。分类目录管理、图片预览、信息修改。还有色彩筛选，对摄影图片很有用。&lt;/p&gt;
&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2015-05/05-26/2.png"
loading="lazy"
alt="Finder 中 PinCap 目录与硬盘文件夹对应关系的截图"
&gt;&lt;/p&gt;
&lt;p&gt;PinCap中的目录，对应着硬盘上的文件夹。在PinCap中做的各种操作，最终都会体现到文件和文件夹上，反之亦然。&lt;/p&gt;
&lt;p&gt;就管理功能而言，它刚刚好，很节制。&lt;/p&gt;
&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2015-05/05-26/3.png"
loading="lazy"
alt="PinCap 新建采集窗口填写目录标题链接和备注"
&gt;&lt;/p&gt;
&lt;p&gt;更精髓的是采集功能。只要有图片被复制到剪贴板里，就能触发它的采集窗口。选个目录，完事。&lt;/p&gt;
&lt;p&gt;&lt;img src="https://cdn.victor42.work/posts/2015-05/05-26/4.png"
loading="lazy"
alt="PinCap 设置界面配置剪贴板监听和软件过滤例外"
&gt;&lt;/p&gt;
&lt;p&gt;有时候我们并不希望触发采集。在设置里可以过滤掉一些设计软件，避免不必要的干扰。&lt;/p&gt;
&lt;p&gt;通过PinCap，可以把网络上、聊天窗口中、截屏工具里的图片集中收纳管理。图片多了，优势自然就体现出来，管理本地文件总是最容易的。&lt;/p&gt;
&lt;p&gt;如果想要同时兼具云端同步的功能，需要另外有个同步盘。我把PinCap的默认文件夹直接设在了百度云同步目录里，problem solved!&lt;/p&gt;
&lt;p&gt;PinCap的UI与交互细节，在各位挑剔的设计师眼中，我相信仍有提升空间。不过真正打动我的是一个想法——连接一切现有资源，应用本身甘做一扇窗，深藏功与名。&lt;/p&gt;
&lt;p&gt;很好的开始，我们不妨拭目以待。&lt;/p&gt;
&lt;p&gt;最后奉上下载地址：&lt;a class="link" href="http://zrey.com/app/pincap" target="_blank" rel="noopener"
&gt;http://zrey.com/app/pincap&lt;/a&gt;，有mac和windows两个版本。6月1日-6月3日半价优惠。另外我还从朋友那里要来了3个免费名额，在此送给大家。需要的朋友，请发邮件到&lt;strong&gt;&lt;a class="link" href="mailto:greenzorro@163.com" &gt;greenzorro@163.com&lt;/a&gt;&lt;/strong&gt;，邮件主题就写PinCap免费领取。前三名发进来的朋友会获得免费License，晚些时候统一发给大家，手慢无喔。&lt;/p&gt;</description></item><item><title>2014下半年的设计师干货</title><link>https://victor42.eth.limo/post/3374/</link><pubDate>Sun, 22 Jun 2014 10:40:21 +0000</pubDate><author>hi@victor42.work (Victor42)</author><guid>https://victor42.eth.limo/post/3374/</guid><description>&lt;p&gt;&lt;strong&gt;[国外设计第45期]&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;6月的设计师与开发者干货，包含了新的网站应用、框架、栅格系统、游戏平台、激发灵感的资源、Photoshop插件、文本编辑器，还有一些非常棒的新字体。&lt;/p&gt;
&lt;p&gt;下面多数资源都是免费的，或者价格很低，对很多设计师与开发者而言肯定大有用处。&lt;/p&gt;
&lt;p&gt;一如往常，如果你认为我们遗漏了什么，请在评论中告诉我们。如果有什么应用和其他资源，希望在下月刊中看到，可以给@cameron_chapman发tweet建言献策。&lt;/p&gt;
&lt;p&gt;##Scribe&lt;/p&gt;
&lt;p&gt;Scribe是个富文本编辑器框架，由Guardian公开源码。它弥补了浏览器间的差异，包含了一些实用的默认属性。&lt;/p&gt;
&lt;p&gt;&lt;a class="link" href="https://github.com/guardian/scribe" target="_blank" rel="noopener"
&gt;&lt;img src="http://netdna.webdesignerdepot.com/uploads6/whatsnew-jun14/scribe.jpg"
loading="lazy"
alt="开源富文本编辑器框架的网页端用户界面"
&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;##Card&lt;/p&gt;
&lt;p&gt;Card只是单单一行代码，可以使你的信用卡表单更容易使用。它由纯CSS、HTML和JS（不带图片）写成，而且4种不同卡片都带有动画效果。&lt;/p&gt;
&lt;p&gt;&lt;a class="link" href="http://jessepollak.github.io/card/" target="_blank" rel="noopener"
&gt;&lt;img src="http://netdna.webdesignerdepot.com/uploads6/whatsnew-jun14/card.jpg"
loading="lazy"
alt="信用卡表单自动格式化与卡片动画效果"
&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;##Simple Sharing Buttons Generator&lt;/p&gt;
&lt;p&gt;简易分享按钮生成器，使你可以轻松创建Facebook、Twitter、Google+等HTML分享按钮。有多种样式可供选择，而且它是完全免费的。&lt;/p&gt;
&lt;p&gt;&lt;a class="link" href="http://simplesharingbuttons.com/" target="_blank" rel="noopener"
&gt;&lt;img src="http://netdna.webdesignerdepot.com/uploads6/whatsnew-jun14/simplesharing.jpg"
loading="lazy"
alt="简易网页分享按钮生成器在线选择页面"
&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;##PlayCanvas&lt;/p&gt;
&lt;p&gt;PlayCanvas是个很好用的免费开源WebGL游戏引擎，包括支持多人协作的开发工具。&lt;/p&gt;
&lt;p&gt;&lt;a class="link" href="https://playcanvas.com/" target="_blank" rel="noopener"
&gt;&lt;img src="http://netdna.webdesignerdepot.com/uploads6/whatsnew-jun14/playcanvas.jpg"
loading="lazy"
alt="网页端三维游戏引擎多人协作开发界面"
&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;##Kivo&lt;/p&gt;
&lt;p&gt;Kivo可以方便地标注PPT或PDF演示文件。拖入文件，上传，就可以开始了。&lt;/p&gt;
&lt;p&gt;&lt;a class="link" href="https://www.kivo.com/" target="_blank" rel="noopener"
&gt;&lt;img src="http://netdna.webdesignerdepot.com/uploads6/whatsnew-jun14/kivo.jpg"
loading="lazy"
alt="在线演示文件与文档标注协作工具界面"
&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;##The Awesome Free Toolbox&lt;/p&gt;
&lt;p&gt;The Awesome Free Toolbox收集了一些非常棒的网页设计工具，包含了图片资源、模板，甚至虚拟主机。&lt;/p&gt;
&lt;p&gt;&lt;a class="link" href="http://toolbox.haptime.in/" target="_blank" rel="noopener"
&gt;&lt;img src="http://netdna.webdesignerdepot.com/uploads6/whatsnew-jun14/awesome.jpg"
loading="lazy"
alt="优秀网页设计工具与免费模板资源汇总"
&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;##Griddify&lt;/p&gt;
&lt;p&gt;Griddify使得Photoshop自定义垂直栅格线变得快速而简单。它支持Photoshop CS6/CC（不过在CS6里有些bug）。&lt;/p&gt;
&lt;p&gt;&lt;a class="link" href="http://gelobi.org/griddify/" target="_blank" rel="noopener"
&gt;&lt;img src="http://netdna.webdesignerdepot.com/uploads6/whatsnew-jun14/griddify.jpg"
loading="lazy"
alt="设计软件自定义垂直辅助线插件面板图"
&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;##Screenshotter&lt;/p&gt;
&lt;p&gt;Screenshotter是个管理手机截屏的免费iOS应用。它自动将你的照片与截屏区分开，让分享和归档截屏更加容易，你可以在文件夹中排列它们，它还有一些其他功能。&lt;/p&gt;
&lt;p&gt;&lt;a class="link" href="http://screenshotter.net/" target="_blank" rel="noopener"
&gt;&lt;img src="http://netdna.webdesignerdepot.com/uploads6/whatsnew-jun14/screenshotter.jpg"
loading="lazy"
alt="智能管理与分类保存手机截图的客户端"
&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;##Dept. of Design Web Field Manual&lt;/p&gt;
&lt;p&gt;Dept. of Design Web Field Manual，2014夏季版，是个精心组织归类的网页设计资源收藏夹。&lt;/p&gt;
&lt;p&gt;&lt;a class="link" href="http://webfieldmanual.com/" target="_blank" rel="noopener"
&gt;&lt;img src="http://netdna.webdesignerdepot.com/uploads6/whatsnew-jun14/fieldmanual.jpg"
loading="lazy"
alt="精心归类整理的网页设计资源共享网站"
&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;##The Day’s Color&lt;/p&gt;
&lt;p&gt;The Day’s Color是一部色彩摘要，其中经常更新的配色方案，受多方启发产生，包括实物、音乐和其他东西。&lt;/p&gt;
&lt;p&gt;&lt;a class="link" href="http://www.thedayscolor.com/" target="_blank" rel="noopener"
&gt;&lt;img src="http://netdna.webdesignerdepot.com/uploads6/whatsnew-jun14/dayscolor.jpg"
loading="lazy"
alt="每日色彩摘要及创意灵感配色的展示"
&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;##A to Z CSS&lt;/p&gt;
&lt;p&gt;A to Z CSS是一本CSS周刊，涵盖了各种CSS相关话题。每则片段都很短（通常在4到7分钟之间），学起来很容易。&lt;/p&gt;
&lt;p&gt;&lt;a class="link" href="http://www.atozcss.com/" target="_blank" rel="noopener"
&gt;&lt;img src="http://netdna.webdesignerdepot.com/uploads6/whatsnew-jun14/atoz.jpg"
loading="lazy"
alt="前端开发每周教程与技术分享网站界面"
&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;##Tumblr Boilerplate&lt;/p&gt;
&lt;p&gt;Tumblr Boilerplate是打造Tumblr模板的基础。它支持日志类型，基于HTML5，速度也做了优化。&lt;/p&gt;
&lt;p&gt;&lt;a class="link" href="http://www.tumblrboilerplate.com/" target="_blank" rel="noopener"
&gt;&lt;img src="http://netdna.webdesignerdepot.com/uploads6/whatsnew-jun14/tumblr.jpg"
loading="lazy"
alt="快速开发博客主题的开源项目基础框架"
&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;##30 Weeks&lt;/p&gt;
&lt;p&gt;30 Weeks是个实验性的教学项目，旨在为优秀的设计师提供工具、导师、经验和其他资源来创立公司，进而打造改变世界的产品。尽管它是个新项目，却并不廉价：价值10000美元（不过它很有价值，而且有奖学金）&lt;/p&gt;
&lt;p&gt;&lt;a class="link" href="https://www.30weeks.com/" target="_blank" rel="noopener"
&gt;&lt;img src="http://netdna.webdesignerdepot.com/uploads6/whatsnew-jun14/30weeks.jpg"
loading="lazy"
alt="优秀设计师创立公司的教学项目官方页"
&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;##Get Shit Done&lt;/p&gt;
&lt;p&gt;Get Shit Done是个免费设计元素收藏夹，包括按钮、菜单、导航、字体样式、通知、Javascript组件等。它还有付费的高级版，可以获得更多资源。&lt;/p&gt;
&lt;p&gt;&lt;a class="link" href="http://www.creative-tim.com/get-shit-done" target="_blank" rel="noopener"
&gt;&lt;img src="http://netdna.webdesignerdepot.com/uploads6/whatsnew-jun14/getdone.jpg"
loading="lazy"
alt="免费界面组件及导航菜单模板素材列表"
&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;##Pho Devstack 1.0&lt;/p&gt;
&lt;p&gt;Pho Devstack是个前端开发者的自动化管理器。它包括编译、压缩、CSS前缀等工具。&lt;/p&gt;
&lt;p&gt;&lt;a class="link" href="http://pho.madebysource.com/" target="_blank" rel="noopener"
&gt;&lt;img src="http://netdna.webdesignerdepot.com/uploads6/whatsnew-jun14/pho.jpg"
loading="lazy"
alt="前端自动化开发管理器的工作台界面图"
&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;##Filament&lt;/p&gt;
&lt;p&gt;Filament是你网站的应用“商店”，你可以通过拖拽界面元素，在自己网站上轻松安装各种免费应用，不需要写代码。&lt;/p&gt;
&lt;p&gt;&lt;a class="link" href="http://filament.io/" target="_blank" rel="noopener"
&gt;&lt;img src="http://netdna.webdesignerdepot.com/uploads6/whatsnew-jun14/filament.jpg"
loading="lazy"
alt="免代码拖拽安装网站应用的管理控制台"
&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;##Cody&lt;/p&gt;
&lt;p&gt;Cody是你网站免费的HTML、CSS和Javascript片段集。目前这里有导航、简介和购物车等的代码片段。&lt;/p&gt;
&lt;p&gt;&lt;a class="link" href="http://codyhouse.co/" target="_blank" rel="noopener"
&gt;&lt;img src="http://netdna.webdesignerdepot.com/uploads6/whatsnew-jun14/cody.jpg"
loading="lazy"
alt="免费的前端交互常用代码片段网站页面"
&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;##Dimensions Toolkit&lt;/p&gt;
&lt;p&gt;Dimensions Toolkit是个测试响应式设计的离线Chrome插件，它刷新很方便，你可以添加自定义断点。同时也由个在线版。&lt;/p&gt;
&lt;p&gt;&lt;a class="link" href="http://www.dimensionstoolkit.com/" target="_blank" rel="noopener"
&gt;&lt;img src="http://netdna.webdesignerdepot.com/uploads6/whatsnew-jun14/dimensions.jpg"
loading="lazy"
alt="离线测试网页响应式设计的浏览器插件"
&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;##Framer.js&lt;/p&gt;
&lt;p&gt;Framer.js是个原型工具，能将静态模型转化为有动画的交互式原型。&lt;/p&gt;
&lt;p&gt;&lt;a class="link" href="http://framerjs.com/" target="_blank" rel="noopener"
&gt;&lt;img src="http://netdna.webdesignerdepot.com/uploads6/whatsnew-jun14/framer.jpg"
loading="lazy"
alt="支持动效与手势交互的原型制作工具页"
&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;##Tiny PMS Match&lt;/p&gt;
&lt;p&gt;Tiny PMS Match是个Tumblr博客，将Pantone色与各种小物体联系起来。所有照片都用iPhone5拍摄，并通过Snapseed处理。&lt;/p&gt;
&lt;p&gt;&lt;a class="link" href="http://tinypmsmatch.tumblr.com/" target="_blank" rel="noopener"
&gt;&lt;img src="http://netdna.webdesignerdepot.com/uploads6/whatsnew-jun14/pmsmatch.jpg"
loading="lazy"
alt="使用手机拍摄的实物与潘通色对比博客"
&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;##randomColor&lt;/p&gt;
&lt;p&gt;randomColor是个Javascript颜色生成器。但是不像其他生成器，它默认只生成“诱人的颜色”，摈弃了灰色、棕色和墨绿色。&lt;/p&gt;
&lt;p&gt;&lt;a class="link" href="http://llllll.li/randomColor/" target="_blank" rel="noopener"
&gt;&lt;img src="http://netdna.webdesignerdepot.com/uploads6/whatsnew-jun14/randomcolor.jpg"
loading="lazy"
alt="轻量级颜色生成器的配色选择控制界面"
&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;##Famo.us&lt;/p&gt;
&lt;p&gt;Famo.us是个免费开源的Javascript应用框架。它包含了开源3D布局引擎、3D物理动画引擎等。&lt;/p&gt;
&lt;p&gt;&lt;a class="link" href="http://famo.us/" target="_blank" rel="noopener"
&gt;&lt;img src="http://netdna.webdesignerdepot.com/uploads6/whatsnew-jun14/famous.jpg"
loading="lazy"
alt="开源三维动画效果应用开发框架的官网"
&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;##Flexbox Grid&lt;/p&gt;
&lt;p&gt;Flexbox Grid是个基于“flex”显示属性的栅格系统。它集响应式、流式布局于一身，语法简单，还有更多特性。&lt;/p&gt;
&lt;p&gt;&lt;a class="link" href="http://flexboxgrid.com/" target="_blank" rel="noopener"
&gt;&lt;img src="http://netdna.webdesignerdepot.com/uploads6/whatsnew-jun14/flexbox.jpg"
loading="lazy"
alt="基于现代显示属性的响应式栅格系统页"
&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;##Weblox&lt;/p&gt;
&lt;p&gt;Weblox是个简单的网页模板生成器，使你轻松搭建基于Bootstrap的全响应式的页面。&lt;/p&gt;
&lt;p&gt;&lt;a class="link" href="http://www.buildweblox.com/" target="_blank" rel="noopener"
&gt;&lt;img src="http://netdna.webdesignerdepot.com/uploads6/whatsnew-jun14/weblox.jpg"
loading="lazy"
alt="基于框架的响应式网页模板快捷生成器"
&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;##Spritebox&lt;/p&gt;
&lt;p&gt;Spritebox是款所见即所得的工具，用于从CSS精灵图片中创建CSS。你可以生成CSS精灵，合并精灵表等。&lt;/p&gt;
&lt;p&gt;&lt;a class="link" href="http://www.spritebox.net/" target="_blank" rel="noopener"
&gt;&lt;img src="http://netdna.webdesignerdepot.com/uploads6/whatsnew-jun14/spritebox.jpg"
loading="lazy"
alt="所见即所得的网页精灵图片样式生成器"
&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;##Finch&lt;/p&gt;
&lt;p&gt;Finch是一款让用户在任何联网设备上访问本地网站的工具。安装这个app，然后获得本地项目的临时公共链接地址，使用SSL加密。&lt;/p&gt;
&lt;p&gt;&lt;a class="link" href="https://meetfinch.com/" target="_blank" rel="noopener"
&gt;&lt;img src="http://netdna.webdesignerdepot.com/uploads6/whatsnew-jun14/finch.jpg"
loading="lazy"
alt="在不同设备上远程访问本地开发站的工具"
&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;##Respondly&lt;/p&gt;
&lt;p&gt;Respondly是个email和Twitter的团队收件箱，特别适于客服支持、团队工作流等。可以免费试用，费用每月9美元。&lt;/p&gt;
&lt;p&gt;&lt;a class="link" href="https://respond.ly/" target="_blank" rel="noopener"
&gt;&lt;img src="http://netdna.webdesignerdepot.com/uploads6/whatsnew-jun14/respondly.jpg"
loading="lazy"
alt="团队协同收件箱与客户服务工具控制台"
&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;##Mailparser.io&lt;/p&gt;
&lt;p&gt;Mailparser.io通过从邮件中提取数据来自动化你的工作流程。它有30天的免费试用期，费用19美元每月。&lt;/p&gt;
&lt;p&gt;&lt;a class="link" href="http://mailparser.io/" target="_blank" rel="noopener"
&gt;&lt;img src="http://netdna.webdesignerdepot.com/uploads6/whatsnew-jun14/mailparser.jpg"
loading="lazy"
alt="自动提取邮件内容并传输数据的工具台"
&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;##Jeet&lt;/p&gt;
&lt;p&gt;Jeet是根据人类阅读方式，而非机器方式建立的栅格系统。它去除了不必要的内嵌元素，还有死板的分栏规则。&lt;/p&gt;
&lt;p&gt;&lt;a class="link" href="http://jeet.gs/" target="_blank" rel="noopener"
&gt;&lt;img src="http://netdna.webdesignerdepot.com/uploads6/whatsnew-jun14/jeet.jpg"
loading="lazy"
alt="符合阅读习惯的简洁流式栅格系统网站"
&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;##Kickoff&lt;/p&gt;
&lt;p&gt;Kickoff是个创建响应式站点的轻量级前端框架。它由Sass和Grunt打造而成，有详尽的文档说明。&lt;/p&gt;
&lt;p&gt;&lt;a class="link" href="http://tmwagency.github.io/kickoff/" target="_blank" rel="noopener"
&gt;&lt;img src="http://netdna.webdesignerdepot.com/uploads6/whatsnew-jun14/kickoff.jpg"
loading="lazy"
alt="轻量级前端脚手架与响应式站点框架页"
&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;##Great Talks&lt;/p&gt;
&lt;p&gt;Great Talks收集了来自全球各种研讨会的杰出演说与展示。尽管它们不限于设计，但它们谈论的几乎都是创意。&lt;/p&gt;
&lt;p&gt;&lt;a class="link" href="http://greattalks.tumblr.com/" target="_blank" rel="noopener"
&gt;&lt;img src="http://netdna.webdesignerdepot.com/uploads6/whatsnew-jun14/greattalks.jpg"
loading="lazy"
alt="汇集创意演说与行业展示的视频博客页"
&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;##Oozled&lt;/p&gt;
&lt;p&gt;Oozled精心组织收集了整个互联网的创意资源。类别涵盖字体、图标、CMS系统、灵感、研讨会、色彩等。&lt;/p&gt;
&lt;p&gt;&lt;a class="link" href="http://oozled.com/" target="_blank" rel="noopener"
&gt;&lt;img src="http://netdna.webdesignerdepot.com/uploads6/whatsnew-jun14/oozled.jpg"
loading="lazy"
alt="归类整理各类设计资源的共享平台页面"
&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;##uKeeper&lt;/p&gt;
&lt;p&gt;uKeeper可以很方便地保存整个网页。注册，然后给uKeeper发送电子邮件，他们就会自动发送到你的普通邮箱或是应用邮箱（比如Evernote或Instapaper）。&lt;/p&gt;
&lt;p&gt;&lt;a class="link" href="http://www.ukeeper.com/" target="_blank" rel="noopener"
&gt;&lt;img src="http://netdna.webdesignerdepot.com/uploads6/whatsnew-jun14/ukeeper.jpg"
loading="lazy"
alt="快捷将网页整页转存并发送至邮箱的工具"
&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;##Source Serif Pro（免费）&lt;/p&gt;
&lt;p&gt;Source Serif Pro是Adobe的开源衬线字体，有普通、中粗、粗几种字形。&lt;/p&gt;
&lt;p&gt;&lt;a class="link" href="http://adobe.github.io/source-serif-pro/" target="_blank" rel="noopener"
&gt;&lt;img src="http://netdna.webdesignerdepot.com/uploads6/whatsnew-jun14/sourceserif.jpg"
loading="lazy"
alt="开源几何衬线字体的多种字形样式列表"
&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;##Hairvetica（免费）&lt;/p&gt;
&lt;p&gt;Hairvetica是种装饰性矢量字体，看起来像是有型的发丝，它是一个Illustrator文件。&lt;/p&gt;
&lt;p&gt;&lt;a class="link" href="https://www.behance.net/gallery/17063311/Hairvetica-FREE-DOWNLOAD" target="_blank" rel="noopener"
&gt;&lt;img src="http://netdna.webdesignerdepot.com/uploads6/whatsnew-jun14/hairvetica.jpg"
loading="lazy"
alt="发丝线条质感的矢量装饰性艺术字体图"
&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;##Uni Sans Free（免费）&lt;/p&gt;
&lt;p&gt;Uni Sans Free由4种粗细的大写字型组成，它包含一张西里尔字母表。完整的字体族里，还有更多样式和字型粗细。&lt;/p&gt;
&lt;p&gt;&lt;a class="link" href="http://fontfabric.com/uni-sans-free/" target="_blank" rel="noopener"
&gt;&lt;img src="http://netdna.webdesignerdepot.com/uploads6/whatsnew-jun14/unisans.jpg"
loading="lazy"
alt="包含西里尔字母的多字重现代无衬线体"
&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;##Sideshow (10美元)&lt;/p&gt;
&lt;p&gt;Sideshow受招牌的启发，用来通告重大事件效果非常理想。它有40种字型。&lt;/p&gt;
&lt;p&gt;&lt;a class="link" href="http://tendollarfonts.com/products/sideshow" target="_blank" rel="noopener"
&gt;&lt;img src="http://netdna.webdesignerdepot.com/uploads6/whatsnew-jun14/sideshow.jpg"
loading="lazy"
alt="灵感源自招牌的海报大标题设计字体展示"
&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;##ATC Overlook（10美元）&lt;/p&gt;
&lt;p&gt;ATC Overlook是种融合了几何与怪异风格的字体，有370种字型、7种字体粗细。&lt;/p&gt;
&lt;p&gt;&lt;a class="link" href="http://tendollarfonts.com/products/atc-overlook" target="_blank" rel="noopener"
&gt;&lt;img src="http://netdna.webdesignerdepot.com/uploads6/whatsnew-jun14/overlook.jpg"
loading="lazy"
alt="融合几何感与独特风格的多字重现代字体"
&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;##Lastra（10美元）&lt;/p&gt;
&lt;p&gt;Lastra是一款3D的全大写字体，取材于咖啡厅与餐馆的文字。它还包含自定义的花体字和特殊字符。&lt;/p&gt;
&lt;p&gt;&lt;a class="link" href="http://tendollarfonts.com/products/lastra" target="_blank" rel="noopener"
&gt;&lt;img src="http://netdna.webdesignerdepot.com/uploads6/whatsnew-jun14/lastra.jpg"
loading="lazy"
alt="立体三维效果的全大写咖啡馆招牌字体"
&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;##Beelzebrush（35美元）&lt;/p&gt;
&lt;p&gt;Beelzebrush的灵感来源于重金属，总共有8个字体族。包含普通、斜体、粗体，还有棱角分明的粗斜体，更粗的字型有着更统一的边缘。&lt;/p&gt;
&lt;p&gt;&lt;a class="link" href="http://www.myfonts.com/fonts/blambot/beelzebrush-bb/" target="_blank" rel="noopener"
&gt;&lt;img src="http://netdna.webdesignerdepot.com/uploads6/whatsnew-jun14/beelzebrush.jpg"
loading="lazy"
alt="带有手绘笔触感的重金属朋克风格字体"
&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;##Reverse Gothic JNL（25美元）&lt;/p&gt;
&lt;p&gt;Reverse Gothic JNL有着复古的反转样式，用来设计标题非常酷。&lt;/p&gt;
&lt;p&gt;&lt;a class="link" href="http://www.myfonts.com/fonts/jnlevine/reverse-gothic/" target="_blank" rel="noopener"
&gt;&lt;img src="http://netdna.webdesignerdepot.com/uploads6/whatsnew-jun14/gothic.jpg"
loading="lazy"
alt="复古反色黑体样式的设计标题排版效果"
&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;##Newark JNL（47.5美元）&lt;/p&gt;
&lt;p&gt;Newark JNL是一款风格化的厚重衬线字体，基于复古风格的字母表游戏拼贴。诡异的字型宽度使得它格外引人注目。&lt;/p&gt;
&lt;p&gt;&lt;a class="link" href="http://www.myfonts.com/fonts/jnlevine/newark/" target="_blank" rel="noopener"
&gt;&lt;img src="http://netdna.webdesignerdepot.com/uploads6/whatsnew-jun14/newark.jpg"
loading="lazy"
alt="复古方块拼贴风格的粗衬线艺术字展示"
&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;##Lugatype（免费）&lt;/p&gt;
&lt;p&gt;Lugatype是种字型怪异的字体，非常适用于海报、标识、杂志等。&lt;/p&gt;
&lt;p&gt;&lt;a class="link" href="http://www.myfonts.com/fonts/kyryll-tkachev/lugatype/" target="_blank" rel="noopener"
&gt;&lt;img src="http://netdna.webdesignerdepot.com/uploads6/whatsnew-jun14/lugatype.jpg"
loading="lazy"
alt="造型奇特且适用于杂志排版的特色字体"
&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;em&gt;&lt;strong&gt;如果你还了解其他新应用或是资源，觉得它应该出现在此，在评论中告诉我们吧！&lt;/strong&gt;&lt;/em&gt;&lt;/p&gt;
&lt;p&gt;&lt;a class="link" href="http://www.webdesignerdepot.com/2014/06/whats-new-for-designers-june-2014/" target="_blank" rel="noopener"
&gt;原文链接&lt;/a&gt;&lt;/p&gt;</description></item></channel></rss>