面条的草稿箱

无原创，纯转发

Search: #前端工程

  1. 面条的草稿箱

    termcn：让 React 构建终端 UI 像 shadcn 一样简单如果你正在开发命令行工具（CLI）或终端应用程序，并希望拥有美观、交互性强的界面，那么 termcn 会是一个不错的选择

    termcn：让 React 构建终端 UI 像 shadcn 一样简单

    如果你正在开发命令行工具（CLI）或终端应用程序，并希望拥有美观、交互性强的界面，那么 termcn 会是一个不错的选择。

    termcn 是一套基于 Ink 和 OpenTUI 构建的 React 终端 UI 组件库。它采用了与流行前端 UI 库 shadcn/ui 类似的直接分发模式，允许开发者通过简单的命令行，直接将组件代码添加到自己的项目中。

    核心亮点

    • 渐进式添加：支持通过包管理器（如 pnpm、npm 或 yarn）以 shadcn CLI 的方式按需添加组件，例如 pnpm dlx shadcn add @termcn/alert，保持项目的轻量。
    • 常用组件开箱即用：提供表格（Table）、柱状图（Bar Chart）、等待动画（Spinner）、提示框（Alert）、工具调用展示（Tool Call）和徽章（Badge）等终端交互必备元素。
    • 丰富的主题配色：内置了 Catppuccin、Dracula、Nord、One Dark 等数十种经典且受欢迎的终端配色方案，轻松搭配出理想的视觉风格。

    无论是为你的开源工具制作更友好的 CLI 界面，还是在为 AI 代理开发终端控制台，termcn 都能帮助你快速构建出高颜值的终端交互体验。

    https://www.termcn.dev/

    #前端开发 #React #命令行工具 #UI组件库 #CLI
    termcn
    termcn
    A collection of beautifully designed, accessible, and customizable terminal UI components. Built on Ink and OpenTUI. Works with shadcn/ui.

    前端开发React命令行工具UI组件库CLI

  2. 面条的草稿箱

    Vercel 推出 AI Agent 开发框架 Eve：像写 Next.js 一样构建智能体Vercel 刚刚发布了全新的 AI Agent 开发框架 —— Eve

    Vercel 推出 AI Agent 开发框架 Eve：像写 Next.js 一样构建智能体

    Vercel 刚刚发布了全新的 AI Agent 开发框架 —— Eve。官方将其定位为“智能体领域的 Next.js”，旨在为开发者提供一套开箱即用的 AI 智能体开发、部署与运行基础设施。

    以下是 Eve 的核心特性：

    • 极简的目录即 Agent 结构：使用 Markdown 撰写角色指令和技能（如 instructions.md），使用 TypeScript 编写工具函数（如 tools/），无需繁琐的注册与配置，直接运行即可启动。
    • 天然持久化支持 (Durable by default)：基于 Vercel Workflows，智能体运行中的每一步都会自动保存状态。在等待用户输入或长时间任务时，智能体会自动“挂起”，并在需要时无缝恢复，完全不用担心进程中断。
    • 隔离的沙箱环境 (Sandboxed compute)：为智能体提供独立的虚拟化运行环境，支持安全地运行代码、读写文件或执行 Bash 命令。
    • 多渠道轻松连接：一份代码即可多端部署，轻松接入 Slack、Discord、Teams、Web 网页以及各种自定义 API。
    • 企业级功能支持：内置人机协同（Human-in-the-loop）审批流、子智能体协作（Subagents）、定时任务（Schedules）以及自动化测试评估（Evaluations）。

    Eve 将复杂的 AI 基础设施进行了高度抽象与整合，让开发者可以专注于智能体本身的业务逻辑，告别零散工具的拼凑。

    详情点击官网了解：https://vercel.com/eve

    #Vercel #AIAgent #Eve #前端开发 #人工智能
    Vercel
    eve – The Agent Framework - Vercel
    eve – The Agent Framework - Vercel
    Like Next.js for web apps, but for agents. Markdown for instructions and skills, TypeScript for tools. Durable by default.

    VercelAIAgentEve前端开发人工智能

  3. 面条的草稿箱

    AI 编程防翻车：MDN 正式推出 MCP 服务，让 AI 获取最新 Web 规范在大模型辅助编程的时代，你是否也遇到过 AI 给出过时 Web API，或错误浏览器兼容性数据的情况？为了解决这一痛点，MDN 官方宣布推出了 MDN MCP（Model Context Protocol）服务

    AI 编程防翻车：MDN 正式推出 MCP 服务，让 AI 获取最新 Web 规范

    在大模型辅助编程的时代，你是否也遇到过 AI 给出过时 Web API，或错误浏览器兼容性数据的情况？

    为了解决这一痛点，MDN 官方宣布推出了 MDN MCP（Model Context Protocol）服务。

    什么是 MDN MCP？

    MCP 是一种开放标准，允许 AI 工具安全地连接到外部数据源。通过 MDN MCP，你可以将最新的 MDN 官方文档和浏览器兼容性数据（BCD）直接接入到你常用的 AI 编辑器（如 Cursor、VS Code、Zed）或命令行工具（如 Claude Code）中。

    它能带来什么改变？

    • 消除 AI 幻觉与信息滞后：避免 AI 因“知识库截止时间”而给出过时信息。例如，它能准确告知你 Firefox 151 已支持 Web Serial API，而未启用 MCP 的 AI 则会根据旧数据坚称“Firefox 不支持”。
    • 响应速度翻倍：测试表明，启用 MCP 后，AI 响应速度提升了约一倍。AI 无需再耗时爬取和解析网页，而是直接通过协议获取结构化数据。
    • 快速配置：以 Claude Code 为例，只需运行一行命令即可快速集成：
    claude mcp add --transport http mdn https://mcp.mdn.mozilla.net/

    目前该服务已处于实验阶段，感兴趣的开发者不妨立即配置，让你的 AI 助手掌握最权威的 Web 开发知识库。

    原链接：https://developer.mozilla.org/en-US/blog/introducing-mdn-mcp-server/

    #AI编程 #MDN #MCP #前端开发 #大语言模型
    MDN Web Docs
    Introducing the MDN MCP server | MDN Blog
    MDN's MCP server brings MDN's documentation and browser compatibility data directly into your editor or IDE, giving your LLM or coding agent access to accurate, up-to-date web platform information.

    AI编程MDNMCP前端开发大语言模型

  4. 面条的草稿箱

    让 AI 像顶级设计师一样编程：GetDesign.md 设计规范库如果你正在使用 AI 助手（如 Cursor、Claude 或 Bolt）进行前端开发，那么这个网站值得加入收藏夹

    让 AI 像顶级设计师一样编程：GetDesign.md 设计规范库

    如果你正在使用 AI 助手（如 Cursor、Claude 或 Bolt）进行前端开发，那么这个网站值得加入收藏夹。GetDesign.md 汇集了包括 Apple、Stripe、Linear、Notion 以及 SpaceX 在内的 60 多种知名品牌的设计系统灵感。

    它的核心价值在于“AI 友好”：你可以直接将这些精炼的 DESIGN.md 文件丢给 AI 编程助手，AI 就能迅速理解其设计语言、配色方案和排版逻辑，从而帮你构建出风格统一、质感高级的 UI 界面。

    无论你是想要打造极简的工具软件，还是具有视觉冲击力的官网，这里都是一个绝佳的 UI 风格武器库。

    https://getdesign.md/

    #设计系统 #AI工具 #前端开发 #UI设计 #生产力工具
    getdesign.md
    getdesign.md — DESIGN.md collection for AI coding agents
    getdesign.md — DESIGN.md collection for AI coding agents
    Browse independent design system analyses from popular websites. Drop one into your project as design reference for your coding agent.

    设计系统AI工具前端开发UI设计生产力工具

  5. 面条的草稿箱

    AntV Infographic：面向 AI 时代的声明式信息图引擎AntV Infographic 是一个“声明式”的信息图生成与渲染框架（npm：@antv/infographic），目标是把文字和结构化内容快速变成可视化信息图，降低制作门槛、提升表达效率

    AntV Infographic：面向 AI 时代的声明式信息图引擎

    AntV Infographic 是一个“声明式”的信息图生成与渲染框架（npm：@antv/infographic），目标是把文字和结构化内容快速变成可视化信息图，降低制作门槛、提升表达效率。

    它解决什么问题

    • 用更接近“写文档”的方式描述信息图：通过简洁语法定义标题、描述、数据项、布局与主题
    • 适配 AI 生成：语法容错、配置完整，并支持流式输出与分段渲染，适合大模型逐步生成内容
    • 从 0 到 1 更快：内置约 200+ 模板与组件（时间线、思维导图、流程、金字塔等）

    核心能力

    • 声明式渲染：用配置描述信息图结构与样式，而不是手工拖拽绘制
    • AI 一键生成：AI 理解文本→抽取关键信息→生成配置→渲染成专业信息图
    • 主题与风格：一键切换暗色等风格，也支持自定义主题体系
    • 在线 Playground：浏览器内编辑语法、实时预览，配套示例便于上手

    快速上手入口

    • 学习与文档：/learn
    • AI 生成入口：/ai
    • 示例库：/examples
    • GitHub：antvis/infographic

    原链接：https://infographic.antv.vision/

    #信息图 #数据可视化 #AntV #前端工程 #AIGC
    infographic.antv.vision
    AntV Infographic, an infographic generation and rendering framework that brings words to life.
    AntV Infographic is a powerful visualization library for building interactive and customizable infographics. Create stunning visual stories with ease using our intuitive API and rich set of components.

    信息图数据可视化AntV前端工程AIGC

1px