Replica

Use when the user uploads a screenshot of a hero section or landing page (or a URL/description of one) and wants a copy-paste-ready developer prompt to recreate it exactly in a tool like Lovable, Bolt, Replit, or Cursor. Produces prompts with exact hex colors, Tailwind classes, animation timing tuples, and component structure — not vague descriptions.

10 stars 2 forksFrontend & Design

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add Surya17155/Replica --skill replica

Manual install

git clone --depth 1 https://github.com/Surya17155/Replica.git /tmp/Replica
mkdir -p ~/.claude/skills
cp -r /tmp/Replica/. ~/.claude/skills/replica

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# Design-to-Prompt — Hero Section & Full Landing Page Generator

## Overview

This skill turns a UI screenshot (hero section or full landing page) into a complete, copy-paste-ready **developer prompt** at the motionsites.ai level of detail — the kind a senior frontend engineer would write so that an agent (Lovable, Bolt.new, Cursor, Replit, v0, Claude Code) can rebuild the design exactly.

**Output quality is this (never vague):**
- Every color → hex code
- Every font → Google Fonts URL + weight + Tailwind alias
- Every animation → full Framer Motion `initial` / `animate` / `transition` block (delay, duration, ease)
- Every button → tailwind class string, multi-layer box-shadow, icon markup
- Every section → full component with file path

**The skill requires BOTH the screenshot AND any hosted asset URLs (images, videos visible in the design) to produce the final prompt.** It guides the user through generating + hosting those assets first, then embeds the URLs inline at the right places in the final output.

---

## HOW TO USE THIS SKILL

When the user uploads an image/design reference:

1. **Ask Hero vs Full Landing** (if not specified)
2. **Ask Brand Context** (if not provided; fall back to screenshot text)
3. **Run Image Analysis** (silently — internal checklist)
4. **Publish Asset Inventory** (image prompts + video workflow + URL requests)
5. **Wait for all asset URLs** before writing final prompt
6. **Write final code prompt** at motionsites.ai level of detail

Read the full skill on GitHub

Details

Skill name: replica
Repository: Surya17155/Replica
License: MIT
Repo updated: 4 July 2026

FAQ

What does the Replica skill do?

How do I install the Replica skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add Surya17155/Replica --skill replica. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Replica popular?

It lives in Surya17155/Replica, which has 10 GitHub stars and 2 forks.

Related skills

Replicate Webpage

22duxiaoyu/replicate-webpage-skill

Rebuild a webpage from a user-provided URL with high visual and behavioral fidelity, then customize its text, names, images, colors, or branding. Use when the user asks to “replicate this webpage,” “clone this website,” “复刻这个网页,” recreate a reference site, or reproduce a page’s observable layout, responsive behavior, animations, and interactions in a local codebase.

Frontend & Design

No Slop UI

LeoStehlik/no-slop-ui

Build or review frontend UI for clean, restrained, human-designed interfaces without generic AI visual patterns.

Frontend & Design

Openclaw Darkpattern Buster

alphaparkinc/openclaw-darkpattern-buster

Bypasses UI dark patterns, un-checks hidden subscription boxes, and navigates confusing opt-out flows automatically during checkout to protect user intent.

Frontend & Design

Frontend Design Pro

Krishna-Modi12/frontend-design-pro

Production-grade frontend UI/UX skill registry. Auto-routes to the correct skill based on user intent. Use for anything involving what users see and click in a browser — building or fixing React/Next.js components, pages and layouts; visual defects; animation; dashboards; forms; accessibility audits; frontend performance; 3D with Three.js/R3F; design systems and tokens; and tests for any of it. Skip for backend logic, APIs, databases and infrastructure.

Frontend & Design

Agential Skill

talhairfandev/agential-skill

Use this skill for any website, web application, frontend UI, component, layout, styling, refactor, or review. It enforces a self-contained editorial output standard: image-first composition, oversized typography, visible hairline grids, hard-edged rectangular framing, restrained copy, and review.

Frontend & Design

Designbrief

Heiberg-Industries/designbrief

A library of UI design direction files that provide style guardrails for building tasteful, consistent interfaces. Use when building any UI — select a style or let the AI recommend one based on the project context.

Frontend & Design

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.