SuperAPI AI Directory
Partner with us中文AI newsFavorites
Skillsmagazine-layout

magazine-layout

Frontend & websites

View repository

Updated 10-16 06:19

About this skill

Magazine Layout Designer

Convert plain text into professionally designed magazine-style HTML pages, using Tailwind CSS to achieve beautiful typography.

Quick Start

  1. The user provides text content
  2. Discuss with the user and choose an appropriate style
  3. Generate the complete HTML based on the selected style
  4. Optional: Export as PDF

Workflow

Step 1: Analyze the content structure

Identify the structural elements of the text:

  • Title and subtitle
  • Chapters and subheadings
  • Important quotes or key lines
  • Lists and data points
  • Author/date information

Step 2: Style selection (discuss with the user)

Important: You must show the style options to the user and confirm only after discussing with the user. Use the AskUserQuestion tool to let the user choose.

Read references/styles.md to get the complete template.

Overview of optional styles:

No. Style Name Applicable Scenarios Visual Characteristics
1 Classic Elegance Literature, essays, memoirs Serif fonts, warm tones, drop caps, decorative dividers
2 Modern Minimalist Tech blogs, modern articles Sans-serif fonts, lots of 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, commentary articles Extra-large headlines, high-contrast black and white, red accents
6 Vintage Retro History, nostalgic content Retro 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 serif fonts, refined white space
11 News & Report News, news reports Newspaper style, multi-level headlines, breaking news labels
12 Dark Mode Tech Developer Content Dark background, fluorescent color scheme, terminal style

Style recommendation logic:

  • Literature/Essay → Recommended: Classic Elegant, Retro Nostalgic
  • Technology/Programming → Recommended: Tech Magazine, Dark Tech, Modern Minimalist
  • Business/Report → Recommended: Business Professional, News Report
  • Lifestyle/Travel → Recommended: Natural Lifestyle, Fashion Luxury
  • Opinion/Commentary → Recommended: Bold Editorial, Creative Art
  • Academic/Research → Recommended: Academic Journal

Users can also:

  • Mix multiple style elements
  • Customize colors and fonts
  • Adjust page size and spacing

Step 3: Generate HTML

From references/styles.md read the template of the selected style and generate complete HTML.

Generation rules:

  1. Strictly use the template structure of the selected style
  2. Preserve all content of the user's original text - Never delete or summarize
  3. Apply appropriate typography components:
    • Use drop-cap drop cap for the first paragraph
    • Use blockquote quote style for important statements
    • Use style-specific dividers between sections
    • Correct heading hierarchy (h1 > h2 > h3)
  4. Must include smart pagination CSS(see explanation below)
  5. Content must fit the page size
  6. Include all CSS (inline or via CDN with Tailwind, Google Fonts)
  7. Output a complete, self-contained HTML file

Core typography components:

<!-- 首字下沉段落 -->
<p class="drop-cap">首段文字内容...</p>

<!-- 引言/引用块 -->
<blockquote>
  <p>"重要引言内容"</p>
  <cite>— 来源</cite>
</blockquote>

<!-- 章节分隔线 -->
<div class="elegant-divider"><span>※</span></div>

<!-- 标题区域 -->
<header>
  <h1>主标题</h1>
  <p class="subtitle">副标题或导语</p>
</header>

Smart pagination CSS (must include):

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

/* 打印/PDF模式 */
@media print {
  /* 标题后禁止分页 */
  h1, h2, h3, .chapter-number, .chapter-title {
    page-break-after: avoid; break-after: avoid;
  }
  /* 块级元素内部禁止分页 */
  blockquote, .highlight-box, .stage-item, .question-item,
  .code-block, .terminal, figure, img, table {
    page-break-inside: avoid; break-inside: avoid;
  }
  /* 列表保持完整 */
  ul, ol, .numbered-list, .stage-list {
    page-break-inside: avoid; break-inside: avoid;
  }
  /* 分隔线后禁止分页 */
  .elegant-divider, .divider, hr {
    page-break-after: avoid; break-after: avoid;
  }
  /* 段落孤行寡行控制 */
  p { orphans: 3; widows: 3; }
}
/* 非打印时也应用，确保PDF渲染一致 */
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 the page Paragraphs
widows: 3 Keep at least 3 lines at the top of the page Paragraphs

Step 4: PDF Export (Optional)

Use scripts/html_to_pdf.py script:

# 检查可用引擎
python scripts/html_to_pdf.py --check

# 转换（自动检测最佳引擎）
python scripts/html_to_pdf.py magazine.html

# 指定输出文件名
python scripts/html_to_pdf.py magazine.html output.pdf

# 使用特定引擎
python scripts/html_to_pdf.py magazine.html --engine playwright

Engine installation method:

  • Playwright (Recommended): pip install playwright && playwright install chromium
  • WeasyPrint: pip install weasyprint
  • wkhtmltopdf: brew install wkhtmltopdf (macOS)

Long document pagination handling

Smart 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 blockquotes, highlight boxes, and lists
  • Between dividers and the content below

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

  1. Break pages at natural breakpoints (about 800-1000 characters per page)
  2. Generate independent HTML files:文章_第1页.html、文章_第2页.html
  3. Each page is a complete self-contained HTML (including complete CSS and pagination control)

Output format

## 您的杂志页面

将以下代码保存为 `文章.html`：

\`\`\`html
<!DOCTYPE html>
...完整HTML代码...
\`\`\`

**查看方式：** 用浏览器打开 `文章.html`
**导出PDF：** `python scripts/html_to_pdf.py 文章.html`

Style customization

Users may request modifications:

  • 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 the modifications while maintaining overall stylistic consistency.

Resource Files

scripts/

  • html_to_pdf.py - HTML to PDF script, supporting multiple rendering engines (Playwright/WeasyPrint/wkhtmltopdf)

references/

  • styles.md - Complete templates for all 12 styles, including color schemes, font settings, smart pagination CSS, and HTML template code