面条的草稿箱

无原创，纯转发

Search: #UI组件库

  1. 面条的草稿箱

    让 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设计系统

  2. 面条的草稿箱

    Resend 品牌与设计系统正式开源知名邮件推送服务 Resend 公开了其完整的品牌与设计系统（Design and Brand System），包含 Logo、字体、配色、文案风格以及产品 UI 模式

    Resend 品牌与设计系统正式开源

    知名邮件推送服务 Resend 公开了其完整的品牌与设计系统（Design and Brand System），包含 Logo、字体、配色、文案风格以及产品 UI 模式。

    为了方便团队协作与自动化，Resend 采用 Agent Skill 的方式来维护和分发这些规范与资产。你可以通过一行命令轻松安装：

    npx skills add resend/design-skills

    该系统主要包含以下三个核心模块：

    • 品牌指南 (Brand guidelines)：涵盖配色、排版、Logo 视觉以及适用于市场宣发的内容调性。
    • 设计系统 (Design system)：提供组件模式、设计 Token 以及产品 UI 交互原则。
    • 营销页面规范 (Marketing pages)：规范了页面结构、公共基础组件及共享区块的设计。

    无论你是想学习成熟产品的视觉规范，还是正在构建自己的设计系统，这套开源指南都非常值得参考。

    交互式设计网站：https://resend.com/design
    完整开源仓库：https://github.com/resend/design-skills
    原文链接：https://resend.com/design.md

    #设计系统 #UI设计 #品牌规范 #开源项目
    Resend
    Brand Guidelines · Resend
    Brand Guidelines · Resend
    Key brand elements and clear usage instructions for a consistent, memorable Resend experience.

    设计系统UI设计品牌规范开源项目

  3. 面条的草稿箱

    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

1px