The Hi-Fi Mock With AI as a Collaborator, Not an Author
There are two ways to bring AI into a hi-fi mock. One is to let it author the screen and spend your afternoon correcting what it got wrong. The other is to author the screen yourself and let AI make exactly three small, bounded moves where it is genuinely better or faster than you, then hand-finish everything else. This lesson is a disciplined demonstration of the second way: one production-ready hi-fi onboarding screen where AI does precisely three things - microcopy variants from Claude, an illustration from Firefly, a contrast check from Stark - and your own hands do the rest. The artifact you walk away with is that screen, annotated with the AI provenance of each layer, so anyone can see exactly where the model contributed and where your judgment did.
The Difference Between a Collaborator and an Author
Start with the distinction that the whole lesson hangs on, because it is easy to nod at and hard to actually hold. When AI is the author of a mock, it decides the layout, the hierarchy, the components, the copy, the imagery, and the flow, and you become a reviewer of its choices, forever cleaning up the average. When AI is a collaborator, you decide all of those things, and you delegate to the model only specific, well-defined sub-tasks where its output is easy to verify and cheap to be wrong about. The difference is not how much AI you use. It is who holds authorship.
Think of a hi-fi mock the way a film director thinks of a shot. The director composes the frame, blocks the actors, sets the light, and owns the meaning of the scene. They might ask a colorist to grade the footage, a sound designer to place an effect, a title artist to set a caption. Those collaborators are skilled and their contributions are real, but nobody confuses the colorist for the director. The shot is the director's. A hi-fi mock built with AI as a collaborator works exactly this way: you compose the screen, and you bring in the model for three bounded, creditable contributions that you direct and verify. The screen stays yours.
This is the L2 discipline at its most precise. In the First Draft and Galileo lessons, the danger was AI authoring a whole screen and you cleaning it up. Here you refuse that arrangement from the start. You never hand the model the authorship. You hand it three tasks, and you keep the screen.
The Screen You Author by Hand
The mock for this lesson is a single onboarding screen, step two of three, where a new user sets up their workspace. Everything that determines whether this screen works, you do yourself, by hand, in Figma against your design system. You decide the layout: a focused single-column form, not a two-column split, because step two should feel like forward motion, not a dashboard. You set the hierarchy: one primary action, "Continue," carrying primary weight, with "Back" as a quiet text link, because there should be exactly one obvious next step. You place real components from your library: your Input, your Button, your Progress indicator, all carrying their own tokens and states. You bind every gap to a spacing token and every text layer to a named style. You design the empty, error, and loading states, because a screen that only handles the happy path is not production-ready.
None of this is delegated, and that is the point. These are the high-stakes, system-specific, judgment-heavy decisions that determine whether the screen serves the user, and they are exactly the decisions the model handles worst. You are spending your scarce attention precisely where it matters and the model is weakest. What is left after you have authored all of this is a small set of bounded sub-tasks where the model is genuinely useful, and those are the three moves.
Move One: Microcopy Variants from Claude
The first AI move is copy, and it is bounded tightly. You are not asking Claude to write the onboarding. You are asking it for variants of three specific strings you have already decided you need: the field label and helper text for "Workspace name," the empty-state message for the not-yet-named workspace, and the success confirmation after "Continue." You give Claude your product's voice-and-tone guidance and the exact context, and you ask for five variants of each string, short, in our voice, no exclamation marks.
Claude is genuinely good at this. Generating a range of phrasings for a known, narrow slot is a high-frequency, low-stakes task where the model's fluency is an asset and the verification is trivial, because you are choosing among options you can read in seconds. But you hold the authorship even here. You pick the winning variant, you edit it to fit your voice exactly, and you reject the ones that drift cheery or generic. The model proposes five phrasings; you decide which words ship. The moment you let Claude's first variant ship unread, you have handed it a decision, and copy in a product surface is never low-stakes enough to ship unread.
Why Microcopy Is the Safe Delegation
Microcopy is the safest of the three moves because it is the easiest to verify and the cheapest to get wrong in draft. A bad copy variant is visible the instant you read it, costs nothing to discard, and never reaches a user because you are the gate. Compare that to delegating layout, where a bad choice is structural, expensive to unwind, and easy to miss. The art of using AI as a collaborator is choosing delegations that look like this one: narrow, verifiable, reversible. When a sub-task has those three properties, hand it over. When it does not, keep it.
Move Two: Illustration from Firefly
The second move is a single illustration: a small, friendly spot illustration for the onboarding screen's header, the kind of decorative-but-warming image that would otherwise cost you an hour or a stock-library subscription. You use Adobe Firefly specifically, and the choice of Firefly over Midjourney is deliberate and worth stating: Firefly carries commercial indemnification on paid Creative Cloud plans, which matters the instant this screen ships in a product a company is selling. You are making a production asset, not a moodboard, and production assets need a clean provenance.
Here too the delegation is bounded and the authorship stays with you. You direct the illustration: the style, the palette pulled from your brand tokens, the subject, the mood. You generate several, you pick one, and then you do the thing most people skip, which is to hand-finish it. You recolor it to your exact brand palette rather than Firefly's approximation, you check that it sits on your grid, you confirm it does not carry the centered-composition Firefly fingerprint that would make it read as generated. The illustration is a collaborator's contribution that you directed and finished, exactly like a colorist's grade that the director signs off on. And because Firefly's training data disclosure matters to some clients, you log it: the prompt, the model, the date, the indemnification status. That log is not bureaucracy; it is what lets you answer a legal review without a scramble.
The model is a colorist, a title artist, a sound designer. Skilled, creditable, directed. The director still composes the shot and signs off on every contribution. Authorship is the one thing you never delegate.
Move Three: Contrast Check from Stark
The third move is the one most clearly better done by a machine: a WCAG 2.2 contrast check using Stark. You have designed the screen with your brand colors, and now you need to know, exactly, whether every text-on-background pair meets the required ratios: 4.5:1 for normal text, 3:1 for large text and graphical objects, and the 2.4.11 focus-appearance minimum of 3:1 for the focus ring on your "Continue" button. This is arithmetic on color values, and arithmetic is something a tool does perfectly and you do slowly and unreliably by eye.
So you run Stark across the screen and let it tell you the ratios. This is the purest collaboration of the three, because the model is not making a creative choice at all; it is computing a fact you need. But notice that authorship still does not leave your hands, because Stark tells you the ratio, not the fix. If your helper text fails at 3.8:1, Stark reports the failure; you decide whether to darken the text, lighten the background, or increase the size to qualify as large text, and you make that decision against your design system so the fix stays on-token. The tool supplies the measurement; you supply the design decision that resolves it. Even at the most mechanical delegation, the designer decides what changes.
The Artifact: One Hi-Fi Mock With Annotated AI Provenance
The deliverable is the finished onboarding screen, production-ready, with one thing added that turns it from a mock into a teaching artifact and a portfolio piece: a provenance annotation per layer. Beside the screen, you place a short legend that names, for each AI-touched element, exactly what the model did and what you did. "Header illustration: Firefly-generated, hand-recolored to brand palette, indemnified, logged." "Workspace-name helper text: one of five Claude variants, edited for voice." "Contrast: Stark-verified, all pairs pass 4.5:1, focus ring passes 3:1; helper text darkened one step to qualify." Every other layer carries the implicit annotation that matters most: hand-authored.
The annotated provenance mock does three jobs. It documents exactly where AI contributed, which is what an honest portfolio in 2026 requires, because "I used AI" is meaningless and "AI did these three bounded things and I authored the rest" is a hireable sentence. It makes the collaborator-not-author discipline visible to your team, so the pattern spreads. And it protects you: when someone asks whether the AI designed your screen, the legend shows that the model wrote some copy variants, generated one illustration you finished, and ran the arithmetic, while you composed the screen, set the hierarchy, placed the components, designed the states, and decided every fix. The provenance is the proof that you were the director.
Why Exactly Three Moves, Not Thirteen
The constraint of "exactly three moves" is not arbitrary, and it is worth understanding why the discipline lives in the number. Each delegation carries a verification cost: you have to direct it, check it, and finish it. A few well-chosen delegations, each narrow and verifiable, save real time and the verification is cheap. But delegations compound. Hand the model ten sub-tasks and you are no longer authoring a screen with three assists; you are assembling a screen out of ten generated pieces, each needing verification, and the cumulative verification tax plus the loss of compositional control quietly turns you back into a reviewer of the average. Three is a teaching number, a deliberate floor that forces you to choose only the delegations that clearly pay off.
The real skill is not the number three; it is the judgment about which sub-tasks qualify. A good delegation is narrow (a single bounded slot, not an open-ended decision), verifiable (you can confirm it is right in seconds), and reversible (being wrong costs nothing because you are the gate). Microcopy variants, a directed illustration, and a contrast computation all pass this test. Layout, hierarchy, component choice, state design, and the strategic decision of what the screen is even for all fail it, which is exactly why those stay in your hands. Learn to run that three-part test on any sub-task and you can scale past three when it genuinely pays, without ever drifting back into letting the model author the screen.
How Authorship Leaks Even When the Three Moves Are Clean
There is a subtle failure that defeats this entire discipline while appearing to follow it, and it is worth naming because it is the most common way a careful designer still ends up shipping the average. A designer can perform exactly three bounded moves - Claude microcopy, Firefly illustration, Stark contrast - document each one immaculately in the provenance legend, and still have surrendered authorship, if they let the model author the compositional substrate before the three moves began. The tell is the order of operations: if they generated a layout first, accepted its hierarchy, and then did three tidy assists on top of the model's composition, the screen is the model's average with three correct decorations attached, and the legend's completeness is camouflage rather than evidence.
This is why the provenance legend must account for the compositional layers too, not only the AI-touched ones. The legend should affirm, explicitly, that the layout, the hierarchy, the component arrangement, and the state design were authored by hand, with any generated screen used strictly as a reference rather than a base. A peer reviewing the mock should probe exactly there: not "did you document the three moves?" but "where did the composition come from?" If the answer traces to a generated screen the designer built on rather than from, authorship leaked upstream of the three moves, and no amount of clean documentation on the bounded assists recovers it. The high-stakes layers are the ones that determine whether the screen serves the user, so they are the ones whose provenance matters most, and a legend that records only the easy contributions while staying silent on the hard ones is precisely the document a leak hides behind.
The fix is the same inversion the whole lesson rests on: author the compositional layers by hand first, completely, and only then admit the bounded assists. The discipline is not "use AI three times and document it"; it is "make every high-stakes compositional decision yourself, and delegate only the narrow, verifiable, reversible sub-tasks." When a junior's mocks pass the three-move test but still feel generic, this is almost always the diagnosis: the genericness entered through a model-authored layout that the three clean moves then dressed up. Return the composition to the designer's hands, and the genericness disappears, because the average was entering at the layer the legend was not watching.
Putting It to Work This Week
On your next hi-fi mock, run this exact pattern. Author the screen yourself first, completely: layout, hierarchy, real components, bound tokens, all the states. Then identify the two or three sub-tasks that are narrow, verifiable, and reversible, and delegate only those - copy variants, a directed and hand-finished image, a contrast computation. Direct each one, verify each one, finish each one. Then write the per-layer provenance legend, naming what the model did and what you did, and keep the Firefly log for anything that might face a legal review.
You will know the discipline has landed when you catch yourself about to delegate the layout and stop, because the layout fails the narrow-verifiable-reversible test and you know it. That catch - the reflex to keep the high-stakes, compositional, system-specific decisions in your own hands while delegating only the bounded assists - is what separates a designer who uses AI as a collaborator from one who has quietly let it become the author. The screen should always be yours. The model is welcome to color it.
Key Takeaways
- The line between collaborator and author is not how much AI you use but who holds authorship. As a collaborator, you compose the screen and delegate only bounded sub-tasks; as an author, the model decides layout, hierarchy, and flow and you become a reviewer of the average.
- Author the screen by hand first and completely: layout, one-primary hierarchy, real library components, bound spacing and type tokens, and the empty, error, and loading states. These are the high-stakes, system-specific decisions the model handles worst.
- Move one, microcopy from Claude: request five variants of specific known strings in your voice, then pick, edit, and reject. Copy in a product surface is never low-stakes enough to ship unread.
- Move two, illustration from Firefly: choose Firefly for its commercial indemnification on paid plans, direct the style and palette, hand-recolor and finish to remove the generated fingerprint, and log the prompt, model, date, and indemnification status.
- Move three, contrast check from Stark: let the tool compute the WCAG 2.2 ratios (4.5:1 normal text, 3:1 large text and graphics, 3:1 focus ring) but make the on-token fix yourself. The tool supplies the measurement; you supply the design decision.
- Ship one hi-fi mock with per-layer AI provenance annotations, and use the narrow-verifiable-reversible test to decide what to delegate. Three is a teaching floor; the durable skill is keeping authorship while delegating only the bounded assists.
Skill.re