minimalist-ui

name	minimalist-ui
description	干净的编辑部风格界面。暖色单色调配色、字体对比、扁平 bento 栅格、柔和粉彩。无渐变、无重阴影。

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

1. 协议概览

名称：高端实用极简与编辑部 UI 描述：一份进阶前端工程指令，用于生成高度精炼、超极简、「文档风格」的网页界面，类似顶级工作区平台。本协议严格执行高对比暖色单色调配色、定制字体层级、一丝不苟的结构性宏观留白、bento 栅格布局，以及带有刻意柔和粉彩强调的超扁平组件结构。它主动拒绝标准的通用 SaaS 设计潮流。

2. 绝对负向约束（禁用元素）

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

• 不要使用「Inter」「Roboto」或「Open Sans」字体。
• 不要使用通用细线图标库，如「Lucide」「Feather」或标准「Heroicons」。
• 不要使用 Tailwind 的默认重投影（如 shadow-md、shadow-lg、shadow-xl）。阴影必须近乎不存在，或经重度定制为超扩散、低透明度（< 0.05）。
• 不要对大元素或分区使用主色背景（如无亮蓝、亮绿或亮红的 hero 分区）。
• 不要使用渐变、霓虹色或 3D 玻璃拟态（导航栏细微模糊除外）。
• 不要对大容器、卡片或主要按钮使用 rounded-full（胶囊形）。
• 不要在代码、标记、文本内容、标题或 alt 文本的任何位置使用 emoji。用恰当的图标或干净的 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。
• 编辑部衬线（Hero 标题与引言）：目标：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)。
• 强调色：专门使用高度去饱和、褪色的粉彩，用于 tag、行内代码背景或细微图标背景。
  • 淡红：#FDEBEC（文字：#9F2F2D）
  • 淡蓝：#E1F3FE（文字：#1F6C9F）
  • 淡绿：#EDF3EC（文字：#346538）
  • 淡黄：#FBF3DB（文字：#956400）

5. 组件规格

• Bento 特性栅格：
  • 使用非对称 CSS Grid 布局。
  • 卡片必须恰好为 border: 1px solid #EAEAEA。
  • 圆角必须干脆：最大 8px 或 12px。
  • 内边距必须宽松（如 24px 到 40px）。
• 主行动号召（按钮）：
  • 实心背景 #111111，文字 #FFFFFF。
  • 轻微圆角（4px 到 6px）。无 box-shadow。
  • 悬停态应为细微色移到 #333333，或微缩放 transform: scale(0.98)。
• Tag 与状态徽章：
  • 胶囊形（border-radius: 9999px），极小字号（text-xs），大写配宽字距（letter-spacing: 0.05em）。
  • 背景必须使用已定义的柔和粉彩。
• 手风琴（FAQ）：
  • 剥掉所有容器盒。各条目仅以 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。
• Hero 与分区背景：分区不应显得空洞扁平。用极低透明度的全宽背景图、柔和放射光斑（暖调 radial-gradient，opacity: 0.03）或极简几何线条图样来增加深度，同时不破坏干净的美感。

7. 细微动效与微动画

动效应让人几乎察觉不到——存在但绝不分心。目标是安静的精致，而非奇观。

• 滚动入场：元素进入视口时温和淡入。用 translateY(12px) + opacity: 0，在 600ms 内以 cubic-bezier(0.16, 1, 0.3, 1) 解算。使用 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）在 hero 分区后方漂移。必须应用于 position: fixed; pointer-events: none 图层。绝不用于滚动容器。
• 性能：只通过 transform 与 opacity 做动画。不用触发布局的属性（top、left、width、height）。will-change: transform 节制使用，只用在正在活跃动画的元素上。

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. 提供原生反映这种高端、清爽、编辑部美感的代码，无需手动调整。