pdf-design by jamditis/claude-skills-journalism
npx skills add https://github.com/jamditis/claude-skills-journalism --skill pdf-design通过实时预览和迭代设计,创建并编辑专业的 PDF 报告和资金提案。
在设计会话期间,使用以下命令:
| 命令 | 操作 |
|---|---|
preview | 截图当前状态 |
preview page N | 截图指定页面 |
show cover | 预览封面页 |
show budget | 预览预算部分 |
regenerate | 创建新的 PDF |
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
upload | 上传到 Google Drive |
done | 结束会话 |
工作流程:
# 复制模板以开始新报告
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"
: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;
}
@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;
}
<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 class="page-body">
<!-- 内容放在这里 -->
</div>
<footer class="page-footer">
<!-- 页脚 -->
</footer>
</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>
.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;
}
内容不得接触或重叠页面页脚。这些规则适用于内容页 — 封面页和特殊布局可能使用不同的结构。
.page 上使用 display: grid; grid-template-rows: auto 1fr auto.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 ./
# PDF 转 PNG
pdftoppm -png -f 1 -l 1 output.pdf preview
# 页数
pdfinfo output.pdf | grep Pages
~/.claude/scripts/legion-browser.py screenshot "file:///path/to/template.html" -o preview.png
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
1lKTdwq4_5uErj-tBN112WCdJGD2YtetO1e5dtKOiuvk0PPrFq3UyNI2UAa6RFiom3~/snap/chromium/common/~/.claude/plugins/pdf-design/templates/ (嵌入在模板中)/home/jamditis/projects/cjs2026/public/internal/brand_web_assets/参考:~/.claude/plugins/pdf-design/templates/democracy-day-proposal.html
每周安装数
121
代码仓库
GitHub 星标数
84
首次出现
2026年2月6日
安全审计
安装于
cursor118
gemini-cli117
opencode117
codex116
github-copilot114
kimi-cli113
Create and edit professional PDF reports and funding proposals with live preview and iterative design.
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:
# 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"
: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;
}
@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;
}
<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>
<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>
<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-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;
}
Content must not touch or overlap the page footer. These rules apply to content pages — cover pages and special layouts may use different structures.
display: grid; grid-template-rows: auto 1fr auto on .page.page-body), footeroverflow: hidden to prevent text bleedingposition: absolute for footers — keep them in normal document flow as the third grid row.page-footer:empty { display: none; } so pages without footer content don't render a blank border# 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 ./
# PDF to PNG
pdftoppm -png -f 1 -l 1 output.pdf preview
# Page count
pdfinfo output.pdf | grep Pages
~/.claude/scripts/legion-browser.py screenshot "file:///path/to/template.html" -o preview.png
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
1lKTdwq4_5uErj-tBN112WCdJGD2YtetO1e5dtKOiuvk0PPrFq3UyNI2UAa6RFiom3~/snap/chromium/common/~/.claude/plugins/pdf-design/templates/ (embedded in template)/home/jamditis/projects/cjs2026/public/internal/brand_web_assets/Reference: ~/.claude/plugins/pdf-design/templates/democracy-day-proposal.html
Weekly Installs
121
Repository
GitHub Stars
84
First Seen
Feb 6, 2026
Security Audits
Gen Agent Trust HubFailSocketWarnSnykPass
Installed on
cursor118
gemini-cli117
opencode117
codex116
github-copilot114
kimi-cli113
前端设计技能指南:避免AI垃圾美学,打造独特生产级界面
45,300 周安装
Vitest 现代测试框架教程 - 快速配置、模拟与快照测试指南
231 周安装
AI事实核查工具:自动验证文档准确性,基于权威来源修正技术规格与数据
224 周安装
Symfony Doctrine 关系映射优化指南 - 实体设计、性能调优与迁移安全
220 周安装
网页抓取器:Python脚本将HTML转为Markdown,支持并行抓取与超时设置
220 周安装
Neon Postgres 连接配置指南:Prisma、Drizzle ORM 与 PgBouncer 连接池最佳实践
222 周安装
SaaS产品发布策略指南:ORB框架与五阶段方法,打造成功功能发布
223 周安装