How to Vibe Code: Free Canvas Steps and Where They Stop

How to vibe code, in one line: describe what you want in plain English, let an AI write and run the code, check the result, and ask for one change at a time. You never type code yourself. You steer. The free place to start is the build space inside a chat assistant you may already use: Gemini Canvas, Claude artifacts, or the code blocks that replaced ChatGPT canvas. That route is enough for a one-page tool you use alone or share as a link. It stops the day other people need to sign in, see only their own data, or rely on the tool every day.

How to vibe code: six habits that keep the tool working

The workspace matters less than the loop. Vibe coding usually fails the same way: the first version looks great, the fifth prompt breaks something, and nobody can tell which change did it. If you want the idea itself first, our guide to what vibe coding is covers the term and its risks. This guide is for the person who wants a working tool without writing code. Developers working inside an editor have their own coding assistants, and that is a different world.

1. Write a short brief before the first prompt. Who uses the tool, what they type in, what they see afterwards, and the screens you expect. Three or four sentences beat a long wish list.
2. Ask for one change per prompt. Add a filter, then test. Fix the date format, then test. When something breaks, you know which prompt did it.
3. Test like a stranger. Click every button, leave fields empty, type nonsense in a number field, and open the page on a phone.
4. Read what the AI says it changed. If the reply mentions files or features you did not ask about, stop and ask why before going on.
5. Keep a known-good version. Before a risky change, note which version works, or make a copy to experiment on.
6. Keep secrets out of prompts. Never paste passwords, API keys or customer records into the chat. Use made-up sample rows while you build.

Gemini Canvas, Claude artifacts or ChatGPT canvas: pick a free workspace

All three assistants can write a small web page and run it next to the chat, so you see the result without installing anything. The differences show up in how you find errors, how you share, and where the data lives.

Gemini Canvas lives in the Gemini app on the web. You must be signed in to Gemini Apps to use it, and changes in Canvas are auto-saved ^[1]. It has a console for errors and a view of recent code changes, which suits the one-change-per-prompt habit well.

Claude artifacts open in their own window beside the conversation. They are available on every Claude plan, including Free, but they require code execution and file creation to be turned on in Settings > Capabilities ^[2]. Storing data between visits is a separate feature for Pro, Max, Ultra, Team and Enterprise plans.

ChatGPT canvas has changed. OpenAI's release notes say canvas is no longer available in GPT-5.5 Instant or GPT-5.5 Thinking, and that coding now happens in chat through code blocks ^[3]. Those code blocks let you write, edit and preview mini apps directly in the chat. Paid users can still reach canvas through legacy models until those models are retired.

Vibe coding tutorial: build a one-page tool in Gemini Canvas

These steps follow Google's help page for the desktop browser. The example is a simple job-request tracker, but any one-page tool works the same way.

1. Sign in, then go to gemini.google.com.
2. Below the text box at the bottom, click Add Files, then Canvas.
3. Paste your brief as the prompt. You can attach a file with Add files if the tool should start from sample data. Click Submit.
4. Check the preview on the right. To change something, type the request in the prompt box, or edit the code directly.
5. To change one part only, click Select & ask at the bottom right of the Canvas panel, select that part, type what should change, and press Enter.
6. When something breaks, click Show console at the top right to read errors and logs. Click Code, then Show recent changes, to see what the last prompt changed.
7. To share, click Share & export, then Share, review the app info, and copy the g.co/gemini/share link.

Read the app info screen carefully. Google states that anyone with the public link can view and edit data associated with the app. Shared links open only at gemini.google.com, not in the Gemini mobile app. Adding Gemini-powered features, such as text or image generation inside your tool, requires you to be signed in and 18 or over.

The same build in Claude artifacts

1. In Settings > Capabilities, turn on code execution and file creation (labeled Create and edit files in the newer layout).
2. Ask for the tool in any chat. The artifact opens beside the conversation.
3. Ask Claude for each change in a new message. If the artifact shows an error, click Try fixing with Claude. Anthropic notes that some errors need more troubleshooting.
4. To try a different direction, edit an earlier message. That creates another version of the chat with its own artifacts, so the working one stays intact.
5. Find everything later in the Artifacts tab. Artifacts start private, and you choose when to share.

If your tool needs to remember entries, storage comes in two kinds. Personal storage keeps each person's data private; shared storage shows everyone the same data. Whoever builds the artifact decides which is which. Storage has a 20 MB limit per artifact and accepts text only, so no photos or files.

A worked example: a job-request tracker in four prompts

Take an illustration. A small cleaning company wants a page where the owner logs incoming job requests and marks them done. Here is how the build might run, one change per prompt, with a test after each.

1. A one-page job tracker for a small cleaning company. A form with customer first name, address, service type (regular, deep, move-out) and preferred date. Below it, a list of requests, newest first, each with a Done button. Test: add three fake jobs, mark one done.
2. Add a filter at the top: All, Open, Done. Test: switch filters and check the counts by eye.
3. Make the date required and refuse dates in the past. Test: try yesterday, try an empty date.
4. Show open jobs in bold and done jobs in gray. Test: open it on a phone.

Four short prompts give a tool the owner can use alone, on one device, with fake data. Then comes the natural next request: let the two crew leads see their own jobs from their phones. That one sentence is where the free route ends.

Vibe code an app others rely on? Five limits of the free canvas

The canvas tools are built for drafts, personal helpers and small shared toys. The limits are concrete.

• Everyone sees everything. A Gemini public link lets anyone who has it view and edit the app's data. Claude storage is either personal or shared, set by the builder. Neither help page describes roles, such as a manager who sees every job while each crew sees only its own.
• Sign-in belongs to the assistant. People using a Claude artifact that calls Claude sign in with their own Claude account. Gemini shared links only open on gemini.google.com. Your customers do not have your app's own login.
• Storage is small and text-only. The 20 MB text-only limit on Claude artifacts rules out job photos, signed forms or uploaded files.
• The address isn't yours. Both help pages describe sharing through the assistant's own links; neither mentions putting the tool on your own web address.
• The history is the chat. Versions live in the conversation. A long chat is hard to roll back, and neither help page describes restoring saved data when a change goes wrong.

Past that point you need a prompt-to-app builder: the same describe-and-check loop, with a database, sign-in, hosting and version history around it. Lovable suits the person who already wrote the short brief from habit 1, because its Plan mode turns that brief into something you edit before anything is built; see how to plan, build and roll back in Lovable.

Replit picks up the stranger test from habit 3. In its Power and Max modes, on Core and up, the Agent clicks through the app in a real browser before it publishes, covered in our guide to working with Replit Agent step by step. For the cleaning company, the crew-lead view gets exercised before either crew lead opens it.

Bolt.new takes habit 5 off your list: there is no known-good version to note down by hand, because every prompt leaves one behind. Our walkthrough shows how to build in Bolt.new with fewer wasted prompts.

The full map of builders, and which part of the job each one covers (code, database, sign-in, export), is in our guide to vibe coding tools.

From a canvas page to an app the crew can use

The first version costs you an afternoon and nothing else: a short brief, one change per prompt, a test after each, and no secrets in the chat. Gemini Canvas and Claude artifacts handle the first version well, and ChatGPT's code blocks preview small tools too. Keep the habits and stop at the clear line: once other people must sign in, see only their own records, or depend on the tool daily, move the idea to a builder that adds a database, sign-in and version history around the same loop.