SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场ui-snapshot

ui-snapshot

前端与建站

查看项目

更新于 10-16 02:41

技能介绍

用途

ui-snapshot 用于将一个前端项目的整套 UI/UX 压缩成单个自包含 HTML 文件，双击即可离线打开（无需服务器、无需网络、无需登录），用硬编码的占位数据忠实还原真实应用的界面。适用于需要把界面交给无法运行应用的人（主管、设计师、客户、评审、文档 wiki）查看，或需要一个带示例数据的 mockup 用于讨论 UX/QC 而不触碰真实数据或后端的场景。触发方式包括用户说出“snapshot UI”“把界面打包成一个 html 文件”“压缩项目 UIUX”，或使用 /ui-snapshot。

非目标：不进行重新设计；不对正在运行的应用做静态截图；不放入真实数据；不保留业务逻辑或 API（按钮操作只在页面内改变状态）。

核心思路

不直接构建或 SSR 真实应用，而是移植到 vanilla JS：原样抄写 class，并用真实配置编译 Tailwind，从而得到像素级一致的界面，同时不携带鉴权、后端和真实数据，也不会产生过大 bundle。

流程：读取所有页面的 JSX → 列出屏幕、状态与浮层 → 编写 app.js（hash 路由、状态、硬编码数据、每屏一个函数、桌面/移动分支）→ build.py（真实 Tailwind 配置 + 字体 + 图标子集 + 资源 data URI）→ shot.mjs 验证 → 修正 → 发布。

输入与输出契约

输入：

  • 前端目录（--fe），需含 node_modules：必需，用于项目的 tailwindcss CLI 与配置。
  • 页面/路由列表：必需（自动探测 app/**/page.tsx、pages/、src/routes），覆盖“整个 UI”。
  • 容量阈值：非必需（5 MB），--max-mb。
  • 主字体 / logo / banner：非必需，--font、--asset NAME=path。

输出：

  • <repo>/…/DDMMYY-<project>-uiux-snapshot.html：必需，单个离线文件。
  • 报告：屏幕数、KB、验证截图数、与真实应用的差异，诚实列出被模拟之处。

规则与能力

  • RULE-01（MUST）：移植前读完每个页面的全部 JSX（包括移动分支、空/加载/错误状态、modal、sheet）。凭记忆移植会导致 UI 偏差。
  • RULE-02（MUST）：Tailwind class 从 JSX 原样抄写，在 app.js 中以字面字符串形式书写（JIT 只能识别字面量；动态拼接 bg-${x} 会丢失 class）。
  • RULE-03（MUST）：占位数据硬编码，绝不用真实数据（不调用 API，不复制网络抓包或数据库内容）。日期使用相对偏移（D(-9)）以使逾期状态随时间保持稳定。
  • RULE-04（MUST）：图标名写成带引号的字符串（"search"），便于 build.py 对字体做子集化；动态图标需在 map 中给出完整名称。
  • RULE-05（MUST）：与真实应用使用相同断点（如 768px），桌面/移动分支用 JS 渲染（在手机框内强制移动模式时不依赖 md:）。
  • RULE-06（MUST）：外部资源（CDN 图片、Google 字体）必须内嵌或替换为背景/渐变——文件必须能离线运行。所有替换位置须在报告中写明。
  • RULE-07（MUST）：用 shot.mjs 验证桌面 + 移动端，读取截图，只有 NO ERRORS 才能报告完成；超过 --max-mb 即 FAIL。
  • RULE-08（SHOULD）：提供演示面板（“UI”按钮），可跳转到任意屏幕并开启状态（加载/陈旧、错误、toast、tour、各类 AI 状态等），以及 Auto/Desktop/Mobile 模式。

能力：读取代码库；Python 3 + Node + 项目的 Tailwind CLI；构建时联网（Google Fonts、codepoints）；用 Playwright 验证。

主要工作流

  • W01（确定性）：根据 --fe 探测路由、布局、共享组件；读取 tailwind.config、globals.css、design.md（若有），产出屏幕列表与 token。无 Tailwind 则进入 FB1。
  • W02（判断）：读取每个页面的全部 JSX（RULE-01），记录所有状态/浮层/移动分支，产出屏幕 × 状态清单。
  • W03（效果）：从 assets/app-skeleton.js 生成 <scratch>/app.js，从 assets/template.html 生成 template.html（替换 TITLE、FONT）；逐屏移植，class 原样，数据硬编码。
  • W04（确定性）：python3 scripts/build.py --fe <fe> --src <scratch> --out <file> --font "<Font>" --asset LOGO=public/logo.png，产出 HTML 文件与 KB。Tailwind 报错看 stderr；超限进入 FB3。
  • W05（确定性）：node scripts/shot.mjs <file> <scratch>/shots d-home=home m-home=home …（如缺 Playwright 则安装到 scratch），然后读取截图，产出截图 + NO ERRORS。出错则改 app.js，回到 W04。
  • W06（效果）：放入仓库（如 llmwiki/html/DDMMYY-<project>-uiux-snapshot.html），如项目有 wiki 则记日志；报告屏幕数、KB、模拟之处。

分支情况

  • B01：页面含死代码 UI（状态无入口）——仍然移植，但仅通过演示面板打开，并标注“legacy”。
  • B02：应用有暗色 devtool 页面或不同设计系统——用内联样式按原版移植。
  • B03：在宽屏上移动模式布局错位——#frame 使用 transform 使 fixed 元素贴合框；#app 为滚动区域；覆盖 .h-screen/.min-h-screen = 100%（模板已包含）。

验证与停止条件

确定性：build.py 退出码 0 且低于阈值；shot.mjs 对所有桌面 + 移动屏幕输出 NO ERRORS。需要人工核验：将截图与真实应用/Figma 对比（颜色、间距、带声调越南语文字）。当清单中所有屏幕都有干净截图，且报告已列出模拟之处时停止。

示例

正面：bonbon-ai fe/ → 登录、仪表盘总览/待处理/逾期、按部门/合同类型筛选、单据详情 3 个标签、VS Code 浮层、AI tracker、sheet/modal/toast/tour → 426 KB，79 个图标，22 张验证截图，0 错误。

边界：项目 hero 背景图 3 MB 来自 CDN → 替换为渐变并写明“与真实应用不同：登录背景图”，而不是内嵌以致文件超限。

确定性测试

python3 scripts/build.py --fe <fe> --src assets-copy --out /tmp/t.html，配合 assets/app-skeleton.js（重命名为 app.js）+ assets/template.html，应产出小于 1 MB 的文件，然后 node scripts/shot.mjs /tmp/t.html /tmp/shots d-home=home m-home=home 输出 NO ERRORS。

失败边界

  • 项目不使用 Tailwind → build.py 生成空 CSS：手动将 CSS module/styled 抄入模板，或与用户确认。
  • 构建时无网络 → 字体/图标无法内嵌 → blocked（或接受系统字体回退并写明）。
  • 文件超阈值 → 削减：去掉多余字重、用 sips -Z 缩小图片、减少示例数据；不要删减屏幕。
  • 其他框架（Vue/Svelte/Angular 模板）→ 仍适用，只需更换读取 class 的来源。

限制

资料未提供该技能的具体安装命令、收费方式、价格与平台支持信息（暂未提供）。