minimalist-ui

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

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（药丸形）。
• 不要在代码、标记、文本内容、标题或替代文本的任何位置使用表情符号。请使用合适的图标或简洁的 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. 组件规范

• Bento Box 功能网格：
  • 使用非对称 CSS Grid 布局。
  • 卡片必须严格设置为 border: 1px solid #EAEAEA。
  • 圆角应简洁利落：最大为 8px 或 12px。
  • 内边距应充足（例如 24px 到 40px）。
• 主要行动号召（按钮）：
  • 实心背景 #111111，文字 #FFFFFF。
  • 使用轻微圆角（4px 到 6px）。不使用 box-shadow。
  • 悬停状态应以细微的颜色变化过渡至 #333333，或进行微小缩放 transform: scale(0.98)。
• 标签与状态徽章：
  • 胶囊形（border-radius: 9999px），字体非常小（text-xs），使用大写字母和较宽的字间距（letter-spacing: 0.05em）。
  • 背景必须使用定义的柔和粉彩色。
• 手风琴（常见问题）：
  • 移除所有容器框。仅使用 border-bottom: 1px solid #EAEAEA 分隔各项。
  • 使用简洁利落的 + 和 - 图标表示切换状态。
• 按键微型 UI：
  • 使用 <kbd> 标签将快捷键渲染为实体按键：border: 1px solid #EAEAEA、border-radius: 4px、background: #F7F6F3，并使用等宽字体。
• 仿操作系统窗口外观：
  • 模拟软件时，将其置于极简容器中，顶部栏为白色，并带有三个浅灰色小圆点（仿 macOS 窗口控件）。

6. 图标与图像规范

• 系统图标：使用“Phosphor Icons（Bold 或 Fill 字重）”或“Radix UI Icons”，呈现偏技术感、笔画略粗的风格。所有图标的笔画宽度应保持一致。
• 插画：采用单色、粗犷的连续线条墨水素描，背景为白色，并包含一个填充柔和粉彩色的偏移几何形状。
• 摄影图片：使用高质量、低饱和度且色调温暖的图片。添加细微叠加层（opacity: 0.04 的暖色颗粒），使图片融入单色调配色。切勿使用过度饱和的图库图片。无法使用真实素材时，请使用 https://picsum.photos/seed/{context}/1200/800 等可靠占位图。
• 主视觉区与区块背景：区块不应显得空旷平淡。可使用极低不透明度的全宽背景图像、柔和的径向光斑（暖色调的 radial-gradient，opacity: 0.03），或极简几何线条图案，在不破坏简洁美感的前提下增添层次感。

7. 细腻动效与微动画

动效应不着痕迹——存在但绝不分散注意力。目标是低调的精致感，而非炫目效果。

• 滚动进入：元素进入视口时轻柔淡入。使用 translateY(12px) + opacity: 0，并通过 cubic-bezier(0.16, 1, 0.3, 1) 在 600ms 内过渡到最终状态。使用 IntersectionObserver，切勿使用 window.addEventListener('scroll')。
• 悬停状态：卡片以极其细微的阴影变化抬起（box-shadow 在 200ms 内从 0 0 0 过渡到 0 2px 8px rgba(0,0,0,0.04)）。按钮在 :active 时以 scale(0.98) 响应。
• 错落式显示：列表和网格项以级联延迟进入（animation-delay: calc(var(--index) * 80ms)）。切勿一次性挂载所有内容。
• 背景环境动效：可选。主视觉区后方可使用单个移动极慢的径向渐变斑块（animation-duration: 20s+、opacity: 0.02-0.04）。必须应用于 position: fixed; pointer-events: none 图层。切勿应用于滚动容器。
• 性能：仅通过 transform 和 opacity 实现动画。不要使用会触发布局变化的属性（top、left、width、height）。谨慎使用 will-change: transform，且仅用于正在进行动画的元素。
• 减少动态效果（必须）：将滚动进入、错落式显示和背景环境动效置于 @media (prefers-reduced-motion: no-preference) 条件下，并添加 @media (prefers-reduced-motion: reduce) 代码块禁用这些效果，使内容立即显示并保持静止。悬停和 :active 反馈可以保留。

8. 执行协议

当需要编写前端代码（HTML、React、Tailwind、Vue）或设计布局时：

1. 首先确定整体留白。在各个区块之间使用大量垂直内边距（例如 Tailwind 中的 py-24 或 py-32）。
2. 将主要排版内容的宽度限制为 max-w-4xl 或 max-w-5xl。
3. 立即应用自定义的字体层级和单色系颜色变量。
4. 确保每张卡片、分隔线和边框都严格遵循 1px solid #EAEAEA 规则。
5. 为所有主要内容区块添加滚动进入动画。
6. 通过图像、环境渐变或细腻纹理，为各个区块营造视觉层次——不要使用空白、平淡的背景。
7. 提供原生呈现这种高端、简洁、编辑风格的代码，无需手动调整。