SuperAPI AI 工具集

website-visual-assets

前端与建站

查看项目

更新于 10-16 02:39

技能介绍

用途:为网站提供可重复执行的流程,用仓库真实产物生成 HTML 导出与截图,供网站页面引用展示。

主要能力:一是使用 src/tools/Oocx.TfPlan2Md.HtmlRenderer 从 Markdown 报告生成 HTML;二是使用 src/tools/Oocx.TfPlan2Md.ScreenshotGenerator(基于 Playwright)从这些 HTML 导出生成截图。截图需存放到 website/src/assets/screenshots/。当截图资产变化时,需同步更新消费方网站源码,例如 website/src/pages/ 下相关页面或 website/src/_data/ 中的共享内容数据。

使用方式:优先使用自动化脚本,例如 scripts/generate-screenshot.sh 配合 --plan、--output-prefix、--selector、--thumbnail-width、--thumbnail-height、--lightbox-width、--lightbox-height、--render-target、--open-details-selector 等参数;资料称其会自动生成 12 种截图变体,涵盖缩略图与灯箱裁剪、明暗主题、1x 与 2x DPI、Azure DevOps 渲染风格。高级场景可用手动方式:先用 dotnet run --project src/tools/Oocx.TfPlan2Md.HtmlRenderer 生成 HTML,再用 DOTNET_SYSTEM_GLOBALIZATION_INVARIANT=1 dotnet run --project src/tools/Oocx.TfPlan2Md.ScreenshotGenerator 截图。

限制:不得手工编辑截图,也不得创建并非由真实 HTML 导出生成的“模拟”截图。生成后需验证 website/dist/ 中相关页面正确引用明色或暗色资产变体,且灯箱或截图包装仍可正常工作。