Modul referensi resmi Level 1 VibeKoding: Memoles & Menyerahkan Produk.Modul referensi resmi Level 1 VibeKoding: Memoles & Menyerahkan Produk.
In the previous chapters, we started from an idea, built an interactive prototype, and made the AI feature on the page work.In the previous chapters, we started from an idea, built an interactive prototype, and made the AI feature on the page work.
You already know what to enter and where to click. A person opening the page for the first time may not even find the first step. If nothing appears immediately after a click, they may think the page is broken.You already know what to enter and where to click. A person opening the page for the first time may not even find the first step. If nothing appears immediately after a click, they may think the page is broken.
We will not add new features in this chapter. We will use the product from beginning to end, fix the places where people are likely to get stuck, and then ask someone else to try it. The result will be a project you can confidently share.We will not add new features in this chapter. We will use the product from beginning to end, fix the places where people are likely to get stuck, and then ask someone else to try it. The result will be a project you can confidently share.
{ title: 'Fix the blockers', description: 'Waiting, results, and failures' },{ title: 'Fix the blockers', description: 'Waiting, results, and failures' }, { title: 'Ask someone to try', description: 'Observe before helping' },{ title: 'Ask someone to try', description: 'Observe before helping' }, { title: 'Prepare and share', description: 'Help others understand the project' }{ title: 'Prepare and share', description: 'Help others understand the project' } ]" />]" />
Do not rush to add login, team collaboration, or analytics. Open the product as it is and use it like a user, from the first page until you obtain a result. Any step that still requires you to explain it is a step that needs improvement.Do not rush to add login, team collaboration, or analytics. Open the product as it is and use it like a user, from the first page until you obtain a result. Any step that still requires you to explain it is a step that needs improvement.
For our ecommerce content workspace, one complete use looks like this:For our ecommerce content workspace, one complete use looks like this:
> An ecommerce operator uploads a product image, adds the necessary information, generates a first text-and-image draft, checks it, and then copies or saves it for editing and publishing.> An ecommerce operator uploads a product image, adds the necessary information, generates a first text-and-image draft, checks it, and then copies or saves it for editing and publishing.
Making this short journey work is enough for now. Login, team permissions, and a formal launch can wait until the product truly needs them.Making this short journey work is enough for now. Login, team permissions, and a formal launch can wait until the product truly needs them.
Ignore the code and components for a moment. Follow the actions a user would take:Ignore the code and components for a moment. Follow the actions a user would take:
When you reach the end, ask: would someone get stuck if I were not standing beside them? Record features such as team management and complex dashboards, but do not build them now if they do not affect this use.When you reach the end, ask: would someone get stuck if I were not standing beside them? Record features such as team management and complex dashboards, but do not build them now if they do not affect this use.
If you can tell someone the task in one sentence and they can begin within a few minutes, the scope is usually suitable.If you can tell someone the task in one sentence and they can begin within a few minutes, the scope is usually suitable.
After working on a product for a while, the page often contains test data and an old result. It is easy to forget that a first-time user sees none of that. Open a private window or clear the local data and begin again.After working on a product for a while, the page often contains test data and an old result. It is easy to forget that a first-time user sees none of that. Open a private window or clear the local data and begin again.
You only need to try three situations:You only need to try three situations:
Write down where you get stuck. We will fix those places in the next section.Write down where you get stuck. We will fix those places in the next section.
An AI IDE can inspect the code, but it cannot replace actually using the page:An AI IDE can inspect the code, but it cannot replace actually using the page:
text Do not change the code yet. Inspect the current project around this user task: the user uploads a product image, enters the required information, generates copy, checks the result, and then copies or saves it. Tell me which pages and files this journey uses, and list the places where it may currently stop.
The AI IDE can point to suspicious code. You still have to click through the page to know whether it is usable.The AI IDE can point to suspicious code. You still have to click through the page to know whether it is usable.
After one complete run, problems usually appear at four moments: first opening, waiting for AI, receiving a result, and handling a failed request. You do not need an elaborate design. The user only needs to know what is happening and what they can do next.After one complete run, problems usually appear at four moments: first opening, waiting for AI, receiving a result, and handling a failed request. You do not need an elaborate design. The user only needs to know what is happening and what they can do next.
A blank page should not contain only an input field. Add one short explanation, some example content, or a note about supported image formats and size near the upload area.A blank page should not contain only an input field. Add one short explanation, some example content, or a note about supported image formats and size near the upload area.
If the form has many fields, keep only those required to generate a useful result. Product name, image, and main characteristics may be required; brand, reference link, and detailed style settings can sit under “More settings.” A new user should not have to complete a long registration form before trying the product.If the form has many fields, keep only those required to generate a useful result. Product name, image, and main characteristics may be required; brand, reference link, and detailed style settings can sit under “More settings.” A new user should not have to complete a long registration form before trying the product.
An AI request may take several seconds or longer. After the click, the button should display “Generating” and temporarily prevent repeated submission. Existing input should not suddenly disappear, and the page should not jump to an empty result panel.An AI request may take several seconds or longer. After the click, the button should display “Generating” and temporarily prevent repeated submission. Existing input should not suddenly disappear, and the page should not jump to an empty result panel.
🖼️ Waiting state while product content is generatedWaiting state while product content is generated
A waiting state does not need a complicated animation. Showing that work has started while preserving the original input and position already prevents most confusion.A waiting state does not need a complicated animation. Showing that work has started while preserving the original input and position already prevents most confusion.
For queued image or video work, you may show stages such as “Queued” and “Generating.” Do not invent a precise percentage unless the API actually supplies progress.For queued image or video work, you may show stages such as “Queued” and “Generating.” Do not invent a precise percentage unless the API actually supplies progress.
AI output is not the end of the journey. Users usually need to verify facts, revise wording, and carry the result into another step. The result panel should therefore offer at least one useful action: edit, copy, download, or regenerate.AI output is not the end of the journey. Users usually need to verify facts, revise wording, and carry the result into another step. The result panel should therefore offer at least one useful action: edit, copy, download, or regenerate.
🖼️ Result page after image understanding and copy generation are connectedResult page after image understanding and copy generation are connected
This page keeps the uploaded product image above the recognition and generation result. The user can compare the text with the original image instead of having to accept one model answer.This page keeps the uploaded product image above the recognition and generation result. The user can compare the text with the original image instead of having to accept one model answer.
If the model cannot confirm some information, mark it and let the user add or delete it. That is more useful than presenting a paragraph as a final answer.If the model cannot confirm some information, mark it and let the user add or delete it. That is more useful than presenting a paragraph as a final answer.
Network interruptions, exhausted quotas, and unsupported files can all fail a request. An ordinary user does not need the full technical error, but the page should say that this attempt did not finish and provide a way to retry or edit the input.Network interruptions, exhausted quotas, and unsupported files can all fail a request. An ordinary user does not need the full technical error, but the page should say that this attempt did not finish and provide a way to retry or edit the input.
For example:For example:
If refreshing the page would lose a long form, use LocalStorage to keep a temporary draft. Store only ordinary data needed to resume the task; never store an API key, real customer information, or sensitive files in browser storage.If refreshing the page would lose a long form, use LocalStorage to keep a temporary draft. Store only ordinary data needed to resume the task; never store an API key, real customer information, or sensitive files in browser storage.
Give the problems you found to the AI IDE in one focused request:Give the problems you found to the AI IDE in one focused request:
text Check the “upload a product image and generate copy” journey at four moments: start, waiting, success, and failure. Fix the problems that prevent the user from continuing first: - required fields have no clear message; - the request button can be clicked repeatedly; - a failed request clears the input; - the result has no edit, copy, or regenerate action. Before editing, tell me which files you will change. When finished, give me manual test steps.
After looking at your own page for a long time, every action feels obvious. Someone who did not build it can reveal overlooked problems in a few minutes.After looking at your own page for a long time, every action feels obvious. Someone who did not build it can reveal overlooked problems in a few minutes.
Whenever possible, invite a likely user. An ecommerce content tool could be tested by someone who has run a shop or prepared product listings. If that person is unavailable, a friend who has never seen the page is still useful.Whenever possible, invite a likely user. An ecommerce content tool could be tested by someone who has run a shop or prepared product listings. If that person is unavailable, a friend who has never seen the page is still useful.
At the start, explain only the goal:At the start, explain only the goal:
> Use this tool to generate a title and selling points from this product image. Check the content, then copy the version that you would continue editing.> Use this tool to generate a title and selling points from this product image. Check the content, then copy the version that you would continue editing.
Observe before telling them where to click. Record pauses, backtracking, repeated clicks, and questions. If you explain immediately, you hide a problem that the page should solve.Observe before telling them where to click. Record pauses, backtracking, repeated clicks, and questions. If you explain immediately, you hide a problem that the page should solve.
Even one or two people can expose obvious issues. You do not need a formal report; note where they stopped.Even one or two people can expose obvious issues. You do not need a formal report; note where they stopped.
If they open the page and do nothing, add a short explanation. If they repeatedly click “Generate,” make the waiting state clearer. If they do not know what to do with the result, add edit or copy actions. If a failure forces them to re-enter everything, preserve the content and add retry.If they open the page and do nothing, add a short explanation. If they repeatedly click “Generate,” make the waiting state clearer. If they do not know what to do with the result, add edit or copy actions. If a failure forces them to re-enter everything, preserve the content and add retry.
When the user completes or abandons the task, ask:When the user completes or abandons the task, ask:
Do not ask only “Was it easy to use?” A polite “It was fine” gives little direction. Specific actions and examples are much more valuable.Do not ask only “Was it easy to use?” A polite “It was fine” gives little direction. Specific actions and examples are much more valuable.
A tester’s product images, recordings, or documents may contain real business information. Explain what kind of AI service receives the material, avoid unapproved customer data, and delete files that are no longer needed after the trial.A tester’s product images, recordings, or documents may contain real business information. Explain what kind of AI service receives the material, avoid unapproved customer data, and delete files that are no longer needed after the trial.
The trial may produce a long list of problems. Do not fix all of them at once. Start with issues that prevent completion or make the result untrustworthy.The trial may produce a long list of problems. Do not fix all of them at once. Start with issues that prevent completion or make the result untrustworthy.
Use this order:Use this order:
Choose the most important one to three items. After fixing them, try the whole flow yourself. If possible, invite the same person to try again. A change is useful only when the original blocker has actually disappeared.Choose the most important one to three items. After fixing them, try the whole flow yourself. If possible, invite the same person to try again. A change is useful only when the original blocker has actually disappeared.
Do not say only “Please optimize it.” Include what you observed so the AI IDE knows what to change:Do not say only “Please optimize it.” Include what you observed so the AI IDE knows what to change:
text User task: upload a product image and generate three selling points. Observed problem: Two testers clicked “Generate” repeatedly because the page did not clearly show that the request had started. This created duplicate jobs. Change the current page: 1. Disable the button after the request starts and show “Generating.” 2. Restore it after success or failure. 3. Keep the information the user already entered. 4. Tell me how to test repeated clicks and a failed request manually.
A request this specific is less likely to produce unrelated changes, and it tells you exactly what to verify afterward.A request this specific is less likely to produce unrelated changes, and it tells you exactly what to verify afterward.
Fixing one part can affect another. Before sharing the project, try these four situations:Fixing one part can affect another. Before sharing the project, try these four situations:
If the product saves drafts, refresh the page once as well. Confirm that the new behavior works and that the original core journey still works.If the product saves drafts, refresh the page once as well. Confirm that the new behavior works and that the original core journey still works.
The project now does more than “run on your computer.” Another person has used it, and you have improved it based on a real problem. Prepare the entry point and explanation so more people can understand it.The project now does more than “run on your computer.” Another person has used it, and you have improved it based on a real problem. Prepare the entry point and explanation so more people can understand it.
Use this order:Use this order:
Help people understand the product before listing frameworks and model names. The result is much easier to follow.Help people understand the product before listing frameworks and model names. The result is much easier to follow.
Before sharing, prepare three things:Before sharing, prepare three things:
If remote access is not yet possible, a local run and a demonstration video are acceptable Stage 1 evidence. The important point is that another person can understand the work and see the complete core journey.If remote access is not yet possible, a local run and a demonstration video are acceptable Stage 1 evidence. The important point is that another person can understand the work and see the complete core journey.
You can continue the ecommerce content workspace used throughout the chapter, or apply the same process to meeting notes, audio content, learning support, or an industry tool. The [AI application scenario guide](../appendix-industry-scenarios/index.md) can help you explore directions.You can continue the ecommerce content workspace used throughout the chapter, or apply the same process to meeting notes, audio content, learning support, or an industry tool. The [AI application scenario guide](../appendix-industry-scenarios/index.md) can help you explore directions.
Do not start an unfamiliar topic merely to appear original. A small problem from your own study, work, or life is more convincing when real people have tried the solution than a page with many features that nobody has used.Do not start an unfamiliar topic merely to appear original. A small problem from your own study, work, or life is more convincing when real people have tried the solution than a page with many features that nobody has used.
Open the shared link one last time and complete the whole journey. Confirm that other people can open it, AI returns a result, and no API key appears on the page or in a screenshot. If you used someone else’s image, audio, or document, confirm that you have permission.Open the shared link one last time and complete the whole journey. Confirm that other people can open it, AI returns a result, and no API key appears on the page or in a screenshot. If you used someone else’s image, audio, or document, confirm that you have permission.
Do not add another feature. Prepare the current work and put it in the hands of one real person. Do not add another feature. Prepare the current work and put it in the hands of one real person.
Use it completely onceUse it completely once
Ask one person to try itAsk one person to try it
Share the workShare the work
Stage 1 is truly complete when another person can open the project and complete one use independently. Stage 1 is truly complete when another person can open the project and complete one use independently.
You have now followed a complete path: begin with a real problem, narrow the first version, build an interactive prototype, connect AI, and then let a user try the product and improve it.You have now followed a complete path: begin with a real problem, narrow the first version, build an interactive prototype, connect AI, and then let a user try the product and improve it.
In Stage 2, we will add databases, user accounts, payments, deployment, and more complete frontend and backend engineering. Those capabilities let a product serve more users and real data, but the starting point remains what you learned here: finish one valuable user task first.In Stage 2, we will add databases, user accounts, payments, deployment, and more complete frontend and backend engineering. Those capabilities let a product serve more users and real data, but the starting point remains what you learned here: finish one valuable user task first.
title="Continue learning"title="Continue learning"
description="After Stage 1, continue with the engineering topics below."description="After Stage 1, continue with the engineering topics below."
:items="relatedArticles":items="relatedArticles"
/>/>