Layout
非对称功能区域
故意打破网格、元素重叠、字体大胆的功能区域。
作者:mcpSkills
框架
nextjs
UI 库
shadcntailwind
难度advanced
英文提示词
Create an asymmetric feature section. Use a broken grid where a large headline overlaps a feature image, a body text column sits off-center, and a small stat block floats in an unexpected position. Use a light background, high-contrast dark text, and a single accent color. Avoid symmetry. Use Tailwind CSS grid and absolute positioning. Placeholders can be colored blocks.
中文提示词
创建一个非对称功能区域。使用破格网格:大标题与功能图片重叠,正文列偏离中心,小型数据块浮在意外位置。使用浅色背景、高对比深色文字和单一强调色。避免对称。使用 Tailwind CSS grid 和 absolute positioning。占位符可用彩色块。

Overview
打破 12 列网格以创造视觉张力和编辑个性的布局。
Features
- 破格/非对称网格
- 标题与图片重叠
- 偏离中心的正文
- 浮动数据块
- 单一强调色
- 占位图片块
Usage
适用于品牌故事、产品功能或杂志风格落地页。
Customization
修改 prompt 以:
- 为各层添加视差偏移
- 使用深色背景反转
- 在图片上添加引文叠加
- 响应式堆叠顺序