mcpField
D
document-design

document-design

github.com/jamditis文档处理438221 次安装4 天前更新
代码仓库

关于 document-design

document-design 是用于制作带品牌样式、可打印 HTML 文档并导出为 PDF 的技能，涵盖品牌配置、模板、打印版式和预览检查，适用于报告、提案和简报等材料。

主要功能

  1. 01品牌配置与默认值
  2. 02可复用的 HTML 文档模板
  3. 03面向打印的页面与页脚布局
  4. 04字体排版与通用组件
  5. 05预览及 PDF 导出指导

适用场景

  1. 01制作品牌风格的可打印报告
  2. 02使用模板编写资助提案
  3. 03按组织风格制作简报
  4. 04导出 PDF 前检查页面布局

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/jamditis/claude-skills-journalism --skill document-design

安装后在 Claude Code 中输入/document-design确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

agents/
openai.yaml
brands/
ccm.yaml
default.yaml
example-newsroom.yaml
controls/
control-panel.css
control-panel.js
playground-wrapper.html
prompt-generator.js
controls/template-maps/
proposal.js
README.md
references/
css-patterns.md
templates/
event-template.html
newsletter-template.html
onepager-template.html
proposal-template.html
report-template.html
slides-template.html

详细介绍

文档设计

创建可导出为 PDF 的专业级、可直接打印的 HTML 文档，并支持自定义品牌。

品牌配置

创建文档前，检查项目根目录下是否存在 pdf-playground.local.md。如果不存在，再检查旧版 Claude Code 路径 .claude/pdf-playground.local.md。如果两者都存在，只使用项目根目录下的文件。如果两者都不存在，请使用合理的默认值，或询问用户的品牌颜色。

读取品牌配置

解析所选配置文件的 YAML frontmatter：

---
brand:
  name: "Organization Name"
  tagline: "Tagline"
  website: "https://example.com"
  email: "[email protected]"

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（黑色）
  • 标题字体：Playfair Display
  • 正文字体：Source Sans 3
  • 标题大小写：句首字母大写

核心原则

  1. 优先考虑打印：所有文档均采用 8.5" × 11" 信纸尺寸，并设置合适的页边距
  2. 遵循品牌规范：使用品牌配置中的颜色和字体
  3. 默认采用句首字母大写：除非品牌配置指定使用“标题式”大小写
  4. 确保导出效果整洁：文档打印为 PDF 时必须正确渲染

CSS 变量

根据品牌配置生成 CSS 变量：

: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;
}

打印 CSS 基础知识

页面设置
@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);
}
页脚留白（关键）

内容与页脚重叠或相接是一个反复出现的问题。

推荐布局，网格行 auto 1fr auto：

.page {
    display: grid;
    grid-template-rows: auto 1fr auto;
    overflow: hidden;
}

这样页眉和页脚会采用其自然高度，内容则填充剩余空间。无需使用带有神奇数字的 calc()，页脚留白由结构保证。

必须采取的防护措施：

  1. 在页面上使用 grid-template-rows: auto 1fr auto，使内容自动占据页眉和页脚之间的空间
  2. 在内容容器上设置 overflow: hidden，防止文字溢出边界
  3. 在内容区域内至少设置 padding-bottom: 0.3in 作为缓冲
  4. 切勿使用带有神奇数字的硬编码 height: calc(...) 来设定页眉/页脚高度；内边距或字号变化时，这些数值会失准
  5. 渲染后，交付前务必截取页面底部并进行目视检查
  6. 如果内容溢出，应减少内容，绝不要缩小页脚间距。若需腾出更多空间，请先收紧页眉。

排版样式

字体加载
@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;
}

文档创建工作流

  1. 检查品牌配置：先检查项目根目录下的 pdf-playground.local.md，再检查旧版路径 .claude/pdf-playground.local.md
  2. 定位此已安装的 SKILL.md，并从其所在目录解析捆绑资源。不要假设存在插件根目录环境变量。
  3. 从相对于技能目录的 templates/ 目录加载模板
  4. 将品牌设置应用于 CSS 变量和内容
  5. 根据用户需求自定义内容
  6. 将 HTML 文件保存在当前工作目录
  7. 使用 Playwright 浏览器工具提供预览

PDF 导出说明

  1. 在 Chrome 中打开 HTML 文件
  2. 按 Ctrl+P（Mac 上按 Cmd+P）
  3. 将“目标位置”设为“另存为 PDF”
  4. 将“边距”设为“无”
  5. 启用“背景图形”
  6. 保存文件

其他资源

模板

已安装技能的 templates/ 目录中包含预构建模板：

  • proposal-template.html
  • report-template.html
  • onepager-template.html
  • newsletter-template.html
  • slides-template.html
  • event-template.html

slides-template.html 中包含示例用的本地照片和字标路径，但不包含打包的图像素材。基于该模板交付演示文稿之前，请将每个 CSS url(...) 和 <img src> 引用替换为可用素材。如果用户没有合适的图像，请移除所有无法解析的引用，使用模板中的渐变或纯色幻灯片变体，并用文本替换缺失的字标图像。交付的演示文稿中绝不能包含无法解析的本地素材路径。

品牌示例

已安装技能的 brands/ 目录中包含品牌配置示例：

  • default.yaml - 默认品牌设置
  • ccm.yaml - Center for Cooperative Media
  • example-newsroom.yaml - 新闻编辑室配置示例
参考文件

如需了解详细的 CSS 模式，请使用已安装技能中的 references/css-patterns.md。

预览控件

可复用的预览素材位于已安装技能的 controls/ 目录中。 这些文件是用于生成文档的资源；它们不会将仅适用于 Claude 的预览命令或插件钩子变为 Codex 功能。

相关内容

使用 document-delivery 检查、分享、发送并验证最终 PDF 或可编辑文档。

评论

支持 Markdown