analyze-reference
提取模式,不克隆。此技能读取一个公开页面(最多再加两个用户指定的内部链接),以抽象术语描述其构建方式和动效原理,并写入 patterns/<slug>.md。不存储该网站的任何内容:无图像、视频、3D、Logo、文本、代码、品牌字体名称或颜色代码。截图仅为 .cache/analyze/ 下的临时工作资料(已加入 gitignore),并在最后阶段始终删除。
此为仓库自身工作流的指导,不构成法律建议。在商业化前请咨询知识产权律师(参见 docs/roadmap.md)。
输入
url(必需):一个公开的 http(s) 页面。任何需要登录、付费墙或机器人验证的内容均不在范围内。--focus "..."(可选):用户对该网站的喜好描述,使用用户自己的语言。用于决定表的哪些部分获得深入分析。记录在前置元数据中(如果省略则为none)。- 最多 2 个内部链接(可选,同一站点):按相同步骤分析每个链接,并合并到同一张表中。绝不进一步爬取。
Slug:从主机名派生(去掉 www.,点号替换为连字符,例如 example-com)。如果用户指定了 slug,则向 recon.mjs 传递 --slug。如果 patterns/<slug>.md 已存在,则在替换前询问。
所有命令从仓库根目录运行。脚本位于 .claude/skills/analyze-reference/scripts/;每个脚本均支持 --help。
步骤
按顺序执行。无论步骤 1 到步骤 5 的结果如何(成功、中止或错误),第 6 步(清理)都会执行。将其视为 finally 块。
1. 检查权限(在使用浏览器访问网站之前)
node .claude/skills/analyze-reference/scripts/check-robots.mjs <url>
该脚本评估 robots.txt 对于 *、ClaudeBot、anthropic-ai 和 GPTBot 的规则,以及 X-Robots-Tag 头、<meta name="robots"> 和文本及数据挖掘保留许可(TDMRep:/.well-known/tdmrep.json、tdm-reservation 头和 meta)。退出代码:0 允许,1 禁止,2 无法验证。
- 退出代码
1或2:停止。不生成表,不运行侦察。向用户说明脚本打印的确切原因。退出代码2(5xx、超时、文件不可读)为保守中止:声明权限无法验证;不循环重试,也不寻找其他途径。 - 对每个额外内部链接也执行此检查。
robots.txt返回 404 视为允许;返回 401/403 视为禁止。
2. 侦察
node .claude/skills/analyze-reference/scripts/recon.mjs <url> [--slug <slug>]
Playwright(无头 Chromium;如果未安装 Playwright 自带的浏览器,请设置 QA_CHROME_PATH 或 CHROME_PATH)加载页面,滚动页面,并写入 .cache/analyze/<slug>/recon.json 和 screens/{375,768,1440}-<n>.png。JSON 仅包含结构和统计信息:按顺序排列的区域及其高度和标题/字数统计(不含文本),聚合的类型大小、行高、间距、网格/弹性布局使用情况,按衬线/无衬线/等宽/显示分类的字体(不命名),颜色角色描述(不含代码),检测到的库及其证据和置信度,网络域名,Canvas/WebGL 存在情况,以及动效观察(显现、固定、视差、滚动擦除、粘性标题、缓动滚动)。
滚动容器。 某些页面使文档高度为一个视口,并滚动内部包装器。recon.mjs 可检测到这一点(可见的 overflow-y: auto|scroll|overlay 元素至少覆盖视口 60% 且具有最大滚动范围),并将其用于截图、动效采样和滚轮探测。recon.json 记录 scroller: { kind: "document" | "container", scrollHeightPx, clientHeightPx },并且 viewports[w].docHeightPx 为实际使用的可滚动高度。读取证据时请检查 scroller.kind。此启发式方法仅为记录,并非保证:如果截图显示的是侧面面板或模态框而非页面,请在表中说明。不涵盖:嵌套或水平滚动器,以及由滚轮事件驱动但无可滚动元素的场景。页面也可能在某个宽度停止滚动(例如平板断点);此时在该宽度下截取一张截图即可。
在代理后面。 当设置了 HTTPS_PROXY 或 HTTP_PROXY(云会话)时,check-robots.mjs 和 recon.mjs 会使用 NODE_USE_ENV_PROXY=1 重新执行自身,以便 Node 的 fetch 使用该代理,并且 recon.mjs 会将代理传递给 Chromium(回环地址保持直连)。无需额外标志;Node 的实验警告行被隐藏。证书按惯例来自 NODE_EXTRA_CA_CERTS;脚本从不读取或嵌入证书。无代理则一切不变。
退出代码 3 表示页面无法分析(登录表单、机器人验证、HTTP 401/403/429、无法访问)。停止:不生成表,告知用户原因(对于登录页面:"该页面不是公开的")。绝不尝试规避阻止、解决验证、登录或更改用户代理。
3. 读取证据
- 完整读取
.cache/analyze/<slug>/recon.json。 - 使用“读取”工具查看截图,至少每个宽度查看几张,以判断数字无法体现的内容:首屏构成、节奏、密度、布局在何处打破网格、哪些元素在动。截图仅供你自己查看;绝不复制、嵌入或引用。
- 置信度:全局或 DOM 类加上匹配的脚本名称为
高;仅满足其一为中;仅有网络域名为低。捆绑到应用代码中的库仅显示为脚本名称匹配,因此标为“可能”并保持侦察报告的置信度。
4. 编写表
将 patterns/_template.md 的结构复制到 patterns/<slug>.md。填写前置元数据(url、slug、今天的日期为 YYYY-MM-DD、focus、libraries 为名称列表)和每个部分,使用你自己的语言:
| 部分 | 内容 |
|---|---|
| 摘要 | 这是什么类型的页面,为何值得学习 |
| 区域图 | 有序区域:角色、以视口计的大致高度、布局思路 |
| 首屏 | 首屏类型、第一屏的构成、加载时哪些元素在动 |
| 网格与间距 | 列系统、内容宽度类、间距比例(基本单位)、垂直节奏 |
| 排版 | 通用类别("大型怪诞显示字体 + 衬线正文")、比例、字重、行高和字距习惯、大小写 |
| 调色板 | 角色和色调("接近黑色的背景、温暖的饱和强调色")、对比特性、主题 |
| 密度 | 每屏内容量、空白、每部分的思路数、文本与媒体平衡 |
| 动效 | 表格:时刻、触发方式(加载、滚动、悬停)、类型(显现、固定、视差、滚动擦除、页面过渡、着色器/3D)、技术和库、置信度 |
| 库 | 检测到的库及其证据类和置信度 |
| 可取之处 / 应避免之处 | 可在原创落地页中复用的模式,以及过于特定或有风险模仿的内容 |
动效条目:每个相关效果一行。固定区域内内容随滚动动画的部分为触发方式 滚动、类型 固定+滚动擦除,并附上库及其置信度。悬停行为不由侦察测量;请查看截图或 hoverTransitionElements 计数,在推断置信度为低时声明。
5. 验证
npm run validate:patterns
必须通过。如果报告了 文件:行 违规,请进一步抽象重写那些行并再次运行。绝不削弱验证器,也绝不使用 > note: 行偷偷复制内容:该前缀仅使你自己的简短评论免受长引号规则的约束。
可选,仅当步骤 3 后仍有标记为有趣的动效无法解释时:npx rea-agents analyze-javascript-application <url>(重操作,从不强制)。仅记录书面结论("滚动链接的相机路径由时间线库驱动,中等置信度"),绝不记录其输出、代码或转储。如果需要你不具备的网络访问权限,则跳过。
6. 清理(始终执行)
node .claude/skills/analyze-reference/scripts/recon.mjs --cleanup <slug>
在成功后、任何步骤中止后以及出错后运行。然后确认 .cache/analyze/<slug> 已删除,并且 git status 不显示网站的任何内容(成功时仅显示 patterns/<slug>.md)。recon.mjs 在失败时也会删除自己的文件夹,但你仍需运行清理步骤。
7. 向用户报告
说明分析了什么、表的路径、具有置信度的库、任何无法确定的内容,以及必须在 PR 中由人工审查表。若中止:说明原因,以及未生成表。
抽象规则(严格)
绝不在表、表的聊天摘要、提交或任何版本化文件中包含以下内容:
- 网站的文本:标题、正文、微文案、替代文本、元描述(仅页面标题和网址允许)。
- 图像、视频、字体、3D 模型或图标网址,以及任何资源文件。
- 源代码、标记、CSS、JS 或着色器片段,即使经过精简或编辑。
- 十六进制、
rgb()、hsl()或其他颜色代码。按角色和色调描述。 - 品牌或专有字体名称。使用通用类别。
- 标识、品牌标记、插图。
像设计师向同事简要介绍那样编写模式:"固定的陈述区域,内容在约一个额外视口中滚动擦除",而非标记的转录。如果不确定某个细节是内容还是模式,则将其省略。
中止情况
| 情况 | 操作 |
|---|---|
robots.txt 禁止 *、ClaudeBot、anthropic-ai 或 GPTBot 访问路径 | 在步骤 1 停止,报告匹配规则,不生成表 |
TDM 保留许可(TDMRep 文件、头或 meta,或 robots.txt 指令) | 在步骤 1 停止,报告,不生成表 |
X-Robots-Tag 或 meta robots 中包含 noai、noindex 或 none | 在步骤 1 停止,报告,不生成表 |
| 权限无法验证(5xx、超时、文件不可读) | 在步骤 1 停止,声明"无法验证权限",不生成表 |
| 登录表单、付费墙、HTTP 401/403/429、机器人验证 | 在步骤 2 停止,声明页面非公开或阻止自动化浏览器,不生成表;不规避 |
| 网址无法访问或非 2xx 响应 | 在步骤 2 停止,报告错误,不生成表 |
| 验证持续失败 | 通过进一步抽象修复;如果无法在不失去要点的情况下通过,则声明并写入空表 |
在所有中止情况下执行步骤 6。
署名
侦察方法(多个宽度的截图、DOM 结构、计算样式、交互和滚动观察)改编自 JCodesMore/ai-website-cloner-template 中 clone-website 技能的侦察阶段,MIT 许可证。仅复用了侦察阶段的思路并针对抽象描述进行了重写;不包含任何代码,也不包含其资源下载或重建阶段。