UI Craft — Minimal 是 UI Craft 技能体系下的一个预置极简风格变体,来源为 educlopez/ui-craft。它面向需要编辑感、干净、留白充足界面的场景,风格锚点参照 Linear、Notion、Vercel 一类产品。
用途 该技能用于在生成 UI 时预先锁定一套极简风格,避免在探索阶段反复询问风格偏好。资料说明:不要在 Discovery 阶段重新询问这些参数;若强调色或字体不明确,可直接跳到强调色与字体确认。
锁定参数
- CRAFT_LEVEL = 8:极简美学只有在精确执行时才成立,Polish Pass 为强制项。
- MOTION_INTENSITY = 3:仅保留悬停与模态框进入/退出动画。不允许滚动触发显现、页面转场、错峰动画。
- VISUAL_DENSITY = 2:留白优先,每行 1-2 个元素,间距宽松。
风格锚点
- 白色或近白画布上使用黑色或近黑文字。单色加一个强调色。
- 正文使用 Inter / Geist,绝不使用展示型字体。
- 区块垂直内边距 120-200px,横向间距 40-80px。
- 用 1px 实线细边框(oklch(92% 0.005 250))替代阴影。
- 排版即层级。不使用装饰性渐变、图案或玻璃效果。
- 默认单列 Hero。非对称通过一个辅助元素实现,而非布局技巧。
- 动效是标点,不是奇观。
- 每个像素都有意为之。存疑时,删掉它。
基础规则 ../ui-craft/SKILL.md 中的所有规则均适用。本文件覆盖参数默认值,并补充风格专属指引。反粗糙(anti-slop)与工艺(craft)测试仍完整适用。
风格专属覆盖 排版
- 正文: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(菜单、提示、模态框)使用层级——单一柔和环境阴影,不做多层叠加。
- 圆角:输入框 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。