minimalist-ui

用途

minimalist-ui 是一份前端工程指令协议，名称为“Premium Utilitarian Minimalism UI Architect”（高级实用主义极简 UI 架构师）。其目标是生成高度精炼、超极简的“文档式”网页界面，风格类比顶级工作区平台。协议主动拒绝标准的通用 SaaS 设计趋势，强调编辑式排版、暖色单色调色板与扁平组件架构。

主要能力与规范

绝对禁止项

协议列出必须严格避免的通用默认做法：

• 不使用 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；要求平实、具体的语言。

字体架构

界面依靠极端字体对比与优质字体选择建立编辑感：

• 主无衬线（正文、UI、按钮）：目标为 'SF Pro Display'、'Geist Sans'、'Helvetica Neue'、'Switzer'、sans-serif。
• 编辑衬线（主标题与引用）：目标为 'Lyon Text'、'Newsreader'、'Playfair Display'、'Instrument Serif'、serif；应用紧凑字距（letter-spacing: -0.02em 至 -0.04em）与紧凑行高（1.1）。
• 等宽（代码、按键、元数据）：目标为 'Geist Mono'、'SF Mono'、'JetBrains Mono'、monospace。
• 文本颜色：正文不得为纯黑 #000000，使用近黑/炭黑（#111111 或 #2F3437），行高 1.6；次要文本用柔和灰（#787774）。

配色

颜色是稀缺资源，仅用于语义或细微点缀：

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

组件规格

• 便当盒功能网格：非对称 CSS Grid；卡片边框恰为 1px solid #EAEAEA；圆角 8px 或最大 12px；内边距充裕（24px 至 40px）。
• 主行动按钮：实心背景 #111111，文字 #FFFFFF；圆角 4px 至 6px；无 box-shadow；悬停为微妙色移至 #333333 或微缩放 scale(0.98)。
• 标签与状态徽章：胶囊形（border-radius: 9999px），极小字号（text-xs），大写并宽字距（letter-spacing: 0.05em）；背景使用定义的柔和粉彩。
• 手风琴（FAQ）：去除所有容器框，仅用 border-bottom: 1px solid #EAEAEA 分隔；使用干净锐利的 + 与 - 图标表示切换状态。
• 按键微 UI：用 <kbd> 标签渲染快捷键，边框 1px solid #EAEAEA，圆角 4px，背景 #F7F6F3，使用等宽字体。
• 仿 OS 窗口外壳：模拟软件时包裹在极简容器中，白色顶栏含三个小的浅灰圆点（复刻 macOS 窗口控件）。

图标与图像

• 系统图标：使用 Phosphor Icons（Bold 或 Fill 字重）或 Radix UI Icons，追求技术感、略粗描边；统一所有图标描边宽度。
• 插画：单色、粗糙连续线墨线草图，白底，配一个偏移几何形状填充柔和粉彩。
• 摄影：高质量、去饱和、暖色调图像；叠加细微覆盖（不透明度 0.04 暖颗粒）融入单色调色板；不使用过饱和图库照片；无真实素材时使用可靠占位如 https://picsum.photos/seed/{context}/1200/800。
• Hero 与区块背景：区块不应空平；使用极低不透明度全宽背景图、柔和径向光斑（暖色径向渐变，不透明度 0.03）或极简几何线条图案增加深度。

细微动效

动效应隐形——存在但不分散注意力：

• 滚动进入：元素进入视口时轻柔淡入，translateY(12px) + opacity: 0，600ms 内以 cubic-bezier(0.16, 1, 0.3, 1) 完成；使用 IntersectionObserver，绝不用 window.addEventListener('scroll')。
• 悬停状态：卡片以极微阴影变化抬升（box-shadow 从 0 0 0 过渡到 0 2px 8px rgba(0,0,0,0.04)，200ms）；按钮在 :active 时 scale(0.98)。
• 交错显现：列表与网格项以级联延迟进入（animation-delay: calc(var(--index) * 80ms)）；不要一次性全部挂载。
• 背景环境动效：可选；单个极慢移动的径向渐变光斑（animation-duration: 20s+，不透明度 0.02-0.04）在 hero 后漂移；须应用于 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 反馈可保留。

使用方式

当任务为编写前端代码（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. 提供原生体现这种高端、整洁、编辑式美学的代码，无需手动调整。

适用场景

适用于需要统一极简编辑风格的前端开发与界面设计，例如文档式工作区平台、内容型产品界面、需要高排版对比与克制配色的网页项目。

限制

该协议为设计指令规范，本身不提供具体组件库或运行时依赖；实际效果取决于实现者是否遵循上述字体、配色、组件与动效规则。协议中未提供收费、价格、平台支持范围等信息，暂未提供。