Skip to content
Design

Design prompts

Interface, flows, and the copy that sits inside them.

The stage

The stage where a decision becomes something a user actually sees and has to understand in three seconds.

  1. 01

    Generate flow alternatives before committing to one

    A first flow sketch exists and it's worth checking whether it's actually the best shape before it goes to design.

    The prompt
    I'm designing a flow for [describe the task the user is trying to complete, for example "linking a bank account during onboarding"]. Here is my first draft of the steps.
    
    Propose two alternative structures for the same flow: one that reduces the number of screens even if each screen does more, and one that spreads the same information across more, simpler screens. For each alternative, name the specific tradeoff against my draft (what gets easier, what gets harder, and for which kind of user).
    
    Do not just praise my draft or declare one alternative universally better. State the actual tradeoff for each.
    
    My draft flow: [list your steps]
    Where it lets you down

    It tends to declare the version with fewer steps unambiguously better, because "fewer steps" is a common shorthand for good UX in its training data, even when a single dense screen is actually harder for a first-time user than three simple ones. Ask it explicitly what kind of user each alternative is better for.

  2. 02

    Write microcopy for an error state, and check it against the real cause

    An error state needs copy and the draft keeps coming out either too technical or too vague to help.

    The prompt
    I need microcopy for an error state. Here is exactly what caused the error, technically. Write three versions of the message: one that names the specific cause in plain language, one that focuses only on what the user should do next, and one that combines both in under 15 words.
    
    For each version, tell me what information is lost by keeping it short, so I can decide deliberately rather than by accident.
    
    Do not write a message that could apply to more than one actual cause. If the message would be true regardless of what broke, it's too generic.
    
    Technical cause: [describe exactly what failed and why]
    Where it lets you down

    It writes copy that's technically true but generic enough to apply to five different failures ("something went wrong, please try again"), which gives the user no actual information and gives support no clue what happened either. Check the message against the specific cause: could it be reused verbatim for a different error? If yes, it's too generic.

  3. 03

    Critique a flow the way a first-time user would experience it

    Before user testing, to catch the obvious confusion a team that built the flow can no longer see.

    The prompt
    You have never seen this product before and you don't know what any of the following screens are for beyond what's on them. I'm going to describe each screen in a flow in order. After each one, tell me: what you think happens if you tap the most obvious button, what you're unsure about, and what you'd expect to see next that isn't mentioned.
    
    Do not use any knowledge of how similar apps typically work to fill in gaps. React only to what's actually described, the way someone with no context would.
    
    Screen 1: [describe what's on it]
    Screen 2: [describe what's on it]
    (continue for each screen)
    Where it lets you down

    It quietly fills gaps using knowledge of how similar apps conventionally work, so it "understands" an unlabelled icon because it's seen that icon in a thousand other apps, when your actual first-time user might not. Re-ask what a specific element does whenever the answer seems to rely on convention rather than what you described.

  4. 04

    Check a design against accessibility basics

    Before a screen ships, as a first pass check before or alongside a real accessibility review.

    The prompt
    Here is a description of a screen: its layout, its text, its colour choices, and its interactive elements. Check it against these specific things and flag any that are unclear or likely to fail: whether interactive elements are described with a clear label and not just an icon or colour, whether any information is conveyed by colour alone, whether text size and contrast are specified anywhere, and whether the tab or focus order makes sense given the layout.
    
    For anything you can't determine from my description because I haven't specified it, say so explicitly rather than assuming it's fine.
    
    Screen description: [describe the layout, text, colours, and interactive elements]
    Where it lets you down

    It marks things as fine by assuming reasonable defaults you never actually specified, for example assuming adequate colour contrast because you didn't mention a problem with it. Treat every "assumed fine" as actually unknown, and verify the specifics (hex values, actual focus order) separately.

  5. 05

    Name the flow's actual decision points

    A flow feels overcomplicated and it's not obvious which steps are genuinely necessary decisions versus just extra screens.

    The prompt
    Here is a flow, step by step. For each step, classify it as one of: a decision the user must actually make (the outcome depends on their input), a confirmation of something already decided, or pure information with no input required.
    
    Then tell me: of the steps you classified as decisions, which ones could actually be defaulted or inferred from data we already have, removing the need for the user to decide at all. Be specific about what data would need to exist for the default to be safe.
    
    Flow: [list your steps]
    Where it lets you down

    It's cautious about recommending defaults, flagging almost every decision as "necessary" because removing a choice feels riskier to suggest than keeping it, even when the data to default it safely clearly exists. Push it to commit to at least one real recommendation to remove, not just flag risk.

  6. 06

    Turn a wireframe description into a written flow spec

    A flow exists as sketches or a Figma link that design understands, but engineering needs it written down step by step.

    The prompt
    I'm going to describe a wireframe screen by screen, including what's on each screen and what each interactive element does when tapped. Turn this into a written flow spec: a numbered sequence of states, where each state lists what's visible, what actions are available, and exactly which state each action leads to.
    
    Explicitly name any screen that can be reached from more than one previous state, and any action whose destination I haven't specified, so I can fill those in rather than have you guess at them.
    
    Wireframe description: [describe each screen and its interactive elements]
    Where it lets you down

    It fills in an unspecified destination with a plausible guess instead of flagging it, so the written spec looks complete when it's actually hiding an undecided branch. Search the output for every transition and confirm each one traces back to something you actually described, not an inference.