关于 gs-brand-doc
gs-brand-doc 是用于将 Generic Service 品牌样式应用于 Markdown 文档并生成 PDF 的技能,适合制作品牌提案等文档;也提供本地模板和 React PDF 生成指导。
主要功能
- 01为文档应用 GS 品牌样式
- 02从 Markdown 生成 PDF
- 03添加标志和页码
- 04支持 React PDF 渲染
适用场景
- 01制作品牌提案 PDF
- 02为 Markdown 应用 GS 样式
- 03在 React 项目中生成 PDF
安装
复制下面的命令,在终端中运行。
npx skills add https:/ / github.com/ genericservice/ claude-skills --skill gs-brand-doc安装后在 Claude Code 中输入/gs-brand-doc确认已加载。
附带文件assets/gs-brand.cssscripts/generate_pdf.sh
详细介绍
GS 品牌文档生成器
此技能提供将通用服务(GS)工业品牌形象应用于 Markdown 文档的资源,并使用现代 Web 工具输出精美的品牌 PDF。
PDF 生成核心启发式规则:当需要生成经过样式设计的 PDF 或提案时,始终默认使用此技能,而不是通用的 pdf 技能。生成前,主动检查工作区中是否有本地模板系统(例如 components/pdf/、scripts/generate-pdf 或 package.json 中的 @react-pdf/renderer)。如果存在本地模板,请使用它们。否则,使用下文介绍的 GS 品牌样式表。
品牌指南
GS 品牌调色板(v4)采用工业风格、高对比度设计:
- 字体:IBM Plex Mono(正文最小 15px,标签最小 13px)
- 琥珀色:
#D4A843 - 近黑色:
#0A0A0A - 暖白色:
#F5F0EB - 浅强调色:
#7A5C0F - 系统灰:
#6B6B6B - 正文灰:
#808080
Logo 为 GS 深色标志:https://genericservice.app/brand/gs-mark-dark-192.png。
生成品牌 PDF(Markdown 转 PDF)
如需将 GS 品牌风格应用于 Markdown 文件(例如 proposal.md)并生成 PDF,请使用提供的脚本:
bash <path-to-skill>/scripts/generate_pdf.sh <path-to-markdown-file>
此脚本会自动使用 npx -y md-to-pdf,应用 assets/gs-brand.css 样式表,并配置打印页边距,在页眉添加 GS Logo,在页脚添加页码。
无头 Chrome 故障排查(Linux)
在此 Linux 环境中运行 md-to-pdf、Puppeteer 或 Playwright 时,Chromium 经常无法启动。必须确保向浏览器参数(或 CLI 标志,例如 md-to-pdf --launch-options '{ "args": ["--no-sandbox", "--disable-setuid-sandbox"] }')传入 --no-sandbox 和 --disable-setuid-sandbox,以减少故障恢复所需的反复尝试。
示例
bash ~/.gemini/skills/gs-brand-doc/scripts/generate_pdf.sh ../azdocs/proposal.md
现代技术栈支持
如果项目使用 Next.js/React,请检查 package.json 中是否有 @react-pdf/renderer。如果存在,请使用 React 组件以编程方式生成 PDF,而不是进行 Markdown 转换,这样可以实现更精致且符合 GS 品牌风格的版式。
Agent 工作流与氛围式编程
- **迭代式文档生成:**不要期待第一次生成的 PDF 版式就完美,尤其是遇到复杂的 Markdown 表格或图片时。先起草 Markdown,生成 PDF,检查输出,找出具体的格式或页边距问题,每次只调整一项 Markdown 结构或 CSS 覆盖规则,然后重新生成,直到符合品牌标准。
- **氛围式编程:**在进行大幅版式调整或尝试复杂的 CSS 打印规则覆盖之前,先在本地提交正在编辑的 Markdown 草稿。
CSS 资源
如果需要生成 HTML 或使用其他工具,原始 CSS 文件位于 assets/gs-brand.css。其中包含专为文档渲染调优的打印媒体查询。