PDF设计系统

创建和编辑专业的PDF报告和资金提案，提供实时预览和迭代设计。

交互式编辑模式

在设计会话期间，使用这些命令：

命令	动作
`preview`	截图当前状态
`preview page N`	截图特定页面
`show cover`	预览封面页
`show budget`	预览预算部分
`regenerate`	创建新的PDF
`upload`	上传到Google Drive
`done`	结束会话

工作流程：

你说“preview” → 我显示当前状态
你描述更改 → 我实施它们
重复直到完成 → 生成最终PDF

快速开始

# 复制模板以开始新报告
cp ~/.claude/plugins/pdf-design/templates/democracy-day-proposal.html ./new-report.html

# 生成PDF（必须使用snap可访问路径）
mkdir -p ~/snap/chromium/common/pdf-work
cp new-report.html ~/snap/chromium/common/pdf-work/
chromium-browser --headless --disable-gpu \
  --print-to-pdf="$HOME/snap/chromium/common/pdf-work/output.pdf" \
  --no-pdf-header-footer \
  "file://$HOME/snap/chromium/common/pdf-work/new-report.html"

文档类型

资金提案 — 带预算的资助请求
项目报告 — 倡议更新
影响报告 — 指标和结果
预算摘要 — 财务分解

关键原则

句子大小写 — 永不使用标题大小写
左对齐 — 永不使用两端对齐文本
打印就绪 — 8.5" × 11" 信纸大小
品牌一致 — CCM红色或程序调色板

品牌指南

CCM标准颜色

:root {
    --ccm-red: #CA3553;
    --ccm-black: #000000;
    --ccm-gray: #666666;
    --ccm-light: #e2e8f0;
}

程序特定（民主日）

:root {
    --civic-navy: #1a2b4a;
    --civic-blue: #2d4a7c;
    --civic-gold: #c9a227;
    --civic-red: #b31942;
}

排版

<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&family=Source+Sans+Pro:wght@300;400;600&display=swap" rel="stylesheet">

body {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 0.875rem;
    line-height: 1.6;
}

h1, h2, h3 {
    font-family: 'Montserrat', sans-serif;
}

HTML结构

页面设置

@page { size: letter; margin: 0; }

.page {
    width: 8.5in;
    height: 11in;
    padding: 0.5in 0.65in;
    position: relative;
    page-break-after: always;
}

封面页

<div class="page cover">
    <div class="cover-header">
        <div class="cover-org">Center for Cooperative Media</div>
        <h1 class="cover-title">报告标题</h1>
        <p class="cover-intro">简要描述。</p>
    </div>
    <div class="cover-footer">
        <div class="cover-stats"><!-- 统计 --></div>
        <div class="cover-footer-right">
            <div class="cover-date">2026年2月</div>
            <div class="cover-logo"><img src="..." alt="Logo"></div>
        </div>
    </div>
</div>

内容页

<div class="page content-page">
    <div class="page-header">
        <div class="page-header-title">文档标题</div>
        <div class="page-number">2</div>
    </div>
    <!-- 内容 -->
</div>

预算表

<table class="budget-table">
    <thead>
        <tr><th>支出</th><th>每年</th><th>总计</th></tr>
    </thead>
    <tbody>
        <tr>
            <td>项目<span class="item-desc">详情</span></td>
            <td>$10,000</td>
            <td>$20,000</td>
        </tr>
    </tbody>
    <tfoot>
        <tr><td>总计</td><td>$50,000</td><td>$100,000</td></tr>
    </tfoot>
</table>

页脚（机构备注）

.institution-note {
    position: absolute;
    bottom: 0.5in;
    left: 0.65in;
    right: 0.65in;
    border-top: 1px solid #e2e8f0;
    font-size: 0.8rem;
}

PDF生成

Chromium（snap受限）

# 必须使用 ~/snap/chromium/common/ 路径
mkdir -p ~/snap/chromium/common/pdf-work
cp template.html ~/snap/chromium/common/pdf-work/
chromium-browser --headless --disable-gpu \
  --print-to-pdf="$HOME/snap/chromium/common/pdf-work/output.pdf" \
  --no-pdf-header-footer \
  "file://$HOME/snap/chromium/common/pdf-work/template.html"
cp ~/snap/chromium/common/pdf-work/output.pdf ./

预览页面

# PDF转PNG
pdftoppm -png -f 1 -l 1 output.pdf preview

# 页面计数
pdfinfo output.pdf | grep Pages

Legion浏览器预览

~/.claude/scripts/legion-browser.py screenshot "file:///path/to/template.html" -o preview.png

Google Drive上传

cd ~/.claude/workstation/mcp-servers/gmail && source .venv/bin/activate
python3 << 'PYEOF'
from googleapiclient.discovery import build
from googleapiclient.http import MediaFileUpload
from google.oauth2.credentials import Credentials
import json

with open('/home/jamditis/.claude/google/drive-token.json') as f:
    token_data = json.load(f)

creds = Credentials(
    token=token_data['access_token'],
    refresh_token=token_data.get('refresh_token'),
    token_uri='https://oauth2.googleapis.com/token',
    client_id=token_data.get('client_id'),
    client_secret=token_data.get('client_secret')
)

service = build('drive', 'v3', credentials=creds)

# 上传新文件
file_metadata = {
    'name': 'Report.pdf',
    'parents': ['1lKTdwq4_5uErj-tBN112WCdJGD2YtetO']  # 与Joe共享
}
media = MediaFileUpload('/path/to/output.pdf', mimetype='application/pdf')
file = service.files().create(body=file_metadata, media_body=media, fields='id,webViewLink').execute()
print(f"上传完成: {file.get('webViewLink')}")
PYEOF

Drive文件夹

与Joe共享： 1lKTdwq4_5uErj-tBN112WCdJGD2YtetO
Claude工作空间： 1e5dtKOiuvk0PPrFq3UyNI2UAa6RFiom3

已知问题

Base64图像 — 不要使用Read工具读取带有大型base64的HTML（API错误）。使用sed/grep/Python。
Snap限制 — Chromium只能写入 ~/snap/chromium/common/
字体 — 通过CDN使用Google字体；离线时，嵌入为base64

徽标位置

CCM徽标：~/.claude/plugins/pdf-design/templates/（嵌入在模板中）
品牌资产：/home/jamditis/projects/cjs2026/public/internal/brand_web_assets/

模板

参考：~/.claude/plugins/pdf-design/templates/democracy-day-proposal.html