ui-craft-minimal

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

UI Craft — Minimal

UI Craft — 极简

Pre-committed minimal style: editorial clean, Linear / Notion / Vercel. Whitespace is the composition. One accent, hairline borders, almost no motion.

预设极简风格：编辑级简洁，Linear / Notion / Vercel 风。留白是构图的核心。单一强调色，极细边框，几乎无动效。

Knobs (locked)

调节旋钮（已锁定）

CRAFT_LEVEL = 8 — minimal aesthetics only work when executed precisely; Polish Pass is mandatory.
MOTION_INTENSITY = 3 — hover + modal enter/exit only. No scroll reveals, no page transitions, no stagger.
VISUAL_DENSITY = 2 — whitespace-heavy, 1-2 items per row, generous gutters.

Do not re-ask these in Discovery. Skip straight to accent + font confirmation if ambiguous.

CRAFT_LEVEL = 8 — 极简美学只有精准落地才能成立，必须执行 Polish Pass。
MOTION_INTENSITY = 3 — 仅保留 hover 与模态框的进入/退出动效。无滚动揭示、无页面过渡、无错落动画。
VISUAL_DENSITY = 2 — 大量留白，每行1-2个元素，间距宽松。

请勿在 Discovery 阶段重复询问这些参数。若有歧义，直接确认强调色与字体即可。

Style anchors

风格锚点

Black or near-black type on white or near-white canvas. Monochrome + ONE accent.
Inter / Geist for body — never a display font.
Section padding 120-200px vertical, 40-80px gutters.
Hairline borders
```
1px solid oklch(92% 0.005 250)
```
in place of shadows.
Typography is the hierarchy. No decorative gradients, patterns, or glass.
Single-column hero default. Asymmetry via one supporting element, not layout tricks.
Motion is punctuation, not spectacle.
Every pixel deliberate. When in doubt, cut it.

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

Base rules (inherited)

基础规则（继承自通用规范）

All rules in

../ui-craft/SKILL.md

apply. This file overrides knob defaults and adds style-specific guidance below. The anti-slop and craft tests still apply in full.

../ui-craft/SKILL.md

中的所有规则均适用。本文件覆盖了调节旋钮的默认值，并补充了以下风格专属指南。anti-slop 与工艺测试规则仍完全适用。

Style-specific overrides

风格专属覆盖规则

Typography

Body: Inter or Geist, 400 weight. UI emphasis: 500. Never 600/700 in body copy.
```
system-ui, -apple-system
```
as fallback stack.
Headings:
```
tracking-tight
```
/
```
-0.02em
```
above 24px, 500 or 600 max.
```
text-wrap: balance
```
on headings,
```
text-wrap: pretty
```
on paragraphs.
No display serifs. No geometric display sans. No mixing two sans families.

Color

Surface:
```
oklch(99% 0 0)
```
(light) /
```
oklch(14% 0.005 250)
```
(dark).
Text:
```
oklch(18% 0.01 250)
```
primary,
```
oklch(46% 0.01 250)
```
secondary.
Accent reserved for: primary CTA, active nav item, one key metric. That is it.

Borders:

oklch(92% 0.005 250)

light /

oklch(24% 0.008 250)

dark. No colored borders.

Spacing & layout

Section vertical:
```
py-24 md:py-32 lg:py-40
```
(96 / 128 / 160px) minimum; 200px for hero on large screens.
Container:
```
max-w-5xl
```
typical;
```
max-w-3xl
```
for reading content.
One accent placement per viewport preferred; two max.
No card grids with more than 2 columns on desktop.

Borders & elevation

Default chrome = 1px hairline border, no shadow.
Elevation only for floating UI (menus, toasts, modals) — single soft ambient shadow, not layered.
Radius: 6px inputs, 8px cards, 12px modals. Keep the scale narrow.

Motion

Allowed: hover (opacity / border color, 120-150ms), modal + dialog enter/exit (180-220ms ease-out), focus ring.
Forbidden at this intensity: scroll-triggered reveals, stagger, page transitions, parallax, magnetic cursor, entrance choreography.
Any animation must honor
```
prefers-reduced-motion
```
.

Composition

Hero: left-aligned or centered headline, ONE supporting element (social proof line, screenshot, single chip). No floating badges, orbs, blobs.
Features: stacked rows with a single real visual each. No 3-up uniform icon grids even when tempting.
Nav: text-only links, current state = accent underline or weight 500. No pill backgrounds.

排版

正文：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
```
。
每个视口内优先仅放置1处强调色；最多2处。
桌面端卡片网格列数不超过2列。

边框与层级

默认 UI 元素采用1px极细边框，无阴影。
层级阴影仅用于浮动 UI（菜单、Toast、模态框）— 使用单个柔和环境阴影，而非多层阴影。
圆角：输入框6px，卡片8px，模态框12px。保持圆角尺度差异较小。

动效

允许的动效：hover（透明度/边框颜色变化，120-150ms）、模态框与对话框的进入/退出（180-220ms ease-out 缓动）、焦点环。
此动效强度下禁止使用：滚动触发揭示、错落动画、页面过渡、视差效果、磁吸光标、入场编排动画。
所有动画必须遵循
```
prefers-reduced-motion
```
规则。

构图

Hero 区：标题左对齐或居中，仅搭配1个辅助元素（用户信任背书文案、截图、单个标签）。不使用浮动徽章、球体、渐变斑点。
功能区：采用堆叠行布局，每行仅搭配1个真实视觉元素。即便看起来不错，也不要使用三列统一图标网格。
导航：纯文本链接，当前状态用强调色下划线或500字重标识。不使用胶囊形背景。

Reference files to read first

需优先阅读的参考文件

Keep the reading list tight. Load only these from

../ui-craft/references/

```
layout.md
```
— spacing, hierarchy, composition
```
typography.md
```
— scale, readability, weight
```
color.md
```
— monochrome scales, OKLCH, dark mode
```
accessibility.md
```
— focus, contrast, keyboard

Skip

dashboard.md

stack.md

sound.md

unless explicitly relevant.

精简阅读列表，仅从

../ui-craft/references/

加载以下文件：

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

除非明确相关，否则跳过

dashboard.md

、

stack.md

、

sound.md

。

Anti-patterns for THIS style

本风格的反模式

Multiple accent colors. One accent, period.
Display serifs, geometric display sans, or mixing two sans families.
Decorative gradients, mesh backgrounds, noise overlays, glass panels.
Scroll-triggered reveals, stagger, page transitions — even "subtle" ones.
Uniform 3-column icon-heading-text feature grids.
Colored shadows or glows as affordances.
Dense layouts. If density feels right, this is the wrong variant — switch to
```
ui-craft-dense-dashboard
```
.
Pill backgrounds on nav links or buttons by default; prefer text + underline.
Section padding under 96px on desktop.

多种强调色。只能有1种强调色，没有例外。
衬线展示字体、几何无衬线展示字体，或混合使用两种无衬线字体族。
装饰性渐变、网格背景、噪点叠加层、玻璃面板。
滚动触发揭示、错落动画、页面过渡 — 哪怕是“微妙”的也不行。
统一的三列「图标-标题-文本」功能网格。
使用彩色阴影或发光作为可操作提示。
密集布局。如果觉得密集布局更合适，说明用错了风格变体 — 请切换到
```
ui-craft-dense-dashboard
```
。
默认给导航链接或按钮加胶囊背景；优先使用文本+下划线样式。
桌面端区块垂直内边距小于96px。