Free AI Prompts for Web Designers: Copy-and-Paste Prompts for ChatGPT and Claude

You are helping me plan a cohesive website image library for a real client. Do not generate images yet. First, analyze the information I provide and identify the images the website needs to communicate the offer, build trust and support the page layouts.

CLIENT AND BUSINESS INFORMATION
[Paste the client questionnaire, business brief, offer details and audience information]

WEBSITE STRUCTURE
[Paste the sitemap, page outline, wireframe or section list]

BRAND DIRECTION
[Paste the brand colors, visual keywords, wardrobe direction, locations, lighting preferences and anything the brand should avoid]

AVAILABLE REFERENCE PHOTOS
[Describe or attach the client photos that must guide the person's appearance, hair, body type, wardrobe, products and overall visual continuity]

First, summarize the visual rules you can confirm from the source material. Separate confirmed details from details that are still missing. Do not invent physical traits, products, locations, claims or brand details.

Then audit the website section by section. Identify where an image is needed and assign every image one clear job. Include a balanced mix of:

1. Wide horizontal hero images with quiet space for copy
2. Vertical or square portraits that build trust
3. Process images showing the person doing the work
4. Detail images of hands, tools, materials or the environment
5. Directional images that lead the eye toward a headline or button
6. Faceless filler images that add texture without repeating another portrait
7. Alternate crops that still work on mobile

Create a shot plan with these columns:

Image number
Page and section
Job of the image
Subject and action
Setting
Orientation and crop
Where the subject should sit in the frame
Where the website copy will sit
Reference photo to use
Potential problems to check

Remove repetitive ideas. Do not give me 20 versions of the same smiling laptop portrait. The final collection should feel like one believable photoshoot and should include enough horizontal, vertical, close-up and faceless images to support the entire website.

After I approve the shot plan, turn each approved idea into one detailed image-generation prompt at a time. Each prompt must preserve the confirmed identity and brand details, describe realistic lighting and camera direction, and state exactly where the subject and negative space belong in the composition.

For every generated result, remind me to check the face, hands, teeth, product geometry, furniture, repeated objects, shadows, and desktop and mobile crops before keeping it.

I need help developing copy for my [PAGE NAME]. The goal of this page is [GOAL], and the primary action I want the visitor to take is [ACTION]. Do not write the copy yet.

I will give you the business questionnaire, offer details, audience information, testimonials, existing copy and any notes I have from the client.

First, analyze the information and identify:

1. Who this business is best suited to serve
2. The specific problem or desire that brings that person here
3. The result the offer helps create
4. The strongest differentiators, beliefs and proof
5. What clients repeatedly praise or mention
6. The questions or objections this page needs to address
7. Anything that sounds generic, vague or unsupported
8. The information still missing

Separate specific information from generic information. Do not invent claims, proof, offers, testimonials, credentials, guarantees or process details. Then ask me only the questions needed to fill the most important gaps.

After I answer, create a messaging outline before drafting. Give every section one clear job. For each proposed section, include:

Section purpose
Question or objection it answers
Main message
Proof or supporting detail available
Recommended call to action

Check the order of the sections against the page goal. Move proof close to the claim it supports. Remove sections that repeat the same point. Keep the voice natural, specific and easy to understand.

Wait for my approval of the outline. Then draft the page one section at a time using only the approved information. Flag any sentence that still needs proof or client confirmation.

Build a low-fidelity responsive website wireframe from the approved information below. This is a planning tool for a web designer, not a finished website design.

PAGE GOAL
[State what this page must help the visitor understand and do]

PRIMARY ACTION
[State the main button or conversion action]

AUDIENCE AND OFFER
[Paste the audience, offer and business details]

APPROVED COPY OR MESSAGING OUTLINE
[Paste the approved outline]

REQUIRED PROOF AND FUNCTIONAL ELEMENTS
[Paste testimonials, credentials, galleries, pricing, FAQs, forms, integrations or other required elements]

Create a single responsive HTML file that I can preview as an interactive wireframe. Keep it intentionally simple and mostly grayscale. Use clear placeholder blocks for images. Do not add decorative brand styling, stock copy, fake testimonials or unsupported claims.

For the desktop wireframe:

1. Put the sections in the order that best supports the page goal.
2. Give every section a short label explaining its job.
3. Use the approved copy when available. Otherwise use short descriptive placeholders instead of invented marketing copy.
4. Place buttons where the visitor is likely to need the next action, not automatically after every section.
5. Put proof close to the claim it supports.
6. Remove or flag any section that repeats an earlier message.
7. Label the recommended image orientation and where copy needs negative space.

For the mobile wireframe:

1. Stack the content in a clear reading order.
2. Keep the primary action easy to find.
3. Flag desktop interactions that need a simpler mobile treatment.
4. Prevent long text sections from running together without a visual break.

After the wireframe, give me a short decision log explaining:

Why each section appears where it does
Where you placed the primary and secondary buttons
What you removed or combined
What still requires a designer decision
What may need different treatment on mobile

Do not call the wireframe final. Ask me what I want to move, remove or test before creating a revised version.

Create a [horizontal or vertical] editorial brand photograph using the attached reference images to preserve the subject's recognizable facial features, hair, body proportions, skin tone and overall appearance.

SUBJECT
[Describe the person, expression, pose, wardrobe and specific action. State whether the subject should look at the camera.]

SETTING
[Describe the real location, color palette, materials, furniture, props, styling and time of day.]

CAMERA
[Describe the orientation, crop, camera height, angle, lens feel, depth of field and photographic finish.]

LIGHT
[Describe the direction, softness, contrast and color of the light.]

LAYOUT
[State where the subject belongs in the frame and exactly where the website headline, paragraph or button will sit. Request quiet negative space in that area.]

MOOD
[Add three precise mood words that describe the finished image.]

AVOID
[List unwanted expressions, poses, clothing, props, colors, locations, visual styles and common generation problems.]

The scene should feel believable and naturally photographed. Keep the anatomy, hands, teeth, laptop, furniture, products, reflections and shadows realistic. Do not add text, logos, extra people or objects that were not requested. Preserve enough room to create a separate mobile crop without cutting through the subject or the main action.