Precise interface instructions

How can you turn an idea for a screen into instructions precise enough to check the generated result?

  • Lovable
  • Claude Code
  • Codex

1250 € per session, excl. VAT

In short

This half-day session of 3 hours teaches participants to describe an interface using precise words: users, areas, components, content and expected behaviour. Using a fictional case, participants write an instruction, observe a guided generation and correct ambiguities. They leave with a usable description and a checklist.

Why this training?

A request such as ‘make a modern page’ leaves the hierarchy, text and responses to clicks undefined. Describing these elements reduces implicit interpretations and allows the result to be discussed in terms other than taste. Code generation does not remove the need to check the interface. Learning to distinguish a missing instruction from a discrepancy in implementation helps participants request targeted corrections without multiplying contradictory changes. Continuing case study: The fictional association ‘Avelune Ateliers’ wants to present its repair workshops on a screen that can be viewed on a phone. Visitors must be able to find a session, consult its information and understand how to request a place. The times, activities and availability are entirely fictional. Transfer to work: Reuse the template to describe a simple screen for your organisation, with anonymised content. Have a colleague review the description before any generation, then record discrepancies between the intention and the rendered result without initiating deployment.

Objectives of this training

  • Identify the user, their main task and the expected action.
  • Describe the areas of a screen in their reading order.
  • Specify the labels, interactions and relevant states.
  • Write a structured instruction without mandatory technical vocabulary.
  • Compare the rendered result with the description and formulate a targeted correction.

Who is it for and what are the prerequisites?

Roles and tasks concerned

  • Non-developer staff wishing to express an idea for a screen.
  • Activity managers who need to explain their expectations to a digital team.

Prior skills

  • No prior AI or coding knowledge required.
  • Ability to navigate a web page and enter text.

What you will work on

  1. Moving from the idea to the task

    Objective: Define what the visitor must understand and do. User, mobile context, priority information and main action; difference between appearance and behaviour.

  2. Naming areas and states

    Objective: Replace vague adjectives with verifiable elements. Headings, cards, buttons, reading order, explicit labels and information not conveyed solely by colour.

  3. Writing and then observing a generation

    Objective: Link the precision of the instructions to the result obtained. Lovable, Claude Code and Codex: generating and modifying code from instructions, depending on their environment. Official documentation for procedures; human review, testing and secrets management.

  4. Checking and correcting without rewriting everything

    Objective: Measure how faithfully the rendered result reflects the intention. Checking content, hierarchy, states and mobile readability; distinction between simulated behaviour and actual functionality.

What you take away

  • User, task and main action sheet.
  • Structured description of the screen and its states.
  • Initial instruction and targeted correction request.
  • Completed conformity checklist with observed discrepancies.

Method and assessment

  • Short inputs followed by immediate practice on the continuing case study.
  • Individual work followed by work in pairs, with participants reviewing each other’s work.
  • Guided group discussion: what works, what needs correcting and what remains a human decision.
  • Preparation: Arrange a computer and check access to one of the tools authorised by the organisation. Prepare the fictional scenario and its content; do not share any personal data or secrets.

Observable criteria: The description names a user and an unambiguous main action. ; Each area has a role, content and a relative position. ; Buttons have an explicit label and expected behaviour. ; The available, full and confirmation states are described. ; The checklist distinguishes between conforming, partial and absent, with an observable example for each discrepancy..

Frequently asked questions

Do I need to know how to program?

No. The exercises focus on the words used and visual checking, with guided operation.

Are all three tools used?

No. A single authorised tool is sufficient; the arrangements depend on the access available and its official documentation.

Can I bring an internal screen?

Only in anonymised and authorised form. The fictional case remains available to avoid any exposure of sensitive information.

Is the resulting screen ready to publish?

No. The rendered result is for learning; publication would require, among other things, a code review, testing and a check for secrets.

Last updated: