风格目录/分屏布局

分屏布局

Split Screen

左右对称或不对称的分屏布局，通过对比和平衡创造视觉张力，常用于产品展示、品牌故事、比较页面。

分屏对比左右布局对称品牌展示

查看完整 Showcase →

配色方案

Primary

#0f0f0f

Secondary

#ffffff

Accent 1

#ff4757

Accent 2

#2ed573

Accent 3

#1e90ff

Accent 4

#ffa502

Quick Start

3 步开始使用 AI 生成

复制 AI Rules

粘贴到你的 AI 工具

• Cursor → 粘贴到 .cursorrules 文件

• Claude Code → 粘贴到 CLAUDE.md 文件

• Trae → 粘贴到 trae-rules.md 文件

开始生成

尝试："用分屏布局风格生成一个着陆页"

设计哲学

Split Screen（分屏布局）是一种将视口分为两个或多个区域的布局方式，通过对比创造视觉张力和叙事效果。

核心理念： - 对比强调：通过左右对比突出差异或联系 - 视觉平衡：即使不对称也保持视觉重量平衡 - 叙事引导：引导用户视线在两侧之间流动 - 空间利用：充分利用宽屏显示器的优势

必须做 / Do's

+使用 CSS Grid 或 Flexbox 实现分屏 grid grid-cols-2
+大屏幕保持分屏，小屏幕堆叠 lg:grid-cols-2 grid-cols-1
+使用对比色或互补内容
+一侧视觉元素，一侧文字内容
+保持两侧视觉重量平衡
+添加过渡动画增强体验
+考虑分屏滚动锁定效果

禁止做 / Don'ts

-禁止两侧内容完全相同（无意义分屏）
-禁止移动端仍保持分屏（太窄）
-禁止两侧视觉重量严重失衡
-禁止忽略内容阅读顺序
-禁止分割线过于突兀

组件模板

组件预览

按钮

分屏布局中的对比按钮

tsx

<div className="flex gap-4">
  <button className="
    px-8 py-4
    bg-black text-white
    font-semibold
    hover:bg-zinc-800
    transition-colors
  ">
    Left Option
  </button>
  <button className="
    px-8 py-4
    bg-white text-black
    border-2 border-black
    font-semibold
    hover:bg-zinc-100
    transition-colors
  ">
    Right Option
  </button>
</div>

全局样式

Global CSS

css

/* Split Screen Global Styles */

/* Base split container */
.split-screen {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 100vh;
}

@media (min-width: 1024px) {
  .split-screen {
    grid-template-columns: 1fr 1fr;
  }
}

/* Ratio variants */
.split-screen-60-40 {
  grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
  .split-screen-60-40 {
    grid-template-columns: 60fr 40fr;
  }
}

.split-screen-40-60 {
  grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
  .split-screen-40-60 {
    grid-template-columns: 40fr 60fr;
  }
}

/* Panel styles */
.split-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2rem;
}

@media (min-width: 1024px) {
  .split-panel {
    padding: 4rem;
  }
}

/* Sticky scroll effect */
.split-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
}

/* Diagonal split */
.split-diagonal {
  clip-path: polygon(0 0, 100% 0, 85% 100%, 0 100%);
}

@media (min-width: 1024px) {
  .split-diagonal {
    clip-path: polygon(0 0, 100% 0, 85% 100%, 0 100%);
  }
}

/* Hover reveal effect */
.split-hover-left:hover ~ .split-hover-right {
  flex: 0.3;
}

.split-hover-right:hover {
  flex: 0.7;
}

.split-hover-left, .split-hover-right {
  flex: 0.5;
  transition: flex 0.5s ease;
}

快速开始

示例 Prompts

复制这些经过验证的 Prompt，快速开始用 AI 生成分屏布局风格的界面。

品牌展示页

左侧视觉，右侧品牌故事

Create a brand showcase page with split screen:
1. Left panel: Full-height gradient background with large brand logo
2. Right panel: Brand story with heading, paragraphs, and CTA
3. Mobile: Stack with visual panel first
4. Desktop: 50/50 split with min-h-screen
5. Navigation fixed at top with mix-blend-difference
6. Smooth scroll to next section
Use grid grid-cols-1 lg:grid-cols-2, contrasting colors

产品对比页

两种产品或方案的对比展示

Create a product comparison split screen:
1. Left panel: Product A with dark background, white text
2. Right panel: Product B with light background, dark text
3. Each side: product image, features list, price, CTA
4. Hover effect: hovered side expands slightly
5. Mobile: Stack with A on top
6. Center divider with "VS" badge
Use contrasting colors, balanced visual weight

作品集项目页

左侧项目图片，右侧项目详情

Create a portfolio project page with split screen:
1. Left panel: Sticky full-height project image gallery
2. Right panel: Scrollable project details
3. Right content: title, description, tech stack, links
4. Image gallery with navigation dots
5. Mobile: Image at top, details below
6. Previous/Next project navigation at bottom
Use sticky positioning for image, smooth scroll for details

提示：复制时会自动附带该风格的设计规范

兼容的视觉风格

试试搭配

分屏布局是一种布局模式，可以与以下视觉风格搭配使用。

BRUTAL

大胆直接的设计

新野兽派

Neo-Brutalist

Minimal

Flat Design

极简扁平风格

极简扁平风

Minimalist Flat

Featured

Editorial

优雅的杂志排版，衬线标题与留白之美

编辑杂志风

Editorial

Gradient

现代渐变风格

现代渐变风

Modern Gradient

Bold

几何大胆风格

几何大胆风

Geometric Bold

Style Pack

导出风格包

获取完整的可机器读取风格资源，包括 Design Tokens、Tailwind 预设、CSS 变量和 shadcn/ui 主题。

Design Tokens

Figma / Style Dictionary / Tokens Studio 兼容

Tailwind Preset

Tailwind CSS 主题预设，可直接在配置中引用

Global CSS

包含 CSS 变量和基础样式

shadcn Theme

shadcn/ui 主题配置

CSS Variables

纯 CSS 变量，适用于任何项目

SKILL.md

可加载到 Cursor / Claude Code / VS Code 的技能包

导出

AI Rules

将以下规则导出并添加到你的 AI 编码助手中，让它按照分屏布局风格生成代码。

You are a frontend expert specializing in Split Screen layout. All generated code must strictly follow these constraints:

## Absolute Prohibitions

- Do NOT keep split layout on mobile (too narrow)
- Do NOT have identical content on both sides
- Do NOT create visual imbalance between panels
- Do NOT ignore content reading order
- Do NOT use harsh divider lines

## Must Follow

- Use CSS Grid: grid grid-cols-1 lg:grid-cols-2
- Mobile: stack vertically (grid-cols-1)
- Desktop: side by side (lg:grid-cols-2)
- Each panel: min-h-[50vh] on mobile, min-h-screen on desktop
- Balance visual weight between panels
- One side visual, one side content

## Layout Patterns

50/50 Split:
- grid-cols-1 lg:grid-cols-2
- Both panels equal width

60/40 Split:
- grid-cols-1 lg:grid-cols-[60fr_40fr]
- Emphasize one side

Sticky Split:
- One panel sticky (position: sticky, top: 0)
- Other panel scrolls

## Panel Content

Visual Panel:
- Full background image/color/video
- Minimal text overlay
- Center-aligned content

Content Panel:
- Ample padding (p-8 lg:p-16)
- Left-aligned text
- Clear hierarchy

## Responsive

Mobile: Stack vertically, visual panel first
Tablet: May start splitting at md:
Desktop: Full split with proper ratios

## Self-Check

After generating code, verify:
1. Mobile layout stacks properly
2. Panels have contrasting content
3. Visual balance maintained
4. Reading order makes sense
5. Transitions are smooth

组件预览

按钮

分屏布局中的对比按钮

tsx

<div className="flex gap-4">
  <button className="
    px-8 py-4
    bg-black text-white
    font-semibold
    hover:bg-zinc-800
    transition-colors
  ">
    Left Option
  </button>
  <button className="
    px-8 py-4
    bg-white text-black
    border-2 border-black
    font-semibold
    hover:bg-zinc-100
    transition-colors
  ">
    Right Option
  </button>
</div>

Global CSS

css

/* Split Screen Global Styles */

/* Base split container */
.split-screen {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 100vh;
}

@media (min-width: 1024px) {
  .split-screen {
    grid-template-columns: 1fr 1fr;
  }
}

/* Ratio variants */
.split-screen-60-40 {
  grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
  .split-screen-60-40 {
    grid-template-columns: 60fr 40fr;
  }
}

.split-screen-40-60 {
  grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
  .split-screen-40-60 {
    grid-template-columns: 40fr 60fr;
  }
}

/* Panel styles */
.split-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2rem;
}

@media (min-width: 1024px) {
  .split-panel {
    padding: 4rem;
  }
}

/* Sticky scroll effect */
.split-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
}

/* Diagonal split */
.split-diagonal {
  clip-path: polygon(0 0, 100% 0, 85% 100%, 0 100%);
}

@media (min-width: 1024px) {
  .split-diagonal {
    clip-path: polygon(0 0, 100% 0, 85% 100%, 0 100%);
  }
}

/* Hover reveal effect */
.split-hover-left:hover ~ .split-hover-right {
  flex: 0.3;
}

.split-hover-right:hover {
  flex: 0.7;
}

.split-hover-left, .split-hover-right {
  flex: 0.5;
  transition: flex 0.5s ease;
}

示例 Prompts

复制这些经过验证的 Prompt，快速开始用 AI 生成分屏布局风格的界面。

品牌展示页

左侧视觉，右侧品牌故事

Create a brand showcase page with split screen:
1. Left panel: Full-height gradient background with large brand logo
2. Right panel: Brand story with heading, paragraphs, and CTA
3. Mobile: Stack with visual panel first
4. Desktop: 50/50 split with min-h-screen
5. Navigation fixed at top with mix-blend-difference
6. Smooth scroll to next section
Use grid grid-cols-1 lg:grid-cols-2, contrasting colors

产品对比页

两种产品或方案的对比展示

Create a product comparison split screen:
1. Left panel: Product A with dark background, white text
2. Right panel: Product B with light background, dark text
3. Each side: product image, features list, price, CTA
4. Hover effect: hovered side expands slightly
5. Mobile: Stack with A on top
6. Center divider with "VS" badge
Use contrasting colors, balanced visual weight

作品集项目页

左侧项目图片，右侧项目详情

Create a portfolio project page with split screen:
1. Left panel: Sticky full-height project image gallery
2. Right panel: Scrollable project details
3. Right content: title, description, tech stack, links
4. Image gallery with navigation dots
5. Mobile: Image at top, details below
6. Previous/Next project navigation at bottom
Use sticky positioning for image, smooth scroll for details

提示：复制时会自动附带该风格的设计规范

导出风格包

获取完整的可机器读取风格资源，包括 Design Tokens、Tailwind 预设、CSS 变量和 shadcn/ui 主题。

Design Tokens

Figma / Style Dictionary / Tokens Studio 兼容

Tailwind Preset

Tailwind CSS 主题预设，可直接在配置中引用

Global CSS

包含 CSS 变量和基础样式

shadcn Theme

shadcn/ui 主题配置

CSS Variables

纯 CSS 变量，适用于任何项目

SKILL.md

可加载到 Cursor / Claude Code / VS Code 的技能包

AI Rules

将以下规则导出并添加到你的 AI 编码助手中，让它按照分屏布局风格生成代码。

You are a frontend expert specializing in Split Screen layout. All generated code must strictly follow these constraints:

## Absolute Prohibitions

- Do NOT keep split layout on mobile (too narrow)
- Do NOT have identical content on both sides
- Do NOT create visual imbalance between panels
- Do NOT ignore content reading order
- Do NOT use harsh divider lines

## Must Follow

- Use CSS Grid: grid grid-cols-1 lg:grid-cols-2
- Mobile: stack vertically (grid-cols-1)
- Desktop: side by side (lg:grid-cols-2)
- Each panel: min-h-[50vh] on mobile, min-h-screen on desktop
- Balance visual weight between panels
- One side visual, one side content

## Layout Patterns

50/50 Split:
- grid-cols-1 lg:grid-cols-2
- Both panels equal width

60/40 Split:
- grid-cols-1 lg:grid-cols-[60fr_40fr]
- Emphasize one side

Sticky Split:
- One panel sticky (position: sticky, top: 0)
- Other panel scrolls

## Panel Content

Visual Panel:
- Full background image/color/video
- Minimal text overlay
- Center-aligned content

Content Panel:
- Ample padding (p-8 lg:p-16)
- Left-aligned text
- Clear hierarchy

## Responsive

Mobile: Stack vertically, visual panel first
Tablet: May start splitting at md:
Desktop: Full split with proper ratios

## Self-Check

After generating code, verify:
1. Mobile layout stacks properly
2. Panels have contrasting content
3. Visual balance maintained
4. Reading order makes sense
5. Transitions are smooth