web-prototype-taste-editorial

Web Prototype — 编辑式极简主义

一个单页 Web 原型，呈现 Notion/Linear 营销网站或高端文档页面的风格。适用于需求中提到“简洁”“编辑式”“高端 SaaS”“文档”或“知识产品”的场景。

来源

摘编自 Leonxlnx/taste-skill — skills/minimalist-skill/SKILL.md 和 skills/taste-skill/SKILL.md 中的空间节奏规则。完整模板请参阅此目录中的 example.html。

硬性规则

• **画布：**暖白色（#FBFBFA 或 #F7F6F3），绝不使用纯白。
• **前景：**近黑色 #111111，次要文本使用 #787774。绝不使用 #000000。
• **边框：**仅使用 1px solid #EAEAEA。投影不得深于 0 1px 2px rgba(0,0,0,0.04)。
• **字体搭配：**展示文字使用编辑式衬线字体（Instrument Serif / Newsreader / Lyon），正文使用 grotesque 字体（Geist / Switzer / SF Pro），元信息/按键使用等宽字体（Geist Mono / JetBrains Mono）。
• 展示文字字距：letter-spacing: -0.025em，line-height: 1.05。
• **仅使用柔和色标签：**标签/徽章使用低饱和背景色（#FDEBEC、#E1F3FE、#EDF3EC、#FBF3DB）。绝不用于区块背景。
• 容器：border-radius: 8–12px，不得更大。容器不得使用胶囊样式，卡片不得使用 rounded-full。
• **区块内边距：**至少 py-24，Hero 区块使用 py-32。

禁用项

• Inter、Roboto、Open Sans（改用 Geist / Switzer / SF Pro）。
• 通用的 Lucide 细线图标（改用 Phosphor Bold 或 Radix）。
• 渐变、霓虹效果，以及超出细微导航栏模糊效果的玻璃拟态。
• 深于 shadow-sm 的投影。不得使用辉光效果。
• 通用占位名称（John Doe / Acme / Lorem）。使用贴合具体情境的内容。
• AI 文案陈词滥调：“Elevate”“Seamless”“Unleash”“Next-Gen”。
• 纯黑色 #000000。
• 深色图片上居中的 Hero H1。

必备组件

• 粘性胶囊导航栏（半透明暖白色、backdrop-blur-md、极细边框）。
• 非对称 Hero：左对齐的衬线展示文字，上方有眉题标签，导语段落设为 max-w-[52ch]。
• Bento 功能网格，行高不均等，并显示 1px 分隔线——绝不可使用 3 张等高卡片。
• 使用 border-t 单独分隔的“它不是什么”或对比区块，不使用卡片。
• 带有一个强调色 CTA 的定价或注册横幅。
• 页脚：等宽字体元信息，上方仅有一条极细分隔线。

动效（仅限细微效果）

• 滚动进入：在 600ms cubic-bezier(0.16, 1, 0.3, 1) 内从 translateY(12px) → 0 + opacity 0 → 1。仅使用 IntersectionObserver。
• 卡片悬停上浮：在 200ms 内将 box-shadow 从 0 0 0 变为 0 2px 8px rgba(0,0,0,0.04)。
• 列表项按 --index * 80ms 依次错开。
• 只对 transform 和 opacity 添加动画。

预检

• 已使用衬线展示字体 + grotesque 正文字体
• 画布为暖白色，前景为近黑色
• 所有卡片/分隔线均使用 1px solid #EAEAEA
• 至少有一种非对称布局（分栏、眉题标签、不等高 Bento 网格）
• 柔和色标签仅用于标签，不用于区块背景
• 区块内边距 ≥ py-24
• 没有表情符号、禁用字体或 AI 文案陈词滥调