Guide · Agent skill
How to use the replica-design agent skill: tokens and contrast checks
Updated · written with AI from the project's own documentation and checked against our catalogue data
The replica-design skill is a set of instructions and bundled files that an AI coding agent loads when you ask it to rebuild the design system of an app you are cloning or closely matching. It helps front-end developers, designers and teams turn screenshots into named colour roles, type scale, spacing, radius and shadow values, plus component specs with their states. After this guide you will know what the skill does, how to install it, how to trigger it with plain requests and what it needs to run safely.
Replica Design System BuilderJakeschincariol/replica-skill · MIT Download the skill Quick start
- 1Install the skill. Download the ZIP from this page, unzip it and place the folder in ~/.claude/skills/ or a project's .claude/skills/ folder, or upload it under Settings → Capabilities → Skills in the Claude apps.
- 2Add screenshots. Place screenshots of the target app in replica/screens/ so the agent can measure colours, type, spacing and layout.
- 3Provide the recon file. Make sure replica/recon.md exists, produced by the related replica-architect skill, so the agent knows the screens and components.
- 4Ask for the design system. Use a natural request such as "rebuild the design system" or "get the colours and fonts" and let the agent write the tokens and component specs.
- 5Run the contrast check. List every text and background pair in tokens.json and run python3 contrast.py replica/design/tokens.json to get WCAG ratios.
- 6Fix failures in the tokens. Adjust the colour values in tokens.json until there are zero AA failures, rather than overriding colours per component.
- 7Build the primitives. Build components in isolation, such as a /design route or Storybook, and screenshot the page as the design system check.
What the replica-design skill makes the agent do
An agent skill is a folder of instructions (SKILL.md) and supporting files that the agent reads when a request matches the skill's description. This one reads replica/recon.md and the screenshots in replica/screens/, then writes replica/design/tokens.json, tokens.css, a Tailwind mapping and replica/design/components.md.
The skill works in steps: it measures colour roles, the type scale, spacing, radius, shadows, motion and layout from the screenshots; it writes the tokens as a JSON file and CSS custom properties; it writes a spec for each component and its states; and it builds the primitives in isolation before any screen. It also runs contrast.py against every text and background pair you list.
- Colour roles such as bg, surface, border, text, text-muted, accent, on-accent, danger, success and warning, rather than raw colours
- A type scale snapped to a scale, with font category noted
- Spacing scale, usually on a 4 or 8 base
- Component specs covering variants, sizes, states, tokens, accessibility and where each is used
- A contrast report with the target of zero AA failures
Install the replica-design skill
Download the ZIP from the skill's page on this directory and unzip it. The package contains contrast.py, SKILL.md and tokens.json. Put the unzipped folder in one of two places: ~/.claude/skills/ to make it available across your projects, or a project's .claude/skills/ folder to keep it with one codebase.
If you use the Claude apps, you can instead upload the skill under Settings → Capabilities → Skills.
- Personal install: place the folder in ~/.claude/skills/
- Project install: place the folder in the project's .claude/skills/ folder
- Claude apps: upload under Settings → Capabilities → Skills
Prepare your inputs before you ask
The skill depends on two inputs. First, put screenshots of the target app in replica/screens/. Second, provide a prior recon file at replica/recon.md. The source names the related replica-architect skill as the usual way to produce that recon file, and the skill's own instructions point to /replica-architect as a predecessor.
Without screenshots or access to the target app, the skill has nothing to measure. Measurement is done from the screenshots, using a colour picker on your own machine.
- replica/screens/ contains screenshots of the target app
- replica/recon.md exists (from replica-architect)
- Python 3 is installed for contrast.py
Trigger the skill with natural requests
The skill's description lists phrases that should activate it. You do not need special syntax. Describe what you want in ordinary language, and mention the design system or the look you are matching.
The skill also activates after /replica-architect, so you can chain the two in a session.
- "Match the design"
- "Rebuild the design system"
- "Get the colours and fonts"
- "Make it look like X"
- "Design tokens for my clone"
Run the contrast check
Add a pairs list to tokens.json covering every text and background combination the app uses, then run the bundled script. It reports the WCAG ratio for each pair. The skill sets AA as the floor: 4.5:1 for body text and 3:1 for large text, input borders and focus rings. The script exits with code 1 on a failure, so fix problems in the tokens rather than per component.
python3 contrast.py replica/design/tokens.jsonStay within the skill's rules on assets and branding
The skill is explicit about what you do not take from the original app. You do not copy its logos, icons, illustrations, photos or sounds, and you do not use its paid or proprietary fonts. You rewrite its labels and empty states. The brand colour is recorded as a role called accent, with a neutral placeholder until your own brand is set.
The skill suggests open alternatives: icon sets such as Lucide, Phosphor, Heroicons and Tabler, and open fonts such as Inter, Geist, IBM Plex, Manrope and Source Serif.
- Replace logos, icons and illustrations with open or your own assets
- Swap paid fonts for open fonts with the same job
- Write all copy fresh
Safety notes: scripts and network
The skill runs a script: contrast.py, which uses only the Python 3 standard library and checks colour pairs in your token file. It does not use the network. Review the script before running it, as you would any code an agent executes.
The contrast script checks only the colour pairs you list in tokens.json. It is not a full accessibility audit of the interface.
- Runs scripts: yes (contrast.py)
- Uses network: no
- Checks only listed pairs, not the whole interface
What people use it for
- Developers building a close lookalike of an existing app's interface who want a consistent token system
- Front-end teams checking contrast on a colour palette before shipping
- Designers producing a systematic token and component inventory from existing screenshots
- Teams mapping tokens into Tailwind so components use role names instead of raw hex values
Frequently asked questions
Is the replica-design skill free?
The source lists the licence as MIT. It does not state pricing for the Claude apps or any other service, so check those separately.
What do I need to run replica-design?
You need Python 3 for contrast.py, screenshots of the target app in replica/screens/, and a recon file at replica/recon.md from the related replica-architect skill. A front-end stack such as Tailwind, Radix, shadcn/ui or React Aria is optional for the primitives step.
Where do I install the skill?
Unzip the downloaded ZIP into ~/.claude/skills/ for personal use or a project's .claude/skills/ folder for one project. In the Claude apps, upload it under Settings → Capabilities → Skills.
Does replica-design make a legally safe copy of an app?
No. The skill is a design-system aid. It tells you to avoid the original brand's logos, icons, illustrations, paid fonts, copy and signature colour and layout. Copying a product's look may still raise trade dress or IP concerns, so take legal advice if that matters to you.
Does the contrast checker audit my whole interface?
No. contrast.py checks only the colour pairs you list in tokens.json. Certified accessibility audits need a wider review.
What is the difference between replica-design and replica-architect?
The source says replica-design reads the recon file from replica-architect and builds the design system from screenshots. The source does not describe replica-architect's full scope, so see its own documentation for that.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use replica-design if you are building a close lookalike of an existing app and want consistent design tokens, component specs and a WCAG contrast check from screenshots. Pick something else if you need a legally safe brand copy or a certified accessibility audit, since the skill itself avoids brand identity and checks only listed colour pairs.
Download the skill