cursor + tailwindcss4 + claude 4 网页设计最美提示词

0

## Cursor AI 设计规则配置指南

## 重要提示：请配置使用 context7 https://github.com/upstash/context7 来让 claude 生成的代码处于最新版本。

你需要安装的库：

tailwindcss v4 ，@motion（非 framer motion）

需要安装的 mcp：

context7 mcp

本指南旨在帮助您在 Cursor 中高效配置项目设计规则，以便利用 Tailwind CSS v4 自动生成可复用的全局设计样式，并确保后续组件开发自动遵循这些规范。

---

### 1. 创建并配置项目规则文件

首先，您需要将设计规则整合到 Cursor 的项目配置中。

1.  **复制规则内容：**
    复制您所有的项目规则内容，包括文件名。
2.  **创建规则文件：**
    在您的项目根目录下，导航至或创建 `.cursor/rules/` 路径。在该路径下，创建一个新的 Markdown 文件，例如 `my-design-rules.mdc`。请确保文件扩展名为 `.mdc`。
3.  **粘贴并修改触发条件：**
    将复制的规则内容粘贴到 `my-design-rules.mdc` 文件中。**务必将文件中所有触发条件修改为 `always`**。

---

### 2. 配置全局设计样式

接下来，我们将利用 Cursor AI 来配置全局可复用的设计样式。

1.  **启动 Cursor Agent：**
    在新开的 Cursor Agent 中。
2.  **输入指令：**
    向 Agent 明确发出以下指令：
    > "根据项目的 **Tailwind CSS v4** 规则，配置全局可复用的设计样式。目标是成功修改 `app.css` 这样的全局路径文件。use context7"
3.  **观察并确认：**
    让 Cursor 和 Claude 4 AI 进行思考和执行。当看到类似 `app.css` 等全局样式文件被成功修改时，表示全局设计样式已成功配置。

---

### 3. 自动化组件设计与重构

配置好全局样式后，后续的组件设计将自动遵循这些规则。

1.  **启动新的 Agent：**
    在开发组件时，启动一个新的 Cursor Agent。
2.  **自动应用规则：**
    该 Agent 将自动应用您在步骤 1 中配置的设计规则到所有后续的组件设计中。
3.  **手动重构（如需）：**
    如果某个组件未按设计规则生成，您可以手动指导 Agent 进行重构。只需告诉它：
    > "请按照设计文档重构当前组件。"

---

### 4. 调整组件紧凑性

根据您的具体需求，可以灵活调整组件的紧凑度。

1.  **直接指令：**
    如果您需要的是**紧凑型组件**（例如 Dashboard 通常比官网需要更紧凑的布局），您可以直接告诉 Agent 采用紧凑型设计。例如：
    > "请采用紧凑型设计来构建此组件。"

app.design.mdc

Always respond in 中文，当提到 xx 太丑的时候，意味着你需要按照设计指南进行重构当前组件。
任何时候都要 use context7 mcp 来查找最新相关的文档。
任何文件开发：Please edit the file in small chunks

一句话总结： Notion 的中性色＋优雅留白、Vercel/Geist 的极简黑白高对比、以及 Microsoft Fluent 2 的 4 px 网格与语义化 Design Tokens，可融合成一套「专业生产力 × 极简未来感」的系统提示词（System Prompt）。下面先提炼三家设计体系的共性与差异，再给出一段可直接粘贴到 Cursor / Copilot 等 AI-辅助 IDE 的完整系统提示词，指导模型按该风格输出符合 Tailwind CSS v4 的组件代码。组件设计一定要高端。

1. 三大参考体系速览
1.1 Notion ― 「温和留白的文档感」
以中性色打底、局部单彩强调，保证阅读沉浸感。
Notion
Pinterest

大量留白与分栏栅格让信息分区清晰，字号层级遵循 1.333 黄金级差。
Notion

1.2 Vercel/Geist ― 「黑白极简 × Swiss 严谨」
主视觉黑 (#000) / 白 (#fff) 对比强烈，辅以少量电蓝或极紫。
Vercel
Vercel

Geist 字体强调瑞士无衬线理性，网格体系与代码区一致采用 8 / 16 px 模数。
Vercel

1.3 Microsoft Fluent 2 ― 「Token-驱动的系统级规范」
全站设计拆为 Design Tokens → Recipes → 组件；颜色、半径、动效全部参数化。
Microsoft
微软学习

动效时长典型值：100 ms 瞬时反馈、250 ms 场景切换上限。
微软学习

4 px 基线网格提高跨平台一致性。
Microsoft

2. 合并出的核心设计要义
维度	统一准则	来源
配色	中性灰/黑白打底 ＋ 主要强调色（电蓝 #4F8CFF 基于 OKLCH(0.62 0.214 259.8)）	Notion/Vercel 
Vercel
Pinterest
字体	"Inter Variable → Geist Sans → 系统无衬线" 级联	Geist Docs 
Vercel
网格	4 px (Fluent) × 8 px (Vercel) 兼容；以 8 px 为组件间距	Fluent 2 / Vercel 
Microsoft
Vercel
动效	80-120 ms hover/press；≤ 240 ms 过场	Fluent 2 Motion 
微软学习
模式	暗色优先、自动随系统切换	NN/g 暗色研究 
Nielsen Norman Group
Token	统一 --color-* / --radius-* 命名，便于 Tailwind v4 解析	Fluent Tokens 
微软学习

3. 系统提示词（System Prompt）
用途：粘贴进 Cursor「General rules」或任何支持 系统消息 的 AI-IDE；让模型生成 React + Tailwind v4 组件，自动遵循上表风格。
覆盖：Typography · Color · Grid · Motion · Accessibility · Light/Dark theme。

text
复制
编辑
You are a senior front-end designer-engineer.
Follow the unified "Notion × Vercel × Fluent2" design guide:

### DESIGN TOKENS  (Tailwind v4 @theme)
• Colors  : --color-bg      : 0 0 0   ;  /* neutral surface dark */
             --color-bg-light: 255 255 255;
             --color-brand-500: oklch(0.62 0.214 259.8); /* #4F8CFF Hero按钮主色 */
             --color-brand-600: oklch(0.55 0.245 262.9); /* Hero按钮深色 */
             --color-brand-400: oklch(0.735 0.175 259.8); /* 亮色变化 */
             --ai-primary: 79 140 255;    /* 向后兼容 */
             --ai-accent: 118 181 255;    /* 向后兼容 */
• Radius  : --radius-sm: 4px;  --radius-lg: 8px;
• Motion  : --easing-smooth:cubic-bezier(.25,.46,.45,.94);
            --time-fast:80ms; --time-std:120ms; --time-portal:240ms;
• Grid    : 4 px baseline, but space utilities snap to 8 px (`gap-2 / p-2 / p-4 …`)

### RULES
1.  **Typography**  
    - Base font: "Inter var", fallback "Geist", system-ui; line-height 1.5; heading scale 1.333.
2.  **Color Use**  
    - Dark-mode default (`[data-theme='dark']`); use `text-white` on accent backgrounds.  
    - Never hard-code hex: always `rgb(var(--color-*))/opacity`.
3.  **Components**  
    - Use Tailwind v4 utilities only; no inline styles.  
    - Primary button: brand gradient `from-brand-600 to-brand-500`, `rounded-2xl`, shadow `shadow-xl hover:shadow-2xl`, hover `scale-105 -translate-y-0.5`, 80ms transition.  
    - Card: `rounded-2xl`, glass morphism `backdrop-blur-xl`, supports brand-tinted borders when `glass` prop true.
4.  **Motion**  
    - Hover: `transition-[colors,transform] duration-[var(--time-fast)] ease-[var(--easing-smooth)]`.  
    - Scale interactions: `scale-105` for buttons, `scale-102` for cards.
    - Portal/drawer: 240 ms slide & fade.
5.  **Accessibility**  
    - Contrast ≥ 4.5 : 1; add `focus-visible:outline` with accent color.  
    - Respect `prefers-reduced-motion` by disabling animations.
6.  **Deliverables**  
    - Output only production-ready `.tsx` code blocks + a minimal usage snippet.  
    - No explanatory chatter unless I ask.  
    - If spec is ambiguous, ask a clarifying question **before** coding.

Before starting, inject the Design Tokens into the project's `globals.css` via Tailwind v4's `@theme{}` directive.
4. 使用说明
把上面 Token 小节复制到 app.css，或通过 Tailwind v4 的 `@theme{}` 指令自动生成。

将 System Prompt 贴进 Cursor → Rules，或作为 // @system 注释置于文件顶部。

在代码中下指令：// ai: create a Fluent-style settings drawer。AI 会产出符合暗色极简 + 统一品牌色调的 TSX。

如需调整品牌色，只需修改 --color-brand-500 等 OKLCH 值即可，所有组件即时继承。整个色彩系统基于Hero按钮色调构建，确保视觉一致性。

5. 额外资源
Notion 官方排版与布局技巧（2024）
Notion

Geist Design System：颜色与格栅规范
Vercel
Vercel

Vercel "Design Engineering" 文章：迭代与极简原则
Vercel

Fluent 2 官网：Token → Recipe → 组件模型
Microsoft
微软学习

Fluent Motion Timing 指南（250 ms 上限）
微软学习

NN/g 暗色模式可用性要点
Nielsen Norman Group

Neutral & Minimal 色彩趋势分析 (NY Vogue / AD)
Vogue
Architectural Digest

使用此 Prompt，你即可在 Tailwind v4 项目中快速批量生成「Notion × Vercel × Fluent 2」混合风格的高可维护 React 组件。

所有的设计都要考虑到在亮色/暗色下的配色，字体颜色等都是可见的。默认试用亮色模式。
尽量减少卡片阴影的使用，现在不流行放多个带有阴影的卡片来区分板块了。

data-intensive-ui-best-practices.mdc

# 数据密集型UI设计最佳实践

## 设计原则

基于课程规划页面优化经验总结的数据密集型应用设计指南，专注于提高信息密度和用户效率。

## 布局策略

### 1. 横向优先原则
- **优势**: 充分利用现代宽屏显示器的横向空间
- **应用场景**: 时间线、数据表格、学期规划、项目甘特图
- **实现方式**: 使用 `overflow-x-auto` + `flex min-w-max` 结构

```tsx
// 标准横向滚动容器
<div className="overflow-x-auto">
  <div className="flex min-w-max">
    {data.map(item => (
      <div className="flex-shrink-0 w-64">{/* 内容 */}</div>
    ))}
  </div>
</div>
```

### 2. 固定高度策略
- **目标**: 控制页面总高度，避免过度滚动
- **实现**: 容器使用固定高度（如 `h-96`），内部内容局部滚动
- **好处**: 关键信息始终可见，提升扫描效率

```tsx
// 固定高度 + 内部滚动
<div className="h-96 overflow-y-auto">
  {/* 大量内容 */}
</div>
```

## 组件密度优化

### 紧凑卡片层级
```tsx
// 标准卡片 - 展示详细信息
className="bg-white rounded-2xl p-6"

// 紧凑卡片 - 列表视图
className="bg-white rounded-xl p-4"

// 微型卡片 - 高密度网格
className="bg-white rounded-lg p-3"
```

### 进度仪表板设计
- **布局**: 移动端 2x2，桌面端 1x4 网格
- **图标**: 32px (8×8) 规格，圆角背景
- **文本**: 主数值 18px，标签 12px
- **间距**: 12px 内边距，16px 网格间距

参考实现：@app/routes/dashboard/course-planning.tsx 的 `renderOverviewMode` 函数。

## 信息层级

### 文本层级系统
- **主标题**: 18px (text-lg) + font-semibold
- **次标题**: 14px (text-sm) + font-medium  
- **正文**: 14px (text-sm) + font-normal
- **辅助文本**: 12px (text-xs) + text-neutral-600
- **数值显示**: 18px (text-lg) + font-bold

### 颜色信息编码
- **状态色**: 绿色(完成) / 蓝色(进行中) / 紫色(计划) / 红色(取消)
- **优先级**: 红色(高) / 黄色(中) / 绿色(低)
- **类型分类**: 使用品牌色调的不同明度

## 交互模式

### 悬停效果
- **卡片**: `translateY(-1px)` + 阴影增强
- **按钮**: `translateY(-2px)` + `scale(1.05)`
- **时长**: 80-120ms 快速响应

### 触摸优化
- **最小触摸目标**: 44px × 44px
- **移动端间距**: 增加到 16px
- **手势支持**: 横向滑动浏览

## 性能优化

### 渲染优化
- **虚拟滚动**: 超过100项使用虚拟化
- **分页加载**: 大数据集分批渲染
- **懒加载**: 非首屏内容延迟加载

### 动画性能
- **使用 transform**: 避免触发布局重排
- **GPU 加速**: `will-change: transform`
- **减少重绘**: 使用 `opacity` 而非显示/隐藏

## CSS 实用类

参考 @app/app.css 中的高密度UI组件系统：

```css
/* 核心工具类 */
.card-dense         /* 紧凑卡片 */
.card-micro         /* 微型卡片 */
.stat-card-dense    /* 统计卡片 */
.btn-micro          /* 小按钮 */
.dense-grid         /* 高密度网格 */
.horizontal-scroll-container  /* 横向滚动 */
.fixed-height-content        /* 固定高度 */
```

## 应用场景

### 适合的场景
- 📊 数据仪表板
- 📅 时间线视图
- 📋 课程规划
- 📈 项目管理
- 🗂️ 文件管理器

### 不适合的场景
- 📖 长文阅读
- 🎨 视觉展示
- 🎮 游戏界面
- 📱 单手操作应用

## 可访问性考虑

### 对比度要求
- **文本**: 至少 4.5:1 对比度
- **状态色**: 确保色盲用户可区分
- **焦点指示**: 清晰的键盘导航

### 屏幕阅读器
- **语义化标记**: 使用正确的 HTML 标签
- **ARIA 标签**: 为复杂交互添加描述
- **跳转链接**: 支持快速导航

## 测试检查清单

- [ ] 1080p 显示器下信息密度合适
- [ ] 移动端 (375px) 布局不错乱
- [ ] 横向滚动流畅，无性能问题
- [ ] 键盘导航完整可用
- [ ] 高对比度模式正常显示
- [ ] 减弱动画偏好下正常工作

design-system-standards.mdc

# 设计系统标准

## 设计理念

本项目融合 **Notion 的中性色优雅留白** + **Vercel/Geist 的极简黑白高对比** + **Microsoft Fluent 2 的 4px 网格与语义化 Design Tokens**，形成「专业生产力 × 极简未来感」的设计体系。

## 核心设计原则

### 配色系统
- **主色调**: 中性灰/黑白打底，带有统一的品牌色调
- **强调色**: 电蓝 `#4F8CFF` 作为主要品牌色，基于 OKLCH(0.62 0.214 259.8)
- **次要强调色**: 基于相同色相的变化，创建和谐的色彩层级
- **背景**: 纯白 `#FFFFFF` / 深黑 `#000000` 高对比

### 字体系统
- **主字体**: "Inter Variable" → "Geist Sans" → 系统无衬线
- **字号比例**: 1.333 黄金级差
- **行高**: 1.5 基准

### 网格系统
- **基线网格**: 4px
- **组件间距**: 8px 模数
- **兼容性**: 4px (Fluent) × 8px (Vercel)

## TailwindCSS 配置

### CSS 变量定义
```css
:root {
  --color-bg: 255 255 255;
  --color-bg-dark: 0 0 0;
  
  /* 基于Hero按钮的统一品牌色系统 */
  --color-brand-500: oklch(0.62 0.214 259.8);  /* 主要品牌色 #4F8CFF */
  --color-brand-600: oklch(0.55 0.245 262.9);  /* 深色变化 */
  --color-brand-400: oklch(0.735 0.175 259.8); /* 亮色变化 */
  
  /* 向后兼容变量 */
  --ai-primary: 79 140 255;        /* 映射到 brand-500 */
  --ai-accent: 118 181 255;        /* 映射到 brand-400 */
  
  --radius-sm: 4px;
  --radius-lg: 8px;
  --radius-2xl: 16px;
  --easing-smooth: cubic-bezier(.25,.46,.45,.94);
  --time-fast: 80ms;
  --time-std: 120ms;
  --time-portal: 240ms;
}
```

### 使用规范
```tsx
// ✅ 使用语义化变量和新的品牌色系统
className="bg-gradient-to-r from-brand-600 to-brand-500 text-white"
className="bg-[rgb(var(--ai-primary))] text-white"
className="transition-colors duration-[var(--time-fast)]"

// ✅ 使用OKLCH品牌色
className="bg-[oklch(0.62_0.214_259.8)] shadow-lg"

// ❌ 避免硬编码颜色
className="bg-blue-500"
```

## 组件设计标准

### 按钮设计
- **主按钮**: `bg-gradient-to-r from-brand-600 to-brand-500` + `rounded-2xl` + `shadow-xl`
- **样式**: 与Hero区域"开始您的旅程"按钮完全一致的设计
- **过渡动画**: 80ms 瞬时反馈，hover时 `scale(1.05)` + `translateY(-2px)`
- **状态变化**: `transition-[colors,transform] duration-[var(--time-fast)]`
- **暗色模式**: 自动调整为 `from-brand-500 to-brand-400` 渐变

### 卡片设计
- **圆角**: `rounded-2xl` (16px) 现代化设计
- **阴影**: `shadow-glass` 基础，`shadow-glass-strong` hover
- **玻璃效果**: 支持 `backdrop-blur-xl` 当 `glass` prop 为 true
- **边框**: 使用品牌色调的透明边框效果

### 动效规范
- **Hover/Press**: 80-120ms
- **场景切换**: ≤ 240ms
- **缓动函数**: `cubic-bezier(.25,.46,.45,.94)`

## 响应式设计

### 断点系统
- **移动端**: < 640px
- **平板**: 640px - 1024px  
- **桌面**: > 1024px

### 间距规范
```tsx
// 使用 8px 模数间距
gap-2    // 8px
p-4      // 16px
p-6      // 24px
p-8      // 32px
```

## 无障碍标准

### 对比度要求
- **文本对比度**: ≥ 4.5:1
- **焦点指示**: `focus-visible:outline` + 强调色
- **动画尊重**: `prefers-reduced-motion` 禁用动画

### 语义化标记
- 使用恰当的 HTML5 语义标签
- 提供 `aria-label` 和 `alt` 属性
- 支持键盘导航

## 暗色模式支持

### 配色切换
```tsx
// 自动适配暗色模式
className="bg-white dark:bg-gray-900"
className="text-gray-900 dark:text-white"
```

### 主题检测
- 默认跟随系统偏好
- 支持手动切换
- 使用 `[data-theme='dark']` 选择器

## 高密度UI组件变体

### 紧凑卡片设计
```tsx
// 标准卡片
className="bg-white rounded-2xl p-6"

// 紧凑卡片 - 数据密集场景
className="bg-white rounded-xl p-4"

// 微型卡片 - 最高密度
className="bg-white rounded-lg p-3"
```

### 紧凑进度仪表板
```tsx
// 高密度统计卡片
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
  <div className="bg-white rounded-xl p-4">
    <div className="flex items-center gap-3">
      <div className="w-8 h-8 bg-brand-500 rounded-lg">
        <Icon className="w-4 h-4 text-white" />
      </div>
      <div>
        <p className="text-lg font-bold">{value}</p>
        <p className="text-xs text-neutral-500">{label}</p>
      </div>
    </div>
  </div>
</div>
```

### 横向滚动容器
```tsx
// 学期时间线等数据表格
<div className="overflow-x-auto">
  <div className="flex min-w-max">
    {items.map(item => (
      <div className="flex-shrink-0 w-64 border-r">
        <div className="p-2 h-96 overflow-y-auto">
          {/* 内容 */}
        </div>
      </div>
    ))}
  </div>
</div>
```

## 组件开发规范

1. **模块化设计** - 每个组件独立、可复用
2. **类型安全** - 完整的 TypeScript 支持
3. **性能优化** - 避免不必要的重渲染
4. **测试覆盖** - 关键组件必须有测试

## 设计 Token 命名

```tsx
// 品牌色 Token - 基于Hero按钮色调
--color-brand-50     // 极浅品牌色
--color-brand-500    // 主要品牌色 (Hero按钮)
--color-brand-600    // 深色品牌色 (Hero按钮深色)
--color-brand-950    // 极深品牌色

// 传统颜色 Token (向后兼容)
--color-bg           // 背景色
--ai-primary         // 主强调色 (映射到 brand-500)
--ai-accent          // 次强调色 (映射到 brand-400)

// 尺寸 Token  
--radius-sm          // 小圆角 (4px)
--radius-lg          // 大圆角 (8px)  
--radius-2xl         // 现代圆角 (16px)

// 动效 Token
--time-fast          // 快速动画 (80ms)
--time-std           // 标准动画 (120ms)
--time-portal        // 页面切换 (240ms)

// 阴影 Token
--shadow-glass       // 玻璃态阴影
--shadow-brand       // 品牌色阴影
```

通过这套设计系统，确保整个 Transfer AI 平台具有统一的视觉语言和交互体验。

high-density-ui-patterns.mdc

# 高密度UI设计模式

## 设计理念

基于用户反馈优化的高信息密度设计模式，专为数据密集型应用场景设计，最大化屏幕空间利用率。

## 核心原则

### 1. 横向优先布局
- 优先使用横向滚动而非垂直滚动
- 数据表格和时间线采用横向布局
- 减少页面高度，提高一屏信息密度

### 2. 紧凑组件系统
- 卡片间距从 `p-6` 减少到 `p-3` 或 `p-4`
- 图标尺寸从 `w-12 h-12` 优化到 `w-8 h-8`
- 字体大小从 `text-2xl` 降级到 `text-lg`
- 按钮 padding 从 `px-4 py-2` 优化到 `px-3 py-1.5`

### 3. 固定高度容器
- 使用 `h-96` (384px) 等固定高度避免页面过长
- 内部内容使用 `overflow-y-auto` 实现局部滚动
- 关键信息始终保持在首屏可见

## 实施案例

### 学期时间线设计
参考 @app/routes/dashboard/course-planning.tsx 的实现：

```tsx
// 横向学期布局
<div className="overflow-x-auto">
  <div className="flex min-w-max">
    {semesterData.map((semester) => (
      <div className="flex-shrink-0 w-64 border-r">
        {/* 学期头部 - 紧凑设计 */}
        <div className="p-3 border-b">
          <div className="flex items-center gap-2">
            <Icon className="w-4 h-4" />
            <h4 className="text-sm font-semibold">{semester.shortName}</h4>
          </div>
        </div>
        
        {/* 课程列表 - 固定高度 */}
        <div className="p-2 h-96 overflow-y-auto">
          {/* 紧凑课程卡片 */}
          <div className="bg-neutral-50 rounded-lg p-3">
            <h5 className="text-sm font-medium">{course.code}</h5>
            <p className="text-xs text-neutral-600">{course.name}</p>
          </div>
        </div>
      </div>
    ))}
  </div>
</div>
```

### 紧凑进度仪表板
```tsx
// 2x2网格 (移动端) / 1x4网格 (桌面端)
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
  <div className="bg-white rounded-xl p-4">
    <div className="flex items-center gap-3">
      <div className="w-8 h-8 bg-green-500 rounded-lg">
        <Icon className="w-4 h-4 text-white" />
      </div>
      <div>
        <p className="text-lg font-bold">{value}</p>
        <p className="text-xs text-neutral-500">{label}</p>
      </div>
    </div>
  </div>
</div>
```

## CSS 工具类

### 高密度布局类
```css
.dense-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.horizontal-scroll-container {
  overflow-x: auto;
  scrollbar-width: thin;
}

.fixed-height-content {
  height: 24rem; /* 384px */
  overflow-y: auto;
}
```

### 紧凑卡片变体
```css
.card-dense {
  padding: 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
}

.card-micro {
  padding: 0.5rem;
  border-radius: 0.375rem;
  font-size: 0.75rem;
}
```

## 响应式策略

### 移动端适配
- 横向布局在移动端改为垂直堆叠
- 固定高度在小屏幕上调整为 `h-64` (256px)
- 使用 `snap-x` 实现触摸友好的横向滚动

### 桌面端优化
- 利用更大屏幕显示更多列
- 增加悬停效果提升交互体验
- 支持键盘导航

## 性能考虑

### 虚拟化
- 对于大量数据使用虚拟滚动
- 延迟加载非关键内容
- 避免过度渲染

### 动画优化
- 使用 `transform` 而非 `margin/padding` 改变
- 启用 `will-change` 提示浏览器优化
- 减少动画时长到 80-120ms

## 最佳实践

1. **信息层级**: 使用字体大小和颜色区分信息重要性
2. **视觉分组**: 用空白和分割线组织相关内容
3. **状态指示**: 用颜色和图标快速传达状态信息
4. **可扫描性**: 确保用户能快速扫描和定位信息

## 避免事项

- ❌ 过度压缩导致可读性下降
- ❌ 忽略触摸目标最小尺寸 (44px)
- ❌ 牺牲可访问性换取密度
- ❌ 在小屏幕上强制使用横向布局