---

name: minimalist-ui description: "用于创建具有暖色单色调色板、清晰边框、克制动效和扁平便当盒布局的干净编辑式界面。" category: frontend risk: safe source: community source_repo: Leonxlnx/taste-skill source_type: community date_added: "2026-04-17" author: Leonxlnx tags: [frontend, design, minimalism, ui] tools: [claude, cursor, codex, antigravity]

协议：高端实用极简主义 UI 架构师

使用场景

• 当用户想要受 Notion、Linear 或编辑式工作空间产品启发的精致极简 UI 时使用。
• 当设计具有清晰边框、充裕留白、柔和粉彩点缀和安静动效的暖色单色界面时使用。
• 当任务应避免渐变、重阴影、饱和色彩、大量圆角组件和通用 SaaS 视觉效果时使用。

限制

• 当内容密集时，极简主义可能隐藏层级；需用真实内容验证可扫描性、对比度和导航清晰度。
• 此技能假设产品可以支持克制的调色板和排版主导的布局；不要无故覆盖已建立的品牌系统。
• 微妙动效和扁平表面仍需在目标项目中进行响应式、键盘和屏幕阅读器验证。

1. 协议概述

名称：高端实用极简主义与编辑式 UI 描述：一个高级前端工程指令，用于生成高度精致、超极简的"文档风格"Web 界面，类似于顶级工作空间平台。此协议严格执行高对比度暖色单色调色板、定制排版层级、精心的结构性宏留白、便当盒网格布局和超扁平组件架构，配合刻意的柔和粉彩点缀。它主动拒绝标准通用 SaaS 设计趋势。

2. 绝对负面约束（禁止元素）

AI 必须严格避免以下通用 Web 开发默认值：

• 不要使用 "Inter"、"Roboto" 或 "Open Sans" 字体。
• 不要使用通用细线图标库如 "Lucide"、"Feather" 或标准 "Heroicons"。
• 不要使用 Tailwind 默认的重阴影（如 shadow-md、shadow-lg、shadow-xl）。阴影必须几乎不存在或高度自定义为超扩散低透明度（< 0.05）。
• 不要为大型元素或区域使用主色背景（如无亮蓝、绿或红色英雄区域）。
• 不要使用渐变、霓虹色或 3D 玻璃拟态（除了微妙的导航栏模糊）。
• 不要对大容器、卡片或主按钮使用 rounded-full（药丸形状）。
• 不要在代码、标记、文本内容、标题或 alt 文本中使用表情符号。用适当的图标或干净的 SVG 原语替代。
• 不要使用通用占位名如 "John Doe"、"Acme Corp" 或 "Lorem Ipsum"。使用真实的上下文内容。
• 不要使用 AI 文案陈词滥调："Elevate"、"Seamless"、"Unleash"、"Next-Gen"、"Game-changer"、"Delve"。写简洁、具体的语言。

3. 排版架构

界面必须依赖极端的排版对比和高端字体选择来建立编辑感。

• 主无衬线体（正文、UI、按钮）：使用干净、几何或有特色的系统原生字体。目标：font-family: 'SF Pro Display', 'Geist Sans', 'Helvetica Neue', 'Switzer', sans-serif。
• 编辑衬线体（英雄标题和引用）：目标：font-family: 'Lyon Text', 'Newsreader', 'Playfair Display', 'Instrument Serif', serif。应用紧凑字距（letter-spacing: -0.02em 到 -0.04em）和紧凑行高（1.1）。
• 等宽体（代码、按键、元数据）：目标：font-family: 'Geist Mono', 'SF Mono', 'JetBrains Mono', monospace。
• 文本颜色：正文文本绝不能是纯黑（#000000）。使用偏黑/炭灰（#111111 或 #2F3437），配合充裕的 line-height 1.6 以确保可读性。次要文本应为柔和灰（#787774）。

4. 色彩调色板（暖色单色 + 点缀粉彩）

颜色是稀缺资源，仅用于语义含义或微妙点缀。

• 画布/背景：纯白 #FFFFFF 或暖骨色/米白 #F7F6F3 / #FBFBFA。
• 主表面（卡片）：#FFFFFF 或 #F9F9F8。
• 结构边框/分隔线：超浅灰 #EAEAEA 或 rgba(0,0,0,0.06)。
• 点缀色：专门使用高度去饱和、淡化的粉彩用于标签、行内代码背景或微妙图标背景。
  • 淡红：#FDEBEC（文本：#9F2F2D）
  • 淡蓝：#E1F3FE（文本：#1F6C9F）
  • 淡绿：#EDF3EC（文本：#346538）
  • 淡黄：#FBF3DB（文本：#956400）

5. 组件规范

• 便当盒功能网格：
  • 使用非对称 CSS Grid 布局。
  • 卡片必须精确使用 border: 1px solid #EAEAEA。
  • 圆角必须清晰：最大 8px 或 12px。
  • 内部填充必须充裕（如 24px 到 40px）。
• 主行动号召（按钮）：
  • 实心背景 #111111，文本 #FFFFFF。
  • 轻微圆角 border-radius: 6px。
  • 无阴影，悬停时微妙的不透明度变化。
• 次要按钮：
  • 透明背景，border: 1px solid #EAEAEA。
  • 文本 #111111，悬停时背景 #F7F6F3。