SuperAPI AI 工具集

page-inspector

通用与其它

查看项目

更新于 10-16 05:06

技能介绍

用途:从实时网页捕获当前布局、样式和结构,帮助在修改 UI 前理解现有界面。所有浏览器交互(导航、截图、视口模拟、DOM 检查)均通过 Skill("pinchtab") 完成。

输入:原始参数 $ARGUMENTS,需推断 TARGET_URL(要检查的 URL)和 OUT_DIR(输出目录,未提供时默认 ./page-inspector-output)。

执行流程:1) 导航到 TARGET_URL 并做交互式快照确认加载;若需认证,先查系统提示中的凭据指引,再用 env | grep -iE 'USER|PASS|LOGIN|AUTH|TOKEN|CRED|SECRET|API_KEY' | sed 's/=./=**/' 列出凭据环境变量(输出中掩码值),找到则填表登录并重新快照,找不到则用 AskUserQuestion 询问(自主模式跳过),无法获取则跳过并注明“Skipped — page requires authentication but no credentials found.”。2) 截图保存到 OUT_DIR/screenshots/desktop.png,写文件前先 mkdir -p OUT_DIR/screenshots。3) 对 1440px、1024px、768px、375px 分别调整视口宽度并截图保存为 {width}px.png。4) 用 JavaScript 提取关键布局容器及其 CSS display/position、主要布局元素的 flex/grid 配置、fixed/sticky 元素、整体页面结构(header、nav、main、sidebar、footer)。5) 用 JavaScript 捕获关键 UI 元素的字体族、字号、字重、行高、颜色(文字、背景、边框)、间距(margin、padding)、盒模型与尺寸。6) 生成 OUT_DIR/mugshot.md,包含截图清单、页面结构、布局属性、排版与颜色、间距与尺寸、备注等章节。

适用场景:需要了解现有 UI 结构、为后续改动做参考时。限制:依赖 PinchTab;需认证且无凭据时会跳过;输出目录与截图路径由参数决定;资料未提供更多平台、收费或效果信息。