# Latest capture set — generated prototype, 24 September 2026

Use the new local generation for the main demo. The existing project `tutorial-client-dashboard-20260924` received the exact expanded course brief and produced the required controls without refinement. The older capture plan below remains historical reference for hosted sign-in and the earlier design; do not splice the two designs into a continuous recording.

All new stills are in `../../application-fixes/assets/vibe-local/`:

| Teaching beat | Actual still |
| --- | --- |
| Finished Maya dashboard and demo boundary | generated-maya-preview.png |
| Generated fixtures in Code | generated-code.png |
| Jordan’s different project and30% progress | generated-jordan-preview.png |
| Loading, empty, error and recovery control | generated-loading-preview.png / generated-empty-preview.png / generated-error-preview.png |
| Local request acknowledgement | generated-request-echo.png |
| Mobile layout and completed sample form | generated-mobile-preview.png / generated-mobile-request.png |
| Wider layouts | generated-tablet-preview.png / generated-desktop-preview.png |
| Full reload resets the demo form | generated-reopened-preview.png |
| Output-only terminal | generated-terminal.png |
| Launch drawer inspected without publication | generated-launch-inspection.png |

Wait for **CLIENT: JORDAN LEE (SAMPLE)** and **Lee Garden Apartment — Full Redesign** after switching; this generation does not say “Hi Jordan”. Show Try again returning to that same client after a brief simulated Loading state. On the request result, hold on **Nothing was actually sent**. The actual iframe made zero network requests on submission. Show Send another clearing the form, then a separate full-page reload restoring Maya and removing the acknowledgement while source files remain.

The mobile/tablet buttons say 375/768, but their displayed device frames measured 393/820 pixels in this capture; desktop had 1003 pixels available. Describe these as preview device modes, not native handset tests. All three passed the no-horizontal-overflow check. Do not click Deploy now or show an invented published URL to end the story. End with the working prototype, then point to the connected-client course for the real customer-data slice.

[Acceptance record](../../application-fixes/assets/vibe-local/generation-acceptance.json). These assets are screenshots; a companion video has not been recorded.

---

# Production guide — Build and test a Vibe client-dashboard prototype

Companion to [the full course](../appmint-vibe-build-a-client-app.md). This package contains genuine production Vibe screenshots and an exercised sample-data prototype. It includes a recording plan, not a finished video or a newly deployed application.

## Open with the client's question

Start on Maya's working preview: project phase, 55% progress and the next wood-tone decision. Say: “Your client should know what is happening and what you need from them. We will build that experience, test the difficult states, then identify the real data it needs.” Keep the fictional-data banner visible. It is part of the prototype's honest design, not a distraction to crop out.

The story has three parts: shape the prototype, test the experience, plan the connected release. Use those chapter boundaries so an owner can complete the first two while a developer continues into contracts and ownership tests.

## Primary shot list

Assets are in [appmint-vibe](../assets/appmint-vibe), except the explicitly historical creation still.

| Scene | Still | Point to explain |
| --- | --- | --- |
| Result first | `12-working-static-preview.png` | A working sample dashboard with a visible data disclaimer |
| Sign-in | `05-project-account-password.png` | Site Name is the organization ID; same production credentials |
| Start | `07-signin-session-result.png` | Brief box, Gallery and existing projects |
| Specific brief | `21-project-brief.png` | Audience, tasks, sample-data boundary and alternate states |
| Creation form | `22-create-project-form.png` | App versus parametric Design, description and project name |
| Original generation | `story-research/review-vibe-editor-empty.png` | Historical initial empty project, clearly date-labeled |
| Code inspection | `09-generated-app-code.png` | Sample-data comment and hard-coded customer examples |
| Use the interface | `12-working-static-preview.png` | Browse mode, project stage and next decision |
| Second example | `15-second-sample-client.png` | Jordan's 30% concept-review state and three documents |
| Loading | `19-preview-loading.png` | Simulated waiting state |
| Empty | `13-preview-empty.png` | No project yet and explanation |
| Error and recovery | `14-preview-error.png` | Simulated error and Try again |
| Sample request | `16-demo-request-result.png` | Actual acknowledgement explicitly says nothing was sent |
| Phone layout | `17-mobile-preview.png` | Scroll inside the device frame; no claim of native installation |
| Reopen | `20-reopened-preview.png` | Generated files remain, local request resets |
| Output panel | `23-terminal-output-panel.png` | Terminal here is a read-only output viewer |
| Hosting | `11-launch-drawer.png` | Deployment stages and retained historical failure |

The existing project was created on 17 September and reopened on 18 September. The creation dialog was reopened without submitting a duplicate. Do not edit those dates into a false continuous new-project recording. For a continuous capture, create one new authorized training project and retain it through the entire sequence.

## Record the interactive moments

Use a readable desktop viewport. Hide the AI panel when demonstrating the app so the project, status and next decision fit. Leave it visible when reading the brief and generation history. Avoid a narrow code panel that wraps every few characters.

Before clicking the generated app, switch from Select to Browse. In selection mode, Vibe intercepts clicks to target elements for editing. This is a useful small teaching moment; it explains why a button can appear unresponsive even while the preview works.

For the sample-client switch, show the loading transition, then wait until “Hi Jordan” and the 30% value are visible. The first rehearsal captured loading too early; the supplied final Jordan still was recaptured after it settled. Call it a fixture selector, not a customer sign-in. Both examples exist inside the same generated JavaScript.

Use the explicit state controls to show Loading, Empty and Error. Read the empty/error explanations, then select Try again and wait for the normal state. Do not imply these controls reproduce a real network outage. They demonstrate the designed states that a later connected implementation must trigger from real results.

In the request form, select Living room and Soon, then enter the course's oak-swatch request. Pause on the acknowledgement's “Nothing was actually sent” text. This is an intentional local prototype interaction. No outgoing message, ticket or project change was created by the form.

Switch to mobile and scroll the actual device frame rather than shrinking a desktop screenshot. The toolbar calls the option Mobile (375px), while the phone chrome may label a specific emulated device with different dimensions. Do not claim a precise native-device test from this browser mode. Native Appmint Mobile is covered in its own courses.

## Teach reload accurately

The internal Reload preview action left the acknowledgement present and showed a Files changed / Reload notice in the rehearsal. A full browser reload returned the project to its initial Maya state and empty form. If showing both, label them as separate actions. Do not use the intermediate acknowledgement as evidence of backend persistence.

After full reload, show that the project files remain available. Explain the two kinds of state: saved source files and temporary generated-app state. A real request needs a supported write followed by a record readback, ideally from another authenticated session.

## Keep the developer chapter concrete

Use a three-column visual: prototype field, actual API contract, outstanding implementation. Customer profile uses a data envelope; reservation lists use data arrays. Project stage and documents need a chosen authorized contract. Do not fabricate a project datatype because the sample card has a stage label.

The connected-client course supplies actual authentication, booking and readback evidence. Reuse those exact transcripts when explaining the full booking request. Use the later local proof: flat profile updates survived a fresh GET, and the second customer was refused on both customer and generic single-reservation reads. Do not present the superseded failures as current defects. These passes cover the tested routes, so repeat ownership checks for new project and document features. A hidden button, sample dropdown or happy-path screenshot cannot certify access control.

The integration prompt in the manuscript is a developer handoff, not a prompt submitted during this continuation. Present it as the next implementation slice. Do not splice generated code footage into a claim that customer sign-in or real booking was already integrated into this prototype.

## Launch and final review

Open Launch without pressing Deploy now during a pickup. Show the actual stage list and the retained historical missing-key error. Explain that a fresh AppEngine hosting lookup returned 200 while the container-status route still reported a missing domain. The static preview operates separately. A listed Live URL is not a verified published release.

Never show a token-bearing Share invitation. Hide passwords, live authorization values and hosting connection details. Do not request or send a real invitation merely to illustrate collaboration.

Before publication, recheck current sign-in, creation labels, selector mode, loading behavior, Terminal input restrictions and deployment status. If hosting is repaired and a release is intentionally deployed later, record its actual stages and repeat the application checks at the resulting URL. End on the prototype's useful outcome and link the connected-client course for the real integration work.