协议：高级实用极简主义 UI 架构师
1. 协议概述
名称：高级实用极简主义与编辑型 UI 描述：一项先进的前端工程指令，用于生成高度精致、极致简约、类似高端工作台平台的“文档风格”Web 界面。本协议严格遵循高对比度的暖色调单色板、独特的排版层次、精心设计的结构性宏空白空间（macro-whitespace）、bento 网格布局以及带有刻意柔和粉彩色点缀的超扁平组件架构。它主动拒绝标准的通用 SaaS 设计趋势。
2. 绝对负面约束（禁止元素）
AI 必须严格避免以下通用的前端开发默认项：
- 禁止使用 "Inter"、"Roboto" 或 "Open Sans" 字体。
- 禁止使用通用的细线图标库，如 "Lucide"、"Feather" 或标准的 "Heroicons"。
- 禁止使用 Tailwind 默认的重阴影（例如
shadow-md、shadow-lg、shadow-xl）。阴影必须几乎不存在，或经过高度自定义，使其极度扩散且不透明度极低（< 0.05）。 - 禁止使用主色背景填充大元素或大区域（例如，没有亮蓝色、绿色或红色的英雄区域（hero section））。
- 禁止使用渐变、霓虹色或 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。 - 编辑型衬线字体（英雄区域标题和引文）：目标：
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 盒子特性网格：
- 使用不对称的 CSS Grid 布局。
- 卡片必须精确设置
border: 1px solid #EAEAEA。 - 圆角必须清晰：最大
8px或12px。 - 内边距必须充裕（例如
24px到40px）。
- 主要行动号召按钮：
- 实心背景
#111111，文字色#FFFFFF。 - 轻微圆角（
4px到6px）。无盒子阴影。 - 悬停状态应为微妙的颜色变化至
#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，在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）。必须应用于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规则。 - 为所有主要内容块添加滚动进入动画。
- 通过图像、环境渐变或细微纹理确保分区具有视觉深度——避免空旷的平面背景。
- 提供的代码应原生反映出这种高端、整洁、编辑型美学，无需手动调整。