---
title: 设计体系与工程概念 (Design Concepts)
description: Tuff 与 TuffEx 核心设计概念、几何物理法则与生产力微交互规范导航
---

# 设计体系与工程概念

Tuff 的设计体系不是简单的视觉样式罗列，而是建立在**人机感知物理学**、**流式现代计算**与**生产力工程纪律**之上的严密契约。

本板块系统性拆解 Tuff & TuffEx 每个设计决策背后的“为什么”与“怎么做”，涵盖几何曲率、物理材质、色彩暗色、排版工程、微动效节拍与 AI 流式交互 6 大领域。

## 几何与空间形态

- **[G2 连续曲率与超椭圆几何](./curvature.zh.mdc)** — 超越标准 `border-radius` 圆弧倒角，解析曲率突变、超椭圆方程与 Apple 平滑圆角实现。
- **[同心圆角法则与微内嵌防裁切](./concentricity.zh.mdc)** — $R_{\text{outer}} = R_{\text{inner}} + \text{Padding}$ 几何守恒、光标裁切规避与 0.65x 垂直光学内边距。
- **[浮层按打开顺序取号与吸顶分割边界](./depth-topology.zh.mdc)** — 消除 `z-index: 99999` 混乱：浮层按打开顺序从同一个计数器取号，抽屉先抬到 10000；吸顶 1px 细线准则。

## 材质物理与环境感知

- **[Surface 8 种材质物理选型与确认门禁](./surface-taxonomy.zh.mdc)** — Refraction（默认）、Glass、Acrylic、Mica 等 8 种材质选型矩阵与严肃确认门禁。
- **[琉光折射管线与光谱色散模型](./refraction-physics.zh.mdc)** — 斯涅尔定律、SVG 位移贴图滤镜、Smoothstep 强度映射与 RGB 色散。
- **[材质自动推断与 120Hz 运动降级](./surface-deduction.zh.mdc)** — 指针速度感知、窗口移动监听、帧预算探针与省电信号，0ms 降级与 140ms 非对称恢复。
- **[Alpha 噪点掩膜与光斑追踪](./noise-and-specular.zh.mdc)** — 解决 Overlay 发灰的 `mask-composite: intersect` Alpha 噪点方案与卡片物理反光追踪。

## 色彩科学与暗色模式

- **[#141414 深灰画布与三层表面阶梯](./dark-palette.zh.mdc)** — 为什么不用纯黑 `#000000`？规避 OLED 拖尾残影、保留空间阴影与三层深灰阶梯。
- **[暗色视网膜光晕与字重微调补偿](./irradiation-tuning.zh.mdc)** — 亥姆霍兹视网膜光渗效应、暗底白字的膨胀感知、可变字体 460/560 微调与静态字体回退。
- **[双极性语义着色与 4.5:1 对比度守恒](./color-mix-contrast.zh.mdc)** — 解决暗色下 `-light-9` 背景着色失真，`color-mix` 墨水融合与 WCAG 4.5:1 全场景实测。
- **[深浅主题光效裂变与色相排序](./light-modes.zh.mdc)** — 为什么 `plus-lighter` 在浅色底板会发灰？深浅独立色相循环管道设计。

## 排版美学与文本工程

- **[13–14px 生产力基准与等宽 0.9em 调和](./type-scale.zh.mdc)** — 生产力工具与营销页面的本质区别、阅读疲劳与等宽代码 X 高度缩小 0.9em 调和。
- **[现代软换行、孤字终结与零 Tracking 铁律](./smart-wrapping.zh.mdc)** — `text-wrap: pretty` 孤字规避、`balance` 标题平衡、流式稳定期与严禁正文字距调整。

## 微动效与微交互节拍

- **[微动效响应纪律与 Sub-100ms 瞬时悬停](./micro-motion.zh.mdc)** — 动效是空间锚点不是娱乐表演，悬停 0ms 瞬间响应，状态形变类名隔离。
- **[90ms+90ms 确认律动与物理弹簧引擎](./activation-and-springs.zh.mdc)** — 消除点击即消失的不确定感，两拍式确认微交互节拍与二阶阻尼弹簧方程。
- **[合成器线程优先与双 Keyframe 重放](./compositor-and-replay.zh.mdc)** — 仅允许四大 GPU 合成属性，Keyframes 排除变量，双键名交替规避重排。

## AI 原生交互与流式生成

- **[流式文字节拍器与微渐显预设](./stream-pacer.zh.mdc)** — `useStreamPacer` 节拍时钟平滑网络抖动，Aurora / Blur 微渐显与单光标交接。
- **[双层镜像 Reserve 防抖与即时框选复制](./anti-jitter-reserve.zh.mdc)** — 重放时用预占位镜像锁住最终高度，文字落地即可框选复制（Cmd+C 零等待）底线。