gpt-oss-120b 激活参数量 5.1B
gpt-oss-20b 激活参数量 3.6B
两个都是 MoE 架构的推理模型.

karminski-牙医 (@karminski3): 就在刚刚 OpenAI 发布了两个开放权重模型! 给大家带来深度解析!

gpt-oss-120b 激活参数量 5.1B
gpt-oss-20b 激活参数量 3.6B

两个都是 MoE 架构的推理模型.

首先, 这两个模型发布的就已经是量化版本了, 他们的 MoE 层直接用 MXFP4 精度训练的! 这意味着暂时没有办法微调这两个模型了 (现有微调框架不支持, 得等等).

然后, 大家肯定知道 OpenAI 搞了各种奇怪的命名, 比如 O3-mini-high, 这个 high 是啥? 现在答案揭晓, OpenAI 的模型是可以配置推理努力程度的. 分为三档, low, medium, high. 当然 high 模式下跑分最高, 相对的思考时间更长.

Agent 功能适配得非常好, 原生针对 function call, 网页浏览, 执行 python 代码, 各种结构化输出进行了优化. 这也能从从跑分上看出来, 使用 tool 后分数均有提升.

Openai

Open models by OpenAI

Advanced open-weight reasoning models to customize for any use case and run anywhere.

AI 摘要：本文作者作为 Claude Code 的深度用户，详细介绍了自己从 Cursor 转向全程使用 Claude Code 的开发体验，总结出一系列高效实用的使用建议。文章覆盖了 Claude Code 的 VS Code 插件启动、终端界面、权限系统、GitHub 集成、大型代码库表现、经济性、队列系统、自定义扩展、可视化界面及团队协作等方面，旨在帮助开发者最大化 Claude Code 在日常工作中的价值与便捷性。

Builder.io

How I use Claude Code (+ my best tips)

I switched from Cursor's agents to Claude Code weeks ago and I'm not going back. Here's how I use it and my best practical tips

本文系统介绍了 RAG（Retrieval-Augmented Generation，检索增强生成）模型的基本原理、实际应用场景及其在 NodeJS 环境下的基础实现。作者围绕文本数据的预处理、向量化、向量检索、多路召回、召回重排，以及 LLMs（大语言模型）在流程中的作用展开，详细讲解了如何以轻量级工具搭建一个实用的 RAG 检索服务，并讨论了分片策略、编码方法、检索优化及与开箱即用方案的取舍，为构建定制化AI知识问答系统提供了开源思路和技术参考。

1. RAG 简介与应用场景
• RAG 是结合检索（Retrieval）与生成（Generation）的 AI 架构，能提升对专业领域、高时效性内容的问答、代码生成等场景的回答质量。
• 适用于最新知识获取、特定领域知识补充、提升透明度与可解释性、长尾数据检索、垂直智能问答等实际需求。
• RAG 以内容检索为核心，兼容多种方式（如向量检索、倒排索引、图谱检索等），并与 LLMs 配合工作。

2. 文本向量化流程设计
• 数据预处理包括文本清洗和分片，分片方式有固定长度、overlap 重叠、句段分割、结构分片等，应兼顾语义完整性与检索效率。
• 分片时建议结合元信息（如标题、作者、时间等）以辅助召回与重排。
• 编码方式的演变从 one-hot，TF-IDF，到更先进的 Word2Vec、Transformer-based Embedding。实际项目推荐使用现成高效模型如 all-MiniLM-L6-v2。
• 分片及编码细节优化显著影响检索召回质量和成本。

3. 向量检索与多路召回机制
• 检索的核心是计算 Query 与候选文本的向量相似度，常用余弦相似度（Cosine Similarity），因其只关注方向信息，适合高维稀疏空间。
• 采用 hnswlib-node 快速完成高维向量检索，实际实现还需与实际内容并行存储，便于元数据同步。
• 多路召回建议综合关键词检索、向量召回、图谱召回等互补方式，通过加权、融合、重排序等策略提升检索全面性和精度。

4. 召回重排（Re-Ranking）及其优化
• 初次召回后需对候选结果做重排，提升真正相关内容在前，常见方法如下：
• 传统交叉编码器（如 BERT NSP）精排。
• LLMs 或专门 ReRanker 模型（如 BGE-Reranker）基于上下文深度理解排序。
• 分片元信息和人工打标可进一步增强重排效果，提升系统最终响应准确性和相关性。
• 重排虽可提升体验，但不可避免加大系统复杂度和响应耗时，需按场景权衡。

5. LLMs 在 RAG 流程中的多重角色
• 查询改写：修正拼写、分解多意图、格式化表达、扩展关键词等，显著提高召回精准度。
• 输入优化：用LLMs提升分片、编码智能化水平，以及用于多模态信息抽取、知识图谱构建等。
• 生成增强：将高相关检索片段作为上下文，辅助 LLMs 生成更自然、连贯、有据可溯的答案，并可提升系统的可用性与信任度。
• LLMs 贯穿流程多环节，兼具结构化与半结构化内容的处理与优化能力。

6. 方案总结与工程实践建议
• RAG 作为 AI Infra 基础模块，值得深入学习和灵活定制。开箱服务适用于通用场景，复杂定制或增量优化建议自行实现。
• 流程各节点（分片、编码、检索、重排、生成）都可精调优化，针对需求选择技术方案、服务模型和参数设定。
• RAG 在提升 LLMs 时效性、知识深度、成本控制等方面具备不可替代优势。

◂Ⓘ▸YAYOI の 夢 (@Yayoi_no_yume)我不知道啊，我看见Nekopara我就进来了，结果发现这是一款2.9k Stars的超级长文本翻译工具！
如果有不好意思上传给平台的“正经”文本，还能调用本地的SakuraLLM（特别训练的中日翻译模型）来进行翻译。
先星星为敬！
https://github.com/NEKOparapa/AiNiee

GitHub

GitHub - NEKOparapa/AiNiee: 一款专注于Ai翻译的工具，一键自动翻译RPG SLG游戏，Epub TXT小说，Srt Vtt Lrc字幕，Word MD文档等等复杂长文本。

一款专注于Ai翻译的工具，一键自动翻译RPG SLG游戏，Epub TXT小说，Srt Vtt Lrc字幕，Word MD文档等等复杂长文本。 - NEKOparapa/AiNiee

AI 摘要：本期 Node Weekly（第588期，2025年7月29日）带来了 JavaScript 生态的最新动态，内容涵盖众多 JavaScript 运行时历程的重要综述、TypeScript 与 Node.js 技术升级、安全及工具更新，以及业界有趣开发实践。文章帮助开发者全面了解前后端生态进展，关注实用工具及 AI 集成，并强调代码安全与生产力提升。

1. 生态与社区动态
• The many, many, many JavaScript runtimes of the last decade 长文回顾了近十年间主要 JavaScript 运行时（Runtime）与引擎的发展，包括 Node.js、云平台专有运行时及多种不那么知名的方案，为开发者补全 JS 生态知识。
• TypeScript 5.9 RC 发布，新增 import defer 及 --module node20 等特性；Node.js 生态工具链持续跟进最新规范。
• Google 推出 OSS Rebuild 项目，目标通过包与上游工件比对增强 npm 等开源生态的安全性。
• npm 生态持续遭受攻击，is 包通过通过拼写钓鱼域名劫持进行钓鱼。
• HTML 2025 状况调查开启，旨在收集前端开发者对 HTML 发展状况的意见。
• 一名开发者声称讨论 tabs 与 spaces 的争论趋于结束，主流语言倾向使用 spaces。
• 用 Node.js 和 Postmark 构建的电子邮件控制的 Game Boy 模拟器
• es-toolkit 已成为 Lodash 的 100% 兼容替代方案，突出生态兼容性成果。

2. 技术专题与实践分享
• 介绍 Unix 域套接字（Unix Domain Sockets）在 Node.js 内部进程通信（IPC）中的优势，约可降低 50% 延迟，相较 TCP loopback 更高效。
• 采访 Bun 作者，解析 Bun 作为 Node.js 生态“替代品”的兼容性挑战与工程实践。
• 文章详述如何构建暴露数据资源给大语言模型（LLM）的 Node.js MCP 服务器。
• 探讨 TypeScript 多仓库（multi-repo）间的类型安全问题及解决方法
• 分析 JavaScript 逻辑赋值操作符的语法进步及实际开发中带来的便利。

3. 代码与工具
• AudioTee.js：为 Node.js 捕捉 macOS 系统音频输出，并以 PCM 格式定期输出。
• Transformers.js 3.7：在浏览器与 Node.js 侧支持 ONNX 预训练模型推理，v3.7 增加了 Voxtral（语音转录及音频理解）、LFM2 和 ModernBERT 支持。
• match-sorter 8.1：为数组筛选和排序提供确定性算法，便于开发者实现可预期的最优匹配排序。
• 其他值得关注的工具/库更新：Inquirer 12.9（终端交互式输入）、Node File Trace 0.30（依赖追踪）、MongoDB Node.js Driver 6.18、node-rate-limiter-flexible 7.2、Ghost 6.0 RC、@google-cloud/bigtable 6.2、Axios 1.11、TIFF 7.1、ESLint v9.32.0 等等。

Buttondown

The many, many, many JavaScript runtimes of the last decade

This last decade has seen an inundation of new JavaScript runtimes (and engines in equal measure), enabling us to run JavaScript in all manner of contexts...

AI 摘要：Chrome DevTools 139 版本专注于提升开发者体验、生产力及工具可靠性，修复了大量已知问题并增强了测试覆盖率。此次更新亮点包括在 AI 辅助中支持上传图片以提供视觉上下文，在 Network 面板中新增请求头列，以及对核心面板如 Performance、Sources 和 Elements 的持续改进，同时优化了各种调试和辅助功能，旨在提供更流畅、更稳定的开发工作流程。

1. 工具性能与稳定性改进
• 核心开发体验提升: 本版本优先提升产品卓越性，解决了大量已知问题，包括长期存在的视觉故障、可用性问题和设计不一致，将开放问题数量减少了 27%。
• 幕后测试覆盖率增强: 大幅提升了 DevTools 的测试覆盖率，调查并修复复杂的测试失败，并将测试相关问题减少了 54%，从而带来了更流畅、可靠和高效的日常调试和开发工作流程。

2. AI 辅助与智能功能
• AI 辅助支持图片上传: 在 AI 辅助面板中，现在不仅可以自动截屏，还可以上传任意图片到与 Gemini 的聊天中，为提示提供额外的视觉上下文。
• Google I/O 2025 亮点整合: 强调了在 Google I/O 2025 中展示的新 DevTools 功能，包括 Sources 面板连接工作区并保存修改、Gemini 驱动的 CSS 修改和保存、查询性能洞察、自动标注性能发现，以及新的性能洞察功能（重复 JavaScript 和遗留 JavaScript）。

3. 开发者工具面板更新
• Network 面板增强: 在 Network 面板中，现在可以右键点击请求表格中的列名，并选择多个请求头将其添加为列。
• Application 面板改进: 清除 IndexedDB 对象存储时，现在会显示确认对话框，以防止不可逆的操作。
• Sources 面板优化: Logpoints 和条件断点旁边的代码行徽章现在在悬停时会显示相应的日志消息或条件工具提示。
• Performance 面板新洞察: "Layout shift culprits" 洞察现在显示未设置大小的图片链接；"LCP request discovery" 洞察现在显示最早起始点之后的图片加载延迟；修复了部分用户本地存储的过期节流设置格式；事件日志过滤速度得到提升。
• 动画面板调整: 弃用了预览截图功能，因为点击预览动画组提供了类似且更好的体验。
• 辅助功能改进 (Accessibility): Sources > DOM 断点侧边栏（如果存在）添加了 aria-labels；修复了 Console 中 Live expression 文本字段内的 Shift + Tab 键盘导航问题；Settings 现在支持 Cmd/Ctrl + +/-/0 缩放快捷键；Elements > Styles 中的 CSS 提示和警告图标以及 Angle clock 现在可以通过键盘聚焦。

Chrome for Developers

What's new in DevTools, Chrome 139  |  Blog  |  Chrome for Developers

A more reliable and productive Chrome DevTools, support for arbitrary image upload in AI assistance for styling, and more.

AI 摘要：本期《Frontend Focus》第702期聚焦前端领域的最新动态、实用工具、深度文章与观点。内容涵盖SVG基础入门、HTML 2025年度调查、AI辅助调试、可访问性标准解读、CSS动画、性能优化、前端框架更新等多个方面，为开发者提供了丰富的学习资源和行业洞察，同时介绍了多款前端实用工具和库，以及一些趣味简讯和广告。

1. 社区动态
• HTML 2025 年度调查启动：第三届年度 HTML 调查，旨在了解开发者如何使用 Web 平台日益增长的能力，其结果将直接影响明年 Interop 项目的优先级。
• WCAG 纯英文版：让无障碍标准易于理解：一个可搜索的资源，为官方 Web 内容无障碍指南（WCAG）提供了一个初学者友好的指南，使其更易于消化。
• Firefox 141 发布：新版本增加了垂直标签页和 AI 标签组织智能功能。
• GitHub 支持欧盟主权技术基金：GitHub 正在倡导设立一项欧盟主权技术基金。
• 为什么不信任 WCAG 2.2 以及对 3.0 的期望：Daniel Schwarz 提出了他对 WCAG 2.2 的担忧，并探讨了 WCAG 3.0 如何改进这些问题。
2. 文章、观点与教程
• 时间不多，范围却很多：滚动驱动动画的 animation-ranges 速查表 —— 一篇关于滚动驱动动画及其可用选项的入门指南。
• 小屏幕，大影响：为功能手机开发 Web 应用的被遗忘艺术：探讨了功能手机在2025年仍有意义的原因，以及如何为这类设备构建和发布Web应用。
• Tailwind 是“最糟糕的综合体”：一篇观点文章，认为 Tailwind 是 “将 CSS 和现代 Web 开发中所有糟糕之处结合在一起的令人遗憾的倒退”。
• 2025 年前端性能检查清单：一份高层次的清单，列出了创建快速、高效 Web 应用时需要牢记的事项。
• 利用 Web Speech API 让你的网站开口说话：一种简单直接的方法，为网站添加语音功能。
• 糟糕导航的隐性成本：信息架构如何直接影响业务指标：探讨了信息架构对业务指标的直接影响。
3. 开发工具与资源
• Glass3D 生成器：一个生成 3D 玻璃效果的 CSS 工具：一个允许编辑背景滤镜设置、颜色和纹理的工具，并实时预览效果。
• Astro 5.12 发布：新版本特性包括升级的 Netlify 开发体验、内容加载器中的 TOML 支持等。
• Tiptap v3：无头富文本编辑器框架：为构建强大的富文本编辑体验提供了基础，v3 版本包含大量开发者体验改进，如动态UI的卸载和重新挂载、创建自定义视图的 “Markviews”、SSR 模式等。
• macOS 光标 PNG 图片集合：一个提供各种 macOS 光标 PNG 图片的网站。

AI 摘要：本期《React Status》全面概述了 React 生态系统的最新进展，包括全新 UI 组件库的发布、React Compiler 文档的改进、避免常见 React 和 Next.js 开发错误的实用指南，以及 AI 辅助 UI 构建的效率对比。此外，还深入探讨了 Zustand 状态管理、React Router 与 Server Components 的未来集成，以及 React 图形可视化的应用。文章还收录了一系列新增及更新的代码工具和库，并简要介绍了 JavaScript 领域的其他重要动态，如 Bun 的新版本发布和新的全栈框架尝试。

1. 社区动态与文章
• React Compiler 新版文档 – React 团队正努力改进 React Compiler（一个处于发布候选阶段的预编译优化工具）的官方文档，以便开发者深入学习和使用。
• Untitled UI React: 全新 UI 组件库 – 介绍了一个基于 Tailwind CSS 和 React Aria 构建的开源 UI 组件库，支持复制粘贴式开发，并提供 PRO 版本包含更多组件和 Figma 集成。 #组件库 #tailwind
• Figma MCP vs Claude: UI 构建之战 – 探讨了将 Figma 中的 UI 视图转换为可运行 React 代码的最佳方法，对比了使用 Figma 自身的 MCP 服务器和 Claude Code 通过截图实现的效果。 #AI #MCP
• Zustand 状态管理入门 – 为对 Zustan 感兴趣的开发者提供了全面介绍，强调这个轻量级状态管理解决方案的成熟、流行和经过实战检验的特性。
• React Router 与 React Server Components 的未来 – 探讨了 React Router 用户在与 React Server Components 集成时将面临的重大影响和未来发展方向。
• 使用 Matter.js 和 React Native Skia 构建 2D 游戏风格物理效果 – (文章) 详细讲解如何实现 2D 游戏中的物理效果。
• 将 Next.js 站点迁移至 Eleventy 并提升 24% 性能 – (文章) 分享了从 Next.js 迁移到 Eleventy（一个流行的 Node.js 静态站点生成器）的经验，并展示了性能提升。
• 使用 Okta 创建带有社交登录认证的 React PWA – (文章) 指导如何构建一个支持社交登录认证的 React 渐进式 Web 应用 (PWA)。

2. 代码与工具 (Code, Tools & Libraries)
• Reagraph: WebGL 驱动的 React 网络图可视化库 – 提供详细文档和 Storybook 实例，用于在 React 中实现基于 WebGL 的网络图可视化。 #webgl
• React Unity WebGL 10.0: 在 React 应用中嵌入 Unity WebGL 应用 – 庆祝其发布 8 周年，帮助将 Unity WebGL 应用与 React 应用集成并进行通信。
• React CodeMirror: CodeMirror 编辑器组件 – 使在 React 中使用流行的 JavaScript 代码编辑器 CodeMirror 变得更简单，提供了可定制的演示。
• React Native Audio API 0.6.5 – 基于 Web Audio API 的音频引擎。
• React Stripe.js 3.8 – Stripe.js 和 Stripe Elements 的 React 组件。
• React Native Rich Text Editor 1.10 – React Native 富文本编辑器。

3. JavaScript 领域其他动态 (Elsewhere in JavaScript)
• Platformatic 在 Node.js 中运行 Laravel 应用 – Platformatic 公布了在 Node.js 环境下运行 Laravel 应用的新方法。
• Bun v1.2.19 发布 – Bun 发布了新版本，新增了 pnpm 风格的隔离 node_modules 选项、交互式包更新器、VS Code 测试浏览器集成、更快的 Postgres 客户端等。
• eslint-config-prettier 包安全事件分析 – 分析了 eslint-config-prettier 包最近被入侵的事件，包括其工作原理和发生过程。
• bhvr: 基于 React 的全栈技术栈 – 介绍了一个构建全栈应用的有趣新尝试，该技术栈由 Bun, Hono, Vite 和 React (bhvr) 组成。

react.dev

React Compiler – React

The library for web and native user interfaces

AI 摘要：本文通过一项随机对照试验（RCT）研究了 2025 年初 AI 工具对经验丰富的开源开发者生产力的影响。研究发现，使用 AI 工具的开发者完成任务的时间比不使用时长 19%，即 AI 反而降低了他们的效率。这一结果与开发者的预期（认为 AI 会加速 24%）和专家预测形成鲜明对比。文章探讨了这一现象背后的可能原因，并尝试调和 RCT 结果与 AI 基准测试成绩及轶事报告之间的矛盾，强调了在现实场景中评估 AI 影响的重要性。

1. 研究动机：
• 探讨 AI 工具在现实环境中的影响，弥补基准测试（benchmarks）在真实性上的不足。
• 基准测试常因任务简化或缺乏上下文而高估或低估 AI 能力，而现实中的 AI 对 AI 研发的影响可能带来风险（如快速进步导致监管失控）。
• 通过开发者生产力研究，提供补充证据以评估 AI 对研发加速的整体影响。

2. 研究方法：
• 招募 16 名经验丰富的开源开发者，来自平均星级 22k+、代码量 100 万行以上的大型仓库。
• 开发者提供 246 个真实问题（bug 修复、功能开发、重构等），随机分配是否允许使用 AI 工具。
• 使用 AI 时，开发者可自由选择工具（主要为 Cursor Pro 与 Claude 3.5/3.7 Sonnet）；不使用 AI 时，禁止任何生成式 AI 辅助。
• 任务平均耗时 2 小时，开发者记录屏幕并自报完成时间，报酬为每小时 150 美元。

3. 核心结果：
• 使用 AI 工具时，开发者完成任务时间延长 19%，与预期加速 24% 及事后仍认为加速 20% 的认知形成反差。
• 数据显示，AI 工具在现实任务中显著减缓了开发速度。
• 文章澄清未提供证据支持的观点，如 AI 对大多数开发者无加速作用、未来无潜力加速等。

4. 因素分析：
• 研究分析 20 个可能导致减缓的因素，发现 5 个可能原因（具体因素详见论文）。
• 排除实验偏差，如开发者使用前沿模型、遵守分配规则、提交的 PR 质量无明显差异等。
• 减缓现象在不同结果测量、估计方法及数据子集分析中一致。

5. 讨论：
• 对比 RCT 结果、基准测试（如 SWE-Bench）及轶事报告，发现证据部分矛盾。
• RCT 显示 AI 减缓 20 分钟至 4 小时的现实编码任务；基准测试显示 AI 在困难任务中表现优异；轶事报告称 AI 在多场景中帮助显著。
• 提出三种假设解释矛盾：RCT 低估能力、基准及轶事高估能力、或三者反映不同任务分布。
• 指出 AI 在高标准或隐性要求（如文档、测试覆盖率）场景中能力可能较低，基准测试因任务简化可能高估能力，轶事报告可能不准确。

6. 未来展望：
• 计划继续此类研究，追踪 AI 加速或减缓趋势，特别是在难以操控的现实评估中。
• 若 AI 显著加速开发者，可能预示 AI 研发快速进步，带来扩散风险、监管失控或权力集中等问题。
• 强调现实场景评估与基准测试结合的重要性，以全面理解 AI 能力及影响。

metr.org

Measuring the Impact of Early-2025 AI on Experienced Open-Source Developer Productivity

We conduct a randomized controlled trial to understand how early-2025 AI tools affect the productivity of experienced open-source developers working on their own repositories. Surprisingly, we find that when developers use AI tools, they take 19% longer than…

AI 摘要： 本期《Frontend Focus》（第 701 期，2025 年 7 月 16 日）涵盖了前端开发的多个热点话题，包括在严格约束下创新的项目案例、Apple 在浏览器引擎选择上的争议、WebAssembly 的广泛应用、CSS 新特性和工具的使用，以及一系列实用的前端工具和资源。文章还提到 Mozilla 即将为 Firefox 添加 WebGPU 支持，并探讨了 AI 对开源开发者生产力的影响，旨在为前端开发者提供最新的技术动态和实用技巧。

1. “I’m More Proud of These 128 Kilobytes Than Anything I’ve Built Since”：通过一个项目案例，Mike Hall 展示了在带宽和处理能力等严格约束下的创新设计，提醒开发者考虑更广泛的用户需求，设计更具包容性的产品。 #性能优化
2. “Apple’s Browser Engine Ban Persists, Even Under the DMA”：Open Web Advocacy 指出 Apple 在 iOS 浏览器引擎选择上未能有效遵守欧盟《数字市场法案》（DMA），存在阻碍竞争的问题。
3. “WebAssembly: Yes, But for What?”：Andy Wingo 在 ACM Queue 上分享了 WebAssembly 在浏览器和服务器端的广泛应用，探讨其如何逐渐渗透到各个领域。 #WASM
4. 简讯（IN BRIEF）：
• Mozilla 将在 Firefox 141 中添加 WebGPU 支持（初期仅限 Windows，后续扩展至 macOS 和 Linux）。
• 一份报告分析了 AI 对开源开发者生产力的影响。
• Firefox 团队寻求用户对 Mozilla 浏览器的真实反馈。
• Andy Bell 分享了一个 CSS 代码片段，为锚定 URL 添加必要的空间，提升用户体验。
5. 文章、观点与教程（Articles, Opinions & Tutorials）：
• CSS 行长度设置 - Daniel Schwarz 介绍如何利用 clamp() 和 calc() 等工具更轻松地设置文本行长度，并展望未来发展。
• 纯 HTML 和 CSS 编写 - Joel Dare 分享为何在 2025 年仍坚持使用纯 HTML 和 CSS。
• ARIA 角色与属性使用 - Michael Beck 讲解如何有效使用 ARIA 角色和属性。 #WCAG
• 滚动行为设计 - Megan Chan 探讨何时应保存用户的滚动位置。
• AI 与网页设计 - Noah Davis 认为模板而非 AI 才是网页设计的真正“杀手”。
6. 工具、代码与资源（Tools, Code & Resources）：
• SveltePlot - Gregor Aisch 开发的 Svelte 可视化框架，基于 D3，支持多种图表类型。
• Eleventy LibDoc - IT Automotive Design System 提供的一个 Eleventy 起步项目，用于创建美观直观的文档站点。
• SplitThing - Florian Reintgen 开发的工具，可将图像分割为自定义网格并下载。
• Chili3D - xiange chen 开发的基于 Web 的 3D CAD 应用，利用 WebAssembly 和 Three.js 实现接近原生性能。 #webgl
• designtokens.fyi - Design Systems House 提供的设计令牌术语词汇表，包含 33 个相关术语解释。
• Check Server-Side Rendering (SSR) - Punit Sethi 开发的工具，帮助检查网页元素的服务器端渲染情况。
• FontGen - 智能字体配对工具，包含 1000+ 字体（需注册）。
• Pandabox - StJohn 开发的 Astro 轻量级灯箱和画廊组件。

Medium

I’m more proud of these 128 kilobytes than anything I’ve built since

I once worked with a UI designer who insisted it was impossible to create a product that was both within the Web Content Accessibility Guidelines (WCAG) and aesthetically pleasing. ‘It can be pretty…

最近被搞得很不想写代码了，我反思了一下，我只是被陷入了 AI Coding 的泥沼之中，我被 claude 生成的代码恶心地不行，但是我又不忍心完全放弃 AI 自己从头写这些代码，所以我已经来回挣扎重构了好多次了，每次花大精力重构到一半又觉得如此折腾很不对劲所以又忍痛完全退回，这的确令人十分沮丧，不过我现在改变了我的心境，对 AI 生成的代码保持「慈悲」心态：若它写的代码其能顺利运行，便是圆满了一段善缘；若尚有瑕疵，亦如众生各有业力，不必强求完美，但以平常心护持即可。

AI 摘要：本文详细介绍了 Figma 的 Dev Mode MCP Server（目前处于开放测试阶段）的功能、使用方法和最佳实践。Dev Mode MCP Server 通过 Model Context Protocol 提供了一个标准接口，使 AI 代理能够与 Figma 设计文件交互，直接将设计转化为代码，并提取设计上下文和组件信息。文章涵盖了如何启用服务器、配置客户端、提示工具使用以及优化设计文件和提示以获得更好的代码生成效果，旨在帮助开发者和设计团队更高效地进行设计到代码的工作流程。

功能与适用范围：
• Dev Mode MCP Server 目前为开放测试版，适用于 Professional、Organization 和 Enterprise 计划的 Dev 或 Full 座位用户。
• 需使用支持 MCP Servers 的代码编辑器（如 VS Code、Cursor、Windsurf、Claude Code）以及 Figma 桌面应用。
• 主要功能包括从 Figma 帧生成代码、提取设计上下文（如变量、组件、布局数据）以及通过 Code Connect 提高代码输出质量和一致性。

使用步骤：
• 步骤 1：启用 MCP Server - 在 Figma 桌面应用中通过 Preferences 启用 Dev Mode MCP Server，服务器本地运行于 http://127.0.0.1:3845/sse 。
• 步骤 2：设置 MCP 客户端 - 根据不同代码编辑器（如 VS Code、Cursor、Windsurf、Claude）配置 MCP 服务器连接，涉及在设置中添加服务器 URL 并确保连接成功。
• 步骤 3：提示 MCP 客户端 - 通过选择 Figma 中的帧或层，或使用链接，提供设计上下文给 AI 客户端，并通过提示生成代码或提取信息。

工具与用法建议：
• get_code - 用于生成代码，支持 React + Tailwind 默认输出，可通过提示自定义框架（如 Vue、HTML+CSS、iOS）或使用特定组件。
• get_variable_defs - 返回所选内容中使用的变量和样式（如颜色、间距、字体），帮助生成代码时引用设计令牌。
• get_code_connect_map - 提供 Figma 节点 ID 与代码库中对应组件的映射，确保设计到代码的无缝转换。
• get_image - 截取所选内容的屏幕截图以保留布局保真度，可在设置中启用或使用占位符。

Dev Mode MCP Server 设置：
• 提供额外的偏好设置，如启用 get_image 工具、使用占位符、启用 Code Connect 以重用代码库组件。

MCP 最佳实践：
• 结构化 Figma 文件 - 使用组件、变量、语义化命名、自动布局和注解以提供清晰的设计意图，确保生成的代码一致且符合设计系统。
• 编写有效的提示 - 清晰的提示可指导 AI 输出符合框架、文件结构或特定路径的代码，示例包括指定框架（如 SwiftUI、Chakra UI）或组件路径。
• 触发特定工具 - 如结果不理想，可在提示中明确指定工具（如 get_code 或 get_variable_defs ）以获取更准确的上下文。
• 添加自定义规则 - 设置项目级指导规则（如布局优先级、文件组织、命名模式）以保持输出一致性，减少重复提示。
• 分解大型选择 - 将大屏幕拆分为小组件或逻辑块以提高生成速度和可靠性，避免上下文过多导致的错误或不完整响应。

注意事项：
• 由于处于测试阶段，功能和设置可能不完整，可能遇到 bug 或性能问题。
• 用户可通过 Figma 内的反馈表单提供意见，帮助改进功能。

AI 摘要：本文详细介绍了如何通过 Claude Code 的 Hook 功能设置任务完成后的声音提醒，帮助用户及时获知 AI 编程任务的完成状态，避免时间浪费。文章以 macOS 为例，提供了具体的配置文件编辑方法和注意事项，同时引用了官方文档以供深入了解 Hook 的多种参数和应用场景。

见微知著 · TheSignalwise

Claude Code任务完成提醒设置教程(Hook)

今天我们绝大多数编程的体验已经发生了很大的变化，其中最大的变化就是当我们使用AI编程软件的时候，提交给大模型任…

NadeshikoManju@薫る花は凛と咲く7月5日播出(@Manjusaka_Lee)：讲一下目前自己对于目前 AI 路线的一个小想法
个人目前觉得 AI Agent 在迎来自己的真正的 iPhone4 时有一个问题是需要解决。即如何高效的去创建 Sandbox。
如同大家所看到的一样，目前 MCP 也好，还是其余协议也好，随着我们赋予模型或者 Agent 的权限越来越大。意味着攻击手段也会越来越多样化（如同容器一样，你可能永远不知道你引入的 prompt 或者你依赖的 API Provider 加了什么料），比如最近的一个很有趣的例子是附录1提到基于 Supabase MCP 攻击。
这意味着我们需要一个更有效率的 Sandbox 让我们进行 dry run 的操作。
而更有效率的 Sandbox 意味着几点
1. 强隔离（runc 这种逃逸满天飞的还是有点不太适合）
2. 启动快
3. 能耗小
而在这方面，Apple 实际上进行了一个先手布局。在 macOS 11.0 之后，Apple 发布了一套快速，轻量的虚拟框架 vz（参见附录2），而最近，Apple 更进一步的发布了开源的 container 套件（参见附录3）。VZ 开发体验相对良好，能耗表现极好。我觉得是为后续 macOS 生态的 AI Agent 铺平了道路
说回下一个时代的 Sandbox，看着几点主要诉求，可能很多同学第一时间就反应过来了这不是 Serverless 之前衍生出来的高性能的安全容器的需求嘛？这个时候，再去会看 NSDI 2020 AWS 发布的 Firecracker: Lightweight Virtualization for Serverless Applications （参见附录4），就会有一种恍惚感。技术路线总是会在不经意间交叉
而至于 Windows，其实 WSL 的开源我觉得也是在为后续的可定制化的 AI Sandbox 打样。但是我自己对于 hyperv 体系不甚了解就不在此处乱讲了。
差不多就这样，深夜的一点胡乱思考
附录：
1. https://read.readwise.io/new/read/01jztvkzkv792149kne27x2v95
2. https://developer.apple.com/documentation/virtualization
3. https://github.com/apple/container
4. https://www.usenix.org/conference/nsdi20/presentation/agache

AI 摘要：本期 JavaScript Weekly（#743，2025年7月4日）内容涵盖了 JavaScript 生态系统的最新动态，包括 Deno 2.4 的重大更新、ECMAScript 2025 新特性解析、以及多个工具和库的发布。尽管受到热浪和假期的影响，内容略显精简，但仍包含了丰富的文章、工具和行业新闻，适合对 JavaScript 及相关技术感兴趣的开发者深入了解最新趋势和技术进展。

1. 技术更新
• Deno 2.4 更新：重新引入 deno bundle 命令，支持服务器和客户端单文件打包，兼容 npm 和 JSR 依赖，具备自动树摇功能；新增 import 导入任意文件功能，OpenTelemetry 支持稳定，标志着一次重要的版本更新。
• Bun v1.2.18 发布：作为 Deno 的竞争者，Bun 也推出了新版本，具体细节未展开，但值得关注。
• ECMAScript 2025 新特性：Paweł Grzybek 提供了以示例为主的视角，介绍 ES2025 的新特性，与之前 Dr. Axel 的解读形成补充。
• 其他工具发布：包括 Rspack 1.4（基于 Rust 的快速打包工具，支持 WebAssembly）、Electron 37.0、ESLint 9.30.0/9.30.1、Astro 5.11、Babel 7.28.0 和 Three.js r178 等。

2. 行业简讯
• JavaScript 商标纠纷：Ryan Dahl 更新了与 Oracle 关于 JavaScript™ 商标的纠纷进展，Oracle 有一个月时间回应 Deno 的取消请愿。
• JS1024 代码高尔夫比赛：一项年度 JavaScript 代码高尔夫比赛，主题为“Creepy”，参赛者需在 1024 字节内完成程序，截止日期为 7 月 19 日。
• 微软开源：GitHub Copilot Chat 扩展在 VS Code 上开源，展示微软扩展开发方式。

3. 文章与教程
• 如何构建 AI 驱动的颜色搜索引擎：Lúí Smyth 介绍如何结合多种技术打造 AI 驱动的颜色建议工具，技术应用具有广泛实用性。 #AI #color
• 轻量级响应式状态管理：Loren Stewart 探讨使用 JavaScript 原生代理（Proxies）构建响应式状态管理系统，避免依赖外部库。
• Next.js 全栈开发：Robin Wieruch 指导如何使用 Next.js 15 和 React 19 进行全栈开发，适合希望扩展技能的前端开发者。
• JavaScript 解析谜题：Hillel Wayne 分享一个简单的 14 字符 JS 问题，挑战开发者解析能力，是今年最受欢迎的内容之一。
• 2025 Node.js 模式：Ashwin 反思 Node.js 当前潜力，涵盖 ES 模块、内置 Web API、测试运行器等新特性。
• 其他专题：包括通过超声波传输数据（Lorenz Diener）、React 信号知识（Ryan Carniato）、Mapbox 3D 模型指南（Mykola Chernyshevskyi）、JSDoc 优化开发流程（Jordan Booker）。

4. 代码与工具
• Milkdown：一个插件驱动的 WYSIWYG Markdown 编辑器框架，支持高度定制化。
• Repomix 1.0：将代码库打包为 AI 友好格式，适合用 LLM 分析代码。
• snapDOM 1.8：快速准确地将 DOM 节点捕获为 SVG 图像，保留样式和字体。 【这个看着挺不错的 相比 html2canvas 等】
• Time Picker：基于 shadcn/ui 的日期时间选择组件，简洁优雅。
• 其他工具：包括 Protobuf-ES 2.6、React Chessboard 5.0、Faker 9.9、Pixi.js 8.11 等。

5. 其他生态系统动态
• Patreon 国际化重构：涉及超 10,000 个 JavaScript 调用点的国际化重构故事。
• Cloudflare Containers：Cloudflare 推出新容器服务，扩展 Workers 功能。
• One Million Chessboards：在线 1000x1000 棋盘项目的工程和扩展故事。
• GitHub 漏洞赏金：Sharon Brizinov 分享通过追踪 GitHub 强制推送的提交发现价值 25k 美元的秘密。
• PlanetScale 进军 Postgres：MySQL 云服务提供商进入 Postgres 领域，处于私有预览阶段。
• Strudel：浏览器内编码音乐的工具，提供实时示例。

Deno

Deno 2.4: deno bundle is back | Deno

Deno bundle is back, alongside the addition of bytes and text imports, stabilized built-in OpenTelemetry, a new --preload flag, simplified dependency management with deno update, and more.

AI 摘要：本文基于 Peter Naur 1985 年的论文《Programming as Theory Building》，探讨了编程的本质不仅是编写代码，而是构建一个共享的理论模型，即系统如何运作、为何如此设计以及如何演变的心理模型。作者指出，当前 AI 工具的广泛使用导致了“无理论”代码的危机，开发者缺乏对代码的深层理解，系统逐渐失去一致性，而高级开发者在构建理论、维护架构一致性以及指导团队方面变得尤为重要。文章强调，编程的核心是人类智力活动，AI 无法替代理论构建和领域理解，呼吁保留编程中的人类元素。

cekrem.github.io

Programming as Theory Building: Why Senior Developers Are More Valuable Than Ever

Peter Naur's 1985 theory of programming explains why experience matters more in the age of AI-generated code

AI 摘要： 本文是 Node Weekly 第 583 期的内容，发布于 2025 年 6 月 24 日，聚焦 JavaScript 和 Node.js 生态系统的最新动态与技术进展。文章涵盖了 AdonisJS 7 的路线图、Node.js 及其替代运行时 Bun 的最新版本更新、Vite 7.0 的发布预告，以及多线程、序列化、正则表达式等技术主题的深入探讨。此外，还介绍了多个工具和框架的更新，如 SVGO 4.0、Hono 4.8 等，并分享了 JavaScript 领域的其他重要新闻和资源。

1. AdonisJS 7 路线图：
• 介绍了 AdonisJS 作为一个 TypeScript 优先的“全能型”Web 框架，其开发者计划加快重大版本的发布频率。
• v7 版本亮点包括 Node.js 诊断通道支持、类型安全的 URL 构建器、新加密层、对通知和 TanStack Query 的原生支持等。
• 作者 Romain Lanz 还提供了 Adonis 与 Nest 的对比分析，并鼓励读者提供反馈。

2. 简讯 (In Brief)：
• Node v20.19.3 (LTS) 发布，WebCryptoAPI 中的 Ed25519 和 X25519 提升为稳定状态，更新根证书和依赖项，并包含 V8 修复补丁。
• Bun v1.2.17 支持服务器端代码的提前打包，进一步提升 Node.js 兼容性。
• Vite 7.0 刚刚发布，更多细节将在 JavaScript Weekly 的周五报道中披露。

3. 技术文章与教程：
• Worker Threads: Node 中的多线程指南：探讨 Node 的非阻塞事件驱动模型，以及如何通过成熟的 worker threads 功能实现多线程应用 (作者：Lizz Parody)。
• Node 中序列化方法的基准测试：对比 JSON 及二进制选项如 protobuf 和 msgpack 的性能 (作者：Adam Faulkner)。
• JavaScript 中正则表达式使用技巧：Dr. Axel Rauschmayer 提供了一些方法，使正则表达式编写更加简洁和易读。
• 其他内容包括使用 AI 生成 Playwright 测试、MongoDB 测试、CommonJS 与 ESM 桥接、以及基于 Node 和 OpenAI 构建 RAG 系统等教程和视频。

4. 代码与工具 (Code & Tools)：
• SVGO 4.0：Node 驱动的 SVG 优化工具，v4.0 带来默认插件、公共 API 的重大变更，并支持 ESM/CJS 双包模式 (作者：Kir Belevich)。
• Hono 4.8：跨运行时的 Web 标准框架，新增路由辅助函数、JSX 流式传输和 CORS 改进，以及静态站点生成插件系统 (作者：Yusuke Wada 等)。
• LogTape 1.0.0：适用于 Node、浏览器和边缘函数的通用日志工具，特别适合希望以低门槛方式为最终用户添加日志的库开发者 (作者：Hong Minhee)。
• 其他工具更新包括 zx 8.6、Typegoose 12.17、OpenAI Node 5.7、Electron 37.0、BullMQ 5.56 和 Mocha 11.7。

5. JavaScript 领域其他动态 (Elsewhere in JavaScript)：
• Dr. Axel Rauschmayer 发布新书《Exploring JavaScript (ES2025 Edition)》，免费在线阅读并附带学习卡片。
• Porffor 提前编译 JavaScript 编译器的创建者分享了工作原理的演讲。
• 介绍新的自定义元素 <syntax-highlight>，利用 CSS Custom Highlight API 简化语法高亮。
• Git 2.50.0 发布，包含重要更新；浏览器中 JSON 模块脚本现已“Baseline Newly Available”。

AI 摘要：本文详细介绍了 Cursor 这一基于 AI 的代码编辑工具，如何帮助前端开发者提升编码效率。文章从 Cursor 的功能、界面操作、工作流程到具体应用案例（如重建 LogRocket 登陆页面）进行了深入剖析，同时分享了作者在实际项目中使用 Cursor 的实用技巧和经验。Cursor 集成了多种顶级 AI 模型（如 Claude 3.5 Sonnet 和 GPT-4.1），支持智能代码补全、上下文管理、自定义规则设置等功能，尽管价格偏高，但其强大功能对开发者极具吸引力。

1. Cursor 简介与市场地位
• 介绍了 Cursor 作为一款基于 Claude AI、GPT-4.1 等 AI 模型的代码编辑工具，其在 IDE 市场中的主导地位（82.2% 的开发者知晓或使用过）。
• 强调文章目标：揭示 Cursor 中被忽视的功能，并分享作者在日常编码中的实用技巧。

2. Cursor 安装与界面概览
• 提供 Cursor 的下载路径（cursor.com）以及首次打开后的界面介绍，包括“Ask”功能（类似 ChatGPT 的问答模式）。
• 对比传统开发与“vibe coding”工作流的差异，强调 Cursor 如何改变开发体验。

3. 项目创建与 AI 辅助开发
• 以 Next.js 项目为例，展示如何使用 Cursor AI 生成界面设计（如 LogRocket 登陆页面）。
• 详细操作步骤：通过 Command+K 快捷键、选择 AI 模型（如 Claude 3.5 Sonnet）、输入提示词、结合图像上下文迭代设计等。
• 提到“Restore checkpoint”功能，用于恢复之前的代码状态以解决设计错误（如颜色问题）。

4. 与其他工具的集成
• 介绍 MCP 标准及 Framelink.ai 的 Figma 服务器如何让 Cursor 直接访问设计文件，提升设计与开发的无缝协作。
• 提供设置指南，强调 AI Agent 模式在开发中的核心作用。

5. 上下文管理与高效编码技巧
• 解释上下文管理的重要性，使用“@”符号指定 Cursor 关注的内容或优先级。
• 建议为新功能或项目开启新聊天窗口，避免旧对话干扰 AI 响应质量，并介绍“新聊天总结旧聊天”功能。
• 推荐 AI 模型选择：作者偏好 Claude 3.5 Sonnet，认为其信息输出适中不过载。

6. 智能补全与自定义规则
• 介绍 Cursor Tab 的智能代码补全功能（Mac 用户可用 Command+K 快捷键），以及如何用它添加页面元素（如导航链接）。
• 讲解自定义规则（.cursorrules 文件）的设置方法，用于定义项目编码规范，并提供多种应用场景（如始终应用规则或手动选择）。

7. 隐私与安全注意事项
• 指出 Cursor 尊重 .gitignore 文件，避免将忽略内容纳入上下文，建议将 .env 文件加入 .gitignore 以保护敏感信息。

8. 定价与市场竞争
• 分析 Cursor 的定价结构（免费 Hobby 计划、$20 Pro 计划、$40 Teams 计划），认为价格偏高。
• 对比竞争对手如 Windsurf（团队计划降至 $30/用户/月）和 GitHub Copilot（更经济），建议开发者根据预算和需求选择工具。

9. 总结与建议
• 强调 AI 辅助开发是未来趋势，建议从 Agent Mode 入手，善用上下文管理（@ 符号），并为新功能开启新聊天。
• 鼓励开发者选择适合自己需求和预算的工具，并持续编码探索。

LogRocket Blog

Frontend devs: Here’s how to get the most out of Cursor - LogRocket Blog

Explore Cursor AI, one of the hottest tools in AI-assisted coding. Uncover the features you might be missing and practical workflows that actually work.