配色方案
Primary
#1a1a1a
Secondary
#fafafa
Accent 1
#e63946
Accent 2
#2a9d8f
Accent 3
#e9c46a
Accent 4
#264653
Quick Start
3 步开始使用 AI 生成
复制 AI Rules
粘贴到你的 AI 工具
• Cursor → 粘贴到 .cursorrules 文件
• Claude Code → 粘贴到 CLAUDE.md 文件
• Trae → 粘贴到 trae-rules.md 文件
开始生成
尝试:"用 杂志网格布局 风格生成一个着陆页"
设计哲学
Magazine Grid(杂志网格布局)借鉴传统印刷杂志的排版智慧,通过多栏和混合尺寸内容块创造专业的编辑效果。
核心理念: - 视觉层级:大图抓眼球,小块填充细节 - 扫描友好:读者可快速浏览找到感兴趣的内容 - 空间节奏:大小交替创造阅读节奏 - 专业感:传递权威性和可信度
必须做 / Do's
- +使用 CSS Grid 创建复杂网格 grid-template-areas
- +特色内容使用更大的网格区域 col-span-2 row-span-2
- +保持基线对齐和一致的间距
- +使用不同大小的内容块创造层次
- +移动端转为单列或简化网格
- +添加清晰的分类标签和时间戳
- +考虑广告位的预留空间
禁止做 / Don'ts
- -禁止所有内容块大小相同
- -禁止忽略移动端布局适配
- -禁止内容过于拥挤无留白
- -禁止分类标签不一致
- -禁止忽略图片裁切比例
组件模板
组件预览
分类标签
文章分类的标签按钮
<span className="
inline-block
px-3 py-1
text-xs font-semibold uppercase tracking-wider
text-red-600
bg-red-50
rounded
">
Technology
</span>全局样式
Global 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;
}快速开始
示例 Prompts
复制这些经过验证的 Prompt,快速开始用 AI 生成 杂志网格布局 风格的界面。
新闻首页
新闻网站的杂志风格首页
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
博客列表
博客文章的杂志布局
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
内容聚合页
多类型内容的聚合展示
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
提示:复制时会自动附带该风格的设计规范
Style Pack
导出风格包
获取完整的可机器读取风格资源,包括 Design Tokens、Tailwind 预设、CSS 变量和 shadcn/ui 主题。
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 的技能包
导出
AI Rules
将以下规则导出并添加到你的 AI 编码助手中,让它按照 杂志网格布局 风格生成代码。
You are a frontend expert specializing in Magazine Grid layout. All generated code must strictly follow these constraints:
## Absolute Prohibitions
- Do NOT make all content blocks same size
- Do NOT ignore mobile responsive layout
- Do NOT overcrowd content without whitespace
- Do NOT use inconsistent category styling
- Do NOT ignore image aspect ratios
## Must Follow
- Use CSS Grid: grid-cols-1 md:grid-cols-2 lg:grid-cols-4
- Featured content: col-span-2 row-span-2
- Consistent gaps: gap-6
- Category labels on all articles
- Image hover effects
- Line clamping for excerpts
## Grid Structure
Desktop (4 columns):
- Featured: 2x2 grid area
- Regular: 1x1 grid cells
- Mix large and small for variety
Tablet (2 columns):
- Featured: 2x1 or 1x2
- Regular: 1x1
Mobile (1 column):
- All items full width
- Stack vertically
## Article Card
Required elements:
1. Image with aspect ratio
2. Category label (colored)
3. Title (clamped)
4. Excerpt (optional, clamped)
5. Meta (author, date, read time)
## Category Colors
Use distinct colors per category:
- Tech: blue
- Business: green
- Culture: amber
- Opinion: purple
- Featured: red
## Self-Check
After generating code, verify:
1. Featured item is larger
2. Grid has visual variety
3. Categories are labeled
4. Mobile layout works
5. Images have proper ratios