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.
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:
Ask Hero vs Full Landing (if not specified)
Ask Brand Context (if not provided; fall back to screenshot text)
Run Image Analysis (silently — internal checklist)
web-design-guidelines: Standard web design principles
When a design calls for specific expertise (e.g., 3D hero scenes, GSAP animations), consult the relevant skill's GUIDE.md file directly
PART 1 — ASSET PREP WORKFLOW (before the final prompt)
This is the most important part of the skill. Before writing the final prompt, you must identify every external asset in the design and stop until the user provides hosted URLs.
1a — When to Ask for Assets
Scan the image for:
Background image/video (not solid CSS/ gradient)
Product mockups / hero images
Avatar images (testimonial section)
Logo (unless SVG text or simple)
Decorative 3D elements (corner images, floating objects)
Any card/component with an embedded image
1b — Image Inventory Format
Present to the user:
## ASSET INVENTORY
I can see [N] images/videos in this design that need hosted URLs.
For each one I've written a detailed generation prompt.
Upload to https://postimages.org after generating, then reply with the URLs.
### ASSET 1 — [Name / Position]
- Purpose: [where it goes in the design — hero background, features card left, testimonial avatar, etc.]
- Style: [matching the design aesthetic — dark glassmorphic, minimalist clean, vintage paper, etc.]
- Generation Prompt:
[ultra-detailed prompt for Midjourney/DALL-E/Flux — describe content, mood, lighting, composition, colors, aspect ratio, and style reference]
For any image in the design, first produce a detailed image-generation prompt. If the user has provided brand context, include that context in the prompt. If not, describe what's visible in the screenshot and let the user adjust.
If the user replies with a URL — great, embed it. If they say "skip it" — use [PLACEHOLDER_URL] in the final prompt.
1c — Video Backgrounds (Simple)
If the hero uses a background video:
Detect the mood from the screenshot (dark cinematic, nature calm, futuristic neon, etc.)
Produce a descriptive prompt for Sora / Runway / Pika / Kling:
Purpose: Full-bleed background behind hero headline
Generated prompt: "A slow aerial drift over a misty forest at golden hour, warm amber light filtering through canopy, cinematic 24fps, smooth 10-second loop, 3840x2160, film grain, atmospheric haze"
If the design depends on a scroll-driven motion effect (the main subject animates through frames as the user scrolls — popular in modern portfolio/marketing pages):
STOP. Do not write the final prompt yet. Present this workflow:
This design uses a scroll-driven motion effect. Here is a step-by-step plan:
**Step 1 — First Frame Prompt:**
[Detailed prompt describing the initial state of the animated subject]
**Step 2 — Last Frame Prompt:**
[Detailed prompt describing the final state of the animated subject]
**Step 3 — Interpolation:**
Use Luma Dream Machine or Kling AI "image-to-video" / "keyframes" mode.
- Upload the first frame as frame 1
- Upload the last frame as the final frame
- Set motion strength to [subtle / moderate / dramatic based on design]
- Export as MP4 at least 1080p, 8–15 seconds (it will become a shorter scroll animation)
**Step 4:**
Host the resulting MP4 on any CDN and reply with the URL.
Once I have it, I will embed it in the final prompt so the hero uses scroll-driven playback.
1e — Background That Is an Image (not CSS)
If the background is a real image/photo (not code-able CSS), produce a detailed image generation prompt for it and tell the user:
The background of this design is a photo/image that cannot be recreated with CSS.
Generate this image and host it:
**Background Image Prompt:**
[Full Midjourney/DALL-E/Flux prompt matching the screenshot's background]
PART 2 — IMAGE ANALYSIS CHECKLIST (Hero)
Run this checklist internally (silently) on every hero image before writing the prompt. Check EVERY item.
Layout & Frame
Outer page background color (what surrounds the hero card, if any)
Hero container shape — full-screen? padded/rounded card inside a wrapper?
Exact border-radius of container (e.g., rounded-3xl = 24px, or rounded-[40px])
Overflow behavior (content bleeding off bottom edge? rounded clip?)
z-layering (video → overlay → content?)
Background
Solid color, gradient, image, or video background?
Glassmorphism includes the full CSS block — backdrop-filter, background-blend-mode, box-shadow, and the ::before gradient border pseudo-element with mask-composite.
Buttons include their box-shadow (multi-layer shadows are the signature of premium UI).
Videos include all 5 attributes:autoPlay muted loop playsInline + object-cover.
Section transitions specify rounded top corner class + negative margin pull-up (e.g., rounded-t-[60px] -mt-14 z-10).
Marquees specify direction (translateX negative = left), speed (seconds), and CSS keyframes vs. GSAP vs. scroll-driven.
Cards with image grids specify the exact column width split (e.g., w-[40%] / w-[60%]) and image heights via clamp().
Component names are PascalCase and match a file path (e.g., src/components/HeroSection.tsx).
Responsive breakpoints use Tailwind mobile-first (base → sm: → md: → lg:) with explicit values at each breakpoint.
Decorative elements include exact position classes, width at each breakpoint, and FadeIn animation values.
Custom fonts include the @font-face block with src URL (or note as local file like /fonts/PPMondwest-Regular.woff2).
Scroll animations specify the offset (e.g., ['start 0.8', 'end 0.2'] for Framer Motion useScroll).
PART 7 — QUICK AESTHETIC IDENTIFICATION GUIDE
Use these visual cues to identify the design aesthetic and apply matching defaults:
Anton font, neon hex (#6FFF00), liquid-glass, video backgrounds
Minimal white, clamp typography, pill buttons
Modern Agency
clamp(), -0.04em letter-spacing, IntersectionObserver fade-in, fixed bottom nav
PART 8 — HANDLING EDGE CASES
Low-Quality or Partial Image
Still produce the prompt — infer missing values from visible design language.
Mark inferred values with [INFERRED: ...] so the user knows to verify.
Prioritize: colors → fonts → layout → animations (what you see clearly).
If no image but user describes style (e.g., "glassmorphism dark SaaS hero"), generate from description using the same template.
User Refuses to Provide Asset URLs
Say: "I'll use placeholder URLs [PLACEHOLDER_URL] in the prompt — just search-and-replace before pasting into your coding agent."
User Refuses Brand Context
Keep text exactly as visible in the screenshot. Use [PLACEHOLDER: describe what goes here] for anything illegible.
Multiple Images, Different Purposes
Ask: "Should I treat these as one design at different views, or separate designs?" If one design → merge all visible sections into a single prompt. If separate → ask which to process first.
No Image Uploaded, Only Description
Generate a full prompt from the description using the same templates. Mark all values as [INFERRED FROM DESCRIPTION: ...].
TONE & FORMAT OF OUTPUT
Write in second-person imperative: "Build...", "Create...", "Use...", "Place..."
Use ## headers for each major section
Use backticks for all class strings and code values
Use plain markdown tables for animation references (as shown in the animation table template above)
Label every URL with what it's for (hero video, about section image, etc.)
When uncertain, use [PLACEHOLDER: describe what goes here]
Do NOT say "approximately" or "roughly" — commit to specific values
The output must be copy-paste ready for Lovable, Bolt.new, Replit Agent, Cursor, or v0
COMMON PITFALLS
Skipping the asset inventory — Most designs have external images. Always scan. Never write the final prompt until you have URLs or explicit user permission to use placeholders.
Assuming the user will find their own image links — Always generate the image prompt for them. Make it detailed enough to copy-paste into any image gen tool.
Forgetting scroll-driven video workflow — If the design looks like a scroll-motion page (product morphing, hero transforming through scroll), always use the two-frame workflow with Luma/Kling suggested.
Writing "nice" or "good-looking" instead of exact classes — This is the number one difference between motionsites.ai quality and amateur prompts. Be specific.
Mixing up the hero vs full landing template — Hero uses "Page Frame → Background → Global Styles → Navbar → Hero Content → Floating Cards → Animations". Full landing uses "Global Design System → SECTION ORDER → 1/2/3... sections → Reusable Components → Animations".
Not asking for brand context first — If the user has a brand, it changes the content. Ask early, before you commit to analyzing the image.
Generating the final prompt before URLs are ready — Embed the asset URLs INSIDE the sections where they belong. If you write the prompt first and add URLs later, the user has to manually edit it.
VERIFICATION CHECKLIST
Before delivering the final prompt to the user:
Did you ask Hero vs Full Landing (if not specified)?
Did you ask about multiple images (if >1 uploaded)?
Did you ask for brand context (if not provided)?
Did you scan for ALL asset inventory (images/videos in the design)?
Did you generate detailed image prompts for each needed asset?
Did you provide the video workflow (first frame + last frame + interpolation) for complex motion designs?
Did you WAIT for the user to return hosted URLs?
Are all external asset URLs embedded INLINE at the correct sections (not at the end)?
Is every color a hex code?
Is every font identified by name + Google Fonts URL + weight?
Does every animation have initial/animate/delay/duration?
Are all button classes exact, including multi-layer box-shadows?
Are all component names PascalCase and mapped to file paths?
Is the output copy-paste ready for Lovable / Bolt / Replit / Cursor?
If the user refused brand context: did you use text exactly as visible in the screenshot?
If the user refused asset URLs: did you use [PLACEHOLDER_URL] placeholders?
