# Replica Design

Rebuilds an app's design system for a clone: colour roles, type scale, spacing, radius...

- Repository: https://github.com/Jakeschincariol/replica-skill (6967 stars)
- Category: Design
- License: MIT
- Last updated: 2026-10-03
- Runs scripts: yes, review before use

## Install

Claude Code: `npx skills add Jakeschincariol/replica-skill --skill replica-design -g -a claude-code -y`
Codex: `npx skills add Jakeschincariol/replica-skill --skill replica-design -g -a codex -y`
Cursor: `npx skills add Jakeschincariol/replica-skill --skill replica-design -g -a cursor -y`
Gemini CLI: `npx skills add Jakeschincariol/replica-skill --skill replica-design -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add Jakeschincariol/replica-skill`

## Description

Rebuilds an app's design system for a clone: colour roles, type scale, spacing, radius, shadows and every component with its states, as design tokens plus component specs, with original assets instead of the target's logos, icons, illustrations or licensed fonts. Includes a WCAG contrast checker. Use when the user says "match the design", "rebuild the design system", "get the colours and fonts", "make it look like X", "design tokens for my clone", or after /replica-architect.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# replica-design

Reads `replica/recon.md` and the screenshots in `replica/screens/`. Writes
`replica/design/tokens.json` (template in this folder), `tokens.css`, the
Tailwind mapping, and `replica/design/components.md`.

```bash
python3 contrast.py replica/design/tokens.json     # every text pair, WCAG ratio
```

## The rules

What you rebuild is the **system**: the roles, the scale, the patterns, the
way a form or a modal behaves. Those are not ownable, and users expect them.
What you never take:

- **Logos, icons, illustrations, photos, sounds.** Use an open icon set
  (Lucide, Phosphor, Heroicons, Tabler, all MIT or similar) and make or
  commission your own illustrations. Do not trace theirs.
- **Licensed fonts.** If the original uses a paid or proprietary font, pick
  an open one with the same job: Inter, Geist, IBM Plex, Manrope, Source Serif.
- **Their copy.** Every label and empty state gets written fresh.
- **Their brand colour.** Record it as a role (`accent`), use a neutral
  placeholder now, and replica-brand gives you your own. The signature colour
  plus the signature layout is trade dress, and it changes before launch.

## Step 1: measure, do not guess

From the screenshots (zoom in, use a colour picker on the user's machine):

- **Colour roles**, not colours: bg, surface, border, border-input, text,
  text-muted, accent, on-accent, danger, success, warning. Count how many
  greys the app really uses. Usually 5 to 7.
- **Type scale**: sizes, line heights, weights. Snap to a scale (12, 14, 16,
  20, 28, 40 is common). Note the font category, not the font file.
- **Spacing**: measure gaps between elements. It is almost always a 4 or 8
  base. Write the scale.
- **Radius, shadow, motion**: two or three of each.
- **Layout**: max content width, grid, breakpoints, sidebar width, header height.

## Step 2: write the tokens

The rest: https://github.com/Jakeschincariol/replica-skill/blob/HEAD/replica-design/SKILL.md