Minimalist editorial ui

何时使用

• 用户想做一套精致的极简界面，参考对象是 Notion、Linear、Vercel 这类工作区/编辑风产品。
• 需要暖色单色系（warm monochrome）、细边框、大留白、低饱和柔和点缀色、安静动效的「文档感」界面。
• 明确要避开通用 SaaS 视觉：渐变、重阴影、高饱和色块、满屏胶囊组件、玻璃拟态。

不该用的边界：

• 内容密集时极简会压扁信息层级——必须用真实内容验证可扫读性、对比度与导航清晰度，而非靠占位文字蒙混。
• 产品已有成熟品牌色/字体系统时，不要无故推翻；本风格假设产品能承载克制的排版主导布局。
• 细微动效与扁平表面仍需在目标项目里做响应式、键盘、读屏的可访问性验证。

步骤

1. 先定宏观留白：区块之间用大纵向间距（Tailwind py-24 / py-32）。
2. 约束正文宽度：主排版内容限制在 max-w-4xl 或 max-w-5xl。
3. 立即落地排版层级与单色变量：字体族、字色、边框色先成体系。
4. 统一边框规则：每个卡片、分隔线、边框严格遵守 1px solid #EAEAEA。
5. 加滚动入场动画：所有主要内容块用 IntersectionObserver 渐显。
6. 给区块视觉纵深：靠低透明度图片、环境渐变或细纹理避免空洞扁平背景，但不破坏干净感。
7. 产出的代码应原生体现这种高端、克制、编辑风审美，无需手动再调。

指令

绝对禁用（Banned）：

• 不用 Inter / Roboto / Open Sans 字体。
• 不用 Lucide / Feather / 标准 Heroicons 这类通用细线图标库。
• 不用 Tailwind 默认重阴影（shadow-md/lg/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/按钮（无衬线）：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，行高 1.6；次要文字用 #787774。

色板（暖色单色 + 点缀柔色）：

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

组件规范：

• Bento 网格：非对称 CSS Grid；卡片精确 border: 1px solid #EAEAEA；圆角 ≤ 8px/12px；内边距充裕 24px ~ 40px。
• 主 CTA 按钮：实底 #111111 + 白字；圆角 4px ~ 6px；无阴影；hover 微调到 #333333 或 transform: scale(0.98)。
• 标签/状态徽章：胶囊 border-radius: 9999px，极小字号 text-xs，大写 + 宽字距 0.05em，底色用上面的柔色。
• 手风琴/FAQ：去掉容器盒，仅用 border-bottom: 1px solid #EAEAEA 分隔；切换用清晰的 + / - 图标。
• 快捷键微 UI：用 <kbd> 渲染实体键——border: 1px solid #EAEAEA; border-radius: 4px; background: #F7F6F3; 等宽字体。
• 仿 OS 窗口：mock 软件时套极简容器，白色顶栏放三个浅灰小圆点（仿 macOS 窗控）。

图标与图像：

• 系统图标用 Phosphor（Bold/Fill）或 Radix UI Icons，略粗描边的技术感，全局统一描边宽度。
• 插画：白底单色粗连续线手绘，仅一个偏移几何形填柔色。
• 照片：去饱和暖调，叠 opacity: 0.04 暖噪点融入单色系；缺素材用 https://picsum.photos/seed/{context}/1200/800。
• Hero/区块背景：低透明全宽图、暖调柔和径向光斑（radial-gradient 暖色 opacity: 0.03）或极简线纹，增加纵深而不破坏干净感。

示例

滚动入场（核心动效模式）：

// 元素从 translateY(12px)+opacity:0 在 600ms 内渐显
// 必须用 IntersectionObserver，禁止 window.addEventListener('scroll')
const io = new IntersectionObserver((entries) => {
  entries.forEach((e) => {
    if (e.isIntersecting) {
      e.target.style.opacity = '1';
      e.target.style.transform = 'translateY(0)';
      io.unobserve(e.target);
    }
  });
});
document.querySelectorAll('.reveal').forEach((el) => io.observe(el));

.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .6s cubic-bezier(0.16, 1, 0.3, 1),
              transform .6s cubic-bezier(0.16, 1, 0.3, 1);
}
/* 列表/网格交错入场 */
.reveal-item { animation-delay: calc(var(--index) * 80ms); }

卡片 hover（超弱阴影位移）：

.card {
  border: 1px solid #EAEAEA;
  border-radius: 12px;
  box-shadow: 0 0 0 rgba(0,0,0,0);
  transition: box-shadow .2s ease;
}
.card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.04); }

实体键徽章：

<kbd style="border:1px solid #EAEAEA;border-radius:4px;background:#F7F6F3;
            font-family:'Geist Mono',monospace;padding:2px 6px;">⌘K</kbd>

注意事项

• 动效只动 transform 和 opacity，绝不动会触发布局的属性（top/left/width/height）；will-change: transform 仅在正在动的元素上节制使用。
• 环境动效可选：单个极慢径向渐变光斑（animation-duration: 20s+，opacity: 0.02~0.04），放在 position: fixed; pointer-events: none 层，绝不放在滚动容器上。
• 动效目标是「安静的高级感」而非表演，存在但不抢戏；列表不要一次性全部挂载，用交错延迟。
• 极简最大的坑是层级被抹平：上线前用真实内容核对可扫读性与对比度。

互见

• 同域创意/design 下的排版、配色、组件库类技能可配合使用。
• 需要可访问性核验时，结合响应式/键盘/读屏验证类技能。

---

采编自 sickn33/antigravity-awesome-skills（原作者 Leonxlnx，taste-skill），MIT 许可。