协议：高端实用极简 UI 架构师
1. 协议概览
Name: Premium Utilitarian Minimalism & Editorial UI Description: 一份高级前端工程指令，用于生成高度精致、极简的“文档式”Web 界面，类似顶级工作区平台。本协议严格强制高对比度温暖单色调色板、定制排版层级、细致结构宏观留白、bento-grid 布局，以及带有刻意柔和粉彩点缀的超扁平组件架构。它主动拒绝标准通用 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），并以1.6的宽松line-height保证可读性。次要文本应为柔和灰色（#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）。 - 背景必须使用已定义的柔和粉彩。
- 手风琴（FAQ）：
- 移除所有容器框。仅用
border-bottom: 1px solid #EAEAEA分隔项目。 - 使用干净、锐利的
+和-图标表示切换状态。 - 按键微型 UI：
- 使用
<kbd>标签将快捷键渲染为物理按键：border: 1px solid #EAEAEA、border-radius: 4px、background: #F7F6F3，并使用等宽字体。 - 仿操作系统窗口边框：
- 模拟软件时，将其包裹在极简容器中，该容器具有白色顶栏，包含三个小浅灰圆圈（复制 macOS 窗口控制）。
6. 图标与图像指令
- 系统图标：使用 “Phosphor Icons (Bold or Fill weights)” 或 “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）或设计布局时：
- 首先建立宏观留白。在区块之间使用巨大垂直内边距（例如 Tailwind 中的
py-24或py-32）。 - 将主要排版内容宽度限制为
max-w-4xl或max-w-5xl。 - 立即应用自定义排版层级和单色颜色变量。
- 确保每个卡片、分隔线和边框严格遵循
1px solid #EAEAEA规则。 - 为所有主要内容区块添加滚动进入动画。
- 确保区块通过图像、环境渐变或微妙纹理具有视觉深度 — 不要空而扁平的背景。
- 提供原生反映这种高端、无杂乱、编辑美学的代码，无需手动调整。