Designing a surface begins with what a person should do, understand, notice, or feel. Beauty, metaphor, and brand support this outcome. An expressive cover can be a goal in itself; the problem arises when style obscures the interface's task.
The main trap is getting caught up in the style and not thinking about the experience: the mockup looks finished and works poorly. The order below keeps style last.
Surface — everything a person sees and acts on at one time: a page block, a mobile screen, a modal, a sheet, a screen state, a flow step. The principle is the same for web and mobile; choose devices, composition, and checks based on context.
How to work together
By default, the user leads the design. The agent responds to the current question: helps formulate the goal, gather material, compare approaches, test an assumption, or review a mockup. Give a recommendation and rationale, but do not choose the direction for the user and do not independently move from discussion to developing the entire design.
Discuss the direction before developing it, rather than bringing a finished solution for formal approval. Do not re-approve decisions already made. If the user has assigned independent development or a specific stage, carry out the assigned scope without asking permission for every reversible step. This assignment does not automatically carry over to subsequent tasks.
Design layers
This skill leads the first layer — design: goal, content, references, composition. The following layers begin only when design has a result.
| Layer | What it solves | What to use |
|---|---|---|
| Design | what the person does, what they see, in what order, where things are located | this skill, steps 1–4 |
| Visual language | color, typography, illustrations, metaphor, brand layer | step 5 of this skill, existing brand principles, or a separate discussion with the user |
| Polishing | spacing, alignment, states, small typography | better-layout and the other better-* skills |
Do not go through all the steps ritually. If the goal and content are already agreed upon, start from the first unclosed step.
Before starting
For the current question, gather what already exists: the brief or spec, who the audience is and where the traffic comes from, real content (texts, covers, number of elements), platform constraints, and existing product screens. When delegating the collection of materials, hand the user the findings with their grounds and gaps; collection does not mean choosing a direction.
Order of work
If at any step it turns out that the goal is wrong, return to step 1 rather than fixing the form.
1. Goal of the surface
The goal is always mandatory. The metric is not: it is written only when there is a way to measure it and a decision depends on it.
- The goal is a change for the person, not what the screen does. "The block shows collections" is a description of the layout. "The person finds a collection by a familiar author and opens it" is a goal. Format: "When [situation, where they came from], the person wants to [do, understand, notice, or feel], so that [outcome]" — and in one line, why this matters to the product.
- No solution in the wording. Not "a carousel is needed", but "to see several collections without leaving the page".
- The main result. What the person should do, understand, notice, or feel. For an action, determine the priority; for observation, the order of attention; for an expressive surface, the desired impression. Do not invent a CTA for the sake of the format.
- Signals. By what will achievement of the goal or failure be visible. For an interactive surface these can be actions (left, came back, did not reach); for observation or impression — errors of understanding and judgment. There can be several signals, but each one changes the decision: "if we see X — we keep it, Y — we change it".
- Level of evidence. Mark honestly: measurable, visible by eye, or a judgment. Do not fake a metric where there is nothing to calculate it with.
- What we do not do. A short list of what we consciously give up.
If the goal does not come together — this is not a design question, go to ask-nodumb. Formats, rules about metrics and traps — in goal-and-success.md.
2. Content for the goal
What a person needs to see to get the result from step 1 and in what order. Rank by importance; everything that does not help the goal is a candidate for cutting, even if it is beautiful.
Answer separately: what in the element hooks the person. That is exactly what goes bigger. If the author hooks rather than the title, then the author goes bigger.
Before choosing a composition, take into account known states that change the composition or arrangement of content: waiting, choice conflict, indeterminate result. If the contract is unclear, work through the specific gap via edge-hunt; if the contract is known but its display is unclear — via system-feedback. Do not put this off until layout approval and do not launch a full search for corner cases for every surface.
3. Refs: broadly, by surface type
Look at how such a surface type is generally structured, so as not to be limited to exact copies of the task: what heroes look like and what is put in them besides the title, how rows of cards with "view all" are structured, mobile screens of the detail page, share sheets. Narrow search is appropriate for checking a specific pattern.
- Formulate search directions from the unresolved question, surface type, and goal. Start with available materials and product patterns; if they do not reveal meaningful approaches or fit the context poorly, broaden the search. Directions by type are in surface-types.md.
- For each pattern under consideration, record: what it is, why it helps the goal, whether it fits our context (device, content volume, brand). "Why it works" is a hypothesis; mark it as such.
- The number of refs does not prove sufficiency. Show which approaches were considered, what they clarified, and which questions remain. The search can end when there is enough material for the current choice and there is no open question that additional refs could resolve; otherwise continue the search on that question. If the search is limited by time or access, name the gap rather than declaring the material sufficient.
- Stylistic refs are allowed, but in a separate pile and only for step 5.
4. Grey composition
When the task has reached composition, help analyze the user's layout or assemble the proposed variant within the assigned scope: pieces of refs and grey blocks with real text. Do not develop new styling yet; existing fonts and sizes are acceptable if the geometry depends on them. The check — what this is, what it is about, and what is main here for the goal — is described in gray-composition.md.
If the check found a problem, name it and propose a change to the composition. If there are several options — recommend one, name the cost and what would disprove it; discuss the choice within the current assignment.
Hypothesis of the choice. If the choice depends on an unverified assumption, name it and how to test it. You can use the Lean UX format: "We believe that [solution] for [whom] will lead to [result], because [assumption]. We will know by [signal from step 1]. If not — [what we change]". The main thing is "because"; do not repeat an already analyzed hypothesis just for the template.
5. Style and brand on top
After choosing the composition, if work on style is part of the assignment: color, typography, illustrations, metaphor, brand layer. Rely on the existing visual language; if the brand's character is not defined and changes the decision, bring the specific question up for joint discussion. Check whether the style helps the goal, and repeat the hierarchy check: if the style has eaten the main thing, propose removing what pulls attention away.
6. Polishing
If the task has reached polishing, apply the available better-* for the detected problem. If no skill is available, check the needed property directly, without blocking the work by installing a dependency.
Signs that it has turned into a poster
- we discuss metaphor, textures, shaders, but there is no phrase of the goal;
- the main image or headline makes it hard to find the needed action or information;
- the elements to click are small or identical, while the decorative ones are large;
- the surface cannot be explained by a phrase from step 1;
- the refs are only stylistic.
These are reasons to check the connection between form and goal, not an automatic ban on expressive composition. Return to step 1 only if the goal is undefined or refuted; otherwise discuss the problem at the affected layer.
The reverse trap is metrics for metrics' sake: a metric that changes no decision; a metric for every element; a target percentage without a baseline; "time on page" and clicks with no connection to the goal. Cross out such a metric, keep the goal.
Testing with people
The hallway test, the five-second test on a colleague, the first-click test — only at the author's discretion. Offer them when the question cannot be resolved by self-check and the decision is expensive to roll back. For a composition in preparation, a self-check is needed; it allows the discussion to continue but does not prove comprehensibility for new users.
Explain to the person: what was checked, by what method, on which artifact, content and sizes; what was found, what remained unchecked, and which conclusion is still a judgment. If there is only a verbal scheme, its logic can be checked, but the visual test cannot be declared passed or credited with widths.
Response format
Answer the current question: the recommendation, its grounds and the material uncertainty. Show only new decisions and the materials related to them; do not recap closed steps. When checking, give a clear report according to the rule above. Do not turn the discussion of one question into a full project package or a proposal of something already designed without a design assignment.
Examples
references/examples.md — two passes from goal to composition: a web block and a mobile screen. references/anti-example.md — a path that began with style and drifted into a poster, with notes on where it should have stopped.
The examples show the order of thought, not universal solutions or a mandatory answer length. Read them when you need an example of moving from goal to composition; do not carry over their composition, metaphor or patterns without checking the context.
Relation to the family
- The product goal, segment or task are unclear — ask-nodumb.
- You need to understand why what has already been done does not work, or to transfer someone else's fact and metric — nodumb.
- The brand's image and character are not defined — discuss the specific fork with the user before developing the style.
- The contract of states affecting the composition is unclear — edge-hunt before choosing it; the contract is known, but it is unclear how to show the transition — system-feedback. Connect the other checks according to the risk that arises, not by a mandatory queue.