Transform any website screenshot into a comprehensive design blueprint with ease. This prompt leverages AI to generate detailed descriptions of a website’s layout, color scheme, typography, and key components, allowing you to accurately replicate websites using tools like Bolt.new, V0, Cursor, and more.
- Detailed Analysis: Breaks down layout, colors, typography, and key elements.
- Easy Integration: Compatible with popular web development and design tools.
- Free to Use: Accessible and free for all developers and designers.
PROMPT:
Analyze the provided website screenshot and give a highly detailed and precise description of the site's appearance and components. The description should include the following sections, organized clearly with headings and subheadings:
- Title: State the website's name or title (e.g., "YouTube Homepage Redesign").
- Component Types: Identify and describe the main components of the site, such as headers, footers, navigation bars, sidebars, content areas, buttons, forms, images, and videos. Include specific details like component sizes and locations.
- Overall Layout: Describe the structure and layout of the page in detail. Mention any grid systems, columns, rows, or other layout models used. Provide dimensions and spacing in pixels or percentages.
- Color Scheme: Precisely explain the website's color palette. Mention primary colors, background colors, and text colors, including their HEX or RGB values. Note any gradients or patterns used.
- Typography: Provide exact details of the fonts used in headings and body text, including font families, sizes, weights, and styles (e.g., Arial Bold, 16px).
- Key Elements: Highlight significant features or elements such as logos, banners, call-to-action (CTA) buttons, showcase content, and unique design elements. Describe their purpose and placement.
- Interactive Features: Describe any potential interactive components or suggest how static elements could function interactively (e.g., hover effects, animations, sliders).
- Visual Decorations: Mention icons, illustrations, graphics, and other visual elements. Describe their style (e.g., flat design, skeuomorphism) and placement on the site.
- Responsiveness: Describe how the design adapts to different screen sizes and devices. Suggest possible layout changes for mobile devices.
- Accessibility: Identify accessibility features or challenges. Propose improvements in line with WCAG standards, such as adjusting color contrasts or adding alt text to images.
- Performance Factors: Mention optimizations or factors affecting performance, such as image optimization, code minification, or script loading order.
- Content Structure: Detail the organization of the content. Mention heading hierarchy (H1, H2, H3), paragraphs, lists, tables, and other content elements.
- Other Important Points: Include any other essential information, such as branding guidelines, language versions, integrations with external services, or possible technologies and frameworks the site might use.
Instructions:
- Organize your response clearly using headings and bullet points.
- Be as precise and detailed as possible, utilizing technical terms and definitions.
- Include any observations about the site's purpose, target audience, and functionalities.
- Capture a Screenshot: Take a clear, high-resolution screenshot of the website you want to replicate.
- Use the Prompt: Input the screenshot and the prompt into your preferred AI tool.
- Import into Development Tools: Use the description with your preferred development or design tool (e.g., Bolt.new, V0, Cursor) to recreate the website.