生成项目框架
截取当前项目的最佳页面，然后为它们加框。此技能负责发现、应用准备和原始截图质量；必需的子技能： generate-frame 负责加框和封面制作。先运行它的第1步（定位并检查 frame-kit），如果失败则停止。<frame-kit> 是其解析出的路径。
输出，绝不混合：原始图 → ~/Pictures/<project>-portfolio/raw/，加框图 → ~/Pictures/<project>-portfolio/framed/。
1. 扫描
发现面向用户的页面：路由、页面/视图组件、管理资源（Filament、Nova…）、导航菜单。阅读代码以了解如何运行应用、存在哪些角色以及每个角色能看到哪些页面。不要猜测端口、URL或登录信息；通过运行应用或询问来验证它们。
2. 提议最多5个
确定此产品属于哪种类型，然后根据页面展示产品实际功能的效果进行排名。问题是：一张图片就能让陌生人理解这个产品，会是哪张？
| 产品 | 最强页面 |
|---|---|
| 商业/管理应用（POS、CRM、库存） | 包含真实数据的核心工作流，然后是仪表板，再是数据丰富的列表 |
| 仪表板/分析工具 | 主仪表板、一个钻取页面、一个报告页面 |
| 内容/营销/电商网站 | 着陆页/英雄区、列表页、详情页、购物车或结账页 |
| 编辑器/构建器/创意工具 | 带有内容的画布，然后是画廊或项目列表 |
| 开发者工具/文档 | 使用中的主界面、结果/输出视图 |
跳过登录页、简单表单、设置页、错误页和几乎重复的页面。少于5个也没问题。列出每个页面的名称、路径、角色和一句话理由。
3. 询问
AskUserQuestion，multiSelect（每个问题最多4个选项；如果需要可拆分为两个问题）。在用户做出选择之前不要开始捕获。同时询问：浅色还是深色（仅当应用同时支持两者时），以及使用哪个角色/账户。凭证来自用户的环境或现有会话；切勿将它们写入脚本、文件或输出中，也切勿绕过访问控制（所选角色看不到的页面将被跳过，而不是强制访问）。
4. 准备应用
- 如果应用未运行，则在一个空闲端口上启动它；记住停止你启动的应用。
- 打开选定的页面。空数据或占位数据 → 说明情况并提供添加真实演示数据的选项。数据填充需要明确确认，将写入单独的或临时的数据库，未经确认绝不触碰开发数据库。优先使用UI可以创建的状态（如将商品添加到购物车）而不是直接写入数据库。
- 不要向用户的项目添加依赖项或文件。脚本放在 scratchpad 中。
5. 捕获
在 scratchpad 中编写脚本，从 <this skill>/scripts/capture.mjs 导入 capturePages：
import { capturePages } from '<this skill>/scripts/capture.mjs';
const results = await capturePages({
frameKit: '<frame-kit>', outDir: '<raw dir>', colorScheme: 'light', // 批次使用一种配色
storageState: process.env.APP_STORAGE_STATE, // 保存的会话；或 login: async (page) => {...} 读取 process.env
setup: (ctx) => ctx.addInitScript(() => localStorage.setItem('theme', 'light')), // 应用自身的主题切换（如果有）
pages: [{ name: '01-dashboard', url: 'http://localhost:8000/admin', prepare: async (page) => { /* 打开购物车，关闭引导提示… */ } }],
});
console.log(JSON.stringify(results, null, 2));
它为整个批次使用一个 1440×900 @2x 的上下文（PNG 尺寸为 2880×1800），等待网络空闲、字体和延迟内容加载完成，并报告每个页面的 issues：控制台/页面错误、HTTP ≥ 400、重定向（通常表示缺少登录）、损坏的图片、可见的旋转器/骨架屏、覆盖层/ Cookie 横幅、空图表容器。按照提议顺序将文件命名为 NN-<slug>.png。通过 loadingSelectors/overlaySelectors/hideCss（toast、调试工具栏）传递应用自身的选择器。
交互式界面（购物车、编辑器、看板）需要先在 prepare 中添加示例内容。
对于每个有问题的页面：修复它（关闭覆盖层、等待元素、登录）并仅重新拍摄该页面；或者告诉用户该问题无法修复并放弃该页面。对于你认为无害的警告（例如 favicon 404），可以接受，但要说明。然后检查每张 PNG：确保内容真实、没有半加载状态、没有不应发布的私人数据（电子邮件、令牌、真实客户名称）；如果不确定，请与用户确认。
6. 加框
运行 generate-frame 的第2到第4步，以原始文件夹作为输入：--out <framed dir>，--url "<app host>/{name}"，一个 --resolution（默认最大值）。部分失败需要报告，而不是隐藏：仅重新拍摄或重新加框失败的文件。报告原始文件夹、加框文件夹、封面图片对、放弃的页面及原因，以及任何局限性（例如未检查图片）。