The browser is evidence, not the source model
A rendered page reveals computed layout, loaded assets, responsive changes, and interaction outcomes. It does not reveal the original component boundaries or design-token intent. Reconstruction therefore starts from observed behavior and creates a new, maintainable implementation.
Useful capture records multiple viewport states, resource metadata, and safe interaction milestones. Sensitive controls should be masked in previews, and private or authenticated pages should stay out of a public-page workflow.
Structure comes before polish
The first generated pass should establish semantic regions, content order, route boundaries, and reusable patterns. Styling can then converge against captured states. This order keeps visual tuning from hiding structural mistakes such as duplicated headings or inaccessible controls.
- Use Server Components by default and add client boundaries only where interaction requires them.
- Keep route metadata near the route and global providers in the single root layout.
- Put static assets in predictable paths and document any assets that need replacement.
- Prefer explicit CSS and small components over a deep generated abstraction tree.
Editable means operable
A project is not truly editable if it only looks right once. It should install deterministically, typecheck, build, and explain how to run. Interactive placeholders should be named clearly, and external integrations should fail safely when credentials are absent.
Before adopting generated code, review dependencies, remove unreachable artifacts, test responsive transitions, and connect real forms or data sources. The handoff point is the beginning of product work—not a claim that the page is ready to publish unchanged.