Mock ups

Mock-ups

Code route

Write an HTML page in the kit that links brand.css, and use its variables and recipe classes:

<link rel="stylesheet" href="../brand.css">
<body data-site="portal">
  <article class="bw-card">
    <h2>Weekly plan</h2>
    <button class="bw-button-primary">Choose plan</button>
  </article>
</body>

BW render KIT\out\plan.html --out KIT\out\plan.png --width 1440 --height 900 --full
BW render KIT\out\plan.html --selector .bw-card --scale 2

Rules:

• Use the site's own variables first, then --bw-*, then the recipe classes. Hard-code a value only when brand.css has nothing.
• Use the names brand.css really has: --bw-background, --bw-text, --bw-primary, --bw-font, --bw-palette-c01, --bw-size-s1, --bw-space-x1, --bw-shadow-s1 and so on, plus --bw-radius-r1 and --bw-font-mono when the site has rounded corners or a monospace font. List them with grep -o -- "--[a-z0-9-]*" brand.css | sort -u.
• Write var(--name) without a fallback value. A fallback hides a wrong name: the colour looks right, but the mock-up no longer follows brand.css.
• Check the .bw-button-primary line before using it. If tokens said no primary button was captured, capture a page that has one.
• Use real copy, never customer data.
• The fonts load from the site's own URLs, in a browser with no login. When one fails (behind a login, offline, or no CORS header for pages opened from disk), render prints warning: font X did not load and the picture uses a fallback font. Get the font files, put them in the kit, point @font-face at them and render again.

gen

BW gen KIT "isolated modal dialog UI component asking \"Cancel this order?\" with a \"Keep order\" button and a \"Cancel order\" button" --lora brand=1 --lora portal=1 --size 1024x768 --n 4

• Trigger words are added for the LoRAs loaded. --raw sends the prompt as written.
• --graph picks the model graph; the default is the kit's training model. --steps, --cfg and --seed adjust the sampling.
• On a 16 GB card, Z-Image LoRAs on the base zimage graph take about 80 s a picture and show the brand clearly. --graph zimage_turbo takes about 13 s but shows a base-trained LoRA only weakly. Use Turbo for layout drafts and the base graph for anything meant to look on brand. In the GOV.UK test, brand 1.0 + site 1.0 was the cleanest pair.
• Outputs go to KIT/out/<time>-<slug>/, with mockup.json holding the prompt, LoRAs, weights, seed and steps.

sweep

BW sweep KIT "desktop web page screenshot, account settings page" --a brand --b portal --wa 0.6,0.8,1.0 --wb 0.6,0.8,1.0

The same seed for every cell, and a sweep.jpg contact sheet with brand weights in rows and site weights in columns. Run one sweep before any batch with new LoRAs.

ref

BW ref KIT "desktop web page screenshot, an order history page with a table of orders" --refs KIT\capture\portal\pages\home__desktop.png KIT\capture\portal\pages\orders__desktop.png

FLUX.2 klein 4B with up to four references. The default prompt adds "use the exact visual style of the reference screenshots ... do not copy their content or layout"; --raw turns that off. Crop references to one viewport for best results.

Prompt patterns

Write the view, what it is, the parts in order, and the exact strings in double quotes. Leave out colours and fonts.

Want	Start with	Size
a desktop page	desktop web page screenshot,	1344x768
the top of a page	desktop web page screenshot, top of the page,	1344x768
a phone screen	mobile web screen screenshot,	768x1344
one component	isolated <kind> UI component, desktop size, on a plain background,	1024x768

Keep labels to one to three words. Write long copy as "a short paragraph of body text", or use the code route.

For a page with a header, say what the header shows: the header shows the name "Fishing Service". Without it the model invents a site name or writes the trigger word there. In testing, the named text came out right in 4 of 4 pictures with the brand LoRA and 1 of 2 with brand and site LoRAs together; the logo mark beside it is still invented.

score and sheet

BW score KIT out\<dir> gives each picture:

• the pixel-weighted delta-E from its main colours to the brand palette;
• the share of pixels more than 15 delta-E from every brand colour.

Lower is closer. Use it to rank seeds and sweep cells. In the GOV.UK test, a code-route mock-up scored 0.9 and a real captured page scored 1.1.

BW sheet DIR... --out sheet.jpg makes a contact sheet of any pictures.