这个 Skill 能做什么，适合哪些场景？
该技能面向 Google Stitch MCP 工作流，可从已构建的网页应用或 React 组件中提取自包含的静态 HTML。它会内联 CSS，并将图片转换为 Base64 数据 URI。默认推荐使用 Puppeteer 捕获已渲染页面，也支持先交互再提取 DOM 的浏览器子代理方案。它适合需要保存特定界面状态、分享页面快照或准备 Stitch 上传素材的开发者。
读取并访问本地运行的网页应用，使用 Puppeteer 捕获渲染后的 DOM，内联样式表和 CSS 中的相对资源路径，将 img、srcset 和 source srcset 图片转换为 Base64 数据 URI，并移除脚本、开发覆盖层及 Next.js 开发指示器，最终写入静态 HTML 文件。对于需要点击、填写表单或切换标签的页面，也可通过浏览器子代理交互后提取 document.documentElement.outerHTML。应用无法运行时，技能还记录了使用 MockPage.jsx 和后处理脚本的备用流程。
- 前端开发者希望保存本地开发服务器中某个路由的完整页面快照。
- 设计师或产品团队需要将特定 UI 状态作为静态文件分享给他人。
- Stitch 用户需要把网页应用页面整理成可上传的 HTML 素材。
- 页面必须先点击按钮、填写表单或切换标签后，才能捕获目标状态。
- 应用存在认证墙或无法正常运行，需要通过手动扁平化组件制作静态回退页面。
如何安装这个 Skill？
- 使用前确认输入页面不含需保护的个人信息、会话内容或机密资源；脚本可能请求并内联远程图像。
- post_process 默认会原地覆盖 HTML 文件，使用前应自行备份。
- 未提供执行测试证据；应在目标框架、认证状态、跨域资源和中国大陆网络环境中单独验证。
- Shell / 命令行
- 网络访问
- 本地文件系统
- MCP Server
Node.jspuppeteertsx
该技能位于仓库的 plugins/stitch-design/skills/extract-static-html/。选择性安装整个仓库的技能可运行：npx skills add google-labs-code/stitch-skills。也可按 README 注册 Stitch Skills marketplace 后安装 stitch-design 插件。使用前需要在代理环境中配置并运行 Stitch MCP 服务器；README 未提供仅安装这一项技能的独立命令。
tmp="$(mktemp -d)"
git clone --depth 1 https://github.com/google-labs-code/stitch-skills.git "$tmp"
mkdir -p ~/.claude/skills
cp -R "$tmp/plugins/stitch-design/skills/extract-static-html" ~/.claude/skills/
rm -rf "$tmp"根据源仓库地址和 Skill 路径自动生成，只复制这个 Skill 的文件夹。如果上文有作者提供的安装方式，请优先按作者说明操作；想只在当前项目中使用，把 ~/.claude/skills 换成项目里的 .claude/skills。
如何使用这个 Skill？
安装后，把下面任意一句发给 Agent 即可触发：
- Extract a static HTML snapshot of http://localhost:3000/profile.
先确保应用在本地运行，并确认 Node.js 环境可加载 puppeteer。向代理提出类似“Extract a static HTML snapshot of http://localhost:3000/profile.”的请求。根据文档流程，在 Puppeteer 快照和浏览器子代理之间做选择；Puppeteer 适合无需登录墙且应用已在本地运行的页面，浏览器子代理适合需要先交互的页面。Puppeteer 示例命令为：npx tsx <SKILL_DIR>/scripts/snapshot.ts --url http://localhost:5173 --output .stitch/home.html --wait 2000。应用无法运行时，可使用文档中的 extract_inline_html.ts 和 post_process.ts 备用流程。
这个 Skill 有哪些优点和局限？
- 输出为自包含 HTML，CSS 和图片可被内联，便于分享或上传。
- Puppeteer 方案解析计算后的样式，文档标注其保真度最高。
- 支持 React、Vue、Svelte、Next.js、Storybook 等多种应用场景。
- 支持多路由、深色模式、全页面高度和移除固定元素等选项。
- 文档要求在选择捕获策略及启动本地服务器后进行用户确认，流程并非完全自动化。
- 主要流程依赖本地运行的应用、Node.js、Puppeteer 和 tsx。
- 浏览器子代理提取大型页面时可能在代理上下文中截断输出。
- 源材料没有提供测试套件、版本兼容矩阵或实际平台验证结果。
这个 Skill 与同类方案有什么区别？
与相关 Skills 并排比较；分数均按同一 FSRS 标准得出。
| Skill | FS 评分 | Star 数 | 最近更新 | License |
|---|---|---|---|---|
| Stitch 静态 HTML 提取器 本页 | 49 · 谨慎使用 | ★ 8.5k | 2 个月前 | Apache-2.0 |
| Stitch React 组件构建器 | 45 · 不推荐 | ★ 8.5k | 2 个月前 | Apache-2.0 |
| Stitch 前端设计系统提取器 | 42 · 不推荐 | ★ 8.5k | 2 个月前 | Apache-2.0 |
| Stitch 提示词增强器 | 49 · 谨慎使用 | ★ 8.5k | 2 个月前 | Apache-2.0 |
| Stitch 设计系统文档生成器 | 45 · 不推荐 | ★ 8.5k | 2 个月前 | Apache-2.0 |
文档将 Puppeteer 快照与浏览器子代理捕获作为两种主要方案：前者适合本地运行且无需交互的页面，计算样式保真度更高并直接写文件；后者适合需要点击或填写表单的页面，但大型输出可能被截断。MockPage.jsx 静态回退流程被定位为应用无法运行时的最后方案。
FollowSkills 如何评估这个 Skill？
文档要求用户在选择策略、启动本地服务器后确认，并声明图像会被内联；脚本包含协议限制、私网 IPv4 拦截、重定向上限、超时和文件大小限制。扣分原因是 allowed-tools 包含 Bash、Write 和 web_fetch，外部资源仍会被请求，未说明敏感数据处理、凭据隔离、完整 DNS/IPv6 SSRF 防护或回滚机制，且 post_process 会原地改写文件。
脚本提供参数校验、超时、并发限制、异常回退、警告和部分机器可读统计，主路径在静态上较连贯。扣分原因是没有提交测试或执行证据，依赖通过 npx/环境安装且版本未固定，跨框架、认证、iframe、CSS 和 JSX 边界覆盖不足；部分失败仅以占位图或警告继续，可能产生不完整结果。
目标场景、两种捕获策略、静态回退方式、参数和若干不适用情形均有说明。扣分原因是触发条件仍较宽泛，未清晰定义隐私页面、复杂交互、跨域资源和动态行为的非适用边界；未提供中文交互支持，且 Stitch MCP、远程资源和 Puppeteer 依赖的网络可达性对中国大陆环境未说明。
SKILL.md 采用策略、前置条件、工作流、参数、框架说明和故障排查的分层结构；仓库材料提供 Apache-2.0、安装方式和示例。扣分原因是该技能没有明确维护责任人、版本策略、变更日志、升级路径或独立依赖清单；文档中的 Strategy B 和脚本实际能力存在覆盖不完全的风险。
技能明确产出内联 CSS 和图像的静态 HTML，并提供 Puppeteer、浏览器交互和 MockPage 回退，产物理论上可直接用于分享或 Stitch 上传。扣分原因是没有文件内的第三方执行证据或代表性输出，动态状态、字体、跨域资源、登录页面和复杂 JSX 仍可能需要人工修补，且浏览器快照与静态 JSX 转换的完整性未经静态材料充分证明。
源代码、参数、校验逻辑和安全处理均可审计，注释解释了部分设计意图。扣分原因是材料未显示针对关键路径的测试套件、CI 结果、固定依赖验证或独立复现报告；只有单一仓库内的实现证据，无法达到多来源或可执行复现标准。
点击维度查看打分理由
证据充分度：低 — 主要依赖静态检查、作者材料或有限演示；适合发现线索，不适合做高风险决策。
查看完整评分方法 →