UI组件库 | 面条的草稿箱

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

Fri, 19 Jun 2026 06:36:37 GMT

让 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

Browse a curated DESIGN.md library for AI agents: colors, typography, spacing, components, and design rules from leading product websites.

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

Fri, 19 Jun 2026 01:09:42 GMT

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

Key brand elements and clear usage instructions for a consistent, memorable Resend experience.

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

Thu, 18 Jun 2026 02:50:08 GMT

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

A collection of beautifully designed, accessible, and customizable terminal UI components. Built on Ink and OpenTUI. Works with shadcn/ui.