Document design 是一个用于创建专业、可打印 HTML 文档并导出为 PDF 的技能，支持可自定义的品牌设置。它适用于制作提案、报告、单页文档、新闻通讯、幻灯片或传单等。
用途 该技能的核心用途是生成打印优先的 HTML 文档，并保证导出为 PDF 时渲染正确。文档目标尺寸为 8.5 英寸 × 11 英寸信件纸，并要求符合品牌配置中的颜色与字体。默认使用句首大写（sentence case），除非品牌配置指定标题式大写（title case）。
品牌配置 在创建文档之前，会先检查项目根目录下的 pdf-playground.local.md；若不存在，则检查旧版 Claude Code 路径 .claude/pdf-playground.local.md。若两者都存在，只使用项目根目录的文件。若两者都不存在，则使用默认值或询问用户品牌颜色。配置文件通过 YAML frontmatter 定义 brand（名称、标语、网站、邮箱）、colors（primary、secondary、background、text、muted）、fonts（heading、body）以及 style（headingCase、useOxfordComma）。
如果没有配置文件，默认品牌值为：主色 #CA3553（红色），辅色 #000000（黑色），标题字体 Playfair Display，正文字体 Source Sans 3，标题句首大写。
核心原则 打印优先设计：所有文档以 8.5" × 11" 信件尺寸与合适边距为目标。品牌合规：使用品牌配置中的颜色与字体。默认句首大写。导出干净：文档打印为 PDF 时必须正确渲染。
CSS 变量与打印 CSS 技能会从品牌配置生成 CSS 变量，包括 --primary、--secondary、--background、--text、--muted 以及派生色（如 --primary-dark、--gray-100、--gray-200）。打印 CSS 包括 @page 设置（size: 8.5in 11in; margin: 0）、打印媒体下启用精确颜色调整、.page 分页与避免内部断页。固定页面尺寸使用 width: 8.5in、height: 11in、padding: 0.5in 0.75in、padding-bottom: 1in（为页脚留空间），并设置 position: relative、box-sizing: border-box、overflow: hidden。固定页脚使用绝对定位，bottom: 0.4in，左右 0.75in，字号 9pt，带顶部边框。
页脚避让 文档特别强调内容与页脚重叠或接触是常见问题。推荐布局为页面使用 display: grid 与 grid-template-rows: auto 1fr auto，使页头与页脚按自然高度占据空间，内容填充剩余区域，无需魔法数字 calc()。必要保护措施包括：在页面上使用该网格行设置，在内容容器上设置 overflow: hidden 防止文字溢出，内容区至少加入 padding-bottom: 0.3in 作为缓冲，绝不使用硬编码 height: calc(...) 加魔法数字计算页头页脚高度。渲染后必须截图并目视检查页面底部再交付。若内容溢出，应减少内容，绝不压缩页脚间距；需要更多空间时先收紧页头。
排版模式 字体通过 Google Fonts @import 加载，body 使用正文品牌字体（回退 Arial、sans-serif），字号 11pt，行高 1.6；h1、h2、h3 使用标题品牌字体（回退 Georgia、serif）。.section-title 字号 26pt，颜色为辅色，下方带主色下划线装饰条。
常用组件 封面页头包含 logo 条（显示 brand.name）、封面标题块（文档类型与日期、标题）。预算表格表头使用辅色背景白色文字，最后一行使用主色背景白色粗体。高亮框使用主色到主色暗色的线性渐变背景与白色文字。
文档创建工作流
- 在项目根目录 pdf-playground.local.md 检查品牌配置，再回退到旧路径 .claude/pdf-playground.local.md。
- 定位已安装的 SKILL.md 并从其目录解析捆绑资源，不假设存在插件根环境变量。
- 从技能相对 templates/ 目录加载模板。
- 将品牌设置应用到 CSS 变量与内容。
- 根据用户需求自定义内容。
- 将 HTML 文件保存到当前工作目录。
- 提供使用 Playwright 浏览器工具的预览。
PDF 导出说明 在 Chrome 中打开 HTML 文件；按 Ctrl+P（Mac 为 Cmd+P）；将“目标”设为“另存为 PDF”；将“边距”设为“无”；启用“背景图形”；保存文件。
附加资源 模板位于已安装技能的 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 功能。
适用场景与限制 适用于需要打印或导出 PDF 的提案、报告、单页、新闻通讯、幻灯片与活动传单等文档。限制包括：必须使用可用的品牌配置或默认值；幻灯片模板不捆绑图片资源，需自行替换或删除未解析引用；具体收费、价格、平台兼容范围等资料中未提供。