← 返回提示词
Landing

分屏 Hero

大胆的分屏 hero,对比排版、全出血图片面板和极简导航。

作者:mcpSkills
框架
nextjs
UI 库
shadcntailwind
难度advanced
英文提示词
Create a split-screen landing hero. The left half should be a warm off-white background with a massive bold headline in a dark color, a short body paragraph in a serif font, and a simple underline text link as the CTA. The right half should be a full-bleed image panel with a subtle dark overlay and a small floating caption in the bottom corner. Add a minimal top navigation bar that spans both halves with a thin bottom rule. Use Tailwind CSS grid. No gradients, no buttons with backgrounds, no decorative shapes.
中文提示词
创建一个分屏落地页 hero。左半部分为温暖的米白色背景,放置深色超大粗体标题、衬线字体短段落,以及作为 CTA 的简单下划线文本链接。右半部分为全出血图片面板,带微妙深色叠加和右下角小浮动标题。添加一条横跨两半的极简顶部导航栏,底部带细线分隔。使用 Tailwind CSS 网格。无渐变、无背景按钮、无装饰形状。
分屏 Hero screenshot 1
## Overview 受印刷品启发的编辑感 hero,使用分屏形式在字体与摄影之间制造张力。 ## Features - 50/50 分屏布局 - 温暖米白色 + 深色对比 - 超大粗体标题 - 衬线正文段落 - 下划线文本 CTA - 带标题的全出血图片面板 - 带底部分隔线的极简横跨导航 ## Usage 适用于时尚、编辑、建筑或生活方式品牌落地页。 ## Customization 修改 prompt 以: - 反转分屏方向 - 添加垂直排版边注 - 将图片替换为视频循环 - 让导航滚动时才出现