Skip to content
LazyFrog

A site with several pages

How your AI builds a site with several pages on LazyFrog: the header, menu, footer and look each come from one place, so no page drifts.

Decide how the pages share their parts before writing any page. The header, menu, hero, footer, colours and type each come from one place, so one change reaches every page and no page drifts. This is for a new site, a refresh and a redesign; an exact copy keeps the structure it has, and a CMS or an app brings its own templates, so use those.

  1. The look first. Agree it with the plan (look propose, as one of the plan's questions, then look apply: "Give it its own look" in the guide's core) and build with its tokens, so the page shows what was chosen: look apply only writes the file, and design_check says when a page's fonts aren't the look's. A page never gets its own copy of a shared rule.
  2. One shared layout, then one page to prove it. Use whatever makes pages share their parts in this stack: a framework's layouts, or a small build step with templates on a static site. Plain HTML files copied for each page drift. Build the layout and one real page, show the user that page on a phone and on a laptop, and get their yes before the next page. Only their own "just build it" skips that yes; defaults you picked don't.
  3. Then the rest from templates. Each kind of page (a list, an article, a gallery) is a template filled with its content. When the user asks to change a shared part, change it once at its source, never with an override on one page.
  4. Generated files stay generated. With a build step, edit the sources, keep them apart from what it writes, and tell the user which sources you changed, not every file the build rewrote.
  5. What you show as the design is the real page. Show a preview_screenshot of it, not a picture from an image tool. If the user wants ideas first, call that picture a sketch, and compare the built page against it before saying they match.
  6. Check across pages. design_check measures one page and doesn't compare pages. After a change to a shared part, take a preview_screenshot with viewport: "all" of the home page and of one page of each kind, and compare their header, hero and footer yourself. A screenshot doesn't press anything: try a player, a menu, a slideshow or a form with preview_try (guide topic seeing-your-work), on a phone as well, before saying it works.

For your AI: this page as Markdown · llms.txt