165 design references

Follow a complete design-build workflow

@ux.aneta on Instagram

A long job is easier to follow when each step names its rule first and then shows the real file, instead of opening with a row of tool logos.

What to look at

The cover piles logos and sample pages over “My vibe coding process” and “Start to finish,” with Aneta Kmiecik’s name under the type. Part 01, Context and scope, then puts the rule in red: a clear brief means the agent does not have to guess. Four black lines follow, including a short PRD and saying what is out of scope, and only then do the files appear: a Claude screen labeled research and PRD, Granola notes beside a call, and a Mobbin board of phone screens. Parts 02 through 05 keep that order. System, Build in batches, Critique it, and Polish and ship each open with a red rule, then the screens for that rule: Figma and Paper, Claude Code, a note pinned on a button in Agentation, then Skills, Luma, and a plain card for Supabase, GitHub, and Vercel. The last card brings the logos back and asks people to comment “VIBE” for the links.

Part 01 states the rule in red, and the jobs under it, before any tool screenshot appears.
Part 01 states the rule in red, and the jobs under it, before any tool screenshot appears.
The next kind of card is the file itself: Granola notes beside a call, under the label Contextual insights.
The next kind of card is the file itself: Granola notes beside a call, under the label Contextual insights.

Why it works

This is staged disclosure: one part of the job on screen at a time, so that part stays simple because the other parts are hidden. The red line under each part name tells you the point of the step before the screenshots arrive. The PRD, the call notes, and the row of phone screens then give you something to recognize, which is easier than hearing “write a brief” and having to picture the page yourself.

Try it

  1. Number the work in five stages or fewer, and print the number on the section itself.
  2. Open each stage with one sentence that states the rule, then show a real file from a job: notes, a sketch, or a screen.
  3. Put tool names under the picture, and do not open the page with a row of logos.
  4. Say what that stage will not include, the way the first part says to name what is out of scope.
  5. Repeat the offer on the first section, because many visitors never reach the last card.

What it costs

Seventeen cards is past the five-frame limit, and many people never get past a cover of logos, while the proof cards are full app windows that are hard to read on a phone. The steps also depend on each other, and this kind of step-by-step layout gets clumsy when the reader has to jump back from the critique to the system.

Words worth knowing

Sources