Hey and welcome back to a new week!

Two weeks ago, I shared a few reflections from the Hatch roundtable on training the next generation of designers. One point from that discussion deserves a closer look: how do you actually learn what good design looks like?

This week, I’m breaking down a practical exercise I would recommend to juniors: recreate a strong design, reverse engineer its rules, and use what you learn to judge and improve your own work—including what AI helps you make.

In this issue:

🎙 THIS IS HOW I USE AI MOSTLY - BY TALKING

When you type a prompt, you summarize. When you speak one, you explain. Wispr Flow captures your full reasoning (constraints, edge cases, examples, tone) and turns it into clean, structured text you paste into ChatGPT, Claude, or any AI tool. The difference shows up immediately. More context in, fewer follow-ups out.

Used by teams at Microsoft, Amazon, and Notion. Try Wispr Flow free on Mac, Windows, iPhone, and Android.

Start flowing free

Two weeks ago, I wrote about the two things I would invest in as a junior designer now: people who can help you develop, and the fundamentals that help you judge your own work. I want to make that second part more concrete, because “learn the fundamentals” can still leave you wondering what to actually do tomorrow morning.

Here is one exercise I would put near the top of the list: take a good design, recreate it carefully, and reverse engineer the rules that make it work.

This has always been useful. With AI producing so much of the first version of our work, I think it has become even more valuable. You need to know what good looks like before you can reliably tell a tool how to get there.

Ask an AI tool to “build me a website for X,” and you will get something. Depending on the model, the tool, and the context you give it, that something might be impressive, mediocre, or surprisingly close to usable. But vague requests often produce a familiar result: a collection of plausible sections with generic styling, awkward type, and a visual hierarchy that never quite settles.

People tend to call this “AI slop.” I am not particularly fond of the term, partly because it gets used for almost anything made with AI, including work that is actually very good. There is a clear difference between a generic output whose decisions nobody has properly examined and a considered design that happens to have been made with AI's help. I want you to be able to produce the latter.

That requires more than getting good at prompting. If a heading feels wrong, you need to see what is wrong with it. If a page has inconsistent spacing, you need to recognise the inconsistency. Otherwise you end up asking the tool to “make it better” and hoping its idea of better matches yours.

The exercise below gives you something much more useful to work with: an understanding of the decisions beneath the surface.

Go to Mobbin, or open a product you already use on your phone or computer. Pick a screen that feels well designed. It does not need to be spectacular. A clear settings page, a thoughtfully composed dashboard, or a well-balanced signup screen can teach you plenty.

Take a screenshot, paste it into Figma, and create a frame beside it at the same dimensions. Then recreate the screen as closely as you can. Yes, in Figma. For this part, I would start manually.

Try to match it pixel for pixel. Keep the same content so that differences in line length do not confuse the comparison. Match the layout, the text, the spacing, the colours, and the proportions. You can temporarily overlay your version on the original to see where they diverge, but spend time comparing them side by side too.

It is easy to make a version that looks roughly similar. The learning happens when you try to close the gap and discover that you cannot quite explain why yours still looks different.

That is why I would avoid asking AI to recreate the whole screen for you at the start. You want to spend some time inside those decisions yourself. Watching a tool make the copy skips much of what makes this exercise useful.

Typography is an excellent place to begin. You might pick the correct font and size, then discover that the heading still looks completely different. Before you change the font again, check the weight, letter spacing, line height, and width of the text container. Each can change the shape and rhythm of the same words.

A heading can feel tight and deliberate in the original, then loose and oddly disconnected in your recreation because the line height is too generous. A paragraph can occupy the right area but feel denser because its lines sit too close together. A small change in letter spacing can make a large heading feel surprisingly different.

I am not suggesting you obsess over every tiny typographic detail forever. I am suggesting you learn the fundamentals well enough to spot when something is generally off, and have a useful idea of what to check. There is a big difference between saying “I don't like this heading” and recognising that its line height is weakening the composition.

Then look at the rest of the screen. Where do elements line up? Which things are grouped tightly, and which are separated? How much space sits inside a card compared with the space between cards? What catches your attention first, and what makes that happen?

Colour deserves the same attention. A subtle surface might be a separate grey, or it might be a transparent layer over the background. Try both and notice how they behave. A screenshot alone may not tell you which implementation the original uses, but testing the alternatives helps you understand the difference. That becomes especially useful when the background changes or you move between light and dark surfaces.

You will also hit technique problems. You might not know how to recreate a gradient, an icon, or a particular effect. Look it up, learn enough to move forward, or leave a difficult asset as a placeholder while you study the surrounding layout. Do not let one elaborate illustration consume the whole exercise.

Technique is still useful. But the most valuable thing you can take away here is an understanding of why the composition works. Tools can increasingly help with execution; you still need to recognise the result you are aiming for.

Once you have recreated it, take another pass and write down the patterns you found. You may already have spotted some while working, but make yourself explain them now.

For example, you might notice that a screen uses:

These are the rules that make the screen feel coherent. Individual values matter because of the relationships they create. A 24-pixel gap does a different job between two sections than it does between a label and its input.

One of the biggest unlocks for me was understanding spacing systems based on four or eight pixels. Instead of choosing a fresh distance every time, you work with a consistent set of values. Figma's guide to spacing, grids, and layouts is a useful introduction to the eight-point approach.

You will find systems like this in plenty of good interfaces, although you should not assume every measurement will fit perfectly. Some designs use a four-pixel base, some use eight with smaller increments for fine adjustments, and some have a different scale entirely. Optical corrections and specific content can also justify exceptions.

The useful discovery is that spacing has a structure. Once you have seen that structure repeatedly, an interface with arbitrary gaps becomes much easier to diagnose. You can start thinking about which relationships need fixing rather than nudging every element independently until it feels acceptable.

This is what I mean by reverse engineering good design. You are uncovering a system you can understand and apply elsewhere.

The exercise does not have to remain entirely manual. Once you have spent time with the design, AI can be useful for explaining patterns you have missed or helping you put observations into words.

If the tool can inspect a live website and its DOM and computed styles, ask it to analyse the actual spacing, typography, layout, and colour choices. That gives it more concrete material than a screenshot alone. You could use a prompt like this:

A screenshot can still be useful, but expect more estimates. And remember that identifying a value is different from knowing why the original designer chose it. AI can suggest an explanation; you need to compare that explanation with the design and decide whether it holds up.

Use the breakdown to check your own notes. Did you miss a repeated gap? Did you assume every card used the same background when one is actually a translucent layer? Does the explanation help you understand why a particular group feels connected?

That is a productive use of AI: it helps you inspect the work more closely. Your own observation remains part of the process.

Now return to your own work, including anything you are building with AI. You have much better instructions available than “make it look professional.”

For a particular project, you might specify an eight-pixel spacing scale for the main layout, four-pixel increments for small internal gaps, one font family with a defined set of text styles, and a consistent rule for grouping related information. You could also specify where the accent colour belongs and how secondary information should differ from primary content.

Those constraints should fit the project. A maximum of two font families might be useful for one direction; a single family might serve another perfectly. The typography and density of an enterprise table will need different treatment from a marketing page. You are learning how to choose a system that suits the work.

Then inspect what the tool produces. Did it follow the scale consistently? Does the heading actually have the rhythm you intended? Do the groups read clearly? Rules give the output a stronger starting point, but you still need to look at it.

Over time, this also changes your feedback. “The spacing feels weird” becomes “the gaps inside this group are larger than the gap separating it from the next group.” That is a much more useful diagnosis, whether you are giving it to AI, discussing it with a colleague, or fixing the design yourself.

One recreation will teach you something. Repeating the exercise is what makes the patterns easier to recognise without measuring every value.

If you have time, study one small screen a day. If that is unrealistic, aim for two or three a week. Keep the scope manageable: one screen, one section, or even one well-designed component. After each study, leave a few notes about what you found and try applying one of those ideas to your own work.

There is a familiar parallel in art education: studying an existing work by making a copy forces you to look more closely than simply admiring it. Recreating an interface does something similar. You discover decisions that were almost invisible when you were just scrolling past.

I think a few weeks of consistent practice can make a noticeable difference. You begin to see why one layout feels composed and another feels assembled. You can name what is wrong, choose a sensible correction, and judge whether the correction worked.

That understanding is useful however the design gets made. And when AI gives you its next plausible first version, you will have a much clearer idea of what to keep, what to change, and how to finish it.

🦜 IF YOU DON’T KNOW HOW TO PHRASE PROMPTS, JUST DESCRIBE IT

You think 4x faster than you type. So why are you typing prompts? Wispr Flow turns your voice into ready-to-paste text inside any AI tool. Speak naturally, tangents and all, and Flow cleans it up. Available on Mac, Windows, iPhone, and Android.

Try Wispr Flow Free

Helen Li is a product designer with a background in cognitive science and psychology, and that background comes through in how she approaches and presents her work.

Helen and I worked together for a while on her portfolio. She has made substantial progress, from the way she explains her projects to how she introduces herself as a designer.

Two things deserve a closer look: her compact project summaries and the positioning that ties her work together. Let’s jump into those, along with two areas where the presentation could become stronger.

That’s it for this week—thanks so much for the support! ♥️

Do you want your own portfolio reviewed in-depth with a 30-minute advice-packed video portfolio review? Look no more. I do offer these as an async service you can book directly with me here.

Keep kicking doors open and see you next week!
- Florian