name: 文档设计 description: 此技能应用于用户要求“创建提案”、“设计报告”、“制作一页纸”、“构建PDF”、“创建新闻稿”、“设计幻灯片”、“制作活动材料”、“设计传单”，或需要帮助处理打印就绪HTML文档时。提供品牌配置、CSS打印布局模式和文档设计最佳实践。 version: 1.0.0

文档设计

创建专业的、打印就绪的HTML文档，支持自定义品牌配置并导出为PDF。

品牌配置

在创建文档前，检查.claude/pdf-playground.local.md中的品牌配置。如果找到，使用这些设置；否则，使用合理的默认值或向用户询问其品牌颜色。

读取品牌配置

在项目根目录中查找.claude/pdf-playground.local.md。解析YAML前端代码：

---
brand:
  name: "组织名称"
  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 (黑色)
标题字体: Playfair Display
正文字体: Source Sans 3
标题大小写: 句子大小写

核心原则

打印优先设计: 所有文档以8.5英寸×11英寸信纸尺寸为目标，具有适当边距
品牌合规性: 使用品牌配置中的颜色和字体
默认句子大小写: 除非品牌配置指定“标题”大小写
干净导出: 文档在打印为PDF时必须正确渲染

CSS变量

从品牌配置生成CSS变量：

:root {
    --primary: [colors.primary];
    --secondary: [colors.secondary];
    --background: [colors.background];
    --text: [colors.text];
    --muted: [colors.muted];

    /* 衍生颜色 */
    --primary-dark: [将主要颜色加深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; /* 页脚空间 */
    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);
}

排版模式

字体加载

@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">[文档类型] • [日期]</div>
        <h1 class="cover-title">[配置大小写下的标题]</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/
应用品牌设置 到CSS变量和内容
自定义内容 基于用户需求
保存HTML文件 在当前工作目录
提供预览 使用Playwright浏览器工具

PDF导出指令

在Chrome中打开HTML文件
按Ctrl+P（或在Mac上按Cmd+P）
设置“目的地”为“保存为PDF”
设置“边距”为“无”
启用“背景图形”
保存文件

附加资源

模板

预构建模板在${CLAUDE_PLUGIN_ROOT}/templates/中：

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

品牌示例

示例品牌配置在${CLAUDE_PLUGIN_ROOT}/brands/中：

default.yaml - 默认品牌设置
ccm.yaml - 合作媒体中心
example-newsroom.yaml - 示例新闻编辑室配置

参考文件

详细CSS模式：references/css-patterns.md