AI Mockups: Approve Every Screen Before the Spec Is Frozen
Summary: VAON uses an AI wireframe and mockup tool to draft screens from the draft requirements. Clients approve each screen before the spec is frozen. Screens force decisions that text skips: which fields are required, what an empty list shows, who sees which button. An approved mockup is not the final design.
Contents
- Why mock up screens before the spec is frozen?
- What does a mockup catch that text misses?
- How does AI draft wireframes, and who checks them?
- How do clients approve each screen?
- How does VAON use screens in the Spec Lock Phase?
- What are the limits of AI mockups?
- FAQ
1. Why mock up screens before the spec is frozen?
Mockups belong before the spec freeze because two people reading the same requirement picture two different screens. "An order list screen, filterable by status" sounds complete. Draw it, and open questions appear. One status or several? Sorted by what? How many rows per page?
Hand-drawing every screen takes effort, so teams often stop at a few. An AI wireframe and mockup tool drafts faster, so every screen can be drawn before the spec is locked.
In VAON's Claude Code development workflow, this is step 3: AI drafts wireframes and mockups, and you approve each screen. It runs when the project has a user interface. It comes after the pre-spec question list, because screens need those answers to be drawn.
2. What does a mockup catch that text misses?
A mockup catches the decisions that text lets you leave blank. "There is a list screen" is one finished line of text. A screen cannot be drawn until someone decides which columns appear and where each button goes.
| The text says | The mockup forces a decision on |
|---|---|
| "An order list screen" | Which columns, sort order, what shows when there are no orders |
| "The user enters order details" | Required fields, where errors appear, whether input is kept after an error |
| "A manager approves orders" | Where the approve button is, whether staff can see it, where the user lands after approving |
| "Works on mobile" | How a wide table fits a narrow screen |
| "Shows the customer name" | Whether long names are cut off or wrap |
| "Export a report" | Which screen has the button, whether it exports the filtered view or everything |
The rows are illustrations, not from a real project. The common thread is states. Text usually describes only the normal case. A mockup has to show the empty state, the error state and the no-permission state too.
3. How does AI draft wireframes, and who checks them?
The AI wireframe and mockup tool drafts screens from the draft requirements and the answered questions. An engineer checks each screen against the requirements before you see it. The sequence has four parts:
- The engineer lists the screens and the flow between them from the draft requirements.
- The AI drafts each screen, including empty and error states.
- The engineer checks that every field and button traces back to a requirement line.
- Data on the screens is sample data, labelled as such.
Part 3 exists because AI tools like to add "usual" things: a search box, an Excel export button, a dashboard chart. If you see it, you will assume you are getting it. Anything the requirements do not mention is removed or turned into a question for you.
4. How do clients approve each screen?
Clients approve screens one at a time, not as a set, because approving a whole set tends to become "looks fine overall". Each screen comes with a short approval sheet like this (contents are illustrative):
| Item | Content |
|---|---|
| Screen | Order list |
| Used by | Sales staff, managers |
| Main actions | Filter by status, open order details |
| States drawn | Normal, no orders yet, loading error |
| Open question | Do managers need to see orders from every branch? |
| Result | Approved / Approved with changes / Not approved |
| Approver, date | (filled in by you) |
VAON logs your feedback, including chat messages, in a feedback file or backlog, then sends it back to you to confirm. Feedback outside the agreed scope goes through change control. VAON gives you the price and schedule impact in writing, and work starts only after you approve.
Approved screens go into the requirements document. Later they are also a reference point when you test against a UAT checklist with screenshots.
5. How does VAON use screens in the Spec Lock Phase?
In VAON's Spec Lock Phase (仕様確定フェーズ), wireframes for each screen are one deliverable. The others are the requirements document, database design, system architecture and a fixed quote for the build. The phase usually takes 1 to 2 weeks, or 2 to 4 weeks for large projects. It is led by a BrSE (Bridge System Engineer) and a Tech Lead.
For clients with no system yet, VAON runs business interviews, draws screens and designs the data. Many missing decisions only appear while the screens are drawn. You cannot draw a button without knowing what it does. Why missing decisions break projects is covered in why offshore development fails: the spec, not the code.
On Seminar Navi for Kochi University of Technology, the system is a LINE app (LIFF), a PWA and an admin screen. One decision fixed before the build was that students start using it after 4 steps, in about 1 minute, and that no names are collected. "4 steps" can be written in a sentence, but it can only be checked by counting real screens.
6. What are the limits of AI mockups?
AI mockups are for agreeing on what each screen contains, not for the final interface design. Five limits to state clearly:
- A mockup is not a nearly finished product. The more polished a screen looks, the easier it is to assume the system is almost done. Nielsen Norman Group notes that when people see a rough prototype, "they don't expect it to ship tomorrow" (UX Prototypes: Low Fidelity vs. High Fidelity). Label every version as a draft for content approval.
- Not for pixel-level review. Colors, fonts and spacing belong to interface design after the content is agreed.
- Screens do not show the logic behind them. Calculations, rounding rules, data-level permissions and performance still have to be written in the requirements.
- Sample data looks better than real data. Short names, round numbers, lists that fit one page. Include screens with "ugly" sample data: long names, empty lists.
- Systems without a UI. For batch jobs or system-to-system APIs, a data flow diagram fits better than a mockup.
7. FAQ
What is the difference between a wireframe and a mockup? A wireframe is a simple frame, often grey, showing only layout, fields and buttons. A mockup is closer to how the screen will look and may include colors and fonts. Before the spec is frozen, the main question is what a screen contains and does, so a simple frame is usually enough. A more detailed mockup helps only when layout affects a business decision.
Is an approved mockup the final design? No. An approved mockup fixes the content: which fields and buttons a screen has, who sees what, and where each action leads. Colors, fonts and visual detail come later in interface design. If your project needs an interface that follows your brand guidelines, that work is agreed separately as part of the scope.
Can I change a screen after approving it? Yes. Before the spec is frozen, changing screens is normal and is the whole point of this step. After the freeze, changes go through change control. VAON gives you the price and schedule impact in writing, and work starts only after you approve. No approval means no work and no invoice.
Do I need to know how to use design tools? No. You receive the screens to view, with an approval sheet for each one. Your job is to answer whether the screen fits what users need to do, what is missing, and who should see what. Chat feedback is logged too and sent back for you to confirm.
Does a mockup need my company's real data? No. A mockup is for approving screen content, so sample data is enough, and it is labelled as sample data. Before work starts, VAON agrees with you which data may be used and whether documents may go into AI tools. Without your permission, your documents do not go into any AI tool.
One thing you can do today: pick one screen from your requirements. Sketch on paper what it shows with no data at all, and when a user enters something wrong. Wherever you have to stop and think, you have found a question that belongs in the spec before it is frozen.
If you want to see your project's screens before you sign for the build, book a free 60-minute consultation. Our CEO joins, you need no documents, and there is no commitment.
