PDF设计系统：专业报告与资金提案制作工具，支持实时预览与交互编辑

pdf-design by jamditis/claude-skills-journalism

167 周安装量

101 GitHub Stars

GitHub

安装命令

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

内容创作文档生成设计

🇨🇳中文介绍

PDF 设计系统

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

交互式编辑模式

在设计会话期间，使用以下命令：

命令	操作
`preview`	截图当前状态
`preview page N`	截图指定页面
`show cover`	预览封面页
`show budget`	预览预算部分
`regenerate`	创建新的 PDF

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

相关 Skills

Vercel Web界面规范检查工具 - 自动检测代码是否符合Web设计指南

228,700 周安装

头脑风暴技能：AI协作设计流程，将创意转化为完整规范与实施计划

89,200 周安装

shadcn/ui 框架：React 组件库与 UI 设计系统，Tailwind CSS 最佳实践

65,300 周安装

PPTX技能指南：使用Python和pptxgenjs创建、编辑、分析PPTX文件

57,900 周安装

# 复制模板以开始新报告
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"

<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>

内容页必须在 .page 上使用 display: grid; grid-template-rows: auto 1fr auto
内容页必须恰好有 3 个直接子元素：页眉、内容包装器 (.page-body)、页脚
内容包装器必须具有 overflow: hidden 以防止文本溢出
切勿对页脚使用 position: absolute — 将其作为第三个网格行保持在正常的文档流中
使用 .page-footer:empty { display: none; }，以便没有页脚内容的页面不会渲染空白边框
如果内容过长，请减少内容而不是缩小页脚间隙

# 必须使用 ~/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 ./

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"Uploaded: {file.get('webViewLink')}")
PYEOF

🇺🇸English

PDF Design System

Create and edit professional PDF reports and funding proposals with live preview and iterative design.

Interactive editing mode

During a design session, use these commands:

Command	Action
`preview`	Screenshot current state
`preview page N`	Screenshot specific page
`show cover`	Preview cover page
`show budget`	Preview budget section
`regenerate`	Create new PDF
`upload`	Upload to Google Drive
`done`	Finish session

Workflow:

You say "preview" → I show current state
You describe changes → I implement them
Repeat until done → Generate final PDF

Quick start

# Copy template to start new report
cp ~/.claude/plugins/pdf-design/templates/democracy-day-proposal.html ./new-report.html

# Generate PDF (must use snap-accessible path)
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"

Document types

Funding proposals — Grant requests with budgets
Program reports — Initiative updates
Impact reports — Metrics and outcomes
Budget summaries — Financial breakdowns

Key principles

Sentence case — Never Title Case
Left-aligned — Never justified text
Print-ready — 8.5" × 11" letter size
Brand consistent — CCM red or program palettes

Brand guidelines

CCM standard colors

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

Program-specific (Democracy Day)

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

Typography

<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 structure

Page setup

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

.page {
    width: 8.5in;
    height: 11in;
    display: grid;
    grid-template-rows: auto 1fr auto;
    overflow: hidden;
    page-break-after: always;
}

Cover page

<div class="page cover">
    <div class="cover-header">
        <div class="cover-org">Center for Cooperative Media</div>
        <h1 class="cover-title">Report title</h1>
        <p class="cover-intro">Brief description.</p>
    </div>
    <div class="cover-footer">
        <div class="cover-stats"><!-- Stats --></div>
        <div class="cover-footer-right">
            <div class="cover-date">February 2026</div>
            <div class="cover-logo"><img src="..." alt="Logo"></div>
        </div>
    </div>
</div>

Content page

<div class="page content-page">
    <div class="page-header">
        <div class="page-header-title">Document title</div>
        <div class="page-number">2</div>
    </div>
    <div class="page-body">
        <!-- Content goes here -->
    </div>
    <footer class="page-footer">
        <!-- Footer -->
    </footer>
</div>

Budget table

<table class="budget-table">
    <thead>
        <tr><th>Expense</th><th>Per year</th><th>Total</th></tr>
    </thead>
    <tbody>
        <tr>
            <td>Item<span class="item-desc">Details</span></td>
            <td>$10,000</td>
            <td>$20,000</td>
        </tr>
    </tbody>
    <tfoot>
        <tr><td>Total</td><td>$50,000</td><td>$100,000</td></tr>
    </tfoot>
</table>

Page footer

.page-body {
    padding: 0.2in 0.65in 0.3in;
    overflow: hidden;
}

.page-footer {
    padding: 0 0.65in 0.5in;
    border-top: 1px solid #e2e8f0;
    font-size: 0.8rem;
}

Footer clearance

Content must not touch or overlap the page footer. These rules apply to content pages — cover pages and special layouts may use different structures.

Content pages must use display: grid; grid-template-rows: auto 1fr auto on .page
Content pages must have exactly 3 direct children: header, content wrapper (.page-body), footer
The content wrapper must have overflow: hidden to prevent text bleeding
Never use position: absolute for footers — keep them in normal document flow as the third grid row
Use .page-footer:empty { display: none; } so pages without footer content don't render a blank border
If content is too long, reduce content rather than shrinking the footer gap

PDF generation

Chromium (snap-confined)

# Must use ~/snap/chromium/common/ path
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 ./

Preview pages

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

# Page count
pdfinfo output.pdf | grep Pages

Legion browser preview

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

Google Drive upload

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)

# Upload new file
file_metadata = {
    'name': 'Report.pdf',
    'parents': ['1lKTdwq4_5uErj-tBN112WCdJGD2YtetO']  # Shared with 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"Uploaded: {file.get('webViewLink')}")
PYEOF

Drive folders

Shared with Joe: 1lKTdwq4_5uErj-tBN112WCdJGD2YtetO
Claude Workspace: 1e5dtKOiuvk0PPrFq3UyNI2UAa6RFiom3

Known issues

Base64 images — Don't read HTML with large base64 using Read tool (API error). Use sed/grep/Python.
Snap confinement — Chromium can only write to ~/snap/chromium/common/
Fonts — Google Fonts via CDN; for offline, embed as base64

Logo locations

CCM logo: ~/.claude/plugins/pdf-design/templates/ (embedded in template)
Brand assets: /home/jamditis/projects/cjs2026/public/internal/brand_web_assets/

Template

Reference: ~/.claude/plugins/pdf-design/templates/democracy-day-proposal.html

Weekly Installs

121

Repository

jamditis/claude…urnalism

GitHub Stars

First Seen

Feb 6, 2026

Security Audits

Gen Agent Trust HubFail SocketWarn SnykPass

Installed on

cursor118

gemini-cli117

opencode117

codex116

github-copilot114

kimi-cli113

PDF设计系统：专业报告与资金提案制作工具，支持实时预览与交互编辑

🇨🇳中文介绍

PDF 设计系统

交互式编辑模式

相关 Skills

快速开始

文档类型

核心原则

品牌指南

CCM 标准颜色

项目特定颜色 (Democracy Day)

字体排版

HTML 结构

页面设置

封面页

内容页

预算表格

页脚

页脚间距

PDF 生成

Chromium (snap 沙盒环境)

预览页面

Legion 浏览器预览

Google Drive 上传

Drive 文件夹

已知问题

Logo 位置

模板