К основному содержанию
скилл CX Codex

replica-diff — скилл для Claude Code: что делает и как установить

Оценивает готовность клона приложения к оригиналу: считает паритет функций по матрице и находит структурные отличия в вёрстке без учёта цветов.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓
npx skills add Jakeschincariol/replica-skill --skill replica-diff -a claude-code
Открыть на GitHub

Что делает replica-diff

Скилл сопоставляет клон веб-приложения с исходным сервисом через два скрипта на стандартной библиотеке Python без сторонних пакетов. Скрипт parity.py разбирает таблицу replica/features.csv и рассчитывает общий балл: обязательные функции получают вес 3, важные — 2, второстепенные — 1, а частичные реализации дают половину веса. На выходе формируется список недостающих возможностей в порядке сборки.

Второй инструмент, imgdiff.py, анализирует скриншоты экранов (в разрешении 1440x900 для десктопа или 390x844 для мобильных). Он преобразует снимки в карты границ и сравнивает сетку блоков, игнорируя цвета оформления. Любая смена палитры не снижает оценку, если структура интерфейса и иерархия элементов сохранены. Для локальных регрессий клона доступен режим --mode pixel.

Итоговый отчёт сохраняется в файл replica/parity.md. Если пропущена хоть одна критическая функция с весом must или остался открытый баг S1, инструмент помечает проект как не готовый к релизу (not shippable). Для работы понадобятся только готовые скриншоты экранов и заполненная CSV-таблица.

Какие задачи решает

  • рассчитать процент готовности функционала по матрице возможностей
  • найти структурные сдвиги интерфейса без оглядки на новую цветовую схему
  • составить список недостающих фич в порядке очерёдности разработки
  • проверить проект на соответствие критериям готовности к релизу

Примеры запросов агенту

  • Проверь паритет функций клона с оригиналом по таблице replica/features.csv
  • Насколько мой клон сейчас близок к оригиналу и что ещё нужно сделать?
  • Сравни скриншоты экранов в replica/screens и покажи различия в вёрстке

Как установить replica-diff

1Через Skills CLI (Vercel)

npx skills add Jakeschincariol/replica-skill --skill replica-diff -a claude-code

2Вручную: положить файлы

~/.claude/skills/replica-diff/SKILL.md

Папка скилла целиком; для одного проекта — .claude/skills/replica-diff/

По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов

Из того же набора10

replica-entrepreneur Читает публичные отзывы о приложении, которое вы копируете, и превращает жалобы пользователей в план доработок и угол позиционирования. CX Codex +1 634установок replica-test Проверяет все пользовательские потоки клона, создаёт план тестирования, запускает e2e-проверки и оформляет найденные баги. CX Codex +1 633установок replica-design Воссоздаёт дизайн-систему приложения по скриншотам для клона: токены, стили и спецификации компонентов. Нужен, когда интерфейс должен повторить структуру и поведение исходного. CX Codex +1 630установок replica-build Собирает приложение экран за экраном по карте разведки: сначала оболочка, потом сквозной поток, потом каждый экран со всеми состояниями. Пригодится, когда нужно повторить чужой продукт своим кодом. CX Codex +1 622установок replica-launch Готовит материалы для запуска копии приложения: лендинг, цены, листинг магазинов и план выхода. Нужен после исследования позиционирования и бренда. CX Codex +1 619установок replica-architect Планирует стек, схему базы и маршруты API для клона приложения по карте разведки от replica-recon. Пригодится, когда пора переходить от разбора чужого продукта к своему. CX Codex +1 618установок replica-brand Генерирует названия для клона приложения, проверяет их по реестрам, задаёт палитру и вычищает упоминания оригинала из кода. CX Codex +1 617установок replica-deploy Готовит к выпуску клон приложения на собственном домене: проверяет релизные условия, сервисы и DNS. Нужен перед запуском в продакшен. CX Codex +1 616установок

Похожие

argent-screenshot-diff software-mansion Сравнивает скриншоты до и после изменений в UI: ловит сдвиги в раскладке, отступах, цвете и рендере текста. CX Codex +1 25 000установок browser-screenshot-diff ruvnet Сравнивает две записанные браузерные сессии по шагам, скриншотам и accessibility-дереву. Нужен для поиска визуальных расхождений и проверки replay. CX Codex +1 696установок understand-diff Egonex-AI Скилл сопоставляет изменения в Git с графом знаний проекта, чтобы оценить затронутые компоненты и радиус поломки. Пригодится перед ревью пуллреквестов. CX Codex +1 3 600установок diff-analyze ruvnet Анализирует git-дифф перед PR: оценивает риск, классифицирует изменения и предлагает роли ревьюеров. Нужен перед слиянием крупных правок. CX Codex +1 751установок security-diff-scan официальный OpenAI Проверяет пулреквесты, коммиты и диффы рабочей копии на уязвимости. Помогает найти проблемы безопасности в изменённом коде до слияния веток. CX Codex GP ChatGPT 30установок firecrawl-download firecrawl Скилл выкачивает веб-сайт или его разделы в локальные файлы markdown и скриншоты. Помогает подготовить офлайн-документацию для работы агента. CX Codex +1 79 900установок

Рядом в теме «Тесты и QA»

Всё по теме «Тесты и QA» →

Вопросы о replica-diff

Как установить replica-diff в Claude Code?

Выполните команду npx skills add Jakeschincariol/replica-skill --skill replica-diff -a claude-code.

Что делает replica-diff?

Скилл рассчитывает балл паритета функционала между клоном и оригиналом, проверяет различия в макетах по скриншотам и формирует отчёт replica/parity.md.

Требуются ли для работы сторонние библиотеки Python?

Нет, скрипты parity.py и imgdiff.py написаны исключительно на стандартной библиотеке Python и не требуют установки пакетов через pip.

Исходный текст

SKILL.md · MIT
---
name: replica-diff
description: >-
  Compares an app clone against the original: a feature parity score from the
  feature matrix (weighted by must, should, could) with the missing list in
  build order, plus a screenshot layout diff that ignores colour so a rebrand
  does not count against you. Two standard-library Python tools. Use when the
  user says "how close is my clone", "compare it to the original", "what's
  missing", "parity check", "diff the screens", "is it ready", or after
  /replica-test.
---

# replica-diff

Two tools in this folder, both standard-library Python, no installs:

```bash
python3 parity.py replica/features.csv                         # feature parity + missing list
python3 imgdiff.py replica/screens/S07.png replica/clone-screens/S07.png --out diff-S07.png
python3 imgdiff.py a.png b.png --json > replica/diffs/S07.json # for parity.py --visual
python3 parity.py replica/features.csv --visual replica/diffs/*.json --markdown > replica/parity.md
```

## What parity means here

**Parity means it does the same job, not that it looks the same.** The
feature score is the number that matters: can a user do everything they could
do in the original. The layout score checks structure (is the information in
the same places, in the same hierarchy), because that is what makes a switcher
feel at home. It deliberately ignores colour, because replica-brand changes
every colour on purpose. Do not chase pixel parity with the original. Its
exact look is its trade dress, and it changes before launch.

## Step 1: feature parity

Make sure `replica/features.csv` is current: every row's `clone` column is
`yes`, `partial` (with a note), `no`, or `skip` (with a reason). Then:

```bash
python3 parity.py replica/features.csv
```

It weights must 3, should 2, could 1, counts partial as half, leaves out
`skip` rows and rows you added that the original does not have, and prints:
the score, must-haves done of total, each area weakest first, and the missing
list in build order. Must-haves not done means not shippable, and it says so.

## Step 2: layout diff

For each key screen, take two screenshots at the **same viewport** (1440x900
desktop, 390x844 mobile) in the **same state** (same data shape, same tab
open, logged in the same way). The original's come from public pages or the
user's own account, saved in `replica/screens/`. The clone's go in
`replica/clone-screens/`.

```bash
python3 imgdiff.py replica/screens/S07.png replica/clone-screens/S07.png --out replica/diffs/S07.png
```

Layout mode (default) turns both into edge maps, cuts them into a grid, and
compares where things are, scoring only cells with something in them. It
reports the score (matches 90+, close 75+, partly 50+, different), the
regions that differ (in the original's pixel coordinates, biggest first), and
a height difference if the clone's page is much longer or shorter. Retina and
non-retina screenshots compare fine: both are scaled to the same width.

`--mode pixel` is exact comparison. Use it for your own regressions (clone
today against clone last week), not against the original.

## Step 3: behaviour diff

Walk each flow in both apps and compare what the scores cannot see: clicks to
finish the core flow, what happens on errors, what is remembered between
visits, what emails arrive. Fewer clicks than the original is a win. Write
each difference as: flow, original does, clone does, fix or keep.

## Step 4: the report

`replica/parity.md`: overall score, feature score, layout score per screen,
missing features in build order, behaviour differences, and a verdict:

- **not shippable**: any must-have missing, or any open S1 bug
- **shippable**: all must-haves done, feature score 80+, no open S1 or S2
- **better than the original**: shippable, plus fixes from
  replica-entrepreneur. This is the goal. A straight copy has no reason to exist.

Give honest numbers. A clone at 62% is at 62%.

## Output

`replica/parity.md`, the diff images, and the top five things to build next.
Then `/replica-build` for the gaps, or `/replica-entrepreneur` if parity is
there.

© Jakeschincariol · MIT · Jakeschincariol/replica-skill

Смотрите также

Спонсоры проекта

Компании, которые помогают держать аналитику открытой