A design-judgment skill for AI coding agents
This is what your agent ships when nobody is judging it.
Four real interfaces, nineteen reversible moves, every one with the reasoning attached. Flip a switch and watch the spectacle stop outranking the job.
Works with the AI you already use. Paste one line and it sets itself up.
Seamlessly unlock next-generation productivity with our intelligent, AI-powered platform built for modern teams.
- Unlimited everything
- Advanced analytics suite
- Priority support experience
- Enterprise-grade security
Case 01, a pricing card
The Ive Cut
The card above changes when you toggle a move below.The card beside this panel changes when you toggle a move. Keep the card in view, read the lens, then switch one move on and off. If you disagree with the reasoning, that is worth more than agreeing. Nothing here is applied to any real page.
Ive's lens: the warning is "don't wag your tail in the user's face". Design that demands admiration has failed, because the person came here to do something. Right now the decoration is bright and the one control that completes the task is the dimmest thing on the card. He would not accept a primary action quieter than the ornament around it, and his test is blunt: if it does not work, it is ugly, whatever it looks like.
What changes: the button becomes a solid, high contrast fill instead of a near invisible ghost. Nothing else moves.
What he would ask: what did this person come here to do, and why is the one control that does it the quietest thing on the card?
Risk: it may pull so much weight that the annual option is lost entirely. Judge it together with move 2, and check the purple does not vibrate against this background.
Ive's lens: this is the guardrail he learned the hard way. The Extrudo iPhone was a beautiful extruded aluminium design that physically hurt to hold, and it was killed for it. The lesson he took was never to trade a real function for visual purity. A control the user cannot find does not exist for that user, however elegant its restraint looks on the page.
What changes: the annual line goes from 10px near transparent text to legible, underlined and clearly clickable, while staying secondary to the button.
What he would ask: if a control cannot be found, in what sense does it exist?
Risk: pushed too far it competes with the primary action. Keep it a link rather than promoting it into a second button.
Ive's lens: "if something doesn't work, it's ugly." He says it plainly, and it removes the aesthetic defence entirely. Text set below the contrast a person can comfortably read does not work, so on his own terms it is not a subtle choice, it is an ugly one. Low contrast grey on glass photographs beautifully and fails the eye.
What changes: the description, the feature list and the billing period text move from roughly a quarter opacity white up to legible levels.
What he would ask: you are asking someone to decide whether this is worth the money, so can they actually read what they are buying?
Risk: brighter body copy flattens the hierarchy. Check that the price still leads once the list is legible.
Ive's lens: motion the user consciously notices is usually too much. His register for movement is "settle, do not snap": things ease to rest, they do not perform. A field that rotates forever never rests, so it competes with reading for attention it was never meant to hold, and it does that permanently rather than once.
What changes: the rotation stops. Colour, position and blur are untouched, so this is motion only.
What he would ask: what is this movement for, and what does the reader get from a field that never comes to rest?
Risk: some people read constant motion as alive and modern, and a still field can feel flatter. That trade is exactly what this toggle is for.
Ive's lens: "let each element be true to itself." A gradient clipped into text is a free signal that something was designed, and it says nothing about this product in particular. The headline is a thing to be read, so it should behave like text rather than borrow the appearance of a surface it is not.
What changes: the headline drops the violet to cyan to pink clip and becomes solid white.
What he would ask: does this colour carry meaning, or does it only signal that somebody designed it?
Risk: this is the most taste dependent move in the set. If the brand is genuinely loud, kill it. Your taste outranks the reference here.
Ive's lens: honest materials again. A real object separates from its background by casting one shadow, not by emitting light it has no source for. The card already has a drop shadow and an inner highlight doing that job truthfully, and the 80px purple bloom is a fourth light competing with three background gradients.
What changes: the card keeps its structural shadow and inner highlight and loses the purple glow.
What he would ask: where is this light coming from, and if there is no answer to that, why is it here?
Risk: the card separates slightly less from the background. Confirm the edge still holds on the border and drop shadow alone.
Ive's lens: decoration must not outrank the content it introduces. The diamonds are currently full saturation purple while the feature text they point at sits near invisible, which inverts the hierarchy: the bullet is louder than the benefit. A marker exists to help a list scan, not to be looked at.
What changes: the diamond markers move from saturated purple to a muted tone. The text is untouched by this move.
What he would ask: which matters more, the list or the marks that introduce it, and which one is louder?
Risk: too quiet and the list stops reading as a list. This pairs with move 3, so judge the two together.
Case 02, a signup form
The form that forgets what it asked
A standard account signup, real markup rendered as is, carrying four defects at once.
The job: a person creates an account in one pass, without guessing what a field wants or where they are.
Create your account
Start your 14 day trial. No card required.
Error: That email is already registered.
Company, phone and role are asked after the account exists.
By continuing you agree to the terms and the privacy policy.
The form above changes when you toggle a move below.The form beside this panel changes when you toggle a move. Read the lens, then switch one move on and off. If you disagree with the reasoning, that is worth more than agreeing. Nothing here is applied to any real page.
Ive's lens: a placeholder is not a label, it is a label that deletes itself the moment you need it. The reader types three characters, looks away, looks back, and the field no longer says what it wants. Worse, a half filled form becomes unreadable: the answered fields have lost their questions. He does not accept a control that stops explaining itself under use. If it fails while being used, it does not work.
What changes: each input gains a persistent label above it, and the placeholder either goes or drops to a format hint that is no longer carrying the field's identity.
What he would ask: come back to this form half finished and tell me what the third box wanted. If you cannot, who did you build the placeholder for?
Risk: labels above every field make the form taller, and a taller form reads as more work. Move 4 is what pays that back.
Ive's lens: the outline was removed because it was thought ugly, and nothing was put in its place. For anyone on a keyboard that is not a tidier form, it is a form with the cursor switched off. Beauty that costs the user their position is a misunderstanding of what beauty is for. It cannot look resolved by breaking the one cue that says where you are.
What changes: a two pixel focus ring returns, with an offset so it reads clearly against the field edge, at no less than 3:1 against the surface behind it.
What he would ask: tab through this form without touching the mouse. Where are you? If you cannot answer instantly, what did removing the outline actually buy?
Risk: a ring drawn tight to the border can look like a validation state. The offset is what keeps focus and error legible as different things.
Ive's lens: ten pixel type, set in red, floated away from the field it judges. Three failures at once: too small to read, too far to connect, and colour doing work alone for anyone who cannot see it. An error is the most urgent sentence on the page and it has been given the least of everything. This is not restraint, it is an apology hidden where it will not be found.
What changes: the message moves to thirteen pixels, sits directly beneath the field it belongs to, and gains a text prefix so red is no longer the only thing saying something is wrong.
What he would ask: if this reader cannot see red at all, how do they learn the email was rejected?
Risk: an adjacent message shifts the fields below it when it appears. Reserve the line so the form does not jump under the reader's hands.
Ive's lens: three of these fields are not required and are asked anyway, because they were cheap to add and someone downstream might want them. Every one is a toll charged to a person who has not yet decided to trust you. Simplicity is not what is left when you run out of ideas, it is deciding what does not deserve to be there. Four questions, asked once, is the whole form.
What changes: company, phone and job title come out of the signup path and move behind a clearly named optional step after the account exists. The form is name, email, password, confirm.
What he would ask: which of these do you need to create the account, and which do you merely want? Ask the second set later, or admit you are charging for them now.
Risk: the optional fields still need somewhere to live, and a step nobody returns to collects nothing. Put them where the answer is actually useful.
Case 03, a data table
Read the table, not the grid
A plain transactions table, real markup rendered as is, carrying four defects at once.
The job: someone scans this list, compares a few amounts, and acts on one row.
| Date | Description | Status | Amount | Actions |
|---|---|---|---|---|
| 2026-01-14 | Card payment | Settled | $1,240.00 | |
| 2026-01-12 | Subscription | Settled | $59.90 | |
| 2026-01-09 | Refund issued | Refunded | −$145.20 | |
| 2026-01-05 | Payout | Pending | $3,004.75 | |
| 2026-01-03 | Transfer in | Settled | $820.00 | |
| 2025-12-30 | Adjustment | Failed | −$12.50 |
The table above changes when you toggle a move below.The table beside this panel changes when you toggle a move. Read the lens, then switch one move on and off. If you disagree with the reasoning, that is worth more than agreeing. Nothing here is applied to any real page.
Ive's lens: a column of money has one job, to be read down its length and compared. Left aligned proportional figures defeat that job on purpose: the decimal points wander, a 1 takes less room than an 8, and two amounts a reader wants to weigh against each other never share an edge. He does not treat that as a neutral choice. If the column will not let you compare, it does not work, and on his terms that settles what it is.
What changes: the amount column moves to the right edge and switches to tabular figures, so every decimal point sits in the same place and the digits stack into real columns. No value changes.
What he would ask: what is a column of money for, if not to be compared down its length, and why have you made that the one thing it cannot do?
Risk: right aligned numbers can drift from a left aligned header label. Right align the header cell too, so the title sits over its own column.
Ive's lens: eleven pixels packed into a twenty six pixel row looks efficient in a screenshot and fails the moment someone has to read a screenful of it. He does not read small and tight as sophistication. Text set below what the eye can take in does not work, so this is not the restrained choice it presents itself as, it is the unreadable one. Room to read is not wasted space.
What changes: the body text goes to thirteen pixels, the rows open to roughly forty four, and the header lifts off the body with its own rule, so the eye can carry a single row across the table without losing the line.
What he would ask: who actually has to read a full screen of this, and have you ever tried to, or did it only need to look tidy from a distance?
Risk: taller rows show fewer at once, so a long list means more scrolling. That is the right trade for a table meant to be read rather than glanced at, but confirm the density still suits the task.
Ive's lens: a bare icon asks the reader to guess, and what a control does is not a thing anyone should have to guess. The lesson he took from the controls that had to be relearned is blunt: a function a person cannot identify is not available to them, however clean the glyph looks. An eye and a sheet of paper are decoration until they are named.
What changes: each action keeps its glyph and gains a real name and a visible text label, so the row reads view and receipt in words instead of leaving the reader to hover and hope.
What he would ask: can a first time reader say what each of these buttons does without clicking one to find out?
Risk: labels widen the actions column and cost horizontal room. If space is genuinely tight, keep the labels and drop a less used action rather than hiding every name again.
Ive's lens: the vertical rules and the striping are scaffolding, and here the scaffolding is louder than the building. Every cell is boxed and every other row is filled, so the eye has to push through a grid to reach the one thing on the page that matters. Decoration must not outrank the content it frames. A rule earns its place only where the layout would fail without it, and most of these do not.
What changes: the vertical gridlines and the zebra fill come off, and a single hairline stays under each row. Nothing frames the data any more, it only separates one row from the next.
What he would ask: which is louder right now, the numbers or the lines drawn around them, and which did the reader come for?
Risk: strip too much and a wide row can lose its tracking across the table. The one horizontal hairline is what keeps the eye on its line, so keep that and only that.
Case 04, a mobile app screen
Off the page, onto the thumb
An activity summary screen, real markup rendered as is, carrying four defects at once.
The job: someone opens this to see one number, then logs one thing.
The screen above changes when you toggle a move below.The screen beside this panel changes when you toggle a move. Read the lens, then switch one move on and off. If you disagree with the reasoning, that is worth more than agreeing. Nothing here is applied to any real app.
Ive's lens: the timestamps sit at 1.79:1. That is not quiet, it is off. It reads as restraint in a screenshot and disappears entirely in daylight on a phone held at arm's length, which is the only place this screen ever runs. Muting text until it cannot be read is not taste, it is a decision to publish something and hope nobody needs it.
What changes: the meta text moves from #3d414b to #8b929e, taking it from 1.79:1 to 5.62:1 against the screen, which clears AA for body text with room to spare.
What he would ask: read the third timestamp outdoors. If you had to tilt the phone, who exactly was the low contrast serving?
Risk: lifting every secondary line can flatten the hierarchy. Raise the meta to legible and leave the primary above it, so the order still reads.
Ive's lens: a decorative gradient occupies the top third of a screen whose entire purpose is one figure. The ornament is bigger, brighter and better lit than the data, so the eye lands on the flourish and has to work its way back to the point. Decoration must not outrank the content it frames. This is the clearest case of it on the whole page.
What changes: the blob shrinks and drops in intensity, and the figure grows and moves to full white, so what the person opened the app to see is the first thing they see.
What he would ask: what did this person open the app to find out, and is that the first thing their eye reaches?
Risk: strip the warmth entirely and the screen turns clinical. The gradient can stay, it simply cannot be the loudest thing on the screen.
Ive's lens: read the times down the list: 07:12, 12:40, 18:05, 16:30, 21:10, and a sleep entry from the night before sitting at the bottom. The evening walk is filed above the afternoon ride, and the night that started the day is last. There is no rule here, which means the reader cannot skim, cannot predict where anything is, and has to read all six rows to be sure of any one of them. A list whose order means nothing has made the reader do the sorting, and on his terms a thing that hands its work to the person using it does not work.
What changes: the rows sort chronologically, so last night's sleep opens the day and the entries run forward to the evening stretch. No row is added, removed or restyled; they are only put in the order they happened.
What he would ask: without reading every line, tell me what you did most recently. If you had to check all six, what was the order doing for you?
Risk: time is the right order for a log, not for every list. If someone opens this to find their biggest effort rather than their latest, sorting by figure serves them better, and the two orders cannot both be the default.
Ive's lens: the action bar floats over the list and permanently hides the last row. The screen is telling the reader that the list ends where the bar begins, and that is not true. It is a small lie about what fits, told for the sake of a floating control. He would not accept a layout that hides its own content to look uninterrupted.
What changes: the scroll area gains bottom padding equal to the bar's height, so the final row clears the button instead of living underneath it.
What he would ask: scroll to the end of this list. Is that the last entry, or is that only where the button starts?
Risk: padding leaves an empty band under a short list. That is the correct trade against a row nobody can read.
“If something doesn’t work, it’s ugly.”
Install
Paste that line into your terminal. It looks for the AI coding tools already on your computer and adds Jony to each one it finds. You do not have to pick a folder or change any settings. Put a space and-g on the end if you want it in every project rather than just this one.
Tested with Claude Code, opencode, Cursor, Codex, Kiro, Factory Droid. It also works with anything else that reads the same open skill format, which is most of them.
Windsurf is the one exception. It cannot pick a skill up on its own, so you copy the text in once by hand. The readme shows you where it goes.
Nothing happens until you ask. Next time you have an agent build or change a screen, it will work through the moves with you, one at a time, and wait for your yes on each.
Jony and other design skills are complements. Install both if you want an agent that can make a screen better and a skill that makes your own eye harder to fool.
Provenance and legal
Built on published primary material, including an official verbatim transcript of Ive in conversation with Patrick Collison at Stripe Sessions 2025. Where a claim could not be traced to a citable source, it was removed rather than softened. Critics are named inline, at the point where their argument is used.
During construction, two widely repeated Ive quotes turned out to be false. One phrase was invented by an intermediary. One famous line was actually said by his interviewer. Both were caught only by checking a primary transcript, and both were removed instead of being smoothed into something easier to sell.
An independent project. Not affiliated with, endorsed by, or sponsored by Jony Ive, LoveFrom, or Apple Inc. Quotes belong to their speakers and are cited to their published sources.