生成框架图
将现有截图转换为带有框架的 PNG 图片，渲染工作由 frame-kit 完成。此技能负责定位工具、运行它、检查结果并挑选封面。如需先截图项目页面，请使用 generate-project-frames。
1. 定位并检查 frame-kit
将文件夹称为 <frame-kit>。使用第一个满足条件的路径：
$FRAME_KIT_DIRframe-kit命令在 PATH 中对应的文件夹（readlink -f "$(command -v frame-kit)"，取其所在目录）- 在
~/projects ~/code ~/dev ~中搜索，深度 ≤ 4，跳过node_modules（多匹配时询问用户） - 询问用户；若没有，建议
git clone https://github.com/CrziDev/frame-kit
然后：
node_modules缺失 → 在<frame-kit>中运行npm install- 运行
node <frame-kit>/cli.mjs --help，仅依据列出的选项构建命令。若缺少--resolution或--fit，则说明安装版本较旧：省略这些选项并告知用户git pull。 - 遇到 "Chromium not found" → 在
<frame-kit>中运行npx playwright install chromium，或设置CHROME_PATH。
不要将路径写入任何技能文件中。
2. 加框处理
node <frame-kit>/cli.mjs single <image|folder> --out <framed dir> [options]
--out：始终传递该参数。默认值为<input dir>/framed/，该目录会嵌套在原始文件夹内部。保持加框后的图片与原始图片分离。--url "<host>/{name}"：地址栏文本；{name}表示去除NN-前缀后的文件名。已知应用的实际主机和路径时使用，否则省略。--style paper：用于收据、发票、打印件。文件夹运行使用一种样式，因此仅对单个文件重新运行--style paper，并使用相同的--out。--resolution standard|high|max：默认max（3840×2400）。README 和快速预览用standard（1920×1200），网页和幻灯片用high（2560×1600）。更大的输出使边框和文字更清晰，而非增加截图细节。每批处理使用一种分辨率。--fit auto|contain|cover：默认auto（显示整个截图；过高的页面从顶部裁剪）。仅在需要修复裁剪错误时更改。
退出码 1 表示部分文件失败；其他文件仍会写入，失败列表显示在 stderr 中。修复原因（图片不可读或损坏、类型不支持、超过 50 MB）后仅重新运行这些文件。如果每个文件都失败，则怀疑是 Chromium 的问题。
3. 封面图（仅限文件夹输入）
查看图片，然后挑选两张互补的图片：
- 背面：产品概览（仪表盘、分析、主页），横向排版，缩略图尺寸下可读。
- 正面：展示应用功能的屏幕，内容真实，布局与背面不同。
- 绝不使用：登录页、空白状态、错误页面、过高的全页截图、收据、或同一屏幕出现两次。
node <frame-kit>/cli.mjs cover <back> <front> --back-url "…" --front-url "…" --out <framed dir>/00-cover.png（使用相同的 --resolution）。传递原始截图，而非已加框的图片。如果只有一张图片值得展示，或者用户想要一个标题图，则使用 headline（参见 --help）。
4. 验证与报告
node <this skill>/scripts/verify-frames.mjs <input> <framed dir> --resolution <preset>检查每个输入文件是否都对应一个尺寸正确的有效 PNG，以及封面图。该命令不判断外观。- 读取每个输出 PNG（以及封面图）。检查是否存在空白或部分加载的截图、内容被裁剪、文字过小无法阅读、样式错误（如收据显示在浏览器窗口中）、地址栏错误。仅重新运行受影响的文件，调整选项后重新验证。如果无法查看图片，请说明。
- 报告：加框后的文件夹、失败或重新处理的文件、封面图配对、以及一句话说明这两张图片为何互补。