Make An eCommerce Website

Prompt For ChatGPT To Make A Better Website Design

Act as a senior web designer and art director. Use the attached website screenshots as the starting point for a major visual redesign.

Create a polished visual mockup of the redesigned website—not just advice or a written description. Make it feel like a substantial professional upgrade: modern, distinctive, cohesive, and carefully designed for this business and its audience.

First, study the existing website to understand the business, content, audience, and main action visitors should take. Preserve its purpose and useful information, but rethink the visual design confidently. If the screenshots show an inspiration website rather than my own, use its design principles as inspiration without copying its branding, wording, or distinctive assets.

Design direction:
- Establish a clear visual identity with thoughtful colours, typography, and imagery.
- Create a compelling hero with a strong headline, clear value proposition, and prominent primary action.
- Improve the layout, visual hierarchy, spacing, alignment, and reading flow.
- Make each section serve a purpose and guide visitors toward the main action.
- Use a consistent system for buttons, cards, borders, radii, and icons.
- Give the design character appropriate to the business. Avoid a generic AI-generated template, excessive gradients, unnecessary glass effects, and oversized rounded cards everywhere.
- Use realistic content. Do not invent customer reviews, statistics, awards, certifications, or business claims.
- Keep text readable and contrast accessible.

Implementation constraints:
The finished website will be built in WordPress using Elementor Free, the Blocksy theme, and WooCommerce where needed.
- Design page content that can be recreated using native Elementor containers and widgets.
- Design the header and footer around Blocksy’s native header and footer builders.
- Prefer features achievable with free tools.
- Avoid layouts that depend on custom JavaScript, complex animation, paid widgets, or unusual interactions.
- Aim for an excellent design within these constraints; do not make it look basic.

Deliver:
1. A high-resolution, full-page desktop visual mockup, including the header and footer. Make the page long enough for readable text and balanced sections; do not squeeze everything into a short image.
2. A matching mobile mockup showing the header, hero, and representative content sections.
3. A short design specification with the colour hex codes, suggested freely available fonts, content width, spacing system, and section order.
4. A concise mapping of what belongs in Elementor and what belongs in Blocksy, plus any details that may need a free alternative.

Keep the desktop and mobile designs consistent. Treat the mockups as implementation references, not as images to embed into the finished website.

Make reasonable assumptions and state them briefly. Only ask a question before starting if missing information would fundamentally change the design. If image generation is unavailable, say so and provide a detailed design specification instead of claiming to have created a mockup.

Download The Image To Elementor Skill

Download The Image To Elementor Skill