网页设计模式

用于生产级界面的CSS实现模式。关于设计基础和决策，请参阅ui-design。本技能侧重于代码。

另请参阅： ui-design以了解排版/色彩/间距理论，frontend-design以了解创意美学。

安装

OpenClaw / Moltbot / Clawbot

npx clawhub@latest install web-design

布局原则

二维布局使用CSS Grid，一维流式布局使用Flexbox。根据具体场景选择合适的工具。

空间构成

超越可预测的布局。有意识的不对称、重叠元素以及打破网格的强调手法能创造出视觉趣味。对于重叠元素，使用网格堆叠（grid-area: 1/1）而非position: absolute。为营造奢华/编辑美学，选择充裕的负空间；对于数据密集型界面，则采用受控的密度——选择必须是有意为之。

字体排印

字体排印承载了设计90%的个性。选择与界面用途相匹配的字体。

字体比例

使用一致的比例。1.25倍（大三度）比例适用于大多数界面：text-xs0.64rem,text-sm0.8rem,text-base1rem,text-lg1.25rem,text-xl1.563rem,text-2xl1.953rem，text-3xl2.441rem，text-4xl3.052rem。将正文字体大小设置为1rem（最小16px），行高1.5用于正文，1.1–1.2用于标题。限制行长至60–75ch。

色彩

构建调色板

每个调色板都需要五种功能角色：

对比度与深度

通过表面分层而非仅靠阴影来创造深度：

:root {
  --surface-0: hsl(220 15% 8%);    /* page background */
  --surface-1: hsl(220 15% 12%);   /* card */
  --surface-2: hsl(220 15% 16%);   /* raised element */
  --surface-3: hsl(220 15% 20%);   /* popover / modal */
}

使用HSL或OKLCH进行感知均匀的色彩操作。主色搭配鲜明的重音色优于均匀分布的调色板。始终验证WCAG对比度：普通文本需达到4.5:1，大文本需达到3:1。

间距

一致的间距能创造节奏感。使用8px基础单位（或针对密集UI使用4px）：

一致地应用间距：使用间隙（gap）于 Grid/Flexbox 容器，而非在子元素上使用边距。这能消除边距合并的 bug 并简化响应式调整。

视觉层次

通过有意识地运用大小、粗细、颜色和空间的对比来引导视线。

层次构建技巧

实用模式——卡片层级

卡片内的层级：眉标（xs，大写，柔和色）→标题（xl，半粗体）→正文（base，次要色，1.6行高）→操作区（通过上边距分隔）。使用表面颜色进行区隔，并采用间距标记保持内边距一致。

响应式设计

断点策略

流动技术

在可能的情况下，优先使用流动尺寸而非固定断点：

/* Fluid typography — scales between 640px and 1440px viewport */
h1 { font-size: clamp(2rem, 1.5rem + 2.5vw, 3.5rem); }

/* Fluid spacing */
section { padding-block: clamp(2rem, 1rem + 4vw, 6rem); }

/* Intrinsic grid — no media queries needed */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: var(--space-6); }

当组件的布局应响应其容器而非视口时，使用容器查询（@container）来实现组件级别的响应性。

无障碍性

无障碍性不是可选项。从一开始就应将其构建在内。

/* Robust focus indicator */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Respect motion preferences */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

组件设计

设计良好组件的剖析

每个UI组件都应具有清晰的状态、一致的间距和可预测的行为：

设计令牌架构

为保持可维护性，将令牌结构分为三层：

/* Layer 1: Primitive values */
--blue-500: oklch(0.55 0.2 250);
--gray-100: oklch(0.95 0.005 250);
--radius-md: 0.5rem;

/* Layer 2: Semantic aliases */
--color-primary: var(--blue-500);
--color-surface: var(--gray-100);
--radius-button: var(--radius-md);

/* Layer 3: Component-specific */
--btn-bg: var(--color-primary);
--btn-radius: var(--radius-button);
--btn-padding: var(--space-2) var(--space-4);

这种三层架构允许通过重新映射第二层来切换主题，而无需修改组件。

交互模式

动效与动画

使用动效来传达状态变化，而非装饰。关注高影响力时刻：

/* Staggered entrance animation */
.stagger-item {
  opacity: 0;
  translate: 0 1rem;
  animation: reveal 0.5s ease-out forwards;
}
.stagger-item:nth-child(1) { animation-delay: 0ms; }
.stagger-item:nth-child(2) { animation-delay: 60ms; }
.stagger-item:nth-child(3) { animation-delay: 120ms; }

@keyframes reveal {
  to { opacity: 1; translate: 0 0; }
}

滚动驱动效果

使用原生animation-timeline: scroll()（置于@supports内）用于无需JavaScript的视差和显示效果。通过功能检测进行封装以实现优雅降级。

设计质量检查清单

发布前，请对照以下标准进行验证：

• 排版: 有意识的字体搭配，一致的尺寸比例，可读的行宽
• 色彩: 协调统一的调色板，符合WCAG对比度标准，定义了语义化的反馈颜色
• 间距: 使用间距标记确保一致的节奏感，避免临时性的像素值
• 层级: 清晰的视觉流——视线路径符合预期的阅读顺序
• 响应式设计: 在移动端、平板、桌面端测试；无水平溢出
• 无障碍性: 支持键盘导航，焦点可见，经过屏幕阅读器测试，运动安全
• 状态: 所有交互元素均定义了悬停、激活、聚焦、禁用和加载状态
• 个性: 设计具有明确的观点——而非通用的模板美学
• 性能图像已优化，字体已子集化，动画启用GPU加速（变换，透明度）
• 深色模式：若支持，界面采用分层明度设计，而非颜色反转