magazine-layout

Original：🇨🇳 Chinese

Translated

1 scriptsChecked / no sensitive code detected

Convert text content into elegant magazine-style HTML pages with support for professional typesetting and multiple visual styles. Trigger scenarios: (1) Users want to convert text/articles into magazine-style HTML, (2) Users mention "magazine layout", "magazine design", "article typesetting", "professional typesetting", "text beautification", or "magazine layout", (3) Users need elegantly typeset HTML pages, (4) Users need to export designed content as PDF. 12 unique visual styles are supported, using Tailwind CSS.

2installs

Sourceisjiamu/jiamu-skills

Added on2026-03-18

NPX Install

npx skill4agent add isjiamu/jiamu-skills magazine-layout

SKILL.md Content (Chinese)

View Translation Comparison →

Magazine Layout Designer

Convert plain text into professionally designed magazine-style HTML pages with exquisite typesetting using Tailwind CSS.

Quick Start

User provides text content
Discuss with the user and select an appropriate style
Generate complete HTML based on the selected style
Optional: Export as PDF

Workflow

Step 1: Analyze Content Structure

Identify structural elements of the text:

Headings and subheadings
Chapters and subchapters
Important quotes or key sentences
Lists and data points
Author/date information

Step 2: Style Selection (Consult with User)

Important: You must present style options to the user and confirm after discussion. Use the AskUserQuestion tool to let the user choose.

Read references/styles.md for complete templates.

Overview of Optional Styles:

ID	Style Name	Use Case	Visual Features
1	Classic Elegance	Literature, essays, memoirs	Serif fonts, warm color tones, drop cap, decorative dividers
2	Modern Minimalist	Tech blogs, modern articles	Sans-serif fonts, ample white space, clean lines
3	Tech Magazine	Programming, technical content	Gradient colors, code block styles, futuristic design
4	Nature & Lifestyle	Lifestyle, travel, food	Natural green tones, organic shapes, handwritten style accents
5	Bold Editorial	Opinions, commentaries	Oversized headings, high-contrast black and white, red accents
6	Vintage Retro	History, nostalgic content	Vintage borders, typewriter fonts, parchment texture
7	Corporate Professional	Business reports, corporate documents	Navy blue color scheme, clear hierarchy, professional and rigorous
8	Creative Art	Design, artistic creation	Asymmetric layout, color block decorations, hand-drawn style
9	Academic Journal	Academic papers, research reports	Two-column layout, abstract style, citation format
10	Fashion Luxe	Fashion, luxury content	Gold accents, elegant serifs, refined white space
11	News & Report	News, news reports	Newspaper style, multi-level headings, breaking news tags
12	Dark Mode Tech	Developer content	Dark background, fluorescent color scheme, terminal style

Style Recommendation Logic:

Literature/essays → Recommended: Classic Elegance, Vintage Retro
Technical/programming → Recommended: Tech Magazine, Dark Mode Tech, Modern Minimalist
Business/reports → Recommended: Corporate Professional, News & Report
Lifestyle/travel → Recommended: Nature & Lifestyle, Fashion Luxe
Opinions/commentaries → Recommended: Bold Editorial, Creative Art
Academic/research → Recommended: Academic Journal

Users can also:

Mix elements from multiple styles
Customize colors, fonts
Adjust page size and spacing

Step 3: Generate HTML

Read the template for the selected style from references/styles.md to generate complete HTML.

Generation Rules:

Strictly follow the template structure of the selected style
Preserve all content from the user's original text - Never delete or summarize
Apply appropriate typesetting components:
- Use
```
drop-cap
```
  for the first paragraph
- Use
```
blockquote
```
  style for important sentences
- Use style-specific dividers between chapters
- Correct heading hierarchy (h1 > h2 > h3)
Must include intelligent pagination CSS (see explanation below)
Content must adapt to page size
Include all CSS (inline or via CDN for Tailwind, Google Fonts)
Output a complete, self-contained HTML file

Core Typesetting Components:

html

<!-- Drop cap paragraph -->
<p class="drop-cap">First paragraph content...</p>

<!-- Quote/citation block -->
<blockquote>
  <p>"Important quote content"</p>
  <cite>— Source</cite>
</blockquote>

<!-- Chapter divider -->
<div class="elegant-divider"><span>※</span></div>

<!-- Header section -->
<header>
  <h1>Main Title</h1>
  <p class="subtitle">Subtitle or introduction</p>
</header>

Intelligent Pagination CSS (Must Include):

Ensure content is not cut off in the middle of elements during PDF export. This CSS is built into each template and must be preserved when generating HTML:

css

/* Print/PDF mode */
@media print {
  /* Prevent page breaks after headings */
  h1, h2, h3, .chapter-number, .chapter-title {
    page-break-after: avoid; break-after: avoid;
  }
  /* Prevent page breaks inside block elements */
  blockquote, .highlight-box, .stage-item, .question-item,
  .code-block, .terminal, figure, img, table {
    page-break-inside: avoid; break-inside: avoid;
  }
  /* Keep lists intact */
  ul, ol, .numbered-list, .stage-list {
    page-break-inside: avoid; break-inside: avoid;
  }
  /* Prevent page breaks after dividers */
  .elegant-divider, .divider, hr {
    page-break-after: avoid; break-after: avoid;
  }
  /* Control orphan and widow lines for paragraphs */
  p { orphans: 3; widows: 3; }
}
/* Apply to non-print modes too for consistent PDF rendering */
blockquote, .highlight-box, .code-block, .terminal, figure, img, table {
  page-break-inside: avoid; break-inside: avoid;
}

CSS Property	Effect	Applicable Elements
`page-break-inside: avoid`	Prevent page breaks inside elements	Quotes, cards, lists
`page-break-after: avoid`	Prevent page breaks after elements	Headings, dividers
`orphans: 3`	Keep at least 3 lines at the bottom of a page	Paragraphs
`widows: 3`	Keep at least 3 lines at the top of a page	Paragraphs

Step 4: PDF Export (Optional)

Use the

scripts/html_to_pdf.py

script:

bash

# Check available engines
python scripts/html_to_pdf.py --check

# Convert (auto-detect best engine)
python scripts/html_to_pdf.py magazine.html

# Specify output filename
python scripts/html_to_pdf.py magazine.html output.pdf

# Use specific engine
python scripts/html_to_pdf.py magazine.html --engine playwright

Engine Installation Methods:

Playwright (Recommended):

pip install playwright && playwright install chromium

WeasyPrint:
```
pip install weasyprint
```
wkhtmltopdf:
```
brew install wkhtmltopdf
```
(macOS)

Long Article Pagination Handling

Intelligent Pagination: All templates have built-in pagination control CSS, which automatically avoids page breaks at the following positions during PDF export:

Between headings and body text
Inside quote blocks, highlight boxes, lists
Between dividers and content below

For ultra-long content (when manual splitting is needed):

Split at natural break points (approx. 800-1000 words per page)
Generate independent HTML files:
```
Article_Page1.html
```
,
```
Article_Page2.html
```
Each page is a complete, self-contained HTML file (with full CSS and pagination controls)

Output Format

markdown

## Your Magazine Page

Save the following code as `Article.html`:

```html
<!DOCTYPE html>
...complete HTML code...

How to View: Open

Article.html

in a browser Export to PDF:

python scripts/html_to_pdf.py Article.html


## Style Customization

Users may request modifications to:
- **Colors**: Modify CSS variables or Tailwind classes
- **Fonts**: Update Google Fonts imports
- **Spacing**: Adjust padding, margin, line-height
- **Layout**: Modify page width and height dimensions

Apply modifications while maintaining overall style harmony.

## Resource Files

### scripts/
- `html_to_pdf.py` - HTML to PDF script that supports multiple rendering engines (Playwright/WeasyPrint/wkhtmltopdf)

### references/
- `styles.md` - Complete templates for all 12 styles, including color schemes, font settings, intelligent pagination CSS, and HTML template code