# High-fidelity mockup reconstruction

Use this workflow when an uploaded screenshot or mockup is the visual source of truth.

## 1. Inspect before building

View the reference at original resolution. Create a section-by-section inventory containing:

- section boundaries and approximate height ratios;
- row and column proportions;
- headline wording, capitalization, line breaks, and alignment;
- image crops, focal points, and subject scale;
- overlaps, foreground/background relationships, and z-order;
- form orientation, field proportions, button proportions, and trust copy;
- backgrounds, gradients, borders, glows, shadows, dividers, and decorative marks;
- repeating typography, colors, radii, and spacing intervals;
- desktop elements that require a different mobile composition.

Do not begin with a generic landing-page pattern. Derive the page structure from this inventory.

## 2. Produce an asset manifest

Classify every visible element:

| Class | Use |
| --- | --- |
| Native editable | Headings, paragraphs, buttons, forms, icons, lists, dividers, ordinary surfaces |
| Raster asset | Photography, cinematic environments, complex textures, product-preview graphics, detailed illustration |
| Mixed composition | Editable Divi content layered over one or more raster assets |

For each raster asset, record its role, source, target aspect ratio, crop behavior, and mobile alternative.

### People and portraits

When the reference shows a person composited over a designed background, create separate assets by default:

1. a clean background plate without the person, text, UI, logos, or forms;
2. a transparent subject cutout with identity, wardrobe, pose, and edge quality verified;
3. optional foreground effects only when they cannot be reproduced cleanly with native settings.

This separation preserves responsive control and lets the subject scale independently. Flatten the subject into the background only when overlap geometry never changes across breakpoints or when the user explicitly prefers a single composite.

Use the `imagegen` skill for raster creation and editing. Follow its transparency procedure, inspect the result at full size, and reject identity drift, halos, cropped anatomy, invented text, or unusable negative space.

### Product previews and complex interface artwork

Use a raster preview when the object is functioning as product artwork rather than an interactive page component. Keep important marketing copy outside the image editable. Verify all text embedded in the preview because generated text errors are unacceptable.

## 3. Plan geometry

Record approximate percentages rather than vague descriptions:

- content maximum width relative to viewport;
- column widths;
- subject width and position;
- vertical start and end of overlaps;
- section height relative to viewport width;
- field and button widths;
- spacing between major anchors.

Choose native Divi layout, sizing, spacing, transform, and positioning settings from verified exports. Intentional full-width rows and overlaps are appropriate when required by the reference.

Preserve exact headline line breaks with separate Heading modules when the lines need different colors, fonts, sizes, or tracking.

## 4. Build in fidelity order

Implement in this order:

1. full-page section heights and background surfaces;
2. hero composition, image crops, and overlaps;
3. typography hierarchy and exact line breaks;
4. forms, buttons, and conversion elements;
5. supporting sections and repeated patterns;
6. decorative details and micro-spacing;
7. tablet and phone adaptations.

Do not spend time polishing small borders while the hero composition or section density is still wrong.

## 5. Render-and-compare loop

Structural validation is necessary but insufficient.

1. Import or apply the layout.
2. Render the full page at a desktop width comparable to the reference.
3. Compare the reference and render section by section.
4. Identify the five largest visible deviations by impact, not by implementation difficulty.
5. Correct composition and spacing before decorative details.
6. Render again.
7. Verify a phone viewport and correct crop, stacking, text wrapping, button width, and overflow.

Complete at least one correction pass after the initial render. Continue when the page still reads as a generic approximation rather than the same art direction.

## 6. Acceptance rubric

Before delivery, confirm:

- **Composition:** section proportions, focal points, overlaps, and density resemble the reference.
- **Imagery:** the correct subjects, crops, atmosphere, and asset layers are present.
- **Typography:** wording, hierarchy, line breaks, alignment, contrast, and tracking are intentional.
- **Conversion elements:** fields, buttons, trust copy, and repeated calls to action match the reference structure.
- **Design language:** colors, glows, borders, icons, and decorative motifs are carried through every section.
- **Responsiveness:** the phone version is deliberately recomposed and has no clipping or horizontal overflow.
- **Editability:** semantic content remains in native modules; raster assets are used only where they are the appropriate medium.
- **Portability:** JSON validates, custom CSS remains empty, and every project-bound asset is saved and reported.

If any of the first four checks fail, do not describe the layout as a close recreation.