| name | journalistic-portrait |
| description | Create magazine-style HTML pages replicating the visual design of Southern People Weekly. Use for feature article layouts, cover pages with red border frames, table-of-contents pages with portrait photography, and dual-column inner pages with editorial section headers, mimicking the typography and color scheme of Chinese weekly magazines. |
Southern People Weekly Magazine Layout Skill
Replicates the visual identity of Southern People Weekly (南方人物周刊) as HTML web pages.
Reference Source
- Type: Uploaded PDF artifact (native PDF)
- Reference File Type: PDF
- Style origin: Extracted from concrete 4-page PDF visual analysis
- Language: Chinese (Simplified) with occasional English labels
Supported Outputs
| Format | Supported | Notes |
|---|
| HTML (static web page) | Yes | Primary output |
| PDF | Yes | Via print-to-PDF from browser |
| DOCX | No | Not applicable for magazine layout |
| PPTX | No | Not applicable for magazine layout |
Default output: HTML static web page (single-file or multi-page).
Workflow
- Read
references/style_contract.md for the complete visual style specification.
- Read
references/structure_contract.md for the page structure rules and layout patterns.
- Generate HTML following all contracts and the 4 Frontend Iron Rules below.
- Validate each page type against the checklist in the Iron Rules section.
The 4 Frontend Iron Rules (MANDATORY — MUST APPEAR VERBATIM)
These 4 rules must be explicitly written into the generated HTML/CSS and strictly followed:
Rule 1: Cover Layering (z-index Stack)
封面分层：准确提取原件色彩，切勿将红边框设为全局背景。用 z-index 分三层：底层暗调背景图、中层报头、顶层边框与导读。
The cover page MUST use a 3-layer z-index stack. Never set the red border as a global background.
- Layer 0 (
z-index: 0): Darkened full-bleed cover photo with gradient overlay
- Layer 1 (
z-index: 1): Masthead "南方" + "人物周刊" + cover headline text
- Layer 2 (
z-index: 2): Red border frame + right-side TOC teasers + bottom info bar
CSS skeleton:
.cover-container { position: relative; width: 100%; aspect-ratio: 3/4; min-height: 900px; overflow: hidden; }
.cover-bg { position: absolute; z-index: 0; inset: 20px; }
.cover-bg img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.85); }
.cover-bg-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.45)); }
.cover-masthead { position: absolute; z-index: 1; inset: 20px; display: flex; flex-direction: column; }
.cover-frame { position: absolute; z-index: ; : ; : solid ; : none; }
{ : ; : absolute; : ; : solid (,,,); }
{ : absolute; : ; : ; : ; : ; : right; }
{ : absolute; : ; : ; : ; : ; }
Cover checklist:
Rule 2: Image-Text Collision Prevention (No Absolute Images)
防图文遮挡：内页图片严禁使用 position: absolute。必须用 float 配合 margin 推开文字，父级容器强制应用 clearfix。
Inner-page images MUST NEVER use position: absolute. Always use float with margin to push text away. Parent container MUST apply clearfix.
.article-image { float: right; margin: 0 0 1em 1.5em; max-width: 48%; }
.article-image.left { float: left; margin: 0 1.5em 1em 0; }
.article-column::after { content: ""; display: table; clear: both; }
Image checklist:
Rule 3: Layout Collapse Prevention (No Fixed Heights)
防排版崩塌：绝对禁止给文本容器写死固定高度。全局强制应用 word-wrap: break-word 与 box-sizing: border-box。
NEVER assign fixed height to text containers. Globally enforce box-sizing and word-wrap.
* { box-sizing: border-box; }
.text-container,
.column,
.article-body { height: auto !important; word-wrap: break-word; overflow-wrap: break-word; }
Layout checklist:
Rule 4: High-Density Text Fill
高密度填充：设定正文 line-height: 1.5 左右。必须硬性规定下游 AI：每页正文需生成 800-1000 字，彻底填满多栏网格，严防底部留白。
Set body text line-height: 1.5. Every article page MUST generate 800-1000 characters of body text per page to completely fill the multi-column grid. Prevent bottom whitespace.
.article-body { line-height: 1.5; font-size: 15px; }
Density checklist:
Page Type Quick Reference
| Page Type | Key Rule | Critical Check |
|---|
| Cover | Rule 1 (3-layer z-index) | Teasers + bottom bar present |
| Table of Contents | Single page only | All content on one page |
| Article (first page) | Rules 2-4, dual-column from page 1 | Never single-column |
| Article (continuation) | Rules 2-4 | 800-1000 chars, filled columns |
Typography Strategy
- Primary CJK font:
"PingFang SC", "Noto Sans SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif
- Reference fonts from PDF: PingFangSC-Regular + Helvetica
- Heading weight: 700 (bold)
- Body weight: 400 (regular)
- All text elements use the same font stack for CJK compatibility.
Color Palette
| Token | Hex | Usage |
|---|
--spw-red | #D90712 | Cover border, accent marks, decorative bars, end triangle |
--spw-red-dark | #B0060F | Hover states |
--spw-black | #1A1A1A | Body text, headings |
--spw-gray | #666666 | Captions, secondary text, author info |
--spw-gray-light | #999999 | Page numbers, tertiary labels |
--spw-white | #FFFFFF | Page background, cover text |
--spw-cream | #F5F0E8 | Alternate section backgrounds |
Known Issues to Prevent (from Judge Feedback)
- NEVER create blank pages between cover and TOC or TOC and articles
- NEVER use single-column layout on first page of articles - dual-column always
- NEVER omit the cover teasers (right-side boxes) or bottom info bar
- NEVER split TOC across multiple pages - keep on one page
- NEVER leave 50%+ whitespace at bottom of article pages
- ALWAYS place page numbers consistently (bottom-left or bottom-right)
- ALWAYS use
grid-template-columns: 1fr 1fr for dual-column, not column-count
