Skip to content
Get packs

Replica Design System Builder

Rebuilds an app's design tokens and component specs with original assets, plus a WCAG contrast checker

Source Download skill
Repository
Jakeschincariol/replica-skill
Stars
7,057
Licence
MIT
Files
3 files

What it does

When installed, the agent turns screenshots and notes about an existing app into a structured design system: named colour roles, a type scale, spacing, radius and shadow values, and written specs for each component and its states. It writes these as a JSON token file, CSS variables and a Tailwind mapping. It also runs a bundled script that checks every text-on-background colour pair against WCAG accessibility contrast ratios, and it tells the user to replace the original brand's logos, icons, illustrations, paid fonts and copy with open alternatives.

Great for

  • Developers building a clone or close lookalike of an existing app's interface who want a consistent design system
  • Front-end teams that need accessibility contrast checks on a colour palette before shipping
  • Designers who want a systematic token and component inventory from existing screenshots

Skip it if

  • Producing a legally safe copy of a brand's identity: the skill itself says to avoid their logos, signature colour and layout, so it is a design-system aid rather than a full replica, and copying a product's look may still raise trade dress or IP concerns
  • Users without screenshots or access to the target app, since the skill depends on measuring visual references and on a prior recon step
  • Projects that need certified accessibility audits: the contrast script checks only colour pairs listed in the token file, not the full interface

Try asking

  • “Match the design of this app and give me the colour roles, type scale and spacing as design tokens”
  • “Rebuild the design system for my clone and generate tokens.css and a Tailwind config”
  • “Run the contrast checker on my token file and fix any WCAG AA failures”
  • “Write component specs with states for buttons, inputs and modals based on these screenshots”
Step-by-step guide: how to use Replica Design System BuilderInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 3 original files, the MIT licence and an attribution note.

    replica-design.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip replica-design.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip replica-design.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Run the contrast checker after every palette change, including rebrands, and keep a pairs list in tokens.json so every text and background combination is covered
  • Choose open-licence icon sets and fonts (for example Lucide, Inter or IBM Plex) and review any substitutions yourself, since the skill's guidance is general and not legal advice
  • Read the generated components.md and primitives before building screens, and check colour values against the screenshots rather than trusting estimates

What's inside

  • contrast.py
  • SKILL.md
  • tokens.json

Redistributed unmodified from Jakeschincariol/replica-skill under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-11-02. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.