Build your showcase page, two ways

Hey, this is Built by You, the Lab. Today we'll be working on the artifact. We will build a website.

We looked into running interviews and stress-testing our ideas. But what we need now is an artifact — something for people to see, and for you to watch them properly. A page you can send to someone, or run an interview for. So a website is an experiment, and we will publish it.

At the end of the course there is a showcase page — a shelf, like a shelf from a hackathon, with the products people built on their own in just a few hours. Our course has the same kind of shelf, and it links all the products you are going to build and, hopefully, share with me. Today's page is what sits on that shelf.

One honest thing. These days, building anything — a website, an app, something — can be very different for different people, because new tools, new connectors, new MCPs, new docs, everything's changing practically every week. What I show in the video is my version for today. Six months from now, maybe a month from now, maybe tomorrow, some steps will look different, and that's fine, because we are learning. And first of all we are learning that context matters most of all, small steps, and reviewing it along the way. That is what survives every tool change.

So I picked two ways that I myself am using:

• The Lovable way. You build in Lovable, visually, in the browser. Lovable is like the fastest route to getting a link these days. This is something for 99% of people. You just type in what you want, how you want it, and you can get it.
• The Claude Code way. We build in Claude Code, in a folder on our devices, with our files, our control. And at the end we publish the website on our own. It goes live without Lovable or anything like it.

There is no wrong choice. You can try it out and redo it every day if you want to, if you are curious how everything is working. Start with the one you like more, and try not to follow the fear of missing out — the FOMO.

You can open this guide now, open your AI of choice, and run the experiment with me.

What changed since the recording (checked November 2026)

The practice in the video is the same. A few buttons moved. If your screen does not match the video, look here first — and then do the one thing that never fails: ask AI.

Claude Design

• Still called Claude Design. You open it from the Design tab at the bottom of the claude.ai sidebar, or at claude.ai/design.
• The design-system feature is in beta and switched on for Pro, Max, Ultra and Team plans. Plain Claude Design works on the free plan too, but for this lab you want a paid plan anyway — Claude Code needs one.
• You can still feed it a few paragraphs, a Figma file, a code repository, logos, fonts and notes. Claude Code users also get a /design-sync command that builds a system straight from a project — not needed today.
• When your system is ready, switch on Published — that is how new projects and other tools pick it up.
• The sending options moved. They now live under the Export button, top right, not under Share. Export lists: Send to Lovable (plus Base44, Canva, Replit, Vercel, Wix and others), Send to local coding agent, Send to Claude Code Web, and Download zip instead. "Share" now only decides who can open your design.

Lovable

• "Agent mode" is now called Build mode. Plan mode and Chat mode are still there, switchable any time in the chat box.
• The connection between Claude and Lovable is set up on the Claude side, not in Lovable settings: in Claude, click + → Connectors → Browse connectors → search Lovable → Connect → log in. After that, Claude Design can push a design into a new Lovable project.
• The security check now runs by itself when you open the Publish dialog — about ten seconds, then "No security issues found" or a count of findings. Later updates say Publish changes.
• Device previews are a toggle above the preview: Desktop view / Tablet view / Mobile view.
• The free plan gives 5 build credits a day, capped at 30 a month, and lets you show the site to up to 10 invited people. A public link for strangers is on the Pro plan. Check lovable.dev/pricing before you start — this changes often.

Claude Code

• The desktop application is the Claude Desktop app; Claude Code is its Code tab. Mac install: download the .dmg, open it, sign in, click Code. No terminal, no Node, nothing to type. It needs Pro or higher.
• New session: pick Local → Open folder… → choose your website/ folder. Permission modes are now named Manual, Accept edits, Plan, Auto. Stay on Manual: it asks before every edit and command, and you decide.
• The models you will see: Opus 5.5 (the default), Sonnet 5.5, Haiku 5.5. The "Sonnet 5" from the video is retired. For small jobs — a CLAUDE.md, moving a file — pick Haiku 5.5. Leave the default for the build.
• Cloud sessions are called Claude Code in the cloud (claude.ai/code, "Claude Code on the web"). That is what "Send to Claude Code Web" lands in.
• The context window percentage sits in the Context card of the session panel.

Codex (the agent that updates the canvas in the video)

• In July 2026 OpenAI folded the Codex app into the ChatGPT desktop app. Codex is now a mode inside it, next to Chat and Work. If you use it: open ChatGPT, switch to Codex, open your workspace folder. Or just do the prep in Claude Code — same prompts.

GitHub, Netlify, Figma

• GitHub: unchanged. Free, unlimited private repositories, sign up with email, Google or Apple.
• Netlify: still free. The free plan now runs on 300 credits a month — plenty for one page. The import path is Add new project → Import an existing project → GitHub → authorize → pick your repo → Deploy site. Every push to GitHub still redeploys by itself. One new thing: on some new accounts the site is private by default — if strangers can't open your link, switch the site to public in its settings.
• Figma: File → Save local copy still gives you the .fig file.

If something on your screen matches neither the video nor this list — that is normal. Every time you use AI, even the same AI, even the same flow, it works a little differently. Screenshot it, send it to any AI chat, and ask what to click.

Part 1: What we are building, and how this works

The artifact

One page. Your product in one sentence, your audience in their words, the problem in the customer's words, how it works, and one button: join the waitlist. Not payments, not sign-ups. This week we are stress-testing, not launching yet. A waitlist also gets people to talk to us while we are still in the process of creating something — just like this course was when the video was recorded.

The two ways, side by side

Same context, same design, both end published. Pick by how you like to work.

What you decide and what the agent does

The whole lab runs on one rhythm, and it is the same rhythm as everywhere in this course: plan first, then act. Every agent in this course gets the same discipline.

• You collect the context, write it down in files, and say what "done" looks like.
• The agent reads the files, proposes a plan, and builds.
• You read what changed before you accept it. Good practice as AI is changing things: go back and forth, ask it to show you what has changed, review it on the go, and only then say yes.

Use plan mode first, even in tasks like updating a canvas. That will be the safest and the most productive way to do it.

The privacy rule, both ways

Whatever you paste into a cloud tool leaves your laptop. Your product brief — fine. Interview transcripts with real names, emails, passwords, tokens — never. Never put any sensitive data, anything like your email, into AI agents. Not recommended, totally not recommended. And when you screenshot your screen to ask AI for help — you will — check what is visible on it first.

Part 2: Setup

Before the lab, have these ready. Honest time for the whole thing: about 90 minutes for one way. Generation and connectors take real time, and that is normal.

Everyone

• Your Obsidian workspace from Sprint 2 — the one with your market folder (comment analysis, competitor map, market scan) and your product folder.
• Your lean canvas as a note in that workspace. If it is not there yet, that is your first tiny step (below).
• Claude — the Pro plan or higher. Claude Design and Claude Code both come with it.
• An AI agent that can read your workspace. In the video the canvas and the brief are made in Codex, and the site is built in Claude Code. Either works for the prep. Codex now lives inside the ChatGPT desktop app as a mode. This guide writes the prompts for Claude Code, because you need it for one of the ways anyway.

The Lovable way adds

• A Lovable account at lovable.dev. The free plan is enough to build and publish this page.

The Claude Code way adds

• A GitHub account at github.com. It's free, it's very easy. You just create your username and password, or sign in with Google or Apple, and then you are all set.
• A Netlify account at netlify.com. Sign up with Google — make it easier.
• The Claude Desktop app with Claude Code inside it — the Code tab. Claude Code works in two modes: in the terminal on the device, and in the desktop application. We use the desktop application. No terminal, I promise.

Your first tiny step — under five minutes

Open your workspace and put your lean canvas in it, under product/, named so you will find it later. lean-canvas.md works. Naming is not the main thing; having rules for naming is. Later you will be searching your folders, and future-you will thank you.

Part 3: Prep — the context, everyone does it

Preparation first. Everything we need for a really good website almost exists in our workspace already. This part is about letting the agent actually use it.

3.1 Update the lean canvas with your market data

We have our lean canvas, created with the Running Lean method some time ago. But we also have updates — new information about the market: comment analysis, competitor map, competitors, market scan, everything like it. So what we do now is run an update.

Open your agent in the workspace, choose your project folder, switch to plan mode, and run this:

Now the important part. Ideally we need to validate it — check it, read it — before we use it. Check what changed. If you are alright with it, accept. If not, say what is off and let it try again.

A thing that happens. In the video the agent says the canvas data is missing, even though we chose the folder. The fix is the oldest rule in instructing AI: give it the direct path to the file. The more advanced the model, the less you have to explain yourself. But when it stumbles, a direct link beats a description every time.

3.2 Turn the canvas into a one-page website brief

Out of this lean canvas we build the website. First, a brief.

What comes back: the product in one sentence, the audience in their words, and the problem in the customer's words. That is the comments research speaking. When you have your interviews, you will also use them to create the brief — and the copy itself. Real people's words, not yours.

Now this file is the single source of truth. Create a new folder website/ in your workspace and save the brief there as site-brief.md. You can copy it yourself or ask your agent to do it. Either way, go to Obsidian and check that it is actually there.

This is exactly how giving the agent context looks like.

3.3 Make the design system in Claude Design

File two for our website: the design. We decide how the page looks — once, properly — and then both ways reuse it.

Here is how my design system was born, because the recipe is reusable. I was working with a mentor on this course. She has a major in brand advising, and she told me about the character strengths test. I took it, got my strengths profile, and my mentor processed it with her own tools and created my character strengths brand audit. Part of it was the visual style and the style of communication — a few paragraphs, just a few paragraphs. I gave them to Claude Design, and it created the whole system: who this is for, sources, all the files, components, colors, recommendations for fonts. It was asking me questions along the way. It took some time.

So the input is anything true about you and your product. Everything is context, right? The more you know about yourself, your product and everything, the better.

• A few paragraphs about your product and how it should feel.
• A .fig file if you have designs in Figma. In Figma: File → Save local copy, then upload it.
• Code, if you have any — from GitHub, or from your computer.
• Fonts, notes, a mentor's review — anything you have.
• Websites you really like. A great way to describe what kind of design you want: go to a website you love and ask AI to describe its brand, its palette, everything. You can combine many websites, combine what you really like, and create something very personal.

It is not a substitute for a designer. But if you are just starting, if you are on your own, that is totally fine. Claude Design is something for non-technical people.

When you have everything said, you just click continue. The generation takes a few minutes, up to five. And it gets you the design system.

Then get the system out as a file, so it becomes another piece of context in your workspace.

Save it in your workspace as design-system.md. Stick to your naming. Now we have another piece of context that is really useful for us.

The faster shortcut, if you don't want the whole ceremony: ask Claude Code to describe the design system in plain words and save it as an MD file, and reuse that. It might be a little worse than components, because components show how everything is working. But for a faster setup, not to go through everything, it can be the easier way.

Prep is done when: site-brief.md and design-system.md are both in your website/ folder, and you have read both.

Part 4: The Lovable way

On the Claude Code way? Skip to Part 5.

4.1 Send the design system to Lovable

We are coming back to Lovable. From this moment, we are on Lovable servers. So every brief and information that you put in should not be sensitive.

In Claude Design, you can send what you are working on to Lovable. You can also connect other destinations you might be working with — Base44, Replit, Vercel, Wix, anything. Today we are working with Lovable.

Two things need to be true, and then it is a click:

1. Claude is connected to Lovable. In Claude: + → Connectors → Browse connectors → Lovable → Connect → log in with your Lovable account. I have already connected it; you do it once.
2. In Claude Design, open your design system, make sure Published is on, click Export (top right) → Send to Lovable.

Lovable then writes the styles into a project — you will see your colors and your type appear as its design reference. If Claude starts doing the wrong thing with the design — in the video it offered a slide system — say it plainly:

It takes time. These days there is a tiny bit of difficulty in connecting all the tools together — MCPs and stuff — and it just takes time. In the video it took forever. What we need is enough patience, and when I have any difficulties, I ask AI. My first AI teacher said it, in a course named "How to build an AI chatbot with ChatGPT": if I have a problem, I am not panicking, I am just asking AI. I took it from there.

4.2 The first prompt, in plan mode

Switch to plan mode. Attach site-brief.md, or just copy it in. Then the first prompt. The last line does half the work.

Plan first and act. Every agent in this course gets the same discipline.

It will ask questions. Answer like I did, keeping it simple on purpose:

• New project or existing one? New one. We move it later if we want.
• Which design system? The one from the connected Claude Design project. Follow it exactly.
• Where should waitlist emails go? To your email, through a mailto button — the button opens the visitor's mail app. Not to get it more complicated. You can ask AI to set up a whole system for you to manage the waitlist later, if you want to. Today we are not focusing on this one.
• Its extra suggestions? The suggestions are good, actually. But let's stick to the brief, submit, and see what happens.

Approve the plan. It is generating now — we can go get some tea, or generate something of our own.

4.3 Look at the first result honestly

My first result: a course, joining now, stop chatting with AI, start building something — how it works — join the waitlist. Quite clean, I would say. A bit boring. It needs more work, absolutely. Like anything.

That is a normal first result. Improving it is the skill.

4.4 Test the button, check devices, edit in small steps

Test the button first. Click "Join the waitlist." In the video it did not open the mail client — it dropped me to a section instead. This is no good. One prompt fixes it.

While it is fixing, check devices. Above the preview there is a toggle: Desktop view, Tablet view, Mobile view. Look at all three. Mine looked pretty neat.

Edit the copy in small steps. The hero, the "send a short note and we'll add you to the next cohort" line — one change at a time. If typing feels slow, use speech-to-text; that is what I did.

4.5 Optional: move the page into a project you already have

If you already have a site in Lovable and want this page inside it, ask it to move the page to the other project. It will offer options. Then say the honest thing:

The easiest route it gave me: open the other project and ask it to bring the page in. Fair warning from the recording: when it moved, it changed the color. That's curious. But it's AI, and we can still change it — ask it to change the background color back, and re-test the button in its new home.

4.6 Publish

Hit Publish, top right. A quick security scan runs by itself — about ten seconds — and if it finds something, let Lovable fix it; in the video it did exactly that, and the fix was published right away. Confirm, wait until it says the site is published, copy the URL. The link is public. Open it fresh, click the button once more. If your page lives inside a bigger site, add it to the menu. From now on, every edit ends with Publish changes.

That's quite exciting, actually. We made it together.

If you have chosen the Lovable way — you are done building. Jump to Part 6.

Part 5: The Claude Code way

On the Lovable way? You are already done — go to Part 6.

5.1 The folder and CLAUDE.md

Open the Claude Desktop app and click Code. New session → Local → Open folder… → the folder of your workspace — the one we created some time ago with all the context we have just collected. We can go one level further and open the website/ folder, because we will be working on the website. Leave the permission mode on Manual: it asks, you decide.

First file: CLAUDE.md. This is the note every new session reads before doing anything, so you stop re-explaining yourself. It is a small job — a simpler model is fine for this one. In the video that was Sonnet 5; today pick Haiku 5.5 in the model picker, and switch back to the default (Opus 5.5) for the build.

Check the file is actually there in the folder.

5.2 Get the design bundle into the folder

Now we send the same design system to Claude Code. In Claude Design, open your design system → Export (top right). You will see Send to local coding agent, Send to Claude Code Web, and Download zip instead.

In the video I used the web session. The honest version: the cloud session cannot write directly to your Mac. And giving AI links into your laptop is also not really safe, because it might be used by someone — so that is fine. What it can do is hand you a zip — the design bundle. It will offer terminal commands. We are not using the terminal. No.

Today the shortest route is Download zip instead — straight to your Mac, no cloud session in between. Both routes end the same way: a zip in your website/ folder.

Download the zip into your website/ folder. Unpack it — double-click. Not a hard thing. Open the folder and see that it has the content.

Then come back to Claude Code. Look at how crowded the context is — the percentage in the Context card. 5% is fine; a fresh session is plenty for this whole build.

5.3 Build it and check it at localhost

It will ask for permissions along the way — read what it wants, allow. In the video it verifies the layouts on its own: checks the desktop hero, checks the alignment. It knows how to do its job. I like it.

Open the local address it gives you in your browser. Click every button. Read the copy.

My first result: a little too calm, I would say. A bit too long. But that's fine. Small edits come after publishing — don't polish a page nobody can visit yet.

What landed in your folder: index.html, a styles file, assets — plus your brief, your CLAUDE.md and the design bundle. All the files carry all our memory. A new session can pick this up any time. That is the point of working in a folder.

Now we can compare. Who made it better — Claude Design plus Lovable, or Claude Design plus Claude Code? Which one do you like more? I'm curious, really.

5.4 GitHub — the site's memory

We put this on the internet, and we use GitHub. GitHub is sort of the site's memory: every version will be saved there.

You need your GitHub account — free, email, and AI will do all the rest.

It checks the repo status, stages all the files, creates a private repo, pushes, and verifies it is there. You allow each step. Then go to github.com once and see your project in the list. I am not using GitHub a lot, I do not have many repositories — but this one is there. See, it's really easy.

If something goes wrong along the way, you know what to do: you are just asking AI to help.

5.5 Netlify — put it online

Sign up at netlify.com with Google. Click through the onboarding honestly — total beginner, here to publish, product manager — whatever is true.

Then:

1. Add new project → Import an existing project → GitHub.
2. Authorize Netlify on GitHub. GitHub may ask for a verification code — that is GitHub making sure we are safe here.
3. Pick your repository. Install Netlify on it. The build settings are detected on their own — the defaults are fine, Claude Code already set them up.
4. Deploy site. Deploy in progress. A couple of minutes.

And that's the link. A long one, but it's free, and this is something we can show. Check it — it adapts as you make the window smaller, to tablet, to mobile. Open it on your phone. Real page, real world.

If a friend opens your link and sees "site not found" or a login wall, your new Netlify site is private by default. Open the site's settings and switch it to public.

5.6 Make a change, watch it republish

Come back to Claude Code and make one small edit — in the video, the hero headline. Then tell it to commit and push. Netlify notices and republishes on its own. Go to Netlify → Deploys: the first one, the second one, with the change mentioned. That seems really useful.

Now we have two versions of the same thing, both live, but differently. And we connected GitHub. It might be quite intimidating, actually. I know. I know, because I'm also not a technical person.

Which link to share. Netlify gives every deploy its own frozen link, and one site address that always shows the latest version. Share the site address. If you open your link and don't see your change, you copied a deploy link — ask Claude Code: "which is my permanent Netlify URL?"

5.7 Bonus: build a page from a screenshot

At the end of the video there is one more move. To make the course's showcase page, I did not write a spec. I took a screenshot of the reference page and dropped it into Claude Code: create a showcase page for the products that will be created by the course students, use the screenshot as a reference for the structure. Same folder, GitHub already connected. Minutes later: Built by students, published for real. Every project here started as an idea from someone non-technical, then got tested, built with AI, and taken public. Browse what people made. That's really sweet. I love it.

Use it whenever you love how some page is organized.

Part 6: Ship it, then show it

Whichever way you took, you now have a public link. Three moves.

Open it on your phone. Real device, real feel. The page adapting as the screen shrinks is your quality check. Click the button once more on the published page.

Send it. This is the artifact you were missing when you ran interviews — a page you can send to someone, or run an interview around, and watch what they actually do. Send it to three people from your interviews with one question: would you sign up? A reply, an email, a question back — that's data your canvas does not have.

Bring it to the checkpoint. Paste your live URL plus one sentence into your Sprint 3 checkpoint note, run the self-evaluation, and mark the checkpoint done. And at the very end of the course, on the showcase submission page, I will offer you to share what you built and tell a little bit about it — just like the people who participated in the hackathon did. That's pretty much what we are making it for: to get you to this point of demonstrating it, publishing it to the world.

Two lines on privacy, because the page is public now. No client data, no interviewee names, nothing you would not show a stranger. And if your waitlist collects emails, add a plain footer note: "We use your email only to contact you about this product. No spam; you can ask to be removed anytime."

Part 7: Operating well — what to do when it doesn't go like the video

Using these tools well is not typing. It is managing. You give the context, you set what "done" looks like, you review. Here is what I do when things go sideways.

When you're stuck in any tool, ask AI. Just use any chat — ChatGPT, Claude, any AI-powered chat. Send the screenshot. Ask what to do, where to go, how to find something. Do not send anything sensitive — emails, passwords, tokens, anything that can be on the screen. Watch for this one.

It is new every time. Every time you use AI, even the same AI, even the same flow, it does not really work the same way. And it definitely works differently for different people, because you request different things and you ask differently. So when your screen does not match the video, that is not a mistake. Context, small steps, review — that is the part that repeats.

Connectors take time. MCPs, approvals, verification codes, "it's still rendering." Patience is part of the setup. Go get some tea.

Ask it to show what changed. Before accepting any edit — canvas, brief, page — ask: what did you change and why? Then read it. Plan mode first.

One change per prompt. And say what not to touch. "Do not touch anything else" is a legitimate sentence.

If the agent cannot find a file, give it the direct path. Not a description — the path.

If the model is eating your limit. Small jobs — a CLAUDE.md, renaming, moving a file — go to the simpler model. Save the big one for the build.

If a move changed your colors. It's AI. Ask it to change them back. Then re-test the button.

Three questions before you accept any build: What did you change? Where are you least sure? What did you leave out of the brief?

Part 8: Getting started — the seven-day plan

You do not need to do the whole lab in one sitting. Here is the pace I would take if I were new to all of this.

Day 1 — Context. Put your lean canvas in your workspace. Update it with your market folder, in plan mode. Read what changed. Nothing else.

Day 2 — The brief. Make site-brief.md. Read it aloud. Does the problem sound like your customers? If not, fix the words, not the design.

Day 3 — The design system. A few honest paragraphs into Claude Design, or one website you love. Export the MD. Pick your way and write it down.

Day 4 — Build. The Lovable way: connect, first prompt in plan mode, answer its questions, approve. The Claude Code way: folder, CLAUDE.md, design bundle, build, localhost.

Day 5 — Publish. Lovable: Publish, copy the URL. Claude Code: GitHub, then Netlify. Open it on your phone. Test the button on the live page.

Day 6 — Send. Three people from your interviews, one question each. Watch what they do.

Day 7 — Review and close. One small edit based on what you saw. Paste the URL plus one sentence into the Sprint 3 checkpoint, self-evaluate, mark it done.

Start today: open your workspace, put the lean canvas in, and run the update prompt. That's it. Everything else grows from that.

You're done when…

• Your live URL opens on your phone.
• The "Join the waitlist" button opens a mail client — tested on the published page, not the preview.
• Every word on the page is real — audience in their words, problem in their words, from your canvas and your comments research.
• The design is your design system, not the tool's defaults.
• The Claude Code way: you know which link is the permanent one.
• Your URL plus one sentence sit in the Sprint 3 checkpoint.
• The link went to at least three people from your interviews.

Your checklist

Tick things off as you go — small steps count.

Right now — before you close this tab

• Put the lean canvas in your workspace — under product/, by your naming rules; have your agent update it with the market folder, in plan mode, and read what changed.
• Make the brief — agent + canvas + folder → site-brief.md in a new website/ folder. Audience in their words, problem in their words, CTA = join the waitlist.
• Make the design system — a few honest paragraphs into Claude Design, or one website you love; export the MD into your workspace. Pick your way, write it down.

This week

• Publish end to end — your one way, to a live public URL. Test the button on the published page. Open it on your phone.
• The Claude Code way only: one edit, commit and push — check the update landed on your permanent link. That's the one you share.
• Send the link to three interview people — the page is the artifact your interviews were missing. Watch what they do.
• Close the Sprint 3 checkpoint — live URL + one sentence; self-evaluate; mark it done. At the end of the course, this is what joins the showcase.

Next — the Sprint 3 checkpoint, then Sprint 4

Put your live URL plus one sentence about what it is into your Sprint 3 checkpoint note. Add two reflection answers: what did you change after seeing the page live, and what will you ask the first three people you send it to? Note how you used AI along the way. Run the checkpoint's self-evaluation, then mark it done.

Next sprint we build the product behind this page — your personal context as a Telegram bot, in the same workspace, with the same habits.

Thank you for being here. I'd love to see your live project published on the showcase page.