Gemini Enterprise 演示生成器 Web Report 技能实战构建单文件自包含 HTML 报告/简报页【免费下载链接】generative-aiSample code and notebooks for Generative AI on Google Cloud, with Gemini Enterprise Agent Platform项目地址: https://gitcode.com/GitHub_Trending/ge/generative-ai导读本文围绕开源仓库 generative-ai 中search/gemini-enterprise/ge-demo-generator项目的 Web Report Builder 技能web-report/SKILL.md完整讲解如何在无构建步骤的前提下产出一份达到已发布产品页水准的单文件 HTML 报告或简报微站点。你将掌握该技能的硬性约束单文件、响应式、双主题、可访问性、页面架构Hero 头图、KPI 条、内容区、可排序数据表、方法论页脚、完整设计系统CSS 自定义属性驱动的双主题调色板与 Chart.js 图表规范以及强制验证与交付流程语法检查、DOM/JSON 健全性检查、curl 上传与最终报告并了解它如何作为 GE Demo Generator 托管智能体Managed Agent的交付技能被挂载与调用。技能定位何时启用 Web Report Builder在 GE Demo Generator 的体系里web-report是一个面向托管智能体自主交付的技能定义。根据 templates/demo_skills/README.md 的说明这些技能是为 Managed AgentAntigravity 自主沙箱准备的交付能力覆盖三类产物专业演示文稿.pptx商务文档.docx/ PDF自包含 HTML 报告web-report。技能的 frontmatterYAML 头承担触发判断职责description字段告诉智能体何时该使用它——当任务要求网页、HTML 报告、简报页或微站点时就启用web-report它负责页面架构、设计系统、图表与交付的全链路。触发面很广高层简报executive briefing、分析报告、活动/项目一页纸one-pager只要最终产物是要在浏览器中呈现的内容都属于它的管辖范围。它的核心承诺只有一句话构建一个单一、自包含的 HTML 文件把分析或简报呈现到已发布产品页的质量水准——所有资源内联一个文件、无本地资源、无构建步骤。语言规则与伴生技能语言规则跟随任务语言而非技能语言这是该技能的第一条硬性规则页面上所有面向用户可见的文本必须使用你收到任务描述时所用的同一种语言。技能的说明文字是英文但交付物跟随任务的语言同时需要相应设置html上的lang属性。这条规则与整个 GE Demo Generator 的 i18n/l10n 架构一脉相承——上层技能SKILL.md要求所有演示资产的用户可见文本严格匹配检测到的目标语言从域名 TLD 或用户交互语言推断而每个交付技能document / presentation / web-report都把这条语言一致性规则落实到了各自产物的所有可见文本上。伴生技能与 modern-web-guidance 的职责切分如果技能目录中存在modern-web-guidance技能实现时应查阅它获取当前平台最佳实践的 APIcontainer queries、View Transitions、Popover 等。职责划分很清晰web-report拥有报告的结构与设计modern-web-guidance拥有现代平台技术。同时必须坚持渐进增强progressive enhancement即使某个现代 API 不可用页面也必须保持完全可读。硬性要求Hard Requirementsweb-report定义了六条不可妥协的硬性约束构建时必须逐条满足单文件自包含一个.html文件——所有 CSS 放在单个style块、所有 JS 放在单个script块、数据以单个const DATA {...}JSON 字面量内嵌。CDN 白名单图表库允许从 CDN 引入例如https://cdn.jsdelivr.net/npm/chart.js除此之外的一切都必须内联。响应式从 360px 到宽屏桌面均适配无横向滚动。双主题通过:root与html[data-themedark]上的 CSS 自定义属性实现浅色/深色主题并提供可见的切换控件。每一个颜色都必须经由自定义属性驱动——硬编码颜色会破坏另一套主题。可访问性语义化地标header、main、nav、footer、唯一的一个h1、有序的标题层级、可视化元素带 alt/aria 标签、两套主题下均满足 WCAG AA 对比度、可见的焦点状态。数据快照声明页面上需声明数据是某一时点的快照并标注日期。这些约束并非空泛的要求——从仓库中的agent_template版本agent_template/demo_skills/web-report/SKILL.md可以看到它是作为生成模板被分发到每个演示项目中的因此必须对任何行业、任何语言的演示都成立单文件结构正是为了任何环境都可直接打开的可移植性。页面架构五段式布局技能规定报告页面按以下五段组织顺序固定Hero 头图Hero header报告标题必须是论断而非主题、一行副标题、日期 数据来源说明、主题切换按钮。KPI 条KPI strip3-5 个统计瓦片——大数字、短标签、与上一周期的 delta并带上下指示符指示符的颜色由意义好/坏决定而非方向。内容区Content sections3-6 个每节包含——以结论句形式呈现的小节标题、2-3 句的引导段、然后是图表/表格/卡片栅格。各节之间要交替布局模式让页面有节奏感。数据表区Data table section可排序列点击表头切换升/降序、自由文本过滤输入框以及当某维度取值较少时的分类过滤 chips。页脚Footer方法论说明、来源若涉及网络研究则放真实 URL、生成日期。这套架构的每一层都对应一个明确的商业叙事目标Hero 断言主题KPI 一屏给出数字结论内容区承载证据数据表允许读者自助下钻页脚保证可审计性。注意标题写作规则——Repeat buyers drive 62% of revenue结论式而不是Revenue analysis标签式。设计系统双主题下的统一视觉语言设计令牌Design Tokens间距、字体与颜色全部在文件顶部定义为 CSS 自定义属性。浅色主题调色板为固定基准角色颜色值背景 background#FFFFFF面板 panel#F2F5FA正文 text#1F2733弱化文本 muted#66707F主色 primary#1A2B4A强调色 accent#2E6FDB警示 warn#E8A33D正向 positive#1E8E5A负向 negative#C6423F深色主题通过交换表面色派生背景#10151D、面板#1A212C、正文#E8EDF4保持相同的强调色相。这正是硬性要求中颜色必须经自定义属性驱动的原因——浅色/深色主题本质上是同一套令牌在不同作用域:rootvshtml[data-themedark]下的替换。这一调色板与仓库中另外两个交付技能保持强一致专业文档技能professional-document/SKILL.md使用#1A2B4A标题色与#F2F5FA表头填充演示文稿技能professional-presentation/SKILL.md也定义了相同的 Primary dark#1A2B4A与 Accent#2E6FDB。三个技能共享同一套企业视觉语言保证任何演示产物放在一起都不违和。排版、卡片与栅格字号以 16px 为基准、按 1.25 比例递增页面标题通过clamp()约束在约 28-40px 之间系统字体栈即可无需下载字体。卡片12-16px 圆角、1px 低对比度边框仅浅色主题使用轻微阴影。图表Chart.js每个 canvas 都要包在固定高度约 320px的容器里并设置maintainAspectRatio: false颜色通过getComputedStyle从调色板取用使用直接轴标签单图最多 5 个系列主题切换时要重渲染图表让颜色跟随主题。栅格与宽度最大内容宽度约 1080px、水平居中KPI 条与卡片栅格使用 CSS grid 的auto-fit, minmax()。这些细节共同决定了报告在手机与桌面上的呈现一致性也解释了为什么图表必须跟随主题重渲染——canvas 绘制的是像素不会像 DOM 元素那样自动继承 CSS 变量必须在切换主题时重新调用 Chart.js 渲染。内容质量标准Content Quality Bar小节标题是发现/结论findings不是标签labels。页面上每一个数字都必须来自所提供的数据或已引用的网络研究禁止编造数字。行文精炼引导段控制在 2-3 句细节交由可视化承载。这条标准与沙箱系统指令templates/scripts/managed_agent_instruction.txt中的质量门禁呼应board-ready 的标准包含真实数字、每个外部声明附来源 URL、结论式标题、零占位文本、一致的字体与颜色、无乱码非 ASCII 文本。验证流程发布前的强制质量关卡技能要求验证是强制性的共四个层次任何一项不过都要修复并重建脚本语法检查若 Node.js 可用把内嵌script的主体提取到临时.js文件做node --checkDOM 调用部分放入 guard 或交由node --check处理。DOM/JSON 健全性检查用基于python3 -c import html.parser或正则的健全性检查——每个被getElementById引用的id必须存在DATA必须能作为 JSON 解析提取后用json.loads。无头打开检查若无浏览器可用至少重新读取文件确认两套主题块、切换处理函数与所有小节标题都存在。修复并重建直到干净。这套验证与仓库的部署哲学一致GE Demo Generator 在 Phase 6.5 有一个 8 层自主验证与自愈引擎SKILL.md 中的scripts/verify_and_heal.py而每个交付技能也在自身产物层面强制执行验证——文档技能要求用 python-docx 重开 .docx、用 pypdf 重开 PDF 断言页数与文本演示文稿技能要求重开 .pptx 断言页数、无溢出、无缺字体。web-report 的验证等价于用 Python/Node 重开 HTML。交付流程Delivery用描述性文件名保存例如q3_briefing.html。若任务提供了交付物上传 URL用如下命令上传失败重试一次curl -sS -X PUT --upload-file file -H Content-Type: text/html; charsetutf-8 upload_url在最终报告中声明文件名并逐条列出各小节及其一行结论。对照沙箱系统指令的交付要求UPLOADING IS PART OF THE TASK, NOT OPTIONAL、用-w %{http_code}确认 200、绝不要把未上传的文件报告为已交付web-report 的交付步骤正是这条规则的技能级落地。在仓库中的实际挂载与调用机制web-report不是一份孤立的文档它通过以下链路成为可执行能力模板分发templates/demo_skills/web-report/SKILL.md是技能源agent_template/demo_skills/web-report/SKILL.md是分发到演示项目中的同名副本。按 templates/demo_skills/README.md 的说法生成的 setup 脚本把这些文件从抓取的 agent 模板复制进演示项目skills/...没有构建步骤直接编辑 SKILL.md 即可。技能源上传在 templates/setup_and_deploy.sh 中demo_skills/*被gcloud storage cp -r上传到gs://${DASH_BUCKET}/skills/生成MA_SKILLS_SOURCEgs://${DASH_BUCKET}/skills——即技能包以 GCS 目录形式挂载给自主智能体。挂载到沙箱templates/scripts/create_managed_agent.py 在创建 Managed Agent 时读取SKILLS_SOURCE参数通过env[sources] [{type: gcs, source: SKILLS_SOURCE, target: /.agent/skills}]把技能包挂载到沙箱的/.agent/skills。沙箱内的使用协议沙箱系统指令managed_agent_instruction.txt规定——技能包挂载在/workspace/.agent/skills相对工作目录绝对路径/.agent/skills并不存在构建任何交付物演示文稿、文档、PDF、网页之前必须列出该目录、阅读匹配的 SKILL.md并严格按其流程、设计系统与验证步骤执行。也就是说一个完整的执行闭环是演示前端助手委托任务 → 自主沙箱智能体在/workspace/.agent/skills找到web-report/SKILL.md→ 按其中规定构建单文件 HTML → 执行四层验证 → 通过上传 URL 交付并回报。这也解释了技能文档为何措辞极其指令化——它将被一个自主智能体字面逐条执行容不得歧义。三个交付技能的定位差异技能产物适用场景关键技术栈web-report单文件 HTML简报微站点、浏览器呈现的报告/一页纸内联 CSS/JS Chart.js CSS 自定义属性professional-document.docx/ PDF可编辑草案、正式客户面向文档python-docx / reportlabCJK 需注册 CID 字体professional-presentation.pptx董事会级 16:9 演示python-pptx matplotlib 图表三者共享语言规则跟随任务语言、质量门禁真实数字、断言式标题与交付协议描述性文件名 curl 上传 最终报告但各自拥有独立的页面/排版架构。选择依据是产物形态而非内容需要浏览器交互与图表演示选web-report需要可编辑文档选.docx需要正式定稿选 PDF需要讲故事选.pptx。小结web-report技能把产出一份高质量单文件 HTML 报告从凭感觉的自由发挥收敛为一套可执行、可验证、可交付的工程规范单文件自包含 CDN 白名单保证零环境依赖双主题自定义属性 固定调色板保证视觉统一与可访问性五段式页面架构保证叙事结构四层验证保证无破损交付。在 GE Demo Generator 中它通过与setup_and_deploy.sh、create_managed_agent.py和沙箱系统指令的联动成为托管智能体自主交付链路上标准化的网页产物能力——任何行业、任何语言的演示环境都可以通过复制模板 填充占位符的方式直接获得这一能力。【免费下载链接】generative-aiSample code and notebooks for Generative AI on Google Cloud, with Gemini Enterprise Agent Platform项目地址: https://gitcode.com/GitHub_Trending/ge/generative-ai创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考