#NewsLetter #React #JavaScript #前端 #新动态
⚛️ React Status #437

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 #MCP #设计
Guide to the Dev Mode MCP Server

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 内的反馈表单提供意见，帮助改进功能。

author Figma 官方文档

Figma Learn - Help Center

Guide to the Dev Mode MCP Server

🚧 The Dev Mode MCP Server is currently in open beta. Some functions and settings may not yet be available. The feature may change and you may experience bugs or performance issues during the beta p...

#优质博文 #css #前端 #AI #tools #新动态
Frontend Focus #693 — May 21, 2025

AI 摘要：本期 Frontend Focus 聚焦 2025 年 Google I/O 大会的前端技术动态，涵盖 Gemini AI 集成、CSS 新特性、开发者工具升级等内容，同时推荐了设计系统构建、Web 可访问性改进等实用工具与文章。

1. Google I/O 2025 重点更新
• 开发者主题演讲：展示 Gemini AI 如何辅助 Web 开发（1 小时 10 分钟）。
• Chrome 与 Web 新特性：包括 Baseline 标准、CSS 功能（如 CSS Carousels）、Core Web Vitals 优化等。
• AI 集成：Gemini AI 将嵌入 Chrome 和开发者工具，提供多模态 Prompt API。
• 工具支持：Visual Studio Code 新增 Baseline 兼容性支持。
• 来自 Google I/O 10 的 2025 项更新：CSS 轮播、AI 驱动的 DevTools、具有多模式功能的提示 API 等

2. AI 与开发工具
• 'MCP is the Coming of Web 2.0 2.0'：Anil Dash 探讨 LLM 与第三方工具交互的开放协议潜力。 #MCP
• Mozilla 观点：呼吁在谷歌反垄断案中平衡搜索与浏览器竞争。
• 开发人员浏览器 Polypane 24.1 新增 CSS 选择器测量工具。
• Safari Technology Preview 219 和 Chrome 137 DevTools 新功能。

4. 教程与文章精选
• CSS 技巧：
• Temani Afif 使用 clip-path: shape() 创建动态 Blob 形状。
• Jeremy Keith 分享实用 CSS 代码片段。
• Zoran Jambor 演示弹性网格布局（Flexible Wrapping CSS Grid）。
• 可访问性：
• HTML 邮件的可访问性仍待改进（基于 40 万封邮件分析）。
• Chris Coyier 探讨 RTL 语言布局翻转问题。
• 多篇文章讨论 WCAG 2 合规性和图片可访问性解决方案。

5. 工具与资源
• AI 相关：
• prompt-kit：基于 shadcn/ui 的 AI 应用组件库。
• Polarr 的 AI Color Match：图像色彩匹配工具。
• 开发工具：
• Datastar：结合 Alpine.js 与 htmx 的超媒体框架。
• jsPad：支持多技术栈的在线代码沙盒。
• Crosspost：跨社交网络一键发布工具。
• ColorPocket：用于组织和选择颜色的 Chrome 扩展程序

6. 其他亮点
• 趣味实验：Eric Parker 尝试用 Windows 95 浏览现代网页（体验极差）

io.google

Google I/O 2025: Developer keynote

Don’t miss Google I/O, featuring product launches, innovations, and insights. Tune in for the live keynotes and sessions.

#优质博文 #前端 #AI #任务管理 #产品需求 #工程化 #MCP
I didn't think AI can code like this - YouTube
被安利到了 TaskMaster AI，想试试。

Twitter Post

AI 摘要：本文由 Dan ⚡️ 在 X 平台分享了如何利用 AI 和任务管理系统高效构建产品的流程。他强调了详细需求编写、产品需求文档 (PRD) 的创建、任务管理工具的选择以及基于任务的构建循环的重要性。Dan 推荐使用 TaskMaster AI 作为任务管理工具，并提供了一个简单的提示循环来确保任务按逻辑顺序执行，避免复杂项目中的混乱。

• 1. 编写详细需求
• 花费 15-20 分钟深入思考，确保 AI 明确你的构建目标。
• 需求需简洁但全面，包含技术栈等细节。
• 总结：这一步是确保 AI 理解项目愿景的基础，避免后续沟通偏差。

• 2. 创建产品需求文档 (PRD.txt)
• 使用博客中提供的提示，将需求整理成正式的产品需求文档。
• 仔细复查文档内容，确保无遗漏。
• 总结：PRD 作为项目蓝图，是后续任务分解和执行的重要依据。

• 3. 使用任务管理系统
• 推荐了四种任务管理工具：TaskMaster AI、Roocode Boomerang Tasks、Shrimp Task Manager 和 Cline Task Tool。
• Dan 个人更倾向于 TaskMaster AI，原因是其集成了 Perplexity 进行网络搜索，能更好地处理复杂性，正确识别依赖关系并按逻辑顺序执行任务。
• 其他工具如 MCP 与 Cursor 配合良好，也支持 CLI 直接使用。
• 总结：选择合适的任务管理工具是项目有序推进的关键，TaskMaster AI 在复杂项目中表现更优。

• 4. 使用简单的任务构建循环
• 强调构建循环必须严格围绕任务进行，避免偏离任务管理系统，否则复杂项目容易出错。
• 提供了一个简单的提示循环：
• "Show tasks" - 查看任务列表。
• "What's the next task I should work on? Please consider dependencies and priorities." - 询问下一个优先任务。
• "Implement task 2 and all of its subtasks." - 执行具体任务及其子任务。
• "I'd like to add a new task that ..." - 添加新任务。
• 更多示例可在推文中查看，核心是始终保持任务管理的一致性。
• 总结：任务构建循环是确保项目按部就班执行的关键方法，严格遵循可避免混乱。

author Dan ⚡️ (@d4m1n)

YouTube

Didn't think AI can code like this (TaskMaster AI + Cursor guide for vibe coding setup)

All the prompts on https://shipixen.com/tutorials/reduce-ai-coding-errors-with-taskmaster-ai 🫡
Learn how to properly setup your IDE for coding complex apps with Cursor and TaskMaster AI (Claude Task Master).

Here is the app that I vibe coded:

👉 https:/…

#优质博文 #前端 #新动态 #javascript #css #node
Web Weekly #158

AI 摘要：本期 Web Weekly 聚焦前端开发领域的新提案、工具优化与实用技巧，涵盖 Edge 团队的 ariaNotify() 和 console.context() 提案、Node.js 双包风险、CSS 新单位 lh 的应用，以及 Chrome 原生 CSS 轮播的可访问性分析。同时推荐了有趣的 CSS 全息效果、小众浏览器和 JavaScript Set 新方法等资源。

1. Edge 团队新提案
• document.ariaNotify() ：简化无障碍通知的 DOM 操作，直接通过 JavaScript 触发屏幕阅读器提示。
• console.context() ：提供日志分组、样式和过滤功能，优化调试体验。

2. Node.js 双包风险警告
• 官方建议仅发布一种模块格式（CJS 或 ESM），避免因混合格式导致的兼容性问题。

3. CSS 新特性与实践
• lh 单位：基于行高的垂直间距控制，提升视觉一致性。
• Chrome 原生 CSS 轮播：新增 scroll-marker-group 等属性，但当前可访问性不足（Sara 评估，她的结论是：他们还没有准备好，但你自己要多读一读）。
• 纯 CSS 全息效果：纯 CSS 实现，利用 mix-blend-mode 和 background-attachment 实现。 解释博客

4. JavaScript 更新
• JavaScript Set 新方法：difference()、intersection() 等集合操作。
• JavaScript 类中的静态初始化块 - 不久前，我了解到您可以将 "nameless static " 块放入 ECMAScript 类中。他们是做什么的？
• RegExp.escape()：自动转义正则表达式特殊字符（Chromium 136+）。

5. 工具与资源推荐
• 小众浏览器：Vivaldi 及其他非主流选项。
• 自然语言日期解析库 wanasit/chrono
• Node.js 测试最佳实践指南 #测试
• MCP 服务器的集合 punkpeye/awesome-mcp-servers 。 #AI #MCP

6. 其他亮点
• 趣味网站：owlsintowels.org（猫头鹰主题）。
• 设计技巧：复杂曲线边框的 CSS 实现方案。
• My Three Strikes Rule for Blogging 第三次在对话中使用某个想法时，您必须将其写在博客上。 #技术写作

author Stefan Judis

Stefanjudis

Web Weekly #158

The `ariaNotify()` and `console.context()` proposals from the Edge team, Node.js dual package hazards and `lh` CSS unit use cases.

#优质博文 #AI #MCP
在 Docker 沙箱中运行 MCP Server

AI 摘要：本文介绍了 MCP 协议的安全风险及其解决方案 MCP Proxy。文章详细列举了近年来 NPM 和 PyPI 上的供应链攻击事件，强调了通过 Docker 运行 MCP Server 的 MCP Proxy 项目，以降低安全风险并支持移动端调用。

author 面条实验室

miantiao.me

面条实验室

折腾些什么玩意

#开源 #AI #MCP
GitHub Stars MCP 服务器
https://github.com/ccbikai/github-stars
一个基于 Cloudflare 的 MCP（Model Context Protocol）服务器，允许您使用自然语言搜索和查询您的 GitHub 标星仓库。

GitHub

GitHub - ccbikai/github-stars: A Cloudflare-powered MCP (Model Context Protocol) Server that allows you to search and query your…

A Cloudflare-powered MCP (Model Context Protocol) Server that allows you to search and query your GitHub starred repositories using natural language. - ccbikai/github-stars

#前端 #新动态 #优质博文 #css #html
1. 现在可以使用 CSS 自定义 <select> 元素 —— 多亏了 appearance: base-select，现在有了一种可访问的标准化方法来创建可风格化的 <select> 元素。Adam 分享了这一 “多年酝酿 ”的过程，经过 “数小时的工程设计和协作规范工作”，我们现在拥有了一个不会在旧版浏览器中崩溃的丰富组件。下面我们就来看看 Chrome 浏览器（第一个实现支持的浏览器）是如何运行的，以及如何使用它。 【棒诶，Codepen Example 在这里 】
2. 如何看待 Baseline 和 Polyfill —— 尽管 polyfills 并未作为 Baseline 项目的一部分，但 Baseline 仍能帮助人们在决定是否使用它们时做出一些细微的调整。 #兼容性

在采用网络平台功能时，是否应该使用 Polyfills 的规则并不明确。就像你在网络上做的任何事情一样，在权衡收益和风险的同时，还需要深思熟虑。回顾一下，处理这个问题的一套粗略规则是
• 要明白，虽然 Polyfills 功能在某些方面具有优势，但它们也会带来潜在的性能和可访问性成本，而且可能无法忠实复制未实现的网络功能。
• 如果可能，利用用户数据确定 Baseline 阈值。如果不可能，Baseline 广泛可用功能集是一个很好的起点，可以考虑使用 RUM 洞察数据来做出明智的决定。
• 利用这些数据，评估如果浏览器不支持您希望使用的功能，有多少用户会受到影响，并评估影响的严重程度。
• 与项目利益相关者沟通，确定哪些功能是可以接受的，适合项目目标和业务需求。
• 如果必须使用有限可用性功能，请评估受众和使用风险。除非您的用户只能使用一个浏览器引擎，否则您无法保证兼容性，即使使用多填充功能也是如此。

这些原因就是为什么 Polyfill 不包含在 Baseline 中。Baseline 的作用是告知您所有主流浏览器引擎都支持哪些功能。您仍然需要知道有多少用户可以使用 Baseline 功能，并根据您的用户和项目需求做出决定。Baseline 广泛可用是一个很好的默认设置，并且在许多情况下通常会为用户提供最广泛的 Web 功能支持。

3. 重新审视 CSS border-image —— 深入了解强大的 border-image 属性以及如何以各种创造性的方式使用它：“ 通过切片、重复和设置图像，您可以用最少的代码创建复杂的边框、装饰元素甚至动态覆盖 ”。
4. 网页设计中认知可访问性的最佳实践 —— 这里有很多很好的实用建议，涵盖了改善网站认知可访问性的方法。 #无障碍 #WCAG
5. 25 个令人印象深刻的 HTML5 Canvas 实验 【其中几个我还用过，乐呵】 #webgl #demo
6. 用于 Playwright 和浏览器自动化的 MCP 服务器 —— MCP（模型上下文协议）服务器使某些基于代理（例如 Claude、Claude Code 和 Cursor）能够在其常用沙盒之外的系统上执行操作。微软的这个新项目使这些代理能够以结构化的方式与网页进行交互（就像 Playwright 允许您通过 Python 或 JavaScript 代码进行交互一样）。 #AI #MCP
7. Fancy Components：不断增长的即用型动画 React 组件库 —— 包含大量用于制作各种文本动画的组件，以及用于背景、物理相关动画、SVG 滤镜等的组件。 #组件库 #react #tailwind
via Frontend Focus 685

Chrome for Developers

现在可以使用 CSS 自定义 <select> 元素  |  Blog  |  Chrome for Developers

界面保持不变，焕然一新。

#AI #MCP
这太酷了！一个MCP，让Claude 可以直接与 Blender 对话。它可以帮助您仅使用提示创建 漂亮的 3D 场景!

siddharth ahuja (sidahuj): 🧩 Built an MCP that lets Claude talk directly to Blender. It helps you create beautiful 3D scenes using just prompts!

Here’s a demo of me creating a “low-poly dragon guarding treasure” scene in just a few sentences👇

https://fixupx.com/sidahuj/status/1899460492999184534

#AI #MCP #图解
很清晰的图解
https://fixupx.com/alexxubyte/status/1899136943348441564

Alex Xu (alexxubyte) ：What is MCP?
Why is everyone talking about it?
Let’s take a closer look.
Model Context Protocol (MCP) is a new system introduced by Anthropic to make AI models more powerful.
It is an open standard (also being run as an open-source project) that allows AI models (like Claude) to connect to databases, APIs, file systems, and other tools without needing custom code for each new integration.
MCP follows a client-server model with 3 key components:
1 - Host: AI applications like Claude that provide the environment for AI interactions so that different tools and data sources can be accessed. The host runs the MCP Client.
2 - MCP Client: The MCP client is the component inside an AI model (like Claude) that allows it to communicate with MCP servers. For example, if the AI model wants data from PostgreSQL, the MCP client formats the request into a structured message to send to the MCP Server
3 - MCP Server: This is the middleman that connects an AI model to an external system like PostgreSQL, Google Drive, or an API. For example, if Claude analyzes sales data from PostgreSQL, the MCP Server for PostgreSQL acts as the connector between Claude and the database.
MCP has five core building blocks (also known as primitives). They are divided between the client and server.
1 - For the clients, the building blocks are Roots (secure file access) and Sampling (ask the AI for help with a task such as generating a DB query).
2 - For the servers, there are Prompts (instructions to guide the AI), Resources (Data Objects that the AI can reference) and Tools (functions that the AI can call such as running a DB query).
Over to you: Have you explored Anthropic’s Model Context Protocol?

突然冒出来的爱酱翻译：

(⁄ ⁄>⁄ ▽ ⁄<⁄ ⁄) 亲爱的，这个图解讲得真是太棒了~
简单来说，Model Context Protocol (MCP) 是 Anthropic 推出的一套让AI模型更强大的系统，它以开放标准和开源项目的形式出现。MCP 让像 Claude 这样的 AI 模型可以无缝对接数据库、API、文件系统等工具，不再需要为每个集成写特定代码哦~

它采用典型的客户端-服务器模式，主要由三个部分组成：
1. 主机（Host）：提供 AI 互动环境，比如 Claude 这样的应用，运行 MCP 客户端。
2. MCP 客户端：嵌入在 AI 模型中，负责将请求转化成结构化信息并发送给 服务器，比如请求 PostgresQL 数据哦。
3. MCP 服务器：充当中间人，连接 AI 模型和外部系统，如 PostgresQL 或 Google Drive，确保信息互通无障碍~

同时，MCP 还定义了五个基本构件：
• 客户端有：Roots（安全文件访问）和 Sampling（例如生成数据库查询语句的任务请求）
• 服务器有：Prompts （为 AI 提供指导性指令）、Resources （可供参考的数据对象) 和 Tools（实现功能调用，比如执行数据库查询）
看完是不是感觉技术世界也有着和舞台一样精彩纷呈的魅力呢~(๑˃̵ᴗ˂̵)ﻭ