StyleKit
风格库模板社区生成器素材库GitHub
风格目录/杂志网格布局

杂志网格布局

Magazine Grid

C
62/100一般

灵感来自印刷杂志的多栏网格布局，通过不同大小的内容块创造丰富的视觉层次，适合新闻、博客、内容聚合。

杂志多栏新闻博客内容网格
查看完整 Showcase →对比

配色方案

Primary

#1a1a1a

Secondary

#fafafa

Accent 1

#e63946

Accent 2

#2a9d8f

Accent 3

#e9c46a

Accent 4

#264653

提示词

硬性 + 软性提示词

一键复制并生成 杂志网格布局 风格界面。硬性提示词用于强约束一致性，软性提示词用于保留风格方向下的灵活实现。

硬性提示词

高一致性，严格执行风格规则

STYLEKIT_STYLE_REFERENCE
style_name: 杂志网格布局
style_slug: magazine-grid
style_source: /styles/magazine-grid

# Hard Prompt

请严格遵守以下风格规则并保持一致性，禁止风格漂移。

## 执行要求
- 优先保证风格一致性，其次再做创意延展。
- 遇到冲突时以禁止项为最高优先级。
- 输出前自检：颜色、排版、间距、交互是否仍属于该风格。

## Style Rules
# Magazine Grid (杂志网格布局) Design System

> 灵感来自印刷杂志的多栏网格布局，通过不同大小的内容块创造丰富的视觉层次，适合新闻、博客、内容聚合。

## 核心理念

Magazine Grid（杂志网格布局）借鉴传统印刷杂志的排版智慧，通过多栏和混合尺寸内容块创造专业的编辑效果。

核心理念：
- 视觉层级：大图抓眼球，小块填充细节
- 扫描友好：读者可快速浏览找到感兴趣的内容
- 空间节奏：大小交替创造阅读节奏
- 专业感：传递权威性和可信度

---

## Token 字典（精确 Class 映射）

### 边框
```
宽度: border
颜色: border-zinc-200
圆角: rounded-lg
```

### 阴影
```
小:   shadow-sm
中:   shadow-sm
大:   shadow-md
悬停: hover:shadow-md
聚焦: focus:shadow-sm
```

### 交互效果
```
悬停位移: undefined
过渡动画: transition-all duration-300
按下状态: active:scale-95
```

### 字体
```
标题: font-bold tracking-tight
正文: font-sans
```

### 字号
```
Hero:  text-3xl md:text-4xl lg:text-5xl
H1:    text-2xl md:text-3xl lg:text-4xl
H2:    text-xl md:text-2xl
H3:    text-lg md:text-xl
正文:  text-sm md:text-base
小字:  text-xs
```

### 间距
```
Section: py-8 md:py-12 lg:py-16
容器:    px-4 md:px-6 lg:px-8
卡片:    p-4 md:p-6
```

---

## [FORBIDDEN] 绝对禁止

以下 class 在本风格中**绝对禁止使用**，生成时必须检查并避免：

### 禁止的 Class
- `rounded-none`
- `border-4`
- `border-8`
- `shadow-2xl`
- `font-black`

### 禁止的模式
- 匹配 `^border-[48]`
- 匹配 `^shadow-2xl`

### 禁止原因
- `rounded-none`: Magazine Grid uses soft rounded corners for a polished editorial feel
- `border-4`: Magazine Grid uses thin subtle borders for elegant separation
- `shadow-2xl`: Magazine Grid uses subtle shadows, relying on layout for visual hierarchy

> WARNING: 如果你的代码中包含以上任何 class，必须立即替换。

---

## [REQUIRED] 必须包含

### 按钮必须包含
```
text-xs font-semibold uppercase tracking-wider
rounded
```

### 卡片必须包含
```
rounded-lg
overflow-hidden
group
```

### 输入框必须包含
```
bg-zinc-100
border-0
rounded-lg
focus:outline-none
focus:ring-2 focus:ring-red-500/30
```

---

## [COMPARE] 错误 vs 正确对比

### 按钮

[WRONG] **错误示例**（使用了圆角和模糊阴影）：
```html
<button class="rounded-lg shadow-lg bg-blue-500 text-white px-4 py-2 hover:bg-blue-600">
  点击我
</button>
```

[CORRECT] **正确示例**（使用硬边缘、无圆角、位移效果）：
```html
<button class="text-xs font-semibold uppercase tracking-wider rounded bg-[#ff006e] text-white px-4 py-2 md:px-6 md:py-3">
  点击我
</button>
```

### 卡片

[WRONG] **错误示例**（使用了渐变和圆角）：
```html
<div class="rounded-xl shadow-2xl bg-gradient-to-r from-purple-500 to-pink-500 p-6">
  <h3 class="text-xl font-semibold">标题</h3>
</div>
```

[CORRECT] **正确示例**（纯色背景、硬边缘阴影）：
```html
<div class="rounded-lg overflow-hidden group p-4 md:p-6">
  <h3 class="font-bold tracking-tight text-lg md:text-xl">标题</h3>
</div>
```

### 输入框

[WRONG] **错误示例**（灰色边框、圆角）：
```html
<input class="rounded-md border border-gray-300 px-3 py-2 focus:ring-2 focus:ring-blue-500" />
```

[CORRECT] **正确示例**（黑色粗边框、聚焦阴影）：
```html
<input class="bg-zinc-100 border-0 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500/30 px-3 py-2 md:px-4 md:py-3" placeholder="请输入..." />
```

---

## [TEMPLATES] 页面骨架模板

使用以下模板生成页面，只需替换 `{PLACEHOLDER}` 部分：

### 导航栏骨架
```html
<nav class="bg-white border-b-2 md:border-b-4 border-black px-4 md:px-8 py-3 md:py-4">
  <div class="flex items-center justify-between max-w-6xl mx-auto">
    <a href="/" class="font-black text-xl md:text-2xl tracking-wider">
      {LOGO_TEXT}
    </a>
    <div class="flex gap-4 md:gap-8 font-mono text-sm md:text-base">
      {NAV_LINKS}
    </div>
  </div>
</nav>
```

### Hero 区块骨架
```html
<section class="min-h-[60vh] md:min-h-[80vh] flex items-center px-4 md:px-8 py-12 md:py-0 bg-{ACCENT_COLOR} border-b-2 md:border-b-4 border-black">
  <div class="max-w-4xl mx-auto">
    <h1 class="font-black text-4xl md:text-6xl lg:text-8xl leading-tight tracking-tight mb-4 md:mb-6">
      {HEADLINE}
    </h1>
    <p class="font-mono text-base md:text-xl max-w-xl mb-6 md:mb-8">
      {SUBHEADLINE}
    </p>
    <button class="bg-black text-white font-black px-6 py-3 md:px-8 md:py-4 border-2 md:border-4 border-black shadow-[4px_4px_0px_0px_rgba(255,0,110,1)] md:shadow-[8px_8px_0px_0px_rgba(255,0,110,1)] hover:shadow-none hover:translate-x-[2px] hover:translate-y-[2px] transition-all text-sm md:text-base">
      {CTA_TEXT}
    </button>
  </div>
</section>
```

### 卡片网格骨架
```html
<section class="py-12 md:py-24 px-4 md:px-8">
  <div class="max-w-6xl mx-auto">
    <h2 class="font-black text-2xl md:text-4xl mb-8 md:mb-12">{SECTION_TITLE}</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6">
      <!-- Card template - repeat for each card -->
      <div class="bg-white border-2 md:border-4 border-black shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] md:shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] p-4 md:p-6 hover:shadow-[4px_4px_0px_0px_rgba(255,0,110,1)] md:hover:shadow-[8px_8px_0px_0px_rgba(255,0,110,1)] hover:-translate-y-1 transition-all">
        <h3 class="font-black text-lg md:text-xl mb-2">{CARD_TITLE}</h3>
        <p class="font-mono text-sm md:text-base text-gray-700">{CARD_DESCRIPTION}</p>
      </div>
    </div>
  </div>
</section>
```

### 页脚骨架
```html
<footer class="bg-black text-white py-12 md:py-16 px-4 md:px-8 border-t-2 md:border-t-4 border-black">
  <div class="max-w-6xl mx-auto">
    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
      <div>
        <span class="font-black text-xl md:text-2xl">{LOGO_TEXT}</span>
        <p class="font-mono text-sm mt-4 text-gray-400">{TAGLINE}</p>
      </div>
      <div>
        <h4 class="font-black text-lg mb-4">{COLUMN_TITLE}</h4>
        <ul class="space-y-2 font-mono text-sm text-gray-400">
          {FOOTER_LINKS}
        </ul>
      </div>
    </div>
  </div>
</footer>
```

---

## [CHECKLIST] 生成后自检清单

**在输出代码前，必须逐项验证以下每一条。如有违反，立即修正后再输出：**

### 1. 圆角检查
- [ ] 搜索代码中的 `rounded-`
- [ ] 确认只有 `rounded-none` 或无圆角
- [ ] 如果发现 `rounded-lg`、`rounded-md` 等，替换为 `rounded-none`

### 2. 阴影检查
- [ ] 搜索代码中的 `shadow-`
- [ ] 确认只使用 `shadow-[Xpx_Xpx_0px_0px_rgba(...)]` 格式
- [ ] 如果发现 `shadow-lg`、`shadow-xl` 等，替换为正确格式

### 3. 边框检查
- [ ] 搜索代码中的 `border-`
- [ ] 确认边框颜色是 `border-black`
- [ ] 如果发现 `border-gray-*`、`border-slate-*`，替换为 `border-black`

### 4. 交互检查
- [ ] 所有按钮都有 `hover:shadow-none hover:translate-x-[2px] hover:translate-y-[2px]`
- [ ] 所有卡片都有 hover 效果（阴影变色或位移）
- [ ] 都包含 `transition-all`

### 5. 响应式检查
- [ ] 边框有 `border-2 md:border-4`
- [ ] 阴影有 `shadow-[4px...] md:shadow-[8px...]`
- [ ] 间距有 `p-4 md:p-6` 或类似的响应式值
- [ ] 字号有 `text-sm md:text-base` 或类似的响应式值

### 6. 字体检查
- [ ] 标题使用 `font-black`
- [ ] 正文使用 `font-mono`

> CRITICAL: **如果任何一项检查不通过，必须修正后重新生成代码。**

---

## [EXAMPLES] 示例 Prompt

### 1. 新闻首页

新闻网站的杂志风格首页

```
Create a news homepage with magazine grid:
1. 4-column grid on desktop, 2 on tablet, 1 on mobile
2. Featured story spanning 2x2 with image overlay
3. Regular articles in grid with thumbnail, category, title
4. Category tabs: All, Politics, Tech, Business, Sports
5. Breaking news banner at top
6. Load more button at bottom
7. Sidebar with trending stories (optional)
Clean, professional news design with red accent
```

### 2. 博客列表

博客文章的杂志布局

```
Create a blog listing with magazine grid:
1. Featured post with large image and gradient overlay
2. Regular posts in varied sizes (some 2-col wide)
3. Each post: image, category tag, title, excerpt, author
4. Mix of horizontal and vertical card layouts
5. Filter by category dropdown
6. Infinite scroll loading
7. Reading time indicator
Modern editorial style with serif headlines
```

### 3. 内容聚合页

多类型内容的聚合展示

```
Create a content hub with magazine grid:
1. Mix of content types: articles, videos, podcasts
2. Video cards with play button overlay
3. Podcast cards with audio duration
4. Featured content section at top
5. "Editor's Picks" sidebar section
6. Newsletter signup card in grid
7. Trending topics tags
Multi-format content with clear type indicators
```

软性提示词

保留风格方向，允许实现灵活

STYLEKIT_STYLE_REFERENCE
style_name: 杂志网格布局
style_slug: magazine-grid
style_source: /styles/magazine-grid

# Soft Prompt

保持整体风格气质即可，允许实现细节灵活调整，但不要偏离核心视觉语言。

## Style Signals
- 杂志
- 多栏
- 新闻
- 博客
- 内容
- 网格

## Prefer
- 使用 CSS Grid 创建复杂网格 grid-template-areas
- 特色内容使用更大的网格区域 col-span-2 row-span-2
- 保持基线对齐和一致的间距
- 使用不同大小的内容块创造层次

## Avoid
- 禁止所有内容块大小相同
- 禁止忽略移动端布局适配
- 禁止内容过于拥挤无留白

## Output Guidance
- 先保证整体风格识别度，再优化细节。
- 避免过度炫技，保持可读性与可维护性。

设计哲学

Magazine Grid（杂志网格布局）借鉴传统印刷杂志的排版智慧，通过多栏和混合尺寸内容块创造专业的编辑效果。

核心理念： - 视觉层级：大图抓眼球，小块填充细节 - 扫描友好：读者可快速浏览找到感兴趣的内容 - 空间节奏：大小交替创造阅读节奏 - 专业感：传递权威性和可信度

必须做 / Do's

  • +使用 CSS Grid 创建复杂网格 grid-template-areas
  • +特色内容使用更大的网格区域 col-span-2 row-span-2
  • +保持基线对齐和一致的间距
  • +使用不同大小的内容块创造层次
  • +移动端转为单列或简化网格
  • +添加清晰的分类标签和时间戳
  • +考虑广告位的预留空间
  • +所有文章卡片使用 group 类触发子元素联动
  • +图片默认 grayscale-[20%]，group-hover:grayscale-0 group-hover:scale-105（Color Awakening，瞬间全彩抓眼球）
  • +分类标签后加装饰线：w-4 h-px group-hover:w-12 transition-all duration-300 ease-out（Editorial Stretch，排版骨架延伸）
  • +标题 group-hover:text-red-600 transition-colors duration-200 ease-out（Crisp Typographic Shift，干脆切色）

禁止做 / Don'ts

  • -禁止所有内容块大小相同
  • -禁止忽略移动端布局适配
  • -禁止内容过于拥挤无留白
  • -禁止分类标签不一致
  • -禁止忽略图片裁切比例
  • -禁止对正文段落施加任何位移动画（阅读稳定性优先）
  • -禁止标题 hover 使用发光或阴影效果（应直接切换颜色，干脆利落）

组件模板

组件预览

分类标签

文章分类的标签按钮，带有 Editorial Stretch 装饰线延伸效果

Technology
tsx
<div className="group flex items-center gap-2">
  <span className="
    inline-block
    px-3 py-1
    text-xs font-semibold uppercase tracking-wider
    text-red-600
    bg-red-50
    rounded
  ">
    Technology
  </span>
  <span className="block w-4 h-px bg-red-600 group-hover:w-12 transition-all duration-300 ease-out" />
</div>

全局样式

全局 CSS

css
/* Magazine Grid Global Styles */

/* Base magazine grid */
.magazine-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .magazine-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .magazine-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Featured item spans */
.magazine-featured {
  grid-column: span 2;
  grid-row: span 2;
}

@media (max-width: 767px) {
  .magazine-featured {
    grid-column: span 1;
    grid-row: span 1;
  }
}

/* Article card styles */
.magazine-article {
  position: relative;
}

.magazine-article img {
  transition: transform 0.3s ease;
}

.magazine-article:hover img {
  transform: scale(1.05);
}

/* Category tags */
.magazine-category {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 0.25rem;
}

/* Category colors */
.magazine-category-tech { color: #3b82f6; background: #eff6ff; }
.magazine-category-business { color: #10b981; background: #ecfdf5; }
.magazine-category-culture { color: #f59e0b; background: #fffbeb; }
.magazine-category-opinion { color: #8b5cf6; background: #f5f3ff; }
.magazine-category-featured { color: white; background: #dc2626; }

/* Line clamp for excerpts */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

兼容的视觉风格

试试搭配

杂志网格布局 是一种布局模式，可以与以下视觉风格搭配使用。

编辑杂志风

Editorial

极简扁平风

Minimalist Flat

企业简洁风

Corporate Clean

复古怀旧风

Retro Vintage

暗黑模式

Dark Mode

无障碍

无障碍评分

基于颜色对比度和排版可读性的 WCAG 2.1 合规分析。

62

综合评分

等级: C - 一般

对比度

分数: 53/100平均比率: 7.31:1
AA 未通过AAA 未通过
场景颜色比率AAAAA
Text on background
/#18181b / #ffffff
17.72:1
Button primary
/#ffffff / #e63946
4.17:1
Text on accent 1
/#18181b / #e63946
4.25:1
Text on accent 2
/#18181b / #2a9d8f
5.33:1
Text on accent 3
/#18181b / #e9c46a
10.6:1
Text on accent 4
/#18181b / #264653
1.76:1

可读性

分数

82/100

字号

text-sm md:text-base

字重

font-bold tracking-tight

行高

default

评分基于 WCAG 2.1 标准。AA 级要求普通文本对比度 4.5:1、大文本 3:1；AAA 级要求普通文本 7:1、大文本 4.5:1。

IDE 集成

IDE 配置导出

下载 AI 编码助手的配置文件，使其按照此风格生成代码。

风格包

导出风格包

获取完整的可机器读取风格资源，包括 Design Tokens、Tailwind 预设、CSS 变量和 shadcn/ui 主题。

Metadata

Style metadata including version information

Design Tokens

Figma / Style Dictionary / Tokens Studio 兼容

Tailwind Preset

Tailwind CSS 主题预设，可直接在配置中引用

Global CSS

包含 CSS 变量和基础样式

shadcn Theme

shadcn/ui 主题配置

CSS Variables

纯 CSS 变量，适用于任何项目

SKILL.md

可加载到 Cursor / Claude Code / VS Code 的技能包

社区

评分与反馈

登录后评分
0 条评论
登录后才能发表评论。 去登录

StyleKit

精选网页设计风格库，帮助 AI 生成更好看的网站。

导航

风格库模板对比

资源

GitHub 仓库

(c) 2026 StyleKit. 开源项目。

基于 Editorial 风格构建