One job per screen

Each page carries one main task; everything else gives way.

Each page carries one main task; everything else gives way. All the features are there, yet the product feels tiring to use: everything on the page weighs the same, so every screen starts with a multiple-choice question.hick

What you'll run into:

• You ask the AI for a workspace and it turns your five features into five identical cards
• It looks fine to you, but the first thing anyone else says is "which one do I click?"
• The only way you can think to highlight a feature is bolder, more borders, more background — and it keeps getting messier

A page should have one clear main task. The user came here to do that one thing, and everything else on the page gives way to it: smaller, pushed further back, or folded into navigation entirely. When you ask AI to generate a page, it tends to lay out every feature you mentioned at the same weight, because it has no reason to think one matters more than another. You say "build a dashboard with a project list, a data panel, team management, messages, and settings," and it gives you five equally sized cards. Each one exists, none stands out — the user walks in and faces a multiple-choice question. Feature-complete and clearly prioritized are two different things. AI can get you the first; only you can decide the second.

To judge whether a page passes, ask one question: if the user could tap only one thing on this page, which should it be? If you cannot answer, the page is not designed yet.

How to find that one thing

• Look at where the user came from. A detail page reached from search results has one main task: confirm whether this is what they were looking for. Reached from a notification, the main task is reading that update.
• Look at the stats. If it's already live, eighty percent of clicks land in one or two spots — that's the main task; reorder the page around it.
• Look at frequency. What's used daily goes front and center; monthly goes into settings; one-time flows (like initial configuration) should disappear when done.

Where the low-frequency features go

What you push off the first screen does not disappear — it lands in the navigation. There are basically four nav forms, and which one you pick depends on how many top-level modules the system has.

Design considerations

• One main task gets one primary button — no second button of equal weight on the same screen. Two equally prominent buttons means no primary button. Demote secondary actions to text links or ghost buttons with clearly less weight, and the eye lands where it should.
• Tuck low-frequency features into the nav, off the first screen. Billing, member management, integration config — things you touch once a month — belong in the top menu or settings. Their only effect on the first screen is to dilute the main task.
• Prefer one more page over cramming two jobs into one. Pages are cheap; attention is expensive. Forcing two tasks onto one screen means the user has to figure out which half they're in every time. Splitting into two pages with a clear entry is actually faster.
• Build hierarchy with position and size, not borders and fills. Adding a gray background to push a secondary module back usually does the opposite — every new block of color is a new visual focus. What actually pushes it back is shrinking, lowering, or removing the icon.
• Reserve the non-scrolling part of the first screen for the main task and its context. The part visible without scrolling is the most expensive real estate — it should answer where the user is and what they can do, not host announcements.
• The same page may have different main tasks for different roles. Admins come in to approve; members come in to submit. Rather than one compromise page that accommodates both, render different main regions per role and keep the nav consistent.

A note for AI

AI will not judge priorities on its own — you have to write them into the spec. This template works for any new page.

PROMPT · Page spec

Page: [page name]
Where the user comes from: [entry point, e.g. "from the sidebar" / "from an email notification"]

Main task (this page serves only this one thing):
[one sentence, e.g. "quickly get back to the project I was working on"]

Also on the page, but all secondary:
- [secondary item 1]
- [secondary item 2]

Low-frequency features — put them in the top nav or settings, not on the first screen:
- [low-frequency items...]

Layout constraints:
- One primary button on the whole page, tied to the main task. Secondary actions use text links
  or ghost buttons, with visual weight clearly below the primary button.
- The area visible without scrolling holds only the main task and its necessary context.
- Demote secondary modules by shrinking type and moving them lower — not with gray backgrounds or borders.

Describe your intended layout order and the visual weight of each block in a paragraph first.
Write code only after I confirm.

If the layout description AI returns names three or more "important" modules, the main task isn't defined yet. Fix the spec; do not tune the code.

Real examples

• Google's homepage: the most extreme version of this pattern. The whole page is one input box; dozens of other products are folded into a single nine-dot icon in the top-right corner.
• Gmail: the main task is "process the inbox," so the entire center is the mail list and the only primary button is compose. Labels, filters, and settings all live in the sidebar and corners.