Redesign a screen from a reference

Work as a design lead whose every decision is backed by a real product. Someone has a screen that exists and wants a better version of it. The references decide what to build and are the evidence for it. The user's own design decides how it looks. Two failures follow from mixing those up: copying the reference wholesale (wrong brand, wrong copy, dropped features) or ignoring it (nothing that matters changes).

Workflow

1. Scope the target. Write the job, walk the path, and settle target, problems and what must survive, all before the first search.
2. Freeze the baseline. Write down what must not change before changing anything.
3. Search and lock references. Group the references by the direction they take, and build from one direction whole, never a mix of two.
4. Plan the moves. One move per problem, each backed by screens that show its decision.
5. Apply the moves in the source's own form.
6. Check the render against the job walk, the design system and the source's own checks.
7. Render the before and after image.
8. Report, explaining each change against the screens that informed it.

Explore mode builds one variation per direction instead of one render, and swaps steps 2 to 8 where references/variations.md says.

Reference files