面条的草稿箱

无原创，纯转发

Search: #前端开发

  1. 面条的草稿箱

    像使用 shadcn/ui 一样构建 AI Agent：开源模板库 agentcn如果你喜欢 shadcn/ui 的组件化设计，那一定不要错过 agentcn

    像使用 shadcn/ui 一样构建 AI Agent：开源模板库 agentcn

    如果你喜欢 shadcn/ui 的组件化设计，那一定不要错过 agentcn。这是由 shadcn-labs 推出的开源、可定制且生产可用的 AI Agent 模板库。它将 shadcn 的设计理念带入到了 AI 智能体开发领域。

    项目亮点：

    • 零配置开箱即用：提供合理的默认设置，支持一键命令快速初始化。
    • 无缝兼容 shadcn CLI：采用相同的 Registry 格式，使用体验与 shadcn/ui 高度一致。
    • 强大的底层支撑：基于 Eve 和 Flue 框架构建，完整包含指令、工具、技能和工作流。
    • 可组合与在线预览：支持通过声明式组件构建复杂的交互界面，并在文档中提供直接运行的实时预览。

    对于想要快速、规范地搭建 AI Agent 的开发者来说，这是一个非常值得尝试的脚手架工具。

    https://github.com/shadcn-labs/agentcn

    #AIAgent #开源项目 #前端开发 #shadcn #人工智能
    GitHub
    GitHub - shadcn-labs/agentcn: shadcn/ui, but for building agents. 🤖
    GitHub - shadcn-labs/agentcn: shadcn/ui, but for building agents. 🤖
    shadcn/ui, but for building agents. 🤖. Contribute to shadcn-labs/agentcn development by creating an account on GitHub.

    AIAgent开源项目前端开发shadcn人工智能

  2. 面条的草稿箱

    让 AI 拥有大厂审美：面向 AI 编程助手的 DESIGN.md 模板库用 Cursor、Claude Code 或 v0 写前端代码时，AI 生成的界面总是缺少质感？这通常是因为 AI 缺乏明确的「设计规范」

    让 AI 拥有大厂审美：面向 AI 编程助手的 DESIGN.md 模板库

    用 Cursor、Claude Code 或 v0 写前端代码时，AI 生成的界面总是缺少质感？这通常是因为 AI 缺乏明确的「设计规范」。

    Refero Styles 收集了超过 2000 个来自 Stripe、Vercel、Apple、Claude、Linear 等顶尖产品的设计系统，并将其整理为 AI 易读的格式。

    核心亮点：

    • 大厂设计规范一键复制：涵盖知名网站的配色、字体排版、间距和 UI 组件规范。
    • 专为 AI 优化 (DESIGN.md)：格式对 AI 编程助手高度友好，直接导入 Cursor、Claude Code 或 Lovable，即可让 AI 像素级还原你喜欢的设计风格。
    • Refero MCP 插件支持：通过 Model Context Protocol (MCP)，你可以直接让 AI 助手搜索和学习真实产品的界面与用户流，让 AI 拥有真正的「设计品味」。

    如果你想让 AI 写出的网页告别“塑料感”，不妨去这个网站为你的项目挑一个高质量的设计规范。

    https://styles.refero.design/

    #AI编程 #UI设计 #前端开发 #Cursor #设计系统
    Refero Styles
    DESIGN.md Examples for AI Agents | Refero Styles
    DESIGN.md Examples for AI Agents | Refero Styles
    Browse a curated DESIGN.md library for AI agents: colors, typography, spacing, components, and design rules from leading product websites.

    AI编程UI设计前端开发Cursor设计系统

  3. 面条的草稿箱

    极简与高效：Vercel Geist 设计系统规范解析Vercel 的 Geist 设计系统是构建一致、以开发者为中心界面的核心

    极简与高效：Vercel Geist 设计系统规范解析

    Vercel 的 Geist 设计系统是构建一致、以开发者为中心界面的核心。其设计理念强调极简、高对比度、充足的留白以及克制的色彩使用，旨在将可读性和无障碍体验放在首位。

    以下是 Geist 设计规范（浅色主题）的关键要点整理：

    🎨 色彩系统：语义化与宽色域

    • 10 级灰度步长：从 100（默认背景）到 1000（主要文字），每一步都有明确的交互隐喻（如 200 用于悬停背景，400 用于默认边框）。
    • P3 宽色域支持：除了标准 sRGB 外，为高分屏原生提供基于 oklch() 的 P3 宽色域颜色。
    • 功能性色彩：蓝色代表成功与链接、红色代表错误、黄色代表警告。

    ✍️ 字体与排版

    • Geist 字体家族：使用 Geist Sans 渲染 UI 和正文，使用 Geist Mono 处理代码和数据表格。
    • 规范化 Token：提供 Heading（标题）、Label（标签）、Copy（正文）和 Button（按钮）四类排版 Token，严格控制字号、字重与行高。

    📏 布局与圆角

    • 4px 网格：间距遵循 4px 基准（4, 8, 12, 16...），推荐使用“3 步节奏”：组内 8px，组间 16px，板块间 32-40px。
    • 克制的圆角：常规控件 6px，菜单与模态框 12px，全屏容器 16px，药丸状或头像使用 9999px。

    ⚡ 动效与阴影

    • 首选瞬时响应：大部分交互应为 0ms（即时），只有在必要时才使用 150-300ms 的物理缓动动效。
    • 微妙的投影：主要依赖背景色调与边框建立层级，阴影非常弱（仅用于气泡、悬浮卡片和对话框）。

    🗣️ 文案与人机交互规范

    • 操作明确：按钮命名使用「动词 + 名词」（如 Deploy Project），避免使用模糊的 Confirm 或 OK。
    • 状态与反馈：加载中状态使用现在分词加省略号（如 Deploying…）；Toast 提示需指明具体变更，不使用句号，并去掉像 "successfully" 这类冗余的词汇。

    https://vercel.com/design.md

    #设计系统 #UI设计 #Vercel #Geist #前端开发

    设计系统UI设计VercelGeist前端开发

  4. 面条的草稿箱

    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

  5. 面条的草稿箱

    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前端开发人工智能

  6. 面条的草稿箱

    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前端开发大语言模型

  7. 面条的草稿箱

    让 AI 掌握顶级设计：TypeUI 风格库还在烦恼 AI 生成的网页风格太普通？TypeUI 为 Claude、Cursor、Gemini 等 AI 工具提供了一套精选的“设计技能（Design Skills）”库，让你的 AI 助手瞬间化身顶级设计师

    让 AI 掌握顶级设计：TypeUI 风格库

    还在烦恼 AI 生成的网页风格太普通？TypeUI 为 Claude、Cursor、Gemini 等 AI 工具提供了一套精选的“设计技能（Design Skills）”库，让你的 AI 助手瞬间化身顶级设计师。

    核心功能：

    • 多样化风格： 涵盖 Bento（盒式）、Neumorphism（新态设计）、Glassmorphism（毛玻璃）、Neobrutalism（新野兽派）等多种流行审美。
    • 即插即用： 提供优化的 skill.md 文件，你可以通过 CLI 命令（如 npx typeui.sh pull bento）直接引入项目，或手动复制到提示词中。
    • 完美适配： 专门针对 Agentic AI 工具进行了优化，确保 AI 生成的代码能精准还原特定的视觉风格。

    使用场景：
    当你使用 AI 开发网页或应用时，只需喂入这些预设的“技能文件”，AI 就能跳出默认的 Bootstrap 或 Tailwind 风格，构建出极具辨识度的视觉界面。

    原文链接：https://www.typeui.sh/design-skills

    #AI设计 #前端开发 #TypeUI #UI设计 #AI工具

    AI设计前端开发TypeUIUI设计AI工具

  8. 面条的草稿箱

    让 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设计生产力工具

1px