Common ways to describe layouts to AI

Tell the AI "make it look nicer" or "clean up the layout," and all it can do is guess. Name the layout, then add the section order and sizes, and the results get much more consistent.

Start with the overall layout

The overall layout describes the page's main skeleton:

• Single Column Layout: all content in one column, read from top to bottom. Good for phones and for pages that do just one thing.
• Top Navigation Layout: a nav bar across the top, content below. Good for marketing sites, blogs, and other sites without many sections.
• Sidebar Layout: a persistent menu on the left, content on the right. Good for admin panels with many feature modules.
• Holy Grail Layout: main content in the middle, with a column on each side. Common on portals, forums, and docs sites.
• Master-Detail Layout: a list of records on the left and the details of the selected one on the right. Click on the left, and the right side switches in place.
• Side-by-Side Comparison: two items with the same structure placed side by side, for spotting differences.

Then how sections are arranged

When a section holds multiple items, common terms are:

• Card Grid: one card per cell. Good for content where images and text matter equally and people pick by browsing.
• List View: one item per row, two or three fields each. Good for quick scanning.
• Data Table: a header row and aligned columns. Good for records with many fields that need comparing.
• Dashboard: several different blocks of metrics and charts on one screen.

For the details, you can use these terms:

• Flexbox: a group of elements lined up in one direction, like "button group in a row, aligned right."
• CSS Grid: split into rows and columns, like "cards in a three-column grid, 16px gap."
• Whitespace and Alignment: "more space between sections" and "align the left edges of the heading and body text" work much better than "make it look nicer."

Don't forget phones

Responsive Design means the same page adjusts automatically to different widths. Tell the AI where the Breakpoint is and what changes there, like "below 768px wide, switch from two columns to one and collapse the top menu into a hamburger menu."

How to describe it to AI

Go in this order: overall layout → sections from top to bottom → how each section is arranged → what changes on phones.

Use a top navigation layout for the page, with the content area centered at a max width of 1200px. From top to bottom: a hero section, a three-column card grid showing product features, a simple list of customer reviews, and the footer. Build the card grid with CSS Grid and a 24px gap. Below 768px wide, switch it to a single column.

If you have a reference page, just send the AI a screenshot (Screenshot to Code) and add something like "overall it's a sidebar layout; change the list part to master-detail." If you're not happy with the first version, use Iterative Prompting and change one thing per round, like "only adjust the card spacing, leave everything else alone."