ClaudeSuperPower
SubmitLog in

web-clone

Skill

网站复刻 / 克隆方法论。USE WHEN 用户说 复刻网站、克隆网站、clone website、抄个站、仿站、 照着这个站做一个、reproduce site、还原某个网页效果、把这个站搬下来改成我的、 复刻某个交互/WebGL/Canvas/Three.js 效果。提供「先拿真源码 → 判路径 → 逆向拆解 → 搭工程 → 替换内容」的可移植决策树，覆盖静态站 / React-Vue-Next 内容站 / WebGL-Canvas 重前端站三大分支，并强制核对任何 AI 二手分析里的可执行代码。

0Frontend

Install

git clone https://github.com/nexu-io/open-design.git ~/.claude/skills/web-clone

What is web-clone?

网站复刻 / 克隆方法论。USE WHEN 用户说 复刻网站、克隆网站、clone website、抄个站、仿站、 照着这个站做一个、reproduce site、还原某个网页效果、把这个站搬下来改成我的、 复刻某个交互/WebGL/Canvas/Three.js 效果。提供「先拿真源码 → 判路径 → 逆向拆解 → 搭工程 → 替换内容」的可移植决策树，覆盖静态站 / React-Vue-Next 内容站 / WebGL-Canvas 重前端站三大分支，并强制核对任何 AI 二手分析里的可执行代码。

What this can do

Capabilities declared in this component's own frontmatter — not inferred.

Inherit all session tools

Declares no tool restrictions — inherits every session tool

~63 tokens of context used while enabled, before you invoke anything

Documentation

README · ~5 min read

Web Clone · 网站复刻方法论

把"复刻一个网站"做成可重复的流程。在 Open Design 中，默认在当前项目目录工作：NOTES.md、RECON/、CLONE_REPORT.md、CLONE_AUDIT.md 和最终可预览的 index.html 都应写在当前项目内，除非用户明确指定外部工作目录。

Open Design 环境准备（跑任何 scripts/ 前先看）：

  • 本 skill 的脚本会被 stage 到项目内 .od-skills/<插件目录>/scripts/（skill 前言里有确切路径）。文中命令写的 node scripts/xxx.mjs 按该路径解析，例如 node .od-skills/<插件目录>/scripts/recon-site.mjs ...；RECON/、assets/ 等产物仍写到项目根。
  • 脚本依赖 Playwright。首次在项目里跑之前执行一次 npm install -D playwright（在项目根）；本机装有 Chrome 时脚本会自动走 channel:"chrome"，无需再下浏览器，否则补一句 npx playwright install chromium。不许因为"环境没配好"就跳过脚本改为目测——装依赖只要一分钟。

头号铁律：真源码至上，绝不信 AI 推测的代码

任何 AI 生成的"复刻分析/施工图"，正文的概念骨架可以参考，但里面的可执行代码块默认全是臆造的，必须逐行用真源码核对，否则照抄必崩。

实证（marbles 案例）：一份 AI 分析文档把原站"解析法求光线-球体交点 + 把光学结果编码成位移图、交给 SVG feDisplacementMap 去扭曲真实 DOM"的真架构，臆造成了"ray-marching + SDF + 把 DOM 当纹理采样"——两套完全不同的实现，照抄做不出原效果且慢 N 倍。详见 references/marbles-case.md。

所以第一动作永远是：拿到真源码。

决策树（按顺序走，不许跳）

Reviews

Log in to leave a review.

No reviews yet — be the first.

Explore related

Other things in this space — across every part of the ecosystem, not just skills.

Subagents

All subagents →

code-architect

Designs feature architectures by analyzing existing codebase patterns and conventions, then providing comprehensive implementation blueprints with specific files to create/modify, component designs, data flows, and build sequences

32.8K stars

plugin-validator

Use this agent when the user asks to "validate my plugin", "check plugin structure", "verify plugin is correct", "validate plugin.json", "check plugin files", or mentions plugin validation. Also trigger proactively after user creates or modifies plugin components. Examples: <example> Context: User f

32.8K stars

scan-inventory

Restricted read-only repository cartographer dispatched by the Claude Security scan workflow to partition the tree into components and account for every top-level directory; not for direct invocation or vulnerability research.

32.8K stars