在任意框架接入公共外壳
第一步：把 site-shell/tokens.css 与 site-shell/shell.css 复制进本站产物（例如 assets/al-tokens.css 与 assets/al-shell.css），在根元素加 class="al-shell"。不要引用中心 CDN：公共 CSS 故障不应拖垮全部站。
第二步：从 site-shell/url.ts（或零依赖运行时 assets-src/al-url.mjs）调用 createUrlHelper({basePath, siteOrigin, siteId})，用它生成所有链接、资源、API 前缀与健康路径。子路径模式重新执行 npm run build:basepath，检查产物内出现 /sandbox/<site>/assets/ 而非硬编码 /assets/。
第三步：按 site-shell/header-footer.html 的结构落地 64px 顶栏（画布型 48px）、面包屑、标题＋用途＋本地/云端标签、工作区、至多 3 个相关操作与统一页脚。每个输入都要有可见 <label>，错误放在字段下方并用 aria-live="polite" 播报状态。
第四步：统计只调用 window.ALAnalytics?.emit(name, fields)；事件限于 tool_view / tool_start / tool_success / tool_error / result_download / result_copy / related_click，字段限于白名单。删除统计脚本后工作区仍须可提交并得到结果。
第五步：参考 reference/a-file.html、reference/b-split.html、reference/c-canvas.html 实现空 / 忙 / 成功 / 错误（含取消）四态。真实能力由各项目自己实现；本教程不声称任何浏览器宽度或真机验证。