Layout
编辑杂志布局
带有超大标题、充裕留白和杂志风格图片构图的不对称编辑布局。
作者:mcpSkills
框架
nextjs
UI 库
shadcntailwind
难度advanced
英文提示词
Create an editorial magazine-style layout section. Use a 12-column asymmetric grid: a massive headline spans columns 1-7, a body-text column sits in columns 9-12, and a rectangular image placeholder overlaps the headline at columns 6-10. Use a warm off-white background and near-black text. Typography should pair a bold condensed sans-serif headline with a readable serif body text. Add a small uppercase category label with a thin rule line above it. Whitespace should be generous and intentional. Use Tailwind CSS grid. No borders, no cards, no shadows—only typography, image, and space.
中文提示词
创建一个编辑杂志风格的布局区域。使用 12 列不对称网格:大标题横跨第 1-7 列,正文列位于第 9-12 列,矩形图片占位区在第 6-10 列与标题重叠。使用温暖的米白色背景和近黑色文字。排版应将粗体压缩无衬线标题与易读的衬线正文配对。添加一个小号大写分类标签,上方带细线分隔。留白应充裕且有意图。使用 Tailwind CSS 网格。无边框、无卡片、无阴影——只有字体、图片和空间。

Overview
受印刷品启发的网页布局,将留白和字体层级作为主要设计元素。
Features
- 12 列不对称网格
- 超大压缩标题
- 重叠式图片放置
- 衬线正文配对
- 大写分类标签与分隔线
- 充裕留白
- 无装饰边框或阴影
Usage
适用于编辑出版物、时尚画册、长篇幅落地页或设计作品集。
Customization
修改 prompt 以:
- 在图片上添加引文叠加
- 使用双色背景分割
- 引入垂直边注列
- 将图片替换为全出血视频