The most detailed free FDE + DevOps library: 140+ lessons, 70+ labs and 80 long-form articles, in English and Turkish. Start learning →

TürkçeSearch

Build with AI: From Zero to Your First App · Module 2: Writing useful prompts and briefs · Lab

Three Revisions With Acceptance Criteria

30 min hands-on · Core

Browser only. The vague wishes below are provided as starter material; you need no account anywhere.

Three ways to do this lab. A: the browser steps below, the main path, free with no account. B: try the same task with your own AI tool if you have one (its terms and quotas apply). C: work from the provided material and the worked solution below, which teaches the same skill. No path claims you used a live AI tool when you did not.

Objectives

  • Rewrite three vague wishes as keep plus change plus check
  • Separate visual checks from functional checks
  • Verify each criterion is yes-or-no checkable in under a minute

  1. Step 1

    Take the three wishes

    The owner sends three messages: (1) 'Make the menu nicer.' (2) 'The form should work better.' (3) 'It should feel more professional on phones.' For each, write down what a tool would most likely break if it regenerated everything (layout, labels, colors, behavior).

    vague-wishes.mdmarkdown
    THREE VAGUE WISHES (synthetic practice material)\n---\n1. 'Make the menu nicer.'\n2. 'The form should work better.'\n3. 'It should feel more professional on phones.'\n\nCurrent page (assumed working): three sections (menu, hours, order form), labeled fields, phone-friendly layout, simple words.

  2. Step 2

    Write the three revisions

    Rewrite each wish as KEEP (what stays untouched) plus CHANGE (one thing with a measurable criterion) plus CHECK (how you verify in under a minute). Cover at least one visual and one functional check across the three.

  3. Step 3

    Test the criteria

    Read each criterion and run it mentally: can you answer yes or no in under a minute with eyes (visual) or hands (functional)? If a criterion needs judgment ('looks better'), rewrite it until it is measurable.

How to confirm it worked

  • Three revisions in keep/change/check shape, one change each
  • At least one visual and one functional check across the three
  • Every criterion is yes-or-no checkable in under a minute
  • Keep-lists name the working parts explicitly (fields, labels, sections, colors)

Workspace

0/1 checks passing · Coverage only, not a quality score.

Draft kept in this browser.

Hints, in three stages

Stage 1: a nudge

'Nicer menu' becomes a visual criterion like dish names larger than descriptions with prices aligned right. 'Work better' becomes a functional one like empty submit names the missing field.

Stage 2: a direction

The keep-list is the fence. Name the three sections, the field labels and the colors every time, or the tool will feel free to redesign them.

Stage 3: almost the answer

'Professional on phones' is measurable as no horizontal scrolling at 360px plus the submit button reachable without scrolling. Test both with eyes and one tap.

Worked solution (open after an honest attempt)

Worked solution. Revision 1 (visual): KEEP the three sections, all text and the form exactly. CHANGE only the menu section: dish names larger than descriptions, prices aligned right. CHECK: narrow to 360px and desktop, read both; yes or no in thirty seconds. Revision 2 (functional): KEEP all fields, labels, order and colors. CHANGE the submit behavior: empty submit shows which field is missing by name. CHECK: submit the empty form, read the message; yes or no in thirty seconds. Revision 3 (visual plus functional): KEEP text, fields and colors. CHANGE the phone layout: no horizontal scrolling at 360px and the submit button spans the form width. CHECK: narrow to 360px, scroll sideways (none), tap the button. Three wishes, three fenced single changes, three minute-checks.