ui-craft-minimal

UI Craft — 极简

预设的极简风格：编辑式简洁，Linear / Notion / Vercel 风格。留白就是构图。一个强调色、极细边框，几乎没有动效。

调节项（已锁定）

• CRAFT_LEVEL = 8 — 极简美学只有精准执行才能成立；必须进行润色。
• MOTION_INTENSITY = 3 — 仅允许悬停和模态框进入 / 退出动效。不做滚动显现、页面转场或交错动画。
• VISUAL_DENSITY = 2 — 大量留白，每行 1-2 项，间距宽裕。

在 Discovery 阶段不要重复询问这些内容。如果存在歧义，直接确认强调色和字体。

风格基准

• 在白色或近白色画布上使用黑色或近黑色字体。单色调 + 一种强调色。
• 正文使用 Inter / Geist — 绝不使用展示字体。
• 区块垂直内边距为 120-200px，左右间距为 40-80px。
• 使用极细边框 1px solid oklch(92% 0.005 250) 替代阴影。
• 通过排版体现层级。不使用装饰性渐变、图案或玻璃效果。
• 默认采用单列 Hero。通过一个辅助元素体现不对称，而非使用布局技巧。
• 动效是标点，不是奇观。
• 每个像素都经过深思熟虑。拿不准时，就删掉。

基础规则（继承）

../ui-craft/SKILL.md 中的所有规则均适用。本文件覆盖调节项默认值，并在下方补充针对特定风格的指导。反低质设计和工艺测试仍须完整执行。

特定风格覆盖规则

排版

• 正文：Inter 或 Geist，字重 400。UI 强调：500。正文中绝不使用 600 / 700。
• 回退字体栈使用 system-ui, -apple-system。
• 标题：超过 24px 时使用 tracking-tight / -0.02em，字重最高为 500 或 600。
• 标题使用 text-wrap: balance，段落使用 text-wrap: pretty。
• 不使用展示衬线字体。不使用几何风格展示无衬线字体。不混用两种无衬线字体。

颜色

• 表面：oklch(99% 0 0)（浅色） / oklch(14% 0.005 250)（深色）。
• 文本：oklch(18% 0.01 250) 作为主要文本，oklch(46% 0.01 250) 作为次要文本。
• 强调色仅用于：主要 CTA、当前导航项、一项关键指标。仅限这些用途。
• 边框：浅色使用 oklch(92% 0.005 250) / 深色使用 oklch(24% 0.008 250)。不使用彩色边框。

间距与布局

• 区块垂直间距：最低使用 py-24 md:py-32 lg:py-40（96 / 128 / 160px）；大屏上的 Hero 使用 200px。
• 容器：通常使用 max-w-5xl；阅读内容使用 max-w-3xl。
• 每个视口最好只放置一处强调色，最多两处。
• 桌面端卡片网格不得超过 2 列。

边框与层次

• 默认界面元素 = 1px 极细边框，不加阴影。
• 仅浮动 UI（菜单、toast、模态框）使用层次效果 — 仅使用单层柔和环境阴影，不叠加阴影。
• 圆角：输入框 6px、卡片 8px、模态框 12px。圆角规格保持精简。

动效

• 允许：悬停（透明度 / 边框颜色，120-150ms）、模态框和对话框进入 / 退出（180-220ms ease-out）、焦点环。
• 此强度下禁止：滚动触发动效、交错动画、页面转场、视差、磁吸光标、入场编排。
• 任何动画都必须遵循 prefers-reduced-motion。

构图

• Hero：标题左对齐或居中，配一个辅助元素（社会认同文案、截图、单个标签）。不使用浮动徽标、球体或斑块。
• 功能区：采用堆叠行，每行搭配一个真实视觉元素。即使很容易想到，也不要使用均匀的三列图标网格。
• 导航：仅使用文本链接，当前状态通过强调色下划线或 500 字重体现。不使用药丸形背景。

请先阅读的参考文件

精简阅读列表。仅从 ../ui-craft/references/ 加载以下文件：

• layout.md — 间距、层级、构图
• typography.md — 字号比例、可读性、字重
• color.md — 单色调色阶、OKLCH、深色模式
• accessibility.md — 焦点、对比度、键盘操作

除非明确相关，否则跳过 dashboard.md、stack.md、sound.md。

此风格的反模式

• 使用多种强调色。强调色只用一种，就一种。
• 使用展示型衬线字体、几何风格的展示型无衬线字体，或混用两种无衬线字体。
• 使用装饰性渐变、网格背景、噪点叠层或玻璃面板。
• 使用滚动触发展示、交错动画、页面过渡——即使是“微妙”的效果也不行。
• 使用统一的三列图标－标题－文本功能网格。
• 使用彩色阴影或辉光作为交互提示。
• 使用密集布局。如果密度看起来合适，那就说明这个变体不适合——切换到 ui-craft-dense-dashboard。
• 默认不要给导航链接或按钮添加胶囊形背景；优先使用文本加下划线。
• 桌面端的区块内边距不得小于 96px。