Replica Design
Rebuilds an app's design system for a clone: colour roles, type scale, spacing, radius...
Install
npx skills add Jakeschincariol/replica-skill --skill replica-design -g -a claude-code -y- Repository
- Jakeschincariol/replica-skill7k
- Category
- Design
- Updated
- 1mo ago
- License
- MIT
- Context cost
- Lightabout 858 tokens
- Runs scripts
- Yes, review before use
What it does
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.
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.
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.
