面条的草稿箱

无原创，纯转发

Search: #UI设计

  1. 面条的草稿箱

    告别千篇一律：如何识别并清除产品设计中的“AI 视觉垃圾”你是否发现，最近很多新网页和 App 的设计都长得差不多？蓝紫渐变、发光的玻璃卡片、每行都挂着 ⚡ ✨ 🚀 表情符号，以及各种五颜六色的徽章

    告别千篇一律：如何识别并清除产品设计中的“AI 视觉垃圾”

    你是否发现，最近很多新网页和 App 的设计都长得差不多？蓝紫渐变、发光的玻璃卡片、每行都挂着 ⚡ ✨ 🚀 表情符号，以及各种五颜六色的徽章。

    这些未经深思熟虑、全靠 AI 模型根据模板堆砌出来的设计风格，正在成为新的“视觉垃圾”（AI Slop）。模型因为没有品味，所以只会去抓那些看起来高级的元素塞在一起，反而让产品失去了个性和可读性。

    《Kill AI Slop》是一份非常实用的产品“去油”实战手册，它总结了最常见的 AI 设计套路并给出了修改方案：

    • 标题拒绝渐变字：渐变会牺牲可读性。标题请使用实色，通过字号、字重和留白来建立视觉层级。
    • 克制使用 Emoji 和徽章：它们是借来的亲和力，不能代替文字本身。请把它们留给真正需要展示的状态（如版本、库存）。
    • 别让阴影脱离物理规律：大面积的模糊阴影不仅不带任何信息，还会显得虚假。建议用细边框和紧凑的环境阴影代替。
    • 计算嵌套圆角：遵循公式 内圆角 = 外圆角 - 间距。AI 生成的界面经常跳过计算，导致内外弧线无法平行。
    • 具体文案胜过夸张词汇：写出真实的数字和后果，比如“冷启动仅需 200ms”永远比“快如闪电 ✨”更有说服力。

    优秀设计的核心原则：先做决定，再做装饰。 每一个视觉选择都应该有合理的解释，而不是直接套用当下最安全的模板。

    https://killaislop.com/

    #产品设计 #UI设计 #极简主义 #独立开发
    Kill AI Slop
    Kill AI Slop — Clean & Remove AI Slop | 杀死 AI slop
    Kill AI Slop — Clean & Remove AI Slop | 杀死 AI slop
    Clean AI slop out of your product: a field guide to the visual tics of vibe-coded UIs — and how to detect and remove the AI-generated look. 一份识别并清除 Vibe Coding 产品里 AI slop 的实战手册。

    产品设计UI设计极简主义独立开发

  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. 面条的草稿箱

    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设计品牌规范开源项目

  4. 面条的草稿箱

    极简与高效：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前端开发

  5. 面条的草稿箱

    让 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工具

  6. 面条的草稿箱

    让 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