Document design by jamditis/claude-skills-journalism
npx skills add https://github.com/jamditis/claude-skills-journalism --skill 'Document design'创建专业的、可直接打印的 HTML 文档,可导出为 PDF 并支持自定义品牌样式。
在创建文档之前,请检查项目根目录下的 .claude/pdf-playground.local.md 文件中是否存在品牌配置。如果找到,则使用这些设置。如果未找到,则使用合理的默认值或向用户询问其品牌颜色。
在项目根目录中查找 .claude/pdf-playground.local.md。解析 YAML 前言:
---
brand:
name: "Organization Name"
tagline: "Tagline"
website: "https://example.com"
email: "contact@example.com"
colors:
primary: "#CA3553"
secondary: "#000000"
background: "#FFFFFF"
text: "#2d2a28"
muted: "#666666"
fonts:
heading: "Playfair Display"
body: "Source Sans 3"
style:
headingCase: "sentence"
useOxfordComma: true
---
如果不存在配置文件,则使用以下默认值:
#CA3553(红色)#000000(黑色)广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
根据品牌配置生成 CSS 变量:
:root {
--primary: [colors.primary];
--secondary: [colors.secondary];
--background: [colors.background];
--text: [colors.text];
--muted: [colors.muted];
/* 衍生颜色 */
--primary-dark: [darken primary by 15%];
--gray-100: #f5f4f2;
--gray-200: #e8e6e3;
}
@page {
size: 8.5in 11in;
margin: 0;
}
@media print {
body {
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
}
.page {
page-break-after: always;
page-break-inside: avoid;
}
}
.page {
width: 8.5in;
height: 11in;
padding: 0.5in 0.75in;
padding-bottom: 1in; /* 页脚空间 */
position: relative;
box-sizing: border-box;
overflow: hidden;
}
.page-footer {
position: absolute;
bottom: 0.4in;
left: 0.75in;
right: 0.75in;
font-size: 9pt;
border-top: 1px solid var(--gray-200);
padding-top: 0.1in;
background: var(--background);
}
内容与页脚重叠或接触是一个反复出现的问题。
首选布局 — 网格行 auto 1fr auto:
.page {
display: grid;
grid-template-rows: auto 1fr auto;
overflow: hidden;
}
这使得页眉和页脚采用其自然高度,而内容填充剩余空间。不需要使用魔法数字 calc() —— 页脚间距是结构性的。
必要的保障措施:
grid-template-rows: auto 1fr auto,以便内容自动获得页眉和页脚之间的空间。overflow: hidden,以防止文本超出其边界。padding-bottom: 0.3in(最小值)作为缓冲区。height: calc(...) 和魔法数字来设置页眉/页脚高度 —— 当内边距或字体大小改变时,它们会漂移。@import url('https://fonts.googleapis.com/css2?family=[heading-font]:wght@400;600;700&family=[body-font]:wght@400;500;600;700&display=swap');
body {
font-family: '[body-font]', Arial, sans-serif;
font-size: 11pt;
line-height: 1.6;
color: var(--text);
}
h1, h2, h3 {
font-family: '[heading-font]', Georgia, serif;
font-weight: 700;
}
.section-title {
font-size: 26pt;
color: var(--secondary);
margin-bottom: 0.25in;
}
.section-title::after {
content: '';
display: block;
width: 0.5in;
height: 3px;
background: var(--primary);
margin-top: 0.12in;
}
<header class="cover-header">
<div class="logo-bar">
<div class="logo-primary">[brand.name]</div>
</div>
<div class="cover-title-block">
<div class="cover-eyebrow">[Document type] • [Date]</div>
<h1 class="cover-title">[Title in configured case]</h1>
</div>
</header>
.budget-table thead {
background: var(--secondary);
color: white;
}
.budget-table tbody tr:last-child {
background: var(--primary);
color: white;
font-weight: 700;
}
.highlight-box {
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
color: white;
padding: 0.3in;
}
.claude/pdf-playground.local.md 中查找。${CLAUDE_PLUGIN_ROOT}/templates/ 加载。${CLAUDE_PLUGIN_ROOT}/templates/ 中的预构建模板:
proposal-template.htmlreport-template.htmlonepager-template.htmlnewsletter-template.htmlslides-template.htmlevent-template.html${CLAUDE_PLUGIN_ROOT}/brands/ 中的品牌配置示例:
default.yaml - 默认品牌设置ccm.yaml - 合作媒体中心example-newsroom.yaml - 示例新闻编辑室配置有关详细的 CSS 模式,请参阅:references/css-patterns.md
每周安装次数
–
代码仓库
GitHub 星标数
94
首次出现时间
–
安全审计
Create professional, print-ready HTML documents that export to PDF with customizable branding.
Before creating documents, check for brand configuration in .claude/pdf-playground.local.md. If found, use those settings. If not, use sensible defaults or ask the user for their brand colors.
Look for .claude/pdf-playground.local.md in the project root. Parse the YAML frontmatter:
---
brand:
name: "Organization Name"
tagline: "Tagline"
website: "https://example.com"
email: "contact@example.com"
colors:
primary: "#CA3553"
secondary: "#000000"
background: "#FFFFFF"
text: "#2d2a28"
muted: "#666666"
fonts:
heading: "Playfair Display"
body: "Source Sans 3"
style:
headingCase: "sentence"
useOxfordComma: true
---
If no config exists, use these defaults:
#CA3553 (red)#000000 (black)Generate CSS variables from brand config:
:root {
--primary: [colors.primary];
--secondary: [colors.secondary];
--background: [colors.background];
--text: [colors.text];
--muted: [colors.muted];
/* Derived colors */
--primary-dark: [darken primary by 15%];
--gray-100: #f5f4f2;
--gray-200: #e8e6e3;
}
@page {
size: 8.5in 11in;
margin: 0;
}
@media print {
body {
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
}
.page {
page-break-after: always;
page-break-inside: avoid;
}
}
.page {
width: 8.5in;
height: 11in;
padding: 0.5in 0.75in;
padding-bottom: 1in; /* Space for footer */
position: relative;
box-sizing: border-box;
overflow: hidden;
}
.page-footer {
position: absolute;
bottom: 0.4in;
left: 0.75in;
right: 0.75in;
font-size: 9pt;
border-top: 1px solid var(--gray-200);
padding-top: 0.1in;
background: var(--background);
}
Content overlapping or touching the footer is a recurring issue.
Preferred layout — grid rowsauto 1fr auto:
.page {
display: grid;
grid-template-rows: auto 1fr auto;
overflow: hidden;
}
This makes the header and footer take their natural height, and the content fills the remaining space. No magic-number calc() needed — the footer clearance is structural.
Required safeguards:
grid-template-rows: auto 1fr auto on the page so content automatically gets the space between header and footeroverflow: hidden on the content container to prevent text bleeding past its boundspadding-bottom: 0.3in (minimum) inside the content area as a bufferheight: calc(...) with magic numbers for header/footer heights — they drift when padding or font sizes change@import url('https://fonts.googleapis.com/css2?family=[heading-font]:wght@400;600;700&family=[body-font]:wght@400;500;600;700&display=swap');
body {
font-family: '[body-font]', Arial, sans-serif;
font-size: 11pt;
line-height: 1.6;
color: var(--text);
}
h1, h2, h3 {
font-family: '[heading-font]', Georgia, serif;
font-weight: 700;
}
.section-title {
font-size: 26pt;
color: var(--secondary);
margin-bottom: 0.25in;
}
.section-title::after {
content: '';
display: block;
width: 0.5in;
height: 3px;
background: var(--primary);
margin-top: 0.12in;
}
<header class="cover-header">
<div class="logo-bar">
<div class="logo-primary">[brand.name]</div>
</div>
<div class="cover-title-block">
<div class="cover-eyebrow">[Document type] • [Date]</div>
<h1 class="cover-title">[Title in configured case]</h1>
</div>
</header>
.budget-table thead {
background: var(--secondary);
color: white;
}
.budget-table tbody tr:last-child {
background: var(--primary);
color: white;
font-weight: 700;
}
.highlight-box {
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
color: white;
padding: 0.3in;
}
.claude/pdf-playground.local.md${CLAUDE_PLUGIN_ROOT}/templates/Pre-built templates in ${CLAUDE_PLUGIN_ROOT}/templates/:
proposal-template.htmlreport-template.htmlonepager-template.htmlnewsletter-template.htmlslides-template.htmlevent-template.htmlExample brand configurations in ${CLAUDE_PLUGIN_ROOT}/brands/:
default.yaml - Default brand settingsccm.yaml - Center for Cooperative Mediaexample-newsroom.yaml - Sample newsroom configFor detailed CSS patterns: references/css-patterns.md
Weekly Installs
–
Repository
GitHub Stars
94
First Seen
–
Security Audits
前端设计技能指南:避免AI垃圾美学,打造独特生产级界面
38,200 周安装