/Replica

name: replica
description: 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.
license: MIT

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

DIRECTORY STRUCTURE AND USAGE GUIDE

The skill organizes reference materials into specific folders that the LLM should consult during different phases of prompt generation:

**DIRECTOR FOLDER (`DIRECTOR/`)**

Use this folder for decision-making and workflow guidance:

• **When to use**: At the beginning of the process to determine the overall approach
• **Key files**:
• `rules-engine.md`: 7-phase workflow for complex designs (use when unsure about process flow)
• `skill-decision-engine.md`: Algorithm for selecting appropriate design patterns
• `motion-effects-decision.md` & `scroll-effects-decision.md`: Specific guidance for animations
• `headroom-integration.md`: Asymmetric compression doctrine for prompt optimization
• `lazy-loading-rule.md`: Token-budget doctrine for managing context
• `delegation.md`: Notes on when to delegate vs. handle directly

**REFERENCES FOLDER (`REFERENCE/`)**

Use this folder for factual information and style references:

• **When to use**: During image analysis and when determining specific design properties
• **Key files**:
• `quick-aesthetic-guide.md`: Visual cues for identifying design aesthetics (glassmorphism, dark portfolio, etc.)
• `motionsites-ai.md`: Benchmark for prompt fidelity/quality standards
• `image-analysis-checklist-hero.md` / `-landing-page.md`: Detailed checklists for visual inspection
• `css-presets/` (7 files): Ready-to-use CSS blocks for glassmorphism, gradients, buttons, etc.
• `motion-effects/` (13 files): Animation specifications (stagger entrance, parallax, magnetic hover, etc.)
• `component-patterns/` (6 files): Navbars, hero layouts, sticky stacking cards, marquees
• `aesthetic-cards/` (6 files): Complete style guides per aesthetic
• `pinterest-doc/` (8 files): Verified example prompts from Pinterest references
• `README.md`: Index of all reference material

**DESIGNER FOLDER (`DESIGNER/`)**

Use this folder for skill routing and pattern matching:

• **When to use**: When determining which specialized design skill to apply
• **Key files**:
• `skill-router.md`: Main routing logic for design skills
• `skill-catalog.json`: Catalog of available design skills with metadata
• `skill-fingerprints.json`: Fingerprint patterns for skill matching
• `skill-decision-engine.md`: Duplicate of the director version for skill selection

**PROMPTS FOLDER (`PROMPTS/`)**

Use this folder for verified, working prompt examples:

• **When to use**: When seeking inspiration or templates for similar designs
• **Structure**:
• `github-catalog/catalog.json`: Searchable library of 270+ verified prompts
• `github-interfaces/`: 271 GitHub interface prompts
• `prompts-from-pinterest-doc/`: 9 Pinterest template prompts
• Contains 272 verified prompts total for reference

**SCRIPTS FOLDER (`SCRIPTS/`)**

Use this folder for utility functions (reference only in this environment):

• **When to use**: For understanding available tools (not for direct execution here)
• **Key files**:
• `safe_sync.py`: Multi-layer sync pattern for cross-platform file operations
• `headroom_compress.py`: stdlib-only port of text/json/code compression algorithms
• `ontology_matcher.py`: RAG matching for design pattern recognition
• `asset_prompt_generator.py`: Automated asset prompt creation
• `rag_sync.py`: Synchronization between skill folder, Obsidian vault, and graph corpus

**SKILLS LIST (`skills-list/.agents/skills/`)**

Use this folder for specialized design skills:

• **When to use**: When the base design-to-prompt skill needs specialized expertise
• **Available skills** (27 total):
• `frontend-design`: General frontend implementation patterns
• `gsap-*` (8): Core, React, ScrollTrigger, Timeline, Plugins, Utils, Frameworks, Performance
• `threejs-*` (10): Fundamentals, Geometry, Materials, Lighting, Loaders, Animation, Interaction, Shaders, Postprocessing, Textures
• `impeccable`: Impeccable design standards
• `minimalist-ui`: Minimalist interface patterns
• `industrial-brutalist-ui`: Brutalist design approaches
• `web-design-guidelines`: