Web Replica

输入任意网址,按证据纪律高保真复刻网站前端页面:字体/图片/视频/动效全部使用从原站抓取的真实素材, 逐模块开发、逐模块截图比对验收,严禁用调参拟合冒充还原。当用户给出一个 URL 并要求 "复刻这个网站"、"照着这个做一个"、"还原这个页面/动效/效果"、"把这个网站扒下来"、 "做一个一模一样的"、"clone/replicate this site",或要求提取某网站的字体/背景视频/动效素材时, 都应使用本 skill。也适用于对已有复刻成果继续打磨、比对、补模块的请求。不适用于:从零设计新网页(无参考站)、普通前端开发、只截图不复刻。

7 stars 1 forksOther

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add chusimin/web-replica --skill web-replica

Manual install

git clone --depth 1 https://github.com/chusimin/web-replica.git /tmp/web-replica
mkdir -p ~/.claude/skills
cp -r /tmp/web-replica/. ~/.claude/skills/web-replica

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# Web Replica — 前端网站高保真复刻

把一个线上网站复刻成本地可运行的高保真副本。核心交付:单文件或小型静态项目 + 真实素材 + 验收工件。

## 核心思想(违背它们 = 返工的根源)

1. **证据先于实现**:源码、真素材、抽帧比对 > "看起来像"。先证明每个视觉效果是什么机制产生的,再动手写。
2. **禁止补偿调参**:绝不用改亮度/色相/位置/速度来掩盖"没拿到真素材/没搞清机制"。原站的颜色通常烤在素材里(视频/图片自带颜色),滤镜拟合永远差一截,且用户一眼能看出来。
3. **基线先于打磨**:先让每个模块以正确架构+真素材跑起来并通过比对,再谈美化。
4. **渲染后的 DOM ≠ 源码内容**:文案必须从 SSR 源码/接口提取,靠截图誊抄必然出错。
5. **单帧截图 ≠ 验证通过**:动效、滚动、交互、整页各是独立的验证维度。
6. **优先选无头能自验的技术**:同一效果能用 canvas 2D/CSS/video 复现就别用 WebGL——
   前者你能自己截图确认,后者在无头里空白、只能靠猜(见 [references/headless-limits.md](references/headless-limits.md))。

## 三步法与文件地图

复刻的骨架是 **拆解 → 归因 → 还原**,各有一本手册,按需读:

| 环节 | 手册 | 干什么 |
|---|---|---|
| **拆解** | [references/deconstruction-taxonomy.md](references/deconstruction-taxonomy.md) | 把页面系统性拆成 12 个维度,每维给实测探针 |
| **归因** | [references/attribution.md](references/attribution.md) | 每个效果是谁产生的(video/canvas/CSS/Lottie),消融确认 |
| **还原·具体效果** | [references/effects-cookbook.md](references/effects-cookbook.md) | 逐效果:识别→归因→**还原技术+工具+代码骨架**+保真度+坑(水波纹/滚动模糊列/背景视频/showreel/磁吸/tilt…) |
| **还原·架构** | [references/architecture-patterns.md](references/architecture-patterns.md) | 层叠背景交叉淡化、sticky pin、反色导航、当前屏判定、案例屏布局 |
| **素材** | [references/asset-capture.md](references/asset-capture.md) | 字体/图片/**签名视频流**/文案的抓取与校验 |
| **美的标准** | [references/aesthetic-standards.md](references/aesthetic-standards.md) | 质感门槛:物理动效要柔、文字压图跨界翻色、背景要呼吸(ken burns)、缓动/层次/排版精度 |
| **无头盲区** | [references/headless-limits.md](references/headless-limits.md) | 什么能自验、WebGL 效果如何交给用户真机确认 |

Read the full skill on GitHub

Details

Skill name: web-replica
Repository: chusimin/web-replica
Repo updated: 3 July 2026

FAQ

What does the Web Replica skill do?

How do I install the Web Replica skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add chusimin/web-replica --skill web-replica. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Web Replica popular?

It lives in chusimin/web-replica, which has 7 GitHub stars and 1 forks.

Related skills

Config Guard

jzOcb/config-guard

Prevent OpenClaw config changes from crashing the gateway. Auto-backup, schema validation, critical field checks, and auto-rollback. Use before any config.apply, config.patch, or openclaw.json edit.

Other

Salary Negotiation Skill

yanliudesign/salary-negotiation

薪资谈判教练。模拟前 FAANG 招聘官 + 薪酬策略师，把「拿到 offer → 签字」这一步拆成 6 个动作：Offer 诊断（Base / RSU / Sign-on / Bonus 每项标 LOW/MED/HIGH leverage）→ 谈判杠杆图（我的力量 / 招聘官的力量 / 弱点）→ 策略排序（Base → RSU → Sign-on → Bonus，按 context 调整）→ 脚本生成（电话 / 邮件 / 招聘官回话模拟）→ Counter 模拟（"这是最好的了" / "预算固定" / "会考虑其他候选人" 三种硬回答）→ 最终建议（要什么 / 别推什么 / 何时停）。三步：贴 offer → 说 context（有没有竞争 offer / deadline / 级别 / 风险偏好 / 最看重什么）→ 自动生成并打开一份 HTML Negotiation Playbook。关键词：salary negotiation, offer negotiation, comp negotiation, RSU, sign-on, base salary, counter offer, competing offer, TC, total comp, 薪资谈判, offer 谈判, 谈薪, 反 offer, 加薪, 谈 package, levels.fyi, 招聘官话术,

Other

Craft Artifact

zhoulan-ai/craft-artifact

當使用者說「產成文物」「做成文物」「產出文物」「生成文物」（或任何含「文物」的產出指令）時，必須使用此 Skill，把當次討論的分析、企劃、系統說明或紀錄，產成一份高水準的單檔 HTML 頁面。即使沒說「文物」二字，只要使用者要求「做成 HTML」「做成一頁讓我看懂」「整理成一頁報告」等給人閱讀的頁面型產出，也應使用。不適用於：純程式碼交付、獨立的互動工具型頁面（計算機、遊戲、表單系統）；共編文件、投影簡報、即時數字頁、設計畫面改用 Artifact 平台類型（見本檔「先選載體」）。

Other

Openclaw Genpark Visual Sleuth

Alpha-Park/openclaw-genpark-visual-sleuth

OpenClaw GenPark visual evidence chain and spatial bounding consistency auditor for synthetic artifact detection.

Other

Google Trends

terryds/google-trends-skill

Fetches Google Trends data including daily trending topics, real-time trends, interest by region, related topics, related queries, and autocomplete suggestions. Use when the user asks about trending searches, search popularity, keyword trends, or Google Trends data.

Other

Openclaw Genpark Sentinel Flux

Alpha-Park/openclaw-genpark-sentinel-flux

OpenClaw GenPark Sentinel Flux - CUSUM drift anomaly detector and autonomous circuit breaker with Holt linear trend forecasting.

Other

Browse the most popular Claude skills, all other skills, or write your own with the skills generator.