journalistic-portraitCreate 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.
Independent GitHub snapshot · Automated classification · Original documentation governs
Replicates the visual identity of Southern People Weekly (南方人物周刊) as HTML web pages.
| Format | Supported | Notes |
|---|---|---|
| HTML (static web page) | Yes | Primary output |
| 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).
references/style_contract.md for the complete visual style specification.references/structure_contract.md for the page structure rules and layout patterns.These 4 rules must be explicitly written into the generated HTML/CSS and strictly followed:
封面分层：准确提取原件色彩，切勿将红边框设为全局背景。用 z-index 分三层：底层暗调背景图、中层报头、顶层边框与导读。
The cover page MUST use a 3-layer z-index stack. Never set the red border as a global background.
z-index: 0): Darkened full-bleed cover photo with gradient overlayz-index: 1): Masthead "南方" + "人物周刊" + cover headline textz-index: 2): Red border frame + right-side TOC teasers + bottom info barCSS 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: 2; inset: 0; border: 12px solid #D90712; pointer-events: none; }
.cover-frame::after { content: ''; position: absolute; inset: 8px; border: 2px solid rgba(255,255,255,0.6); }
.cover-teasers { position: absolute; z-index: 2; right: 60px; bottom: 120px; color: #fff; text-align: right; }
.cover-bottom-bar { position: absolute; z-index: 2; bottom: 20px; left: 20px; right: 20px; }
Cover checklist:
#D90712 exactly 12px, with inner white line防图文遮挡：内页图片严禁使用 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:
position: absolute on any inner-page imagefloat: right or float: left with margin::after with clear: both)防排版崩塌：绝对禁止给文本容器写死固定高度。全局强制应用 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:
height on any text containerbox-sizing: border-box applied globallyword-wrap: break-word and overflow-wrap: break-word on all text containersmin-height instead of height where needed高密度填充：设定正文 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:
line-height: 1.5 on body text| 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 |
"PingFang SC", "Noto Sans SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif| 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 |
grid-template-columns: 1fr 1fr for dual-column, not column-count