ui-design
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseUI Design Fundamentals
UI设计基础
The definitive guide for building production-grade web interfaces. Covers the full stack of design decisions from layout to motion.
构建生产级Web界面的权威指南，覆盖从布局到动效的全链路设计决策。
WHEN To Use
适用场景
- Designing new UI components or pages
- Building landing pages, dashboards, or applications
- Reviewing code for design quality
- Creating distinctive interfaces that avoid generic aesthetics
- Implementing accessibility requirements
- 设计新的UI组件或页面
- 构建落地页、仪表盘或应用程序
- 审核代码的设计质量
- 打造避免通用审美的差异化界面
- 落实无障碍相关要求
KEYWORDS
关键词
ui design, web design, layout, typography, color palette, spacing, visual hierarchy, responsive design, accessibility, motion design, component design, design tokens, frontend, css, tailwind
ui design, web design, layout, typography, color palette, spacing, visual hierarchy, responsive design, accessibility, motion design, component design, design tokens, frontend, css, tailwind
Installation
安装
OpenClaw / Moltbot / Clawbot
OpenClaw / Moltbot / Clawbot
bash
npx clawhub@latest install ui-designbash
npx clawhub@latest install ui-designDesign Philosophy
设计理念
The 80/20 of Design Quality
设计质量的二八法则
| Factor | Impact | Time Investment |
|---|---|---|
| Typography | 40% | Choose 1-2 fonts well |
| Spacing | 25% | Use consistent scale |
| Color | 20% | Limit palette, ensure contrast |
| Everything else | 15% | Shadows, borders, motion |
Focus on typography and spacing first. They're 65% of perceived quality.
| 因素 | 影响占比 | 时间投入 |
|---|---|---|
| 排版 | 40% | 选好1-2种字体即可 |
| 间距 | 25% | 使用统一的间距尺度 |
| 色彩 | 20% | 限制调色板数量，确保对比度 |
| 其他所有因素 | 15% | 阴影、边框、动效 |
优先关注排版和间距，它们占用户感知质量的65%。
Commit to a Direction
明确设计方向
Mediocrity is forgettable. Pick an extreme:
| Direction | Characteristics | Use When |
|---|---|---|
| Brutally Minimal | Stark, essential, nothing extra | Developer tools, productivity |
| Luxury/Refined | Premium, subtle elegance | High-end products, fashion |
| Playful | Fun, bright, approachable | Consumer apps, games |
| Editorial | Type-forward, grid-based | Content sites, magazines |
| Industrial | Function-forward, robust | B2B, enterprise |
平庸的设计毫无记忆点，选择一个极致的风格方向：
| 方向 | 特点 | 适用场景 |
|---|---|---|
| 极致极简 | 直白、核心优先，无多余元素 | 开发者工具、生产力工具 |
| 精致奢华 | 高级感、微妙的优雅 | 高端产品、时尚相关 |
| 活泼趣味 | 有趣、明亮、友好 | 消费级应用、游戏 |
| 编辑风 | 排版优先、基于网格 | 内容站点、杂志 |
| 工业风 | 功能优先、硬朗 | B2B、企业级产品 |
Layout
布局
Grid vs Flexbox Decision
Grid与Flexbox选择指南
| Layout Need | Tool | Why |
|---|---|---|
| Page-level structure | CSS Grid ( | Named regions, explicit control |
| Navigation bars | Flexbox | Single-axis, |
| Card grids | Grid ( | Responsive without media queries |
| Centering | Grid ( | Shortest, most reliable |
| Sidebar + content | Grid ( | Fixed + fluid |
| Stacking/overlaps | Grid + | No |
| 布局需求 | 工具 | 原因 |
|---|---|---|
| 页面级结构 | CSS Grid ( | 命名区域，显式可控 |
| 导航栏 | Flexbox | 单轴布局， |
| 卡片网格 | Grid ( | 无需媒体查询即可实现响应式 |
| 元素居中 | Grid ( | 最简洁可靠的实现方式 |
| 侧边栏+内容 | Grid ( | 固定宽度+自适应宽度组合 |
| 堆叠/重叠效果 | Grid + | 无需使用 |
Container Strategy
容器策略
css
/* Standard content width */
.container {
width: 100%;
max-width: 1280px;
margin-inline: auto;
padding-inline: clamp(1rem, 5vw, 3rem);
}
/* Full-bleed with contained content */
.full-bleed {
width: 100vw;
margin-left: calc(50% - 50vw);
}css
/* Standard content width */
.container {
width: 100%;
max-width: 1280px;
margin-inline: auto;
padding-inline: clamp(1rem, 5vw, 3rem);
}
/* Full-bleed with contained content */
.full-bleed {
width: 100vw;
margin-left: calc(50% - 50vw);
}Common Layout Mistakes
常见布局错误
| Mistake | Problem | Fix |
|---|---|---|
| Mixing container widths | Inconsistent alignment | Use single |
| Content behind fixed navbar | Hidden content | Add |
| No mobile padding | Edge-to-edge text | Add |
| Centered everything | Weak hierarchy | Left-align body text |
| 错误 | 问题 | 修复方案 |
|---|---|---|
| 混合使用不同容器宽度 | 对齐不一致 | 使用统一的 |
| 内容被固定导航栏遮挡 | 内容隐藏 | 添加 |
| 移动端无内边距 | 文本贴边 | 至少添加 |
| 所有内容居中 | 视觉层级弱 | 正文文本左对齐 |
Typography
排版
Typography carries 90% of a design's personality.
排版决定了设计90%的个性。
Font Pairing by Context
不同场景的字体搭配
| Context | Display Font | Body Font | Example |
|---|---|---|---|
| Editorial | High-contrast serif | Neutral humanist | Playfair + Source Sans |
| SaaS | Geometric sans | Matching sans | DM Sans + DM Mono |
| Luxury | Thin modern serif | Elegant sans | Cormorant + Jost |
| Developer | Monospace display | Monospace body | JetBrains Mono + IBM Plex |
| Playful | Rounded/quirky | Clean readable | Nunito + Outfit |
| 场景 | 展示字体 | 正文字体 | 示例 |
|---|---|---|---|
| 编辑风 | 高对比度衬线字体 | 中立人文主义无衬线 | Playfair + Source Sans |
| SaaS | 几何无衬线 | 同系列无衬线 | DM Sans + DM Mono |
| 奢华风 | 细款现代衬线 | 优雅无衬线 | Cormorant + Jost |
| 开发者工具 | 等宽展示字体 | 等宽正文字体 | JetBrains Mono + IBM Plex |
| 活泼风 | 圆润/独特风格 | 清晰易读 | Nunito + Outfit |
Type Scale (1.25 ratio)
字体尺度（1.25倍率）
css
--text-xs: 0.64rem; /* 10px - captions */
--text-sm: 0.8rem; /* 13px - secondary */
--text-base: 1rem; /* 16px - body */
--text-lg: 1.25rem; /* 20px - lead */
--text-xl: 1.563rem; /* 25px - h4 */
--text-2xl: 1.953rem; /* 31px - h3 */
--text-3xl: 2.441rem; /* 39px - h2 */
--text-4xl: 3.052rem; /* 49px - h1 */css
--text-xs: 0.64rem; /* 10px - captions */
--text-sm: 0.8rem; /* 13px - secondary */
--text-base: 1rem; /* 16px - body */
--text-lg: 1.25rem; /* 20px - lead */
--text-xl: 1.563rem; /* 25px - h4 */
--text-2xl: 1.953rem; /* 31px - h3 */
--text-3xl: 2.441rem; /* 39px - h2 */
--text-4xl: 3.052rem; /* 49px - h1 */Typography Rules
排版规则
| Rule | Value | Why |
|---|---|---|
| Minimum body size | 16px | Below is hard to read |
| Body line-height | 1.5-1.75 | Improves readability |
| Heading line-height | 1.1-1.2 | Tighter for large text |
| Line length | 60-75 characters | Optimal reading |
| Paragraph spacing | 1.5em | Clear separation |
| 规则 | 取值 | 原因 |
|---|---|---|
| 正文字号最小值 | 16px | 小于该值难以阅读 |
| 正文行高 | 1.5-1.75 | 提升可读性 |
| 标题行高 | 1.1-1.2 | 大文本行高更紧凑 |
| 行长度 | 60-75字符 | 最优阅读长度 |
| 段落间距 | 1.5em | 清晰区隔段落 |
Typography Mistakes
常见排版错误
| Mistake | Problem | Fix |
|---|---|---|
| System fonts only | Generic look | Use Google Fonts or variable fonts |
| Too many fonts | Visual chaos | Max 2 families |
| Weak weight contrast | Poor hierarchy | Bold headings (600+), regular body |
| Long lines | Hard to read | Add |
| 错误 | 问题 | 修复方案 |
|---|---|---|
| 仅使用系统字体 | 外观普通 | 使用Google Fonts或可变字体 |
| 字体数量过多 | 视觉混乱 | 最多使用2种字体系列 |
| 字重对比度弱 | 层级差 | 标题使用粗体（600+），正文使用常规字重 |
| 行长度过长 | 难以阅读 | 添加 |
Color
色彩
Building a Palette
构建调色板
Every palette needs five functional roles:
| Role | Purpose | Usage |
|---|---|---|
| Primary | Brand identity | Buttons, links, active states |
| Neutral | Text, backgrounds | Body text, cards, dividers |
| Accent | Secondary actions | Tags, badges, highlights |
| Semantic | Feedback | Success/warning/error states |
| Surface | Layered backgrounds | Cards, modals, overlays |
每个调色板都需要五类功能色：
| 角色 | 用途 | 用法 |
|---|---|---|
| 主色 | 品牌标识 | 按钮、链接、激活态 |
| 中性色 | 文本、背景 | 正文、卡片、分割线 |
| 强调色 | 次要操作 | 标签、徽章、高亮 |
| 语义色 | 反馈提示 | 成功/警告/错误状态 |
| 表面色 | 分层背景 | 卡片、模态框、遮罩层 |
Surface Layering (Dark Mode)
表面分层（深色模式）
Create depth through lightness, not shadows:
css
: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 */
}通过明度而非阴影创建层次感：
css
: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 */
}Contrast Requirements (WCAG)
对比度要求（WCAG）
| Text Size | Minimum Ratio | Enhanced (AAA) |
|---|---|---|
| Normal text (<18px) | 4.5:1 | 7:1 |
| Large text (≥18px bold, ≥24px) | 3:1 | 4.5:1 |
| UI components | 3:1 | — |
| 文本大小 | 最小对比度 | 增强级（AAA） |
|---|---|---|
| 普通文本（<18px） | 4.5:1 | 7:1 |
| 大文本（≥18px粗体，≥24px） | 3:1 | 4.5:1 |
| UI组件 | 3:1 | — |
Color Mistakes
常见色彩错误
| Mistake | Problem | Fix |
|---|---|---|
| Purple gradient on white | "AI aesthetic" cliché | Use intentional brand colors |
| Low contrast text | Accessibility fail | Test with contrast checker |
| Color-only indicators | Colorblind users excluded | Add icons/text |
| Too many colors | Visual noise | 3-5 colors maximum |
| Light gray text on white | Unreadable | |
| 错误 | 问题 | 修复方案 |
|---|---|---|
| 白色背景上的紫色渐变 | 俗套的「AI审美」 | 使用符合品牌定位的专属色彩 |
| 低对比度文本 | 无障碍不达标 | 使用对比度检查工具测试 |
| 仅用颜色传递信息 | 色盲用户无法识别 | 搭配图标/文本说明 |
| 色彩过多 | 视觉噪音 | 最多使用3-5种颜色 |
| 白色背景上的浅灰色文本 | 难以阅读 | 最低使用 |
Spacing
间距
8px Base Unit Scale
8px基准单位尺度
css
--space-1: 0.25rem; /* 4px - tight gaps */
--space-2: 0.5rem; /* 8px - input padding */
--space-3: 0.75rem; /* 12px - button padding */
--space-4: 1rem; /* 16px - default spacing */
--space-6: 1.5rem; /* 24px - section padding */
--space-8: 2rem; /* 32px - section gaps */
--space-12: 3rem; /* 48px - major breaks */
--space-16: 4rem; /* 64px - page rhythm */css
--space-1: 0.25rem; /* 4px - tight gaps */
--space-2: 0.5rem; /* 8px - input padding */
--space-3: 0.75rem; /* 12px - button padding */
--space-4: 1rem; /* 16px - default spacing */
--space-6: 1.5rem; /* 24px - section padding */
--space-8: 2rem; /* 32px - section gaps */
--space-12: 3rem; /* 48px - major breaks */
--space-16: 4rem; /* 64px - page rhythm */Spacing Rules
间距规则
| Rule | Implementation |
|---|---|
Use | |
| Consistent padding | Same values on all cards/sections |
| More space between groups | Less space within groups (Gestalt) |
| No arbitrary values | Only use scale tokens |
| 规则 | 实现方式 |
|---|---|
使用 | |
| 统一内边距 | 所有卡片/区块使用相同的内边距值 |
| 组间间距大于组内间距 | 符合格式塔分组原则 |
| 不使用任意数值 | 仅使用尺度中定义的变量 |
Spacing Mistakes
常见间距错误
| Mistake | Problem | Fix |
|---|---|---|
| Arbitrary pixel values | Inconsistent rhythm | Use spacing scale only |
| Margin on children | Margin collapse bugs | Use |
| Equal spacing everywhere | No visual grouping | More between, less within |
| Tight mobile padding | Cramped feeling | Minimum |
| 错误 | 问题 | 修复方案 |
|---|---|---|
| 随意的像素值 | 视觉节奏不一致 | 仅使用定义好的间距尺度 |
| 子元素设置外边距 | 边距折叠bug | 在父元素上使用 |
| 所有位置间距相等 | 无视觉分组 | 组间间距大，组内间距小 |
| 移动端内边距过小 | 界面拥挤 | 移动端最小 |
Visual Hierarchy
视觉层级
Guide the eye through deliberate contrast.
通过刻意的对比度引导用户视线。
Hierarchy Techniques
层级实现技巧
| Technique | How | Impact |
|---|---|---|
| Size | Hero 3-4x body | Immediate focal point |
| Weight | Bold headings, regular body | Scannability |
| Color | Primary vs muted | Information layers |
| Space | Isolation creates emphasis | Draws attention |
| Position | Top-left anchors reading | Natural flow |
| 技巧 | 实现方式 | 效果 |
|---|---|---|
| 尺寸 | 英雄文本字号是正文的3-4倍 | 快速形成视觉焦点 |
| 字重 | 标题加粗，正文常规 | 提升可扫描性 |
| 色彩 | 主色vs弱色调 | 划分信息层级 |
| 留白 | 孤立元素创造强调效果 | 吸引注意力 |
| 位置 | 左上角作为阅读锚点 | 符合自然阅读流 |
Card Hierarchy Pattern
卡片层级模式
Eyebrow ← xs, uppercase, muted color
Title ← xl, semibold, primary color
Body ← base, secondary color, 1.6 line-height
Action ← spaced apart, mt-4 minimumEyebrow ← xs, uppercase, muted color
Title ← xl, semibold, primary color
Body ← base, secondary color, 1.6 line-height
Action ← spaced apart, mt-4 minimumResponsive Design
响应式设计
Breakpoint Strategy
断点策略
| Breakpoint | Target | Key Changes |
|---|---|---|
| < 640px | Mobile | Single column, stacked nav, 44px touch targets |
| 640-1024px | Tablet | Two columns, collapsible sidebars |
| 1024-1440px | Desktop | Full layout, hover enabled |
| > 1440px | Wide | Max-width container, prevent ultra-wide lines |
| 断点 | 适配目标 | 核心改动 |
|---|---|---|
| < 640px | 移动端 | 单列布局，导航堆叠，44px可点击区域 |
| 640-1024px | 平板端 | 双列布局，可折叠侧边栏 |
| 1024-1440px | 桌面端 | 完整布局，支持hover效果 |
| > 1440px | 宽屏 | 最大宽度容器，避免超宽行 |
Fluid Techniques
流体适配技巧
css
/* Fluid typography */
h1 { font-size: clamp(2rem, 1.5rem + 2.5vw, 3.5rem); }
/* Fluid spacing */
section { padding-block: clamp(2rem, 1rem + 4vw, 6rem); }
/* Intrinsic grid */
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
gap: var(--space-6);
}css
/* Fluid typography */
h1 { font-size: clamp(2rem, 1.5rem + 2.5vw, 3.5rem); }
/* Fluid spacing */
section { padding-block: clamp(2rem, 1rem + 4vw, 6rem); }
/* Intrinsic grid */
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
gap: var(--space-6);
}Responsive Mistakes
常见响应式错误
| Mistake | Problem | Fix |
|---|---|---|
| No viewport meta | Broken mobile | Add |
| Fixed widths | Overflow on mobile | Use |
| Tiny touch targets | Frustrating taps | Minimum 44x44px |
| Hidden horizontal scroll | Broken layout | Test at 375px width |
| 错误 | 问题 | 修复方案 |
|---|---|---|
| 缺少viewport元标签 | 移动端展示异常 | 添加 |
| 固定宽度 | 移动端内容溢出 | 使用 |
| 可点击区域过小 | 点击体验差 | 最小44x44px的可点击区域 |
| 隐藏的横向滚动 | 布局异常 | 在375px宽度下测试 |
Accessibility
无障碍设计
Accessibility is not optional.
无障碍设计是必选项。
Critical Requirements
核心要求
| Requirement | Implementation | Standard |
|---|---|---|
| Color contrast | 4.5:1 normal, 3:1 large | WCAG 2.1 AA |
| Keyboard navigation | Tab order matches visual | WCAG 2.1.1 |
| Focus indicators | Visible | WCAG 2.4.7 |
| Semantic HTML | | WCAG 1.3.1 |
| Alt text | Descriptive for images | WCAG 1.1.1 |
| Motion safety | | WCAG 2.3.3 |
| Touch targets | 44×44px minimum | WCAG 2.5.8 |
| 要求 | 实现方式 | 标准 |
|---|---|---|
| 色彩对比度 | 普通文本4.5:1，大文本3:1 | WCAG 2.1 AA |
| 键盘导航 | Tab顺序与视觉顺序一致 | WCAG 2.1.1 |
| 焦点指示器 | 可见的 | WCAG 2.4.7 |
| 语义化HTML | | WCAG 1.3.1 |
| 替代文本 | 图片添加描述性alt文本 | WCAG 1.1.1 |
| 动效安全 | 支持 | WCAG 2.3.3 |
| 可点击区域 | 最小44×44px | WCAG 2.5.8 |
Focus Styles
焦点样式
css
:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
/* Remove default only if custom exists */
:focus:not(:focus-visible) {
outline: none;
}css
:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
/* Remove default only if custom exists */
:focus:not(:focus-visible) {
outline: none;
}Motion Safety
动效安全
css
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}css
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}Motion & Animation
动效与动画
Use motion to communicate, not decorate.
动效用做信息传递，而非装饰。
Timing Guidelines
时长指引
| Interaction | Duration | Easing |
|---|---|---|
| Button hover | 150ms | ease-out |
| Modal open | 250ms | ease-out |
| Modal close | 200ms | ease-in |
| Page transition | 300ms | ease-in-out |
| Stagger delay | 50-80ms per item | — |
| Micro-feedback | 100ms | ease-out |
| 交互类型 | 时长 | 缓动函数 |
|---|---|---|
| 按钮hover | 150ms | ease-out |
| 模态框打开 | 250ms | ease-out |
| 模态框关闭 | 200ms | ease-in |
| 页面转场 | 300ms | ease-in-out |
| 错开延迟 | 每个元素50-80ms | — |
| 微反馈 | 100ms | ease-out |
Staggered Entrance
错落入场效果
css
.item {
opacity: 0;
translate: 0 1rem;
animation: reveal 0.5s ease-out forwards;
}
.item:nth-child(1) { animation-delay: 0ms; }
.item:nth-child(2) { animation-delay: 60ms; }
.item:nth-child(3) { animation-delay: 120ms; }
@keyframes reveal {
to { opacity: 1; translate: 0 0; }
}css
.item {
opacity: 0;
translate: 0 1rem;
animation: reveal 0.5s ease-out forwards;
}
.item:nth-child(1) { animation-delay: 0ms; }
.item:nth-child(2) { animation-delay: 60ms; }
.item:nth-child(3) { animation-delay: 120ms; }
@keyframes reveal {
to { opacity: 1; translate: 0 0; }
}Motion Mistakes
常见动效错误
| Mistake | Problem | Fix |
|---|---|---|
| Animating width/height | Performance hit | Use |
| > 500ms duration | Feels sluggish | 150-300ms for most |
| Motion everywhere | Overwhelming | Focus on entrances/exits |
| No reduced-motion | Accessibility fail | Always check preference |
| 错误 | 问题 | 修复方案 |
|---|---|---|
| 动画修改宽高 | 性能损耗 | 仅使用 |
| 时长超过500ms | 反应迟缓 | 大多数动效控制在150-300ms |
| 到处都加动效 | 过于杂乱 | 仅聚焦于入场/退场动效 |
| 不支持减少动效偏好 | 无障碍不达标 | 始终检查用户动效偏好 |
Component States
组件状态
Every interactive element needs clear states.
| State | Visual Treatment |
|---|---|
| Default | Base styling |
| Hover | Subtle background/shadow shift |
| Active/Pressed | Slight inset, reduced shadow |
| Focus | High-visibility ring |
| Disabled | 50% opacity, |
| Loading | Spinner or skeleton |
每个交互元素都需要清晰的状态。
| 状态 | 视觉处理 |
|---|---|
| 默认 | 基础样式 |
| Hover | 轻微的背景/阴影变化 |
| 激活/按下 | 轻微内凹，阴影减少 |
| 聚焦 | 高可见度外框 |
| 禁用 | 50%透明度， |
| 加载中 | 加载动画或骨架屏 |
Button Example
按钮示例
css
.btn {
transition: all 150ms ease-out;
}
.btn:hover {
background: var(--color-primary-600);
}
.btn:active {
transform: scale(0.98);
}
.btn:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
.btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}css
.btn {
transition: all 150ms ease-out;
}
.btn:hover {
background: var(--color-primary-600);
}
.btn:active {
transform: scale(0.98);
}
.btn:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
.btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}Design Tokens Architecture
设计令牌架构
Structure tokens in three layers:
css
/* Layer 1: Primitives */
--blue-500: oklch(0.55 0.2 250);
--gray-100: oklch(0.95 0.005 250);
--radius-md: 0.5rem;
/* Layer 2: Semantic */
--color-primary: var(--blue-500);
--color-surface: var(--gray-100);
--radius-button: var(--radius-md);
/* Layer 3: Component */
--btn-bg: var(--color-primary);
--btn-radius: var(--radius-button);
--btn-padding: var(--space-2) var(--space-4);This allows theme switching by remapping Layer 2 only.
设计令牌分为三层结构：
css
/* Layer 1: Primitives */
--blue-500: oklch(0.55 0.2 250);
--gray-100: oklch(0.95 0.005 250);
--radius-md: 0.5rem;
/* Layer 2: Semantic */
--color-primary: var(--blue-500);
--color-surface: var(--gray-100);
--radius-button: var(--radius-md);
/* Layer 3: Component */
--btn-bg: var(--color-primary);
--btn-radius: var(--radius-button);
--btn-padding: var(--space-2) var(--space-4);仅需重映射第二层即可实现主题切换。
Pre-Delivery Checklist
发布前检查清单
Typography
排版
- Intentional font pairing (not system defaults)
- Consistent type scale
- Line length ≤ 75 characters
- 16px minimum body text
- 经过设计的字体搭配（非系统默认）
- 统一的字体尺度
- 行长度 ≤ 75字符
- 正文字号最小16px
Color
色彩
- Cohesive palette (3-5 colors)
- WCAG contrast met (4.5:1 normal, 3:1 large)
- Semantic colors defined
- Dark mode tested (if applicable)
- 统一的调色板（3-5种颜色）
- 符合WCAG对比度要求（普通文本4.5:1，大文本3:1）
- 定义好语义色
- 测试过深色模式（如果适用）
Spacing
间距
- Consistent rhythm using scale
- No arbitrary pixel values
- Proper mobile padding
- 使用统一尺度实现一致的视觉节奏
- 无任意像素值
- 合适的移动端内边距
Hierarchy
层级
- Clear visual flow
- Primary action obvious
- Information layered by importance
- 清晰的视觉流
- 主操作清晰可识别
- 信息按重要性分层
Responsive
响应式
- Mobile tested (375px)
- No horizontal overflow
- Touch targets ≥ 44px
- 移动端测试（375px）
- 无横向溢出
- 可点击区域 ≥ 44px
Accessibility
无障碍
- Keyboard navigable
- Focus visible
- Screen reader tested
- Motion-safe
- 支持键盘导航
- 焦点可见
- 屏幕阅读器测试通过
- 动效安全
States
状态
- Hover on all interactive elements
- Focus-visible on all focusable
- Loading states for async
- Error states for forms
- 所有交互元素有hover效果
- 所有可聚焦元素有focus-visible效果
- 异步操作有加载状态
- 表单有错误状态
Performance
性能
- Images optimized (WebP, srcset)
- Fonts subset
- Animations use /
transformopacity
- 图片优化（WebP、srcset）
- 字体子集化
- 动画使用/
transformopacity
NEVER Do
绝对禁止的操作
- NEVER skip contrast checking — Test every text/background combination
- NEVER use color alone — Always pair with icons/text for meaning
- NEVER remove focus outlines — Unless replacing with visible alternative
- NEVER use arbitrary spacing — Stick to the scale
- NEVER animate layout properties — Only and
transformopacity - NEVER ignore reduced-motion — Always check the preference
- NEVER center everything — Left-align body text
- NEVER use tiny touch targets — 44px minimum
- NEVER use low-contrast text — minimum on white
slate-600 - NEVER use generic system fonts — Choose intentional typography
- 绝对不要跳过对比度检查 —— 测试所有文本/背景组合
- 绝对不要仅用颜色传递信息 —— 始终搭配图标/文本说明含义
- 绝对不要移除焦点外框 —— 除非替换为可见的自定义样式
- 绝对不要使用任意间距值 —— 遵守定义好的间距尺度
- 绝对不要对布局属性做动画 —— 仅使用和
transformopacity - 绝对不要忽略减少动效偏好 —— 始终检查用户偏好设置
- 绝对不要所有内容都居中 —— 正文文本左对齐
- 绝对不要使用过小的可点击区域 —— 最小44px
- 绝对不要使用低对比度文本 —— 白色背景上最低使用
slate-600 - 绝对不要使用通用系统字体 —— 选择经过设计的排版方案
Related Skills
相关技能
- — Searchable design databases with CLI
ui-ux-pro-max - — Creative aesthetics, avoiding "AI slop"
frontend-design - — Applying themes to artifacts
theme-factory - — Token architecture and theming
design-system-patterns
- — Searchable design databases with CLI
ui-ux-pro-max - — Creative aesthetics, avoiding "AI slop"
frontend-design - — Applying themes to artifacts
theme-factory - — Token architecture and theming
design-system-patterns