🎨 Websites & UIFREE · no sign-up

Screenshot to Code

Turn any website screenshot or design mockup into clean, responsive React and Tailwind code.

✨ Fill in the blanks

0/1 filled
Live preview — updates as you type
Recreate the attached screenshot as a production-quality component.

Stack: [STACK e.g. React + TypeScript + Tailwind CSS].

Rules:
- Match layout, spacing, colours and typography as closely as possible
- Use semantic HTML and accessible markup
- Make it fully responsive (describe what you changed for mobile)
- Use placeholder images from https://picsum.photos with the right aspect ratios
- Split into sensible sub-components
- Add hover and focus states that fit the design

After the code, list anything you had to guess.

More websites & ui prompts

See all →
🎨Websites & UIFREE

Complete Landing Page Builder

Generate a full, modern, responsive landing page with hero, features, pricing, FAQ and CTA — ready for Cursor, Lovable or Bolt.

Build a modern, responsive landing page for [PRODUCT NAME], which [WHAT THE PRODUCT DOES] for [TARGET AUDIENCE]. Stack: React + Vite + TypeS…
Claude · Cursor · LovableUse free →
🎨Websites & UIFREE

Cinematic Hero Section

A prompt for an eye-catching full-screen hero section with video or gradient background, animated headline and CTAs.

Create a fullscreen cinematic hero section for [BRAND NAME], a [TYPE OF BUSINESS]. Stack: React + TypeScript + Tailwind CSS + framer-motion.…
Claude · Cursor · LovableUse free →
🎨Websites & UIFREE

UI/UX Design Critique

Get an honest, expert critique of any screen or website — hierarchy, spacing, typography, conversion and accessibility.

Act as a senior product designer. Critique the attached screenshot / the page at [URL OR DESCRIPTION]. The page's goal is: [GOAL e.g. get si…
ChatGPT · Claude · GeminiUse free →