mcpField
G
gs-brand-doc

gs-brand-doc

github.com/genericservice文档处理038 次安装23 周前更新
代码仓库

关于 gs-brand-doc

gs-brand-doc 是用于将 Generic Service 品牌样式应用于 Markdown 文档并生成 PDF 的技能,适合制作品牌提案等文档;也提供本地模板和 React PDF 生成指导。

主要功能

  1. 01为文档应用 GS 品牌样式
  2. 02从 Markdown 生成 PDF
  3. 03添加标志和页码
  4. 04支持 React PDF 渲染

适用场景

  1. 01制作品牌提案 PDF
  2. 02为 Markdown 应用 GS 样式
  3. 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。其中包含专为文档渲染调优的打印媒体查询。

评论

支持 Markdown