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