LAYOUT
分屏布局Split Screen
屏幕被垂直切成两半，一边深色一边浅色，各自承载完全对等的内容。
效果预览
个人版
为自己而做
一个人也能跑出整个公司的产出。
企业版
为团队而赢
权限、审计与协作，一个不少。
适合用在哪
双产品线、双受众（个人/企业）、登录注册页、对比展示。
容易踩的坑
- 两半各自独立滚动，触控板用户很难判断当前在滚哪一侧，内容较长时应取消独立滚动。
- 悬停 scale 1.02 未加 overflow:hidden，放大后撑出横向滚动条。
- 深浅两半各放一个同等权重的 CTA，却没说清两条路线的区别，用户选择困难。
设计提示词 · Prompt
分屏布局（Split Screen）：视口被垂直切成严格相等的两半（grid-template-columns:1fr 1fr），各自独立滚动。两半形成强对比——一边纯深色（#141418）白字，一边纯白深字，中间不留缝。每半内部：上小标题、中 32-44px 大标题 + 说明、下各自的 CTA。适合表达"两条路线、两个身份"。移动端改上下堆叠，深色块在上。悬停任意一半时，该半轻微放大（scale 1.02）暗示可交互。
Split Screen: the viewport is cut vertically into two strictly equal halves (grid-template-columns:1fr 1fr), each scrolling independently. The two halves form a strong contrast — one solid dark (#141418) with white text, the other solid white with dark text, with no gap in between. Inside each half: a small subheading on top, a 32-44px large heading + description in the middle, and its own CTA at the bottom. Suitable for expressing "two paths, two identities". On mobile, stack top to bottom with the dark block on top. When hovering either half, that half scales up slightly (scale 1.02) to hint interactivity.
常见搭配
同一页面里经常和「分屏布局」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-split">
<div class="d-split__l">
<span style="font-size:9.5px;opacity:.6;letter-spacing:.08em">个人版</span>
<b>为自己而做</b>
<span>一个人也能跑出整个公司的产出。</span>
</div>
<div class="d-split__r">
<span style="font-size:9.5px;color:var(--i-tx3);letter-spacing:.08em">企业版</span>
<b>为团队而赢</b>
<span>权限、审计与协作，一个不少。</span>
</div>
</div>