AI Product Websites: Organizing Images, Diagrams, and Captions for a First Website

You are preparing the first version of an AI product website. You have a set of screenshots, flowcharts, and short text descriptions ready in a folder. The main task is to decide how these visuals fit into your page structure so visitors understand your product quickly. This article walks through grouping assets, assigning captions, and checking readability before publishing.

Setting Up Your Visual Assets Folder

This is a hypothetical scenario rather than a recommendation list. Picture an independent author preparing a first website for a small AI product. On the desk are a working folder and a notebook page headed "visual assets." The first item is a screenshot of a chat panel that shows a model answer beside a source list; its working filename is "chat-answer-with-sources.png," and a note says the caption should point out that the answer cites the panel's source list. The second is an exported flow diagram of the request path, from the user's prompt through retrieval to the displayed response, saved as "retrieval-flow.svg," with a scribbled caption draft, "Where the sources come from." The third is a short screen recording of an upload step, kept only as a poster frame for now because the author has not decided whether the site will show motion.

Two naming candidates sit at the top of the notebook page. "Screens and Flows" groups the chat screenshot and the request diagram together, which suits a short walkthrough but leaves the upload frame homeless. "Answers and Sources" ties the screenshot and the flowchart to one explanation, yet the upload step feels unrelated to that theme. The author is leaning toward the second but has not committed, because the decision affects whether the upload frame gets its own short section or is dropped from the first release. That open choice is the point of the example: the folder is small, but each item pulls the organizing scheme in a different direction.

Filenames are another unresolved detail. The author wants lowercase words separated by hyphens, a short prefix for the page each asset belongs to, and no version numbers in the visible name. A candidate prefix is "firstlook-" for everything on the opening page, giving "firstlook-chat-answer-with-sources.png" and "firstlook-retrieval-flow.svg." The poster frame would be "firstlook-upload-step.jpg" if it survives. The author is unsure whether the prefix should describe the page or the asset type, and has left both options on the page.

Captions are drafted in a separate plain-text file so they can be rewritten without touching the images. One draft reads, "The answer panel shows the model's reply and the sources it used," while another for the flow diagram reads, "A request moves from prompt to retrieval to the displayed answer." These are working texts, not final copy, and the author has not checked whether they describe the pictured screens accurately enough for a first release.

Defining Site Goals to Guide Image Placement

Webflow 's AI site builder documentation says the site description should state your website's goal, giving ebook downloads, product sales, and sales inquiries as examples. The same prompt covers the site's purpose, its pages, and the audience you are building for, and Webflow 's AI site builder uses that description to generate a proposed site structure of pages and sections.¹

The documentation also notes that the description can specify colors, fonts, and style. If you name colors, hex codes, fonts, or a brand for inspiration, Webflow maps those details to its theme system rather than copying them exactly.¹

You can start by turning your site goal into one written sentence that names the audience and the single action you want a visitor to take, then use that sentence as a sorting rule. For example, if the goal reads "help a curious evaluator decide whether the assistant fits a small support team," a request-flow diagram earns a place near the top, while a decorative abstract background does not. A different author might write "let returning users find the setup steps fast," in which case the chat screenshot moves lower and the steps gain priority. Either sentence is a choice you can revise as the page takes shape.

Next, compare each asset against that sentence and record a short verdict in your own notes: keep near the top, keep as support lower down, or set aside for now. This is an author's sorting exercise, not a rule about what any site must contain. One draft note might read "flow diagram: shows the question-to-answer path, keep near top" beside "dashboard screenshot: shows settings, support only." You might find that two images compete for the same point; in that case, consider letting the clearer one lead and holding the other back rather than placing both.

Captions can carry part of the goal too. If the goal stresses evaluation, a caption that says what a reader should notice in the diagram does more work than a label naming the file. You can draft the caption first and let it decide whether the image still belongs.

Grouping Screenshots and Diagrams by Page Section

Webflow 's AI site builder generates a proposed site structure of pages and sections from the description you provide. At that stage you can manage page sections for each generated page: drag a section up or down to reorder it, delete a section through its Options icon, duplicate it, change it by choosing another section type, or add a new section by hovering over a section and clicking the Add icon. The navigation and footer sections can't be reordered. Regenerating a site structure replaces the current one and removes any page or section edits already made.¹

You can take your current folder of screenshots, flowcharts, and short descriptions and sort each item into a page-section group before writing any captions. Start with the sections you already know your page will have, such as a short opening area, a workflow explanation, and a closing area for limits or notes. For each asset, you might jot one line in your notes: what it shows and which section it supports.

Consider a worked example. Suppose you have four files: a chat interface screenshot, a request-flow diagram, a table comparing two outputs, and a small icon-like graphic of connected nodes. You might place the chat screenshot and the flow diagram under the opening area because they show what the product does and how a request moves. The comparison table could support the workflow explanation, while the node graphic fits the closing notes as decoration rather than evidence.

For grouping, you can ask whether two images argue for the same point. If they do, keep them together and give the group a plain working label such as "how a request travels." If an image only illustrates a phrase in your prose, you might place it beside that paragraph rather than in a separate gallery. A group of one is fine when the image carries an important idea.

You can also let a group influence your prose. A pair of screenshots showing input and output may need one sentence introducing both, then one caption each. The screenshots and the diagram stay in different groups if they answer different reader questions.

Writing Short Captions That Explain Each Visual

When you are preparing captions for the visuals on a first website, use the requirements document (PRD) step to check that each image or diagram will get a short caption that explains it. The guide notes that the PRD is the only low-cost error-correction opportunity: before code generation, changes consume almost no extra resources, while after generation they go through the AI conversation modification process, consuming Credits and taking longer. So before confirming, review the PRD checklist and ask whether the page list is complete, whether any pages are missing or redundant, whether key features are included, and whether the visual style description matches expectations. You can click "Edit Requirements Document" to modify the content directly and confirm after editing. Only after confirming it is correct should you click "Generate App Now" and then "Confirm Generate App." See the official guide from this site's operator NamesLink .²

Adjusting Structure When Images Do Not Fit

Webflow 's AI site builder lets a Marketer role edit a generated site in a simplified building experience that includes swapping images and moving sections around, so image changes happen within that editing view rather than through a separate asset manager. In the canvas preview, hovering over a section exposes icons to add, replace, reorder, restyle, or delete that section, and theme-level changes to colors, typography, and animations apply across all generated pages. If a theme's image pack is changed, existing images are not affected; the new pack applies only to newly generated pages and sections.¹

If two images have been arguing for different points, you can try a structural rewrite rather than a caption fix. Take a flow diagram and an unrelated icon strip: instead of forcing them into one row, you might give the diagram its own short section with two sentences of lead-in, and move the icon strip down beside a paragraph where it genuinely helps. The test is whether the surrounding text changes when you move the image; if it does not, the image was probably decoration in the wrong place.

You can also split a crowded section into two smaller ones. Suppose one block currently holds a screenshot, a comparison table, and a diagram. Try promoting the table to its own heading because readers will likely scan it alone, and keep the screenshot and diagram together under a heading about a single flow. This is a hypothetical arrangement, not a fixed rule; you can reverse it if the prose reads better the other way.

When a caption keeps growing because the image is carrying too much, consider whether the image itself should change. A diagram showing six steps might be replaced by two simpler diagrams, each with its own one-line note. That choice belongs to you, and it may be easier than writing a paragraph that explains everything at once.

Reviewing Layout Before Finalizing the Site

Before finalizing, preview the site with the Preview button at the top right to see how it will look to visitors before publishing. In Webflow 's AI site builder, section-level layout changes can be made in the canvas preview: hovering over a section lets you insert a new section, replace a section by browsing available layouts, move a section up or down, swap its styles, or delete it. The navigation and footer sections cannot be reordered. After adjusting, click Back to all pages, then Generate site.¹

Before you call the first version finished, you can do one slow visual pass that treats the page as a reader would rather than as a folder of assets. Try scrolling from top to bottom without editing anything, and note the three points where your eye stops: the headline area, the first image, and whatever comes after it. If those stops do not match the sequence you intended, that mismatch is the thing to fix, not the individual captions. You might set a timer for ten minutes and write down only what you remember seeing afterward; the items that vanish from memory are candidates for moving lower or cutting.

Consider a hypothetical comparison to make this concrete. Picture a page where the request-flow diagram currently opens the page, followed by a chat screenshot, then a table of outputs. Your goal sentence says visitors should judge answer quality quickly. On the slow pass you notice the diagram reads as setup and the screenshot reads as evidence, so you might swap them and let the screenshot sit directly under the intro sentence, with the diagram one scroll below as support. That is a layout choice, not a verdict on either image, and you can revert it if the page feels front-heavy.

You can also check each group boundary at the width you expect readers to use. If a caption and its image separate when the column narrows, the pair may need to be treated as one block in your notes so the caption stays with what it explains. Ask yourself, for each group, whether a reader arriving mid-scroll could tell which image a sentence belongs to. Where the answer is no, consider a plainer group label or a shorter intro line rather than adding more caption text.

Finally, leave yourself one written question beside each section, such as "does this section earn its place before the next one?" and answer them in your own words on a second pass. That gives you a rational stopping point: finalize when every section passes its own question, and defer the rest to a later revision instead of endlessly rearranging.

Frequently asked questions

How can I turn my site goal into a rule for sorting my materials?

You can start by turning your site goal into one written sentence that names the audience and the single action you want a visitor to take, then use that sentence as a sorting rule. For example, if the goal reads "help a curious evaluator decide whether the assistant fits a small support team," a request-flow diagram earns a place near the top, while a decorative abstract background does not.

How should I record a verdict for each asset against my goal sentence?

Next, compare each asset against that sentence and record a short verdict in your own notes: keep near the top, keep as support lower down, or set aside for now. This is an author's sorting exercise, not a rule about what any site must contain.

How can I decide whether two images should be grouped together?

For grouping, you can ask whether two images argue for the same point. If they do, keep them together and give the group a plain working label such as "how a request travels."