Task

Build a screen

Build a screen from the agreed fields, stages, and rules.

5 stepsdesignengineering

Build a screen from the agreed fields, stages, and rules.

Fetch https://ntent.app/r/task/build-a-screen.json and follow it. Stop and ask me at any step that says to, and do not decide something on my behalf that the plan says is mine to decide.

Reads https://ntent.app/r/task/build-a-screen.json

The steps

Here so you can follow along, or do it yourself. Your agent gets the same list from the plan above.

01
Start from a similar screen
Find a screen that already does something similar. Copy its structure so the new one feels like part of the same product.
Success check: You can name the screen you copied the structure from.

Define the stages

List the stages first, like draft, sent, and paid. Each stage changes the labels, the badges, and which buttons work, so the layout depends on them.

6 lines

Show me the complete list of stages for [ENTITY]. For each stage, list:
- which actions are available (the transitions out of this stage)
- what condition has to be true for each action
- what the UI should show, hide or disable in that stage

Format as a table.

Write the screen prompt

Fill in the prompt below with the fields, actions, rules, and stages from the model. Before you send it, check every agreed rule is in there.

27 lines

Build a screen for the [ACTOR] portal at route /[actor]/[screen-name].

**Purpose:** [one sentence describing what the user accomplishes here]

**Layout:** [table / card grid / form / dashboard / wizard]

**Data displayed:**
- [Field 1] from [ENTITY] : [text / date / number / one of a fixed list]
- [Field 2] from [ENTITY] : [type]

**Actions available:**
- [Action 1] : [what it does, and which journey step it is]

**Rules to enforce:**
- [BR-NNN]: [the rule] : [disable X when Y, warn when Z]

**Stages shown:**
- [Stage 1] → badge colour: [role], actions available: [list]
- [Stage 2] → badge colour: [role], actions available: [list]

**Interaction patterns:**
- Row click opens [panel / modal / detail page]
- [Action] uses [modal confirm / inline edit / panel form]

**References:**
- Follow the design system for colour roles. Never introduce a colour that is not a token.
- Use components from the registry. Check the component index before building anything new.

Success check: The first output has every field, every rule and every stage.

Refine with targeted edits

Ask for one change at a time, so the parts that already work stay as they are.

9 lines

Make the table denser. Reduce row padding and use the smallest step of the type scale for metadata columns.

Add a slide-in panel for row detail. The panel overlays, it does not replace the table.

Status badges use the semantic colour roles, not brand. Brand is chrome only.

Extract [component] into the registry. It is used on [OTHER_ROUTE] too.

Add an empty state: an icon, a heading, and one action.

Check the screen against the model

Ask the agent to compare the screen with the model: every field, rule, and stage. Get the full list of gaps before fixing any of them.

7 lines

Review the screen at [ROUTE] against the intent model. Check:
1. Are all relevant [ENTITY] fields displayed?
2. Is every applicable rule enforced in the UI?
3. Is every stage of [ENTITY] visually represented?
4. Are there open questions that affect this screen?

List any gaps. Do not fix them yet.