magazine-layout

Name: magazine-layout
Author: isjiamu

75installs18forks

How to install magazine-layout?

isjiamu/jiamu-skills/magazine-layout

$npx -y skills add isjiamu/jiamu-skills --skill magazine-layout

Installs into the current project.

Summary

将文本内容转换为精美的杂志风格HTML页面，支持专业排版和多种视觉风格。触发场景：(1) 用户想将文本/文章转换为杂志风格HTML，(2) 用户提到"杂志排版"、"杂志设计"、"文章排版"、"专业排版"、"文本美化"、"magazine layout"，(3) 用户需要优雅排版的HTML页面，(4) 用户需要将设计内容导出为PDF。支持12种独特视觉风格，使用Tailwind CSS。

Files · 1

View on GitHub

SKILL.md

1	# 杂志排版设计师
2
3	将纯文本转换为专业设计的杂志风格HTML页面，使用Tailwind CSS实现精美排版。
4
5	## 快速开始
6
7	1. 用户提供文本内容
8	2. 与用户讨论并选择合适的风格
9	3. 根据选定风格生成完整HTML
10	4. 可选：导出为PDF
11
12	## 工作流程
13
14	### 第一步：分析内容结构
15
16	识别文本的结构元素：
17	- 标题和副标题
18	- 章节和小标题
19	- 重要引言或金句
20	- 列表和数据要点
21	- 作者/日期信息
22
23	### 第二步：风格选择（与用户协商）
24
25	重要：必须向用户展示风格选项，与用户讨论后再确定。使用 AskUserQuestion 工具让用户选择。
26
27	阅读 [references/styles.md](references/styles.md) 获取完整模板。
28
29	可选风格一览：
30
31	\| 编号 \| 风格名称 \| 适用场景 \| 视觉特点 \|
32	\|-----\|---------\|---------\|---------\|
33	\| 1 \| 经典优雅 (Classic Elegance) \| 文学、散文、回忆录 \| 衬线字体、暖色调、首字下沉、装饰性分隔线 \|
34	\| 2 \| 现代极简 (Modern Minimalist) \| 科技博客、现代文章 \| 无衬线字体、大量留白、简洁线条 \|
35	\| 3 \| 科技杂志 (Tech Magazine) \| 编程、技术内容 \| 渐变色彩、代码块样式、未来感设计 \|
36	\| 4 \| 自然生活 (Nature & Lifestyle) \| 生活方式、旅行、美食 \| 自然绿色调、有机造型、手写风格点缀 \|
37	\| 5 \| 大胆社论 (Bold Editorial) \| 观点、评论文章 \| 超大标题、高对比黑白、红色强调 \|
38	\| 6 \| 复古怀旧 (Vintage Retro) \| 历史、怀旧内容 \| 复古边框、打字机字体、羊皮纸质感 \|
39	\| 7 \| 商务专业 (Corporate Professional) \| 商业报告、企业文档 \| 海军蓝配色、清晰层级、专业严谨 \|
40	\| 8 \| 创意艺术 (Creative Art) \| 设计、艺术创作 \| 不对称布局、色块装饰、手绘风格 \|
41	\| 9 \| 学术期刊 (Academic Journal) \| 学术论文、研究报告 \| 双栏布局、摘要样式、引用格式 \|
42	\| 10 \| 时尚奢华 (Fashion Luxe) \| 时尚、奢侈品内容 \| 金色点缀、优雅衬线、精致留白 \|
43	\| 11 \| 新闻报道 (News & Report) \| 新闻、新闻报道 \| 报纸风格、多级标题、突发标签 \|
44	\| 12 \| 暗黑科技 (Dark Mode Tech) \| 开发者内容 \| 深色背景、荧光配色、终端风格 \|
45
46	风格推荐逻辑：
47	- 文学/散文类 → 推荐：经典优雅、复古怀旧
48	- 技术/编程类 → 推荐：科技杂志、暗黑科技、现代极简
49	- 商业/报告类 → 推荐：商务专业、新闻报道
50	- 生活/旅行类 → 推荐：自然生活、时尚奢华
51	- 观点/评论类 → 推荐：大胆社论、创意艺术
52	- 学术/研究类 → 推荐：学术期刊
53
54	用户也可以：
55	- 混合多种风格元素
56	- 自定义颜色、字体
57	- 调整页面尺寸和间距
58
59	### 第三步：生成HTML
60
61	从 [references/styles.md](references/styles.md) 读取选定风格的模板，生成完整HTML。
62
63	生成规则：
64	1. 严格使用选定风格的模板结构
65	2. 保留用户原文的全部内容 - 绝不删减或总结
66	3. 应用合适的排版组件：
67	- 首段使用 `drop-cap` 首字下沉
68	- 重要语句使用 `blockquote` 引言样式
69	- 章节间使用风格专属的分隔线
70	- 正确的标题层级 (h1 > h2 > h3)
71	4. 必须包含智能分页CSS（见下方说明）
72	5. 内容必须适应页面尺寸
73	6. 包含所有CSS（内联或通过CDN引入Tailwind、Google Fonts）
74	7. 输出完整、自包含的HTML文件
75
76	核心排版组件：
77
78	```html
79	<!-- 首字下沉段落 -->
80	<p class="drop-cap">首段文字内容...</p>
81
82	<!-- 引言/引用块 -->
83	<blockquote>
84	<p>"重要引言内容"</p>
85	<cite>— 来源</cite>
86	</blockquote>
87
88	<!-- 章节分隔线 -->
89	<div class="elegant-divider"><span>※</span></div>
90
91	<!-- 标题区域 -->
92	<header>
93	<h1>主标题</h1>
94	<p class="subtitle">副标题或导语</p>
95	</header>
96	```
97
98	智能分页CSS（必须包含）：
99
100	确保PDF导出时内容不会在元素中间被切断。每个模板已内置此CSS，生成HTML时必须保留：
101
102	```css
103	/* 打印/PDF模式 */
104	@media print {
105	/* 标题后禁止分页 */
106	h1, h2, h3, .chapter-number, .chapter-title {
107	page-break-after: avoid; break-after: avoid;
108	}
109	/* 块级元素内部禁止分页 */
110	blockquote, .highlight-box, .stage-item, .question-item,
111	.code-block, .terminal, figure, img, table {
112	page-break-inside: avoid; break-inside: avoid;
113	}
114	/* 列表保持完整 */
115	ul, ol, .numbered-list, .stage-list {
116	page-break-inside: avoid; break-inside: avoid;
117	}
118	/* 分隔线后禁止分页 */
119	.elegant-divider, .divider, hr {
120	page-break-after: avoid; break-after: avoid;
121	}
122	/* 段落孤行寡行控制 */
123	p { orphans: 3; widows: 3; }
124	}
125	/* 非打印时也应用，确保PDF渲染一致 */
126	blockquote, .highlight-box, .code-block, .terminal, figure, img, table {
127	page-break-inside: avoid; break-inside: avoid;
128	}
129	```
130
131	\| CSS属性 \| 效果 \| 适用元素 \|
132	\|--------\|------\|---------\|
133	\| `page-break-inside: avoid` \| 元素内部禁止分页 \| 引言、卡片、列表 \|
134	\| `page-break-after: avoid` \| 元素后禁止分页 \| 标题、分隔线 \|
135	\| `orphans: 3` \| 页底至少保留3行 \| 段落 \|
136	\| `widows: 3` \| 页顶至少保留3行 \| 段落 \|
137
138	### 第四步：PDF导出（可选）
139
140	使用 `scripts/html_to_pdf.py` 脚本：
141
142	```bash
143	# 检查可用引擎
144	python scripts/html_to_pdf.py --check
145
146	# 转换（自动检测最佳引擎）
147	python scripts/html_to_pdf.py magazine.html
148
149	# 指定输出文件名
150	python scripts/html_to_pdf.py magazine.html output.pdf
151
152	# 使用特定引擎
153	python scripts/html_to_pdf.py magazine.html --engine playwright
154	```
155
156	引擎安装方法：
157	- Playwright（推荐）: `pip install playwright && playwright install chromium`
158	- WeasyPrint: `pip install weasyprint`
159	- wkhtmltopdf: `brew install wkhtmltopdf` (macOS)
160
161	## 长文分页处理
162
163	智能分页：所有模板已内置分页控制CSS，PDF导出时自动避免在以下位置分页：
164	- 标题与正文之间
165	- 引用块、高亮框、列表内部
166	- 分隔线与下方内容之间
167
168	对于超长内容（需手动分割时）：
169	1. 在自然断点处分页（每页约800-1000字）
170	2. 生成独立HTML文件：`文章_第1页.html`、`文章_第2页.html`
171	3. 每页都是完整自包含的HTML（含完整CSS和分页控制）
172
173	## 输出格式
174
175	```markdown
176	## 您的杂志页面
177
178	将以下代码保存为 `文章.html`：
179
180	\`\`\`html
181	<!DOCTYPE html>
182	...完整HTML代码...
183	\`\`\`
184
185	查看方式：用浏览器打开 `文章.html`
186	导出PDF： `python scripts/html_to_pdf.py 文章.html`
187	```
188
189	## 风格定制
190
191	用户可能要求修改：
192	- 颜色：修改CSS变量或Tailwind类
193	- 字体：更新Google Fonts导入
194	- 间距：调整padding、margin、line-height
195	- 布局：修改页面宽高尺寸
196
197	在保持整体风格协调的前提下应用修改。
198
199	## 资源文件
200
201	### scripts/
202	- `html_to_pdf.py` - HTML转PDF脚本，支持多种渲染引擎（Playwright/WeasyPrint/wkhtmltopdf）
203
204	### references/
205	- `styles.md` - 全部12种风格的完整模板，包含配色方案、字体设置、智能分页CSS和HTML模板代码

People who liked this also viewed

6 picks

Type

magazine-layout

75installs18forks

View on GitHub

How to install magazine-layout?

isjiamu/jiamu-skills/magazine-layout

$npx -y skills add isjiamu/jiamu-skills --skill magazine-layout

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# 杂志排版设计师
2
3	将纯文本转换为专业设计的杂志风格HTML页面，使用Tailwind CSS实现精美排版。
4
5	## 快速开始
6
7	1. 用户提供文本内容
8	2. 与用户讨论并选择合适的风格
9	3. 根据选定风格生成完整HTML
10	4. 可选：导出为PDF
11
12	## 工作流程
13
14	### 第一步：分析内容结构
15
16	识别文本的结构元素：
17	- 标题和副标题
18	- 章节和小标题
19	- 重要引言或金句
20	- 列表和数据要点
21	- 作者/日期信息
22
23	### 第二步：风格选择（与用户协商）
24
25	重要：必须向用户展示风格选项，与用户讨论后再确定。使用 AskUserQuestion 工具让用户选择。
26
27	阅读 [references/styles.md](references/styles.md) 获取完整模板。
28
29	可选风格一览：
30
31	\| 编号 \| 风格名称 \| 适用场景 \| 视觉特点 \|
32	\|-----\|---------\|---------\|---------\|
33	\| 1 \| 经典优雅 (Classic Elegance) \| 文学、散文、回忆录 \| 衬线字体、暖色调、首字下沉、装饰性分隔线 \|
34	\| 2 \| 现代极简 (Modern Minimalist) \| 科技博客、现代文章 \| 无衬线字体、大量留白、简洁线条 \|
35	\| 3 \| 科技杂志 (Tech Magazine) \| 编程、技术内容 \| 渐变色彩、代码块样式、未来感设计 \|
36	\| 4 \| 自然生活 (Nature & Lifestyle) \| 生活方式、旅行、美食 \| 自然绿色调、有机造型、手写风格点缀 \|
37	\| 5 \| 大胆社论 (Bold Editorial) \| 观点、评论文章 \| 超大标题、高对比黑白、红色强调 \|
38	\| 6 \| 复古怀旧 (Vintage Retro) \| 历史、怀旧内容 \| 复古边框、打字机字体、羊皮纸质感 \|
39	\| 7 \| 商务专业 (Corporate Professional) \| 商业报告、企业文档 \| 海军蓝配色、清晰层级、专业严谨 \|
40	\| 8 \| 创意艺术 (Creative Art) \| 设计、艺术创作 \| 不对称布局、色块装饰、手绘风格 \|
41	\| 9 \| 学术期刊 (Academic Journal) \| 学术论文、研究报告 \| 双栏布局、摘要样式、引用格式 \|
42	\| 10 \| 时尚奢华 (Fashion Luxe) \| 时尚、奢侈品内容 \| 金色点缀、优雅衬线、精致留白 \|
43	\| 11 \| 新闻报道 (News & Report) \| 新闻、新闻报道 \| 报纸风格、多级标题、突发标签 \|
44	\| 12 \| 暗黑科技 (Dark Mode Tech) \| 开发者内容 \| 深色背景、荧光配色、终端风格 \|
45
46	风格推荐逻辑：
47	- 文学/散文类 → 推荐：经典优雅、复古怀旧
48	- 技术/编程类 → 推荐：科技杂志、暗黑科技、现代极简
49	- 商业/报告类 → 推荐：商务专业、新闻报道
50	- 生活/旅行类 → 推荐：自然生活、时尚奢华
51	- 观点/评论类 → 推荐：大胆社论、创意艺术
52	- 学术/研究类 → 推荐：学术期刊
53
54	用户也可以：
55	- 混合多种风格元素
56	- 自定义颜色、字体
57	- 调整页面尺寸和间距
58
59	### 第三步：生成HTML
60
61	从 [references/styles.md](references/styles.md) 读取选定风格的模板，生成完整HTML。
62
63	生成规则：
64	1. 严格使用选定风格的模板结构
65	2. 保留用户原文的全部内容 - 绝不删减或总结
66	3. 应用合适的排版组件：
67	- 首段使用 `drop-cap` 首字下沉
68	- 重要语句使用 `blockquote` 引言样式
69	- 章节间使用风格专属的分隔线
70	- 正确的标题层级 (h1 > h2 > h3)
71	4. 必须包含智能分页CSS（见下方说明）
72	5. 内容必须适应页面尺寸
73	6. 包含所有CSS（内联或通过CDN引入Tailwind、Google Fonts）
74	7. 输出完整、自包含的HTML文件
75
76	核心排版组件：
77
78	```html
79	<!-- 首字下沉段落 -->
80	<p class="drop-cap">首段文字内容...</p>
81
82	<!-- 引言/引用块 -->
83	<blockquote>
84	<p>"重要引言内容"</p>
85	<cite>— 来源</cite>
86	</blockquote>
87
88	<!-- 章节分隔线 -->
89	<div class="elegant-divider"><span>※</span></div>
90
91	<!-- 标题区域 -->
92	<header>
93	<h1>主标题</h1>
94	<p class="subtitle">副标题或导语</p>
95	</header>
96	```
97
98	智能分页CSS（必须包含）：
99
100	确保PDF导出时内容不会在元素中间被切断。每个模板已内置此CSS，生成HTML时必须保留：
101
102	```css
103	/* 打印/PDF模式 */
104	@media print {
105	/* 标题后禁止分页 */
106	h1, h2, h3, .chapter-number, .chapter-title {
107	page-break-after: avoid; break-after: avoid;
108	}
109	/* 块级元素内部禁止分页 */
110	blockquote, .highlight-box, .stage-item, .question-item,
111	.code-block, .terminal, figure, img, table {
112	page-break-inside: avoid; break-inside: avoid;
113	}
114	/* 列表保持完整 */
115	ul, ol, .numbered-list, .stage-list {
116	page-break-inside: avoid; break-inside: avoid;
117	}
118	/* 分隔线后禁止分页 */
119	.elegant-divider, .divider, hr {
120	page-break-after: avoid; break-after: avoid;
121	}
122	/* 段落孤行寡行控制 */
123	p { orphans: 3; widows: 3; }
124	}
125	/* 非打印时也应用，确保PDF渲染一致 */
126	blockquote, .highlight-box, .code-block, .terminal, figure, img, table {
127	page-break-inside: avoid; break-inside: avoid;
128	}
129	```
130
131	\| CSS属性 \| 效果 \| 适用元素 \|
132	\|--------\|------\|---------\|
133	\| `page-break-inside: avoid` \| 元素内部禁止分页 \| 引言、卡片、列表 \|
134	\| `page-break-after: avoid` \| 元素后禁止分页 \| 标题、分隔线 \|
135	\| `orphans: 3` \| 页底至少保留3行 \| 段落 \|
136	\| `widows: 3` \| 页顶至少保留3行 \| 段落 \|
137
138	### 第四步：PDF导出（可选）
139
140	使用 `scripts/html_to_pdf.py` 脚本：
141
142	```bash
143	# 检查可用引擎
144	python scripts/html_to_pdf.py --check
145
146	# 转换（自动检测最佳引擎）
147	python scripts/html_to_pdf.py magazine.html
148
149	# 指定输出文件名
150	python scripts/html_to_pdf.py magazine.html output.pdf
151
152	# 使用特定引擎
153	python scripts/html_to_pdf.py magazine.html --engine playwright
154	```
155
156	引擎安装方法：
157	- Playwright（推荐）: `pip install playwright && playwright install chromium`
158	- WeasyPrint: `pip install weasyprint`
159	- wkhtmltopdf: `brew install wkhtmltopdf` (macOS)
160
161	## 长文分页处理
162
163	智能分页：所有模板已内置分页控制CSS，PDF导出时自动避免在以下位置分页：
164	- 标题与正文之间
165	- 引用块、高亮框、列表内部
166	- 分隔线与下方内容之间
167
168	对于超长内容（需手动分割时）：
169	1. 在自然断点处分页（每页约800-1000字）
170	2. 生成独立HTML文件：`文章_第1页.html`、`文章_第2页.html`
171	3. 每页都是完整自包含的HTML（含完整CSS和分页控制）
172
173	## 输出格式
174
175	```markdown
176	## 您的杂志页面
177
178	将以下代码保存为 `文章.html`：
179
180	\`\`\`html
181	<!DOCTYPE html>
182	...完整HTML代码...
183	\`\`\`
184
185	查看方式：用浏览器打开 `文章.html`
186	导出PDF： `python scripts/html_to_pdf.py 文章.html`
187	```
188
189	## 风格定制
190
191	用户可能要求修改：
192	- 颜色：修改CSS变量或Tailwind类
193	- 字体：更新Google Fonts导入
194	- 间距：调整padding、margin、line-height
195	- 布局：修改页面宽高尺寸
196
197	在保持整体风格协调的前提下应用修改。
198
199	## 资源文件
200
201	### scripts/
202	- `html_to_pdf.py` - HTML转PDF脚本，支持多种渲染引擎（Playwright/WeasyPrint/wkhtmltopdf）
203
204	### references/
205	- `styles.md` - 全部12种风格的完整模板，包含配色方案、字体设置、智能分页CSS和HTML模板代码

People who liked this also viewed

6 picks

Type