AI 技能AI 插件【免费下载链接】stitch-skillsA library of Agent Skills designed to work with the Stitch MCP server. Each skill follows the Agent Skills open standard, for compatibility with coding agents such as Antigravity, Gemini CLI, Claude Code, Cursor.项目地址https://gitcode.com/GitHub_Trending/st/stitch-skills点击查看免费下载本指南围绕stitch-design插件中的stitch::extract-static-html技能展开讲解如何把本地运行的前端应用React、Vue、Svelte、Angular、Next.js 等任意框架捕获为单文件、自包含的静态 HTML所有 CSS 内联、图片转 base64、脚本与开发态装饰物被清除可直接分享、存档或作为素材上传 Stitch。读完你将掌握三种提取策略Puppeteer 快照、浏览器子代理、MockPage 静态回退的完整工作流、全部命令行参数与底层处理管线并能在遇到登录墙、懒加载、暗黑模式、图表 Canvas 等场景时精准选用对应开关。技能定位与前置条件stitch::extract-static-html定义在 SKILL.md 中属于 stitch-design 插件关键词包含html-extraction、design、ui-generation。它的核心使命是无论用户说保存这个 HTML把这个页面 mock 下来还是准备上传 Stitch 的静态素材都统一走提取自包含静态 HTML这条路径。技能的前置条件有两层运行环境技能通过 frontmatter 声明了allowed-tools即执行过程中代理可以使用的能力stitch*:*Stitch MCP 的全部工具提取产物最终可交给stitch::upload-to-stitch等技能上传Bash、Read、Write本地脚本执行与文件读写web_fetch需要时抓取远程资源本地环境应用能以本地 dev server 运行如npm run dev且安装有 Node.js 与puppeteer可用node -e require(puppeteer)快速自检缺失时npm install -g puppeteer。产物约定输出到项目下的.stitch/目录如.stitch/home.html与仓库中其他技能extract-design-md产出.stitch/DESIGN.md保持一致的素材约定。第一步选择提取策略必须征求用户确认技能强制要求执行前必须先让用户从两种策略中做选择代理不得自行决定。两种策略的对比如下Strategy APuppeteerStrategy BBrowser Subagent适用场景应用本地可运行、无登录墙需要先与页面交互点击、填表保真度最高——解析后的计算样式computed styles较高——渲染后的 DOM配置成本零——无需 mock零——无需 mock框架兼容任意任意输出直接写文件——无大小限制大页面可能在代理上下文中被截断[!WARNING]检查点——必须用户确认。必须把上表呈现给用户、推荐 Strategy A 为默认方案并等待明确批准后才能继续。不要自行拍板也不要跳过确认直接执行。策略 A 之所以是首选是因为它通过无头 Chrome 拿到的是渲染后、样式已解析的 DOM 快照且直接落盘为文件不受代理上下文长度限制策略 B 则把控制权交给浏览器子代理适合先交互、再捕获的场景但大页面存在输出截断风险附录中给出了规避手段。Strategy APuppeteer 快照推荐策略 A 的完整实现位于 snapshot.ts脚本头注释即声明了它的定位生产级、基于 Puppeteer 的全页 HTML 快照无需 MockPage.jsx兼容任意框架。前置条件应用在本地运行例如npm run dev并记录端口号Node.js 可用puppeteer自检命令见上文。完整工作流启动应用并记录端口。[!WARNING]检查点——必须用户确认。启动本地服务器后必须先暂停并向用户报告 URL 与端口请用户确认应用已正常渲染确认后才能运行快照脚本或启动浏览器子代理。运行快照脚本npx tsx SKILL_DIR/scripts/snapshot.ts \ --url http://localhost:5173 \ --output .stitch/home.html \ --wait 2000其中SKILL_DIR指技能目录即仓库中的plugins/stitch-design/skills/extract-static-html/。多页面——每个路由执行一次npx tsx SKILL_DIR/scripts/snapshot.ts \ --url http://localhost:5173 --output .stitch/home.html --wait 2000 npx tsx SKILL_DIR/scripts/snapshot.ts \ --url http://localhost:5173/pricing --output .stitch/pricing.html --wait 2000 npx tsx SKILL_DIR/scripts/snapshot.ts \ --url http://localhost:5173/dashboard --output .stitch/dashboard.html --wait 2000 --html-class dark清理若 dev server 仅为提取而启动提取完成后应停止该进程或终止后台任务避免残留占用端口。脚本参数详解技能文档给出的核心参数如下Flag默认值说明--url(必填)要捕获的 URL--output(必填)输出文件路径--wait1000网络空闲后的额外等待毫秒数懒加载应用需加大--viewport1280x800视口尺寸格式WIDTHxHEIGHT--html-class—添加到html元素的类如dark--remove-fixedfalse移除 fixed/sticky 元素Cookie 横幅、聊天挂件--full-heightfalse将视口拉伸至整页滚动高度--title—覆盖页面标题建议设为路由路径如/dashboard--auth-script—指向导出默认async (page) void函数的 JS/TS 模块用于登录--inline-canvasfalse把canvasECharts、Chart.js、D3转为 base64img对照 snapshot.ts 的参数解析与校验逻辑parseArgs与validateOptsL74-L238可以补充以下源码级约束与高级参数--wait必须是非负整数否则直接报错退出。--viewport必须匹配WIDTHxHEIGHT且为正整数上限 7680x4320超出即校验失败。--timeout默认60000全局超时最小 1000ms。它是安全网——超时后打印警告、强制关闭浏览器并process.exit(2)防止僵尸 Chrome 进程残留L269-L281。--concurrency默认6资源抓取的并发数范围 1-20。所有图片/CSS 资源的 fetch 都通过浏览器侧的processInBatches分批并行L460-L499。--inline-fonts默认false默认跳过外部字体文件.woff2/.ttf/.eot/.otf避免把大体积字体塞进 HTML开启后一并内联。同源与相对路径的图标字体则默认内联。--remove-selectors逗号分隔的自定义选择器列表逐条querySelectorAll后移除L431-L443。--click捕获前模拟点击指定选择器——先在主文档查找找不到则递归搜索子 frame点击后再额外等待 2000ms 让动画/弹层稳定L367-L395。--json向 stdout 输出机器可读的 JSON 统计样式表数、内联图片数、CSS url 数、SVG/视频/图标数、移除脚本数、耗时、警告列表便于 CI/CD 集成L1443-L1446。另外两点行为细节值得注意网络空闲降级链脚本先以networkidle0等待超时则降级networkidle2再降级domcontentloadedL307-L331对持续有请求的页面也能完成导航。--html-class dark的联动脚本在给html加类的同时会自动设置data-themedarklight同理这对依赖data-theme属性切换主题的组件库尤其重要L400-L411。自动处理管线七步全解析脚本在浏览器内完成一整条自包含化处理链每一步在 snapshot.ts 中都有对应实现汇总如下捕获 CSSOM 全部规则L970-L1014遍历document.styleSheets逐条序列化cssRules合并为#extracted-cssom-bundle注入head。这解决了 Vite dev 模式 Tailwind、CSS-in-JS 动态注入样式无法从textContent读到的问题同时清理包含createHotContext/import.meta.hot的 Vite HMR 样式块并移除会 404 的字体 preload 链接。内联外部样式表L1016-L1081所有link relstylesheet经 fetch 后转为style块并用逐字符解析器extractCssUrls非正则可正确处理引号、转义、畸形url()把其中的相对url()解析为绝对地址保留media属性。内联图片L1086-L1198img src、img srcset、source srcset与内联 style 中的background-image: url()全部转 base64 data URI。失败的srcset条目会被剔除浏览器自动回退到已内联的src——这正是关掉服务器图片仍完整的关键。内联style中的 CSSurl()L1200-L1256对外部字体按--inline-fonts决定取舍其余http(s)、同源、相对路径资源并发抓取后替换。附加资源L1261-L1361SVG 内image href/xlink:href、video poster、favicon含 apple-touch-icon、object data超过 500KB 跳过。移除脚本与开发态装饰物L1366-L1399删除全部script、noscript并按框架选择器清理 dev overlayVitevite-error-overlay、Next.js[data-nextjs-dialog-overlay]、nextjs-portal、Webpack/CRA#webpack-dev-server-client-overlay*、Parcel、Nuxt[data-v-inspector]。输出L1408-L1420取document.documentElement.outerHTML落盘文件无大小限制。此外还有三处容易被忽视的隐性能力iframe 原生内联L655-L870同源/srcDociframe 在浏览器侧递归内联跨域 iframe 通过 Puppeteer frame 循环按嵌套深度排序提取并把子页面body的类与属性同步到占位 wrapper保证嵌套页面结构完整。--full-height全页高度捕获L873-L934扫描全 DOM 找最大可滚动高度含overflow: auto/scroll容器视口拉伸至最大高度 120px 缓冲并强制h-screen/100vh/svh等容器解除视口高度锁定避免长页面被截断。--inline-canvas图表序列化L938-L959canvas.toDataURL(image/png)后以img替换保留className、id与内联样式被污染跨域的 canvas 会静默跳过。--remove-fixed的启发式L414-L428仅移除position: fixed/sticky且满足rect.top 100或rect.height 50的元素——即大概率是悬浮横幅或挂件避免误伤页头导航。VeloUI 等设计工具覆盖层清理L627-L653[data-screenshot-ignoretrue]及 VeloUI 的 pause overlay / probe / scan 元素会被移除。框架适配建议框架建议React Vite开箱即用--wait 1000Next.jsSSR 水合需要--wait 3000URL 为http://localhost:3000/_next/image的img srcset会自动内联为 base64Angularangular/cli / v17ng serve开箱即用默认http://localhost:4200Angular Material / PrimeNG 动画水合与懒加载路由建议--wait 2000Vue / Nuxt开箱即用Svelte / SvelteKit开箱即用Storybook使用 story URL--url http://localhost:6006/?path/story/...SSRWebpack可能需要更长的--wait常见问题排查问题解决方案图片缺失加大--wait服务器停止后图片显示为破图确认srcset已内联——检查日志中的 Inlined N images。srcset抓取失败会自动剔除浏览器回退到已内联的src图标显示为文本 / serif 未样式字体确认脚本已从document.styleSheets捕获 CSSOM第 0 步且同源图标字体font-face以 base64 data URI 内联Next.js/_next/image未内联快照时 dev server 必须保持运行——脚本是从运行中的服务器抓取优化后图片的暗黑模式未生效加--html-class dark输出里有 Cookie 横幅加--remove-fixed页面需要登录使用--auth-script ./auth.ts见下文图表/图形显示为空白框使用--inline-canvas把canvas序列化为 base64imgCannot find module puppeteer执行npm install -g puppeteer登录态页面Auth-Gated Pages对于带路由守卫的应用Vue RouterbeforeEach、ReactProtectedRoute等创建一个在 Puppeteer 会话内执行的小型登录脚本导出默认异步函数即可// auth-myapp.ts import type { Page } from puppeteer; export default async function authenticate(page: Page) { // 示例 1填写并提交登录表单 await page.type(#username, admin); await page.type(#password, password123); await page.click(#login-button); await page.waitForNavigation({ waitUntil: networkidle2 }); // 示例 2直接注入 cookie / localStorage // await page.evaluate(() { // localStorage.setItem(token, mock-jwt-token); // }); // 示例 3通过模块注入调用应用自身登录 APIVue/Vite // await page.evaluate(() { // return new Promise((resolve) { // const script document.createElement(script); // script.type module; // script.textContent // import { useUserStore } from /src/store/modules/user.ts; // import { fetchLogin } from /src/api/auth.ts; // const res await fetchLogin({ userName: Admin, password: 123456 }); // useUserStore().setToken(res.token, res.refreshToken); // window.dispatchEvent(new CustomEvent(auth-done)); // ; // document.head.appendChild(script); // window.addEventListener(auth-done, () resolve(true), { once: true }); // }); // }); }然后这样调用npx tsx SKILL_DIR/scripts/snapshot.ts \ --url http://localhost:5173/#/dashboard \ --output .stitch/dashboard.html \ --auth-script ./auth-myapp.ts \ --inline-canvas \ --wait 5000执行顺序为脚本先导航到--url此时可能被重定向到登录页→ 运行你的登录函数 →携带已认证会话重新导航到原始--url再捕获对应 snapshot.ts L340-L364。登录脚本失败不会中断流程但会产生警告并记录到统计信息中。Strategy B浏览器子代理捕获当需要先与页面交互点击按钮、填写表单、切换标签页再捕获时使用此策略。浏览器子代理拥有完全控制权但大页面的输出可能在代理上下文中被截断。工作流本地启动应用使用浏览器子代理导航到目标页面按需交互点击、滚动、填表提取 DOMdocument.documentElement.outerHTML[!WARNING] 大页面可能被截断处理方式提取前移除style标签document.querySelectorAll(style).forEach(el el.remove())再静态补回样式Tailwind CDN 链接、源码 CSS保存到文件。与策略 A 相比策略 B 不产出自包含文件样式需要手动处理因此技能将其定位为交互优先场景的备选。附录静态回退方案MockPage.jsx[!NOTE] 这是最后手段仅当应用完全无法本地运行依赖损坏、后端缺失、登录墙无法绕过时使用。它要求把 React 组件手工拍平为单个 JSX 文件。任何情况下优先 Strategy A。何时使用应用完全无法本地运行页面需要登录且没有 mock/绕过手段需要导航无法到达的特定 UI 状态错误页、空状态。快速参考npx tsx SKILL_DIR/scripts/extract_inline_html.ts \ --index-css src/css/App.css \ --extra-css index.html \ --outdir .stitch \ --page src/MockPage.jsx:Page.html:Page Title关键参数--no-tailwind非 Tailwind 应用、--html-class dark暗黑模式、--css-files额外 CSS 文件。自动检测Tailwind 配置自动探测依次查找tailwind.config.js/.ts/.mjs/.cjs见 extract_inline_html.ts L817-L823检测到apply指令时自动改用style typetext/tailwindcss。MockPage.jsx 编写规则包含完整布局——header、sidebar、footer先读App.js拍平所有条件分支——只保留一种状态删除所有三元表达式与守卫硬编码所有数据——把{variable}替换为具体值展开.map()循环保留 Logo——使用带本地路径的img后处理脚本会内联它们移除浮动元素——Cookie 横幅、聊天挂件、反馈按钮。源码视角JSX 如何变成自包含 HTMLextract_inline_html.ts 承担了 JSX → HTML 的转换其工程细节值得了解Babel AST 转换而非正则L584-L664优先提取默认导出函数/箭头函数内的 JSXreturn没有默认导出时回退到最大 JSX 树策略。React/SVG 属性映射L556-L576className → class、htmlFor → for、strokeWidth → stroke-width等跳过事件处理器onXxx、key、ref、dangerouslySetInnerHTML与展开属性{...props}Link降级为div并跳过to属性未知大写组件只渲染子节点。style 对象转 CSSL794-L811{ fontSize: 16 }→font-size: 16px0不加单位camelCase 转 kebab-case。Tailwind 装配L873-L936自动注入 Tailwind CDN含forms,container-queries插件、内联tailwind.config转换为tailwind.config ...赋值、把import转link。远程图片内联的安全护栏L251-L403内置SSRF 防护isSafeUrl拦截 localhost、[::1]、127/8、10/8、172.16/12、192.168/16、169.254/16等私网/保留地址、重定向环防护最多 5 跳、超时控制失败资源回退为 1×1 透明 GIF data URI绝不抛出导致全流程失败。后处理Post-ProcessingMockPage 生成的 HTML 中本地图片仍以相对路径引用需要用 post_process.ts 内联npx tsx SKILL_DIR/scripts/post_process.ts \ .stitch/Page.html --base-dir app-directory该脚本扫描 HTML 中的本地图片引用src/poster/data属性、CSSurl()、SVGhref/xlink:href并替换为 base64 data URI。它同样使用逐字符 CSSurl()解析器并额外提供--base-dir解析相对路径的基准目录--dry-run只报告将要内联的内容不改动文件--max-size默认5MB超过该体积的资源跳过并记录--json输出机器可读统计。实现上还做了两项健壮性设计通过同一文件描述符原子地完成 stat、读取与回写消除 TOCTOU 竞态L248-L270、L425-L453MIME 类型由扩展名映射表推导image/svgxml、image/webp、image/avif等L27-L41。与其他 Stitch 技能的衔接提取出的自包含 HTML 是整个设计工作流的关键中间产物代码转设计stitch::code-to-design技能的标准流程正是HTML 提取 设计系统 上传静态 HTML 快照是其输入环节见 code-to-design上传素材提取完成的.stitch/*.html可由stitch::upload-to-stitch技能上传至 Stitch 项目作为设计还原/评审的素材见 upload-to-stitch技能安装作为 stitch-design 插件的一部分可通过仓库 README.md 中记录的 Codex、Claude Code、Cursor 等方式安装启用。总结stitch::extract-static-html的核心价值在于把捕获页面这件事从脆弱的复制粘贴 DOM升级为一条生产级流水线Puppeteer 拿渲染后 DOM → CSSOM 全量序列化 → 图片/字体/图标 base64 内联 → 脚本与开发 overlay 清除 → 单文件落盘。使用时记住三条主线首选 Strategy A 并先获用户确认遇到登录墙用--auth-script遇到图表用--inline-canvas遇到暗黑模式用--html-class dark只有当应用完全无法运行时才退回到 MockPage extract_inline_html.tspost_process.ts的静态方案。所有实现细节均可在仓库 scripts 目录 中对照阅读。赞分享AI 技能AI 插件【免费下载链接】stitch-skillsA library of Agent Skills designed to work with the Stitch MCP server. Each skill follows the Agent Skills open standard, for compatibility with coding agents such as Antigravity, Gemini CLI, Claude Code, Cursor.项目地址https://gitcode.com/GitHub_Trending/st/stitch-skills点击查看免费下载相关推荐stitch-skills 实战用 .stitch/next-prompt.md 接力棒驱动 Stitch 自动化建站循环stitch skills 实战用 .stitch/next prompt.md 接力棒驱动 Stitch 自动化建站循环 本文以 stitch skillsAI 技能AI 插件Angular 设计系统逆向提取实战基于 stitch-skills 的 extract-design-md 模式指南Angular 设计系统逆向提取实战基于 stitch skills 的 extract design md 模式指南 导读 本文面向需要从现有 AngulaAI 技能AI 插件brpc 改造 ubrpc 接入层实战从 43 台缩容到 8 台的 4 万 QPS 迁移案例与性能对比brpc 改造 ubrpc 接入层实战从 43 台缩容到 8 台的 4 万 QPS 迁移案例与性能对比 本篇技术指南以 brpc 仓库官方案例文档 docs/AI 技能AI 插件上一篇Kubernetes SIG Node 2020 年度报告解读社区运营、成员治理与 KEP 特性毕业全景下一篇用 xterm.js node-pty 构建终端 UI从单终端到多终端池的完整工程实践创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考