Refine an interface
Improve layout, typography, spacing, and interaction using the product’s actual content.
Picture opening a screen and knowing instantly where to look. Craft is that quality: what pulls your eye, how pieces relate, how controls answer, whether the screen holds together with real content in it.
A tidy component library is a start. The composed screen still needs a point of view rooted in what you're trying to get done.
Make the main task easy to find
Name the one decision that matters most. Rank what supports it. Pick your key alignments and proportions, and choose deliberately between dense work and breathing room.
Say it's a request queue: the title, status, and next action deserve more weight than timestamps. Say it's a guide: the explanation and example deserve more room than decorative chrome. One visual system can serve both without one layout.
When the structure is uncertain, compare two genuinely different arrangements. Judge order, width, density, and what happens on narrow screens before you touch color or radius.
Watch for
- Ten equally loud cards making everything look equally important.
- A gradient or new radius covering for a buried action.
- Polishing type and decoration when order, width, or density is the problem.
- Stacking decorative tweaks instead of one focused revision against the before.
Strong default
Resolve relationships before effects. Close and aligned before boxes, a small family of surfaces and radii, motion only to explain a change or confirm an action, and long real content in early so it shapes the layout.
Choose how much to change
A vague "make it better" deserves more than polish. But don't tear down a strong screen for novelty's sake either.
| Intervention | Use it when | Example |
|---|---|---|
| Preserve | It already does its job well. | Keep a clear, familiar navigation pattern. |
| Repair | One defect blocks an otherwise good structure. | Fix the project name bursting out of its row. |
| Refine | The structure works but the hierarchy feels off. | Tune type, grouping, density, and button weight. |
| Recompose | The arrangement itself buries the task. | Swap an irrelevant metric grid for a review queue. |
Match the effort to the diagnosis: repair the defect, refine the hierarchy, recompose only when the arrangement buries the task.
Review the whole screen, then the details
Start zoomed out: where does your eye land, and do the regions balance? Then look at real size: is the task obvious, does the copy fit, do the controls sit together? Then the details: baselines, wrapping, focus, separators, state changes.
Make one focused revision from what you saw. Compare it against the before instead of stacking decorative tweaks.
For a documentation page, that review could look like this:
| Reader's task | What to inspect | Useful revision |
|---|---|---|
| Find the relevant section | Do headings describe the decisions inside? | Replace repeated labels such as “What to understand” with the actual topic. |
| Follow an example | Are the explanation and example close together? | Put the example immediately after the decision it illustrates. |
| Compare options | Can you read labels and commands without broken words? | Give columns room and let a wide table scroll within the article. |
| Continue with an agent | Does the skill name lead anywhere? | Link to its instructions and show what context to provide. |
Keep body text easy to read and status labels understandable without color. Add emphasis where it helps someone find a decision; bolding every sentence removes that distinction.
Verify
Try narrow, middle, and wide widths, long names, missing images, enlarged text, and the states where things fail. Redo the main task with keyboard, touch, and mouse. Check sticky headers and overlays while moving between pages — not just still screenshots. Ask your agent: "run this screen through long labels, empty content, and a failed save, at three widths."
Related skills
Use $craft for the whole interface, $layout for page structure, $tokens for shared visual roles, or $states for missing behavior. Choose the one that matches the problem.
Last updated on