Keep the page structure when you swap a component

You can reuse every color, font, and button and still get a different page. What changes is the order and the size of the parts. A first screen with one sentence and one button is a different page from a first screen with three numbers and a row of logos, even when both use the same accent color. Named colors keep the paint consistent. They do not keep the argument consistent. design.md has to say which first-screen shape is allowed, or the agent will change it whenever the prompt says 'make it more complete.'

The studio reference used a logo row to answer 'who already trusts you?' Harbor Ledger has no permission to show those logos, and it has no logos of its own in this example. Removing the row without a replacement is honest. Replacing it with invented logos answers the question falsely. Replacing it with a short boundary, 'for contractors who invoice clients themselves,' answers a different question that the page actually has. The composition stays quiet and left-aligned. The component changes because the question changed, not because the row looked dated.

A first screen that depended on a large customer number falls apart when you delete the number. The fix is not a smaller fake number. The fix is something you actually have. For Harbor Ledger that is the price and the call, with one sentence of who it is for. A photograph, if you have a real one, supports the sentence. It should not become a stock scene stretched across the screen to fill the hole the number left. Write the replacement in the brief before the agent fills the hole on its own.

The button component can appear on the home page and the pricing page. On the home page its job is to start the call. On the pricing page its job is the same call, placed after the two prices, not repeated above every plan as if each plan had a different action. Reusing the component keeps focus, radius, and the accessible name behavior. Reusing it in every band because the component exists changes the composition into a stack of identical endings. Say how many times the primary action may appear.

A left-aligned opening that works on a wide screen can become a headline, a wrapping button, and a price stacked with no gap in a 390 × 844 px phone viewport. The section names did not change, and the page still fails. Look at the rendered page from the top with browser chrome and zoom kept consistent, not at the component file. If the price and the button collide, the spacing rule is wrong, or the order of the stack is wrong. Fix that in the layout, then mention the phone stack in design.md so the next page does not rediscover it.

Compare the brief with the built page and list only the differences that change what the visitor is being asked. 'The button is 4 pixels shorter' means the shared button was skipped. 'A quote appeared' means the page answered a question the brief did not ask. In this example the failure is the quote, not the shade of green. Say that when you send the page back. The agent can then remove the quote instead of adjusting the green.