# Bilvo Tutorial Library — from zero to master

**Status:** plan v1.2 · 26 Oct 2026 · owner Farhan · made with Claude
**This page:** https://bilvo-learn.kovaai.site (plain text for any AI: https://bilvo-learn.kovaai.site/plan.md)
**Later:** same site moves to **learn.bilvo.io** when Bilvo goes live.
**Also here:** [lesson scripts](/scripts/) · [session logs](/sessions/) (what Claude did, for any AI account to read)

---

## 1. What we are making

A library of short, interactive video tutorials that takes a Bilvo customer from "never opened it" to "can do everything the builder can do".

- **34 lessons in 6 levels.** Each lesson is one job (sign in, swap a photo, add a page, connect a domain…), 60–120 seconds, real screen, polished.
- **One running example.** Every lesson continues the same site: **Rosa's Bakery** (Austin · sourdough + weekend classes), made in the first video. Customers see one site grow from nothing to launched.
- **Voice and words.** ElevenLabs voice **Chris** — a professional, friendly male voice (Farhan's pick), captions on screen, quiet energetic music, cursor with hover glow and click ring. Never say "Lesson" on screen or in the voice. End card is always "Your website, built by chatting" + the builder address (never tease the next video).
- **Always the dark builder.** Every recording uses the builder in dark mode (its default). Never the light theme.
- **AI first, hands second.** The way we teach every bigger change — a new section, a new page, a new feature, a redesign — is: ask the AI to build it, then fine-tune by hand if needed. Hand editing is for small, precise touches (a word, a photo, a colour, spacing). Every lesson follows that order, and the voice says so where it fits ("ask for it, then polish it yourself").
- **Interactive, not just a video.** Each lesson lives on its own page with:
  1. the video with **chapter markers** (jump to "Swap a photo", "Undo"…);
  2. a **"Now you try it" checklist** — the same 3–6 steps as the video, each with an **"Open it in the builder"** button that jumps to the right panel of the customer's own site;
  3. a **"Did it work?" check** — one question with the answer (e.g. "Does the page show your new photo on phone view?");
  4. progress ticks saved in the browser, and a level badge when the level is done.
- **Where customers find it:** learn.bilvo.io (public), a **Learn** button inside the builder that opens the lesson for the panel they're in, the welcome email sequence (Mailbo), and YouTube (same videos, playlist per level).

## 2. The library (34 lessons, 6 levels)

Lesson names are what the customer sees. Length is the target for the finished video. "After this you can…" is the promise we test each lesson against.

### Level 0 · Start here (3 lessons, ~4 min)

| # | Name | Length | After this you can… | What's on screen |
|---|------|--------|---------------------|------------------|
| 0.1 | What Bilvo is, in 60 seconds | 1:00 | Say what Bilvo does and what you need (a Claude or ChatGPT plan) | Demo sites, chat → site, editor, Publish |
| 0.2 | Connect your AI and photos | 1:15 | Connect Claude / ChatGPT / Codex / Cursor, and Unsplash for real photos | Builder sign-in, Step 1 connect AI (sign in on their page, no extra bill), Step 2 Unsplash or skip |
| 0.3 | Make your first website ✅ *made, review pending* | 1:30 | Describe your business and get a finished site | Type the business, "Build with Bilvo", answer questions in chat, site ready |

### Level 1 · Your first edits (6 lessons, ~8 min)

| # | Name | Length | After this you can… | What's on screen |
|---|------|--------|---------------------|------------------|
| 1.1 | Change anything by asking | 1:15 | Ask for a new headline, a new section, a different colour; use "What's next?" chips. Sets the rule: big change → ask | Chat panel, a request, site updates, answer chips |
| 1.2 | Click to edit text | 1:00 | Polish single words yourself after the AI's draft; paste from Word, keep formatting. Sets the rule: small touch → click | Click text, type, paste, save |
| 1.3 | Swap and upload photos | 1:15 | Ask the AI for a different photo (Unsplash) or for all photos at once; upload your own with Replace image; check on phone | Chat "replace the hero photo with…", click photo → Replace image → upload, phone view |
| 1.4 | Undo, and the panel | 0:50 | Undo any change; hide/show the panel; Chat / Layers / Components tabs | Undo button, panel toggle, three tabs |
| 1.5 | See it on phone and tablet | 0:50 | Check every page on Phone / Tablet / Desktop before publishing | Device switcher, preview mode |
| 1.6 | Publish for free | 1:15 | Put the site live on a free bilvo.live address; press Update site after changes | Publish drawer, Bilvo hosting, pick a name, Live, Update site, sample-content warning |

### Level 2 · Build the whole site (7 lessons, ~10 min)

| # | Name | Length | After this you can… | What's on screen |
|---|------|--------|---------------------|------------------|
| 2.1 | Add pages | 1:30 | Add a page (About, Classes, Contact) by asking; see which pages are built | Pages menu, "add a Classes page" in chat, page lane builds it |
| 2.2 | Page actions | 1:00 | Duplicate, delete, set a new home page, rename a page's address | "⋯" on a page: duplicate / delete / make home; Page settings address |
| 2.3 | Your menu and dropdowns | 1:15 | Rename, reorder, link, add dropdown items; footer menus | Menu panel, drag, +dropdown, phone menu check |
| 2.4 | Lists of things: the CMS | 1:45 | Manage reviews, team, menu items, blog posts as lists; add / edit / hide items | CMS panel, a Reviews list, add item, it appears on the page |
| 2.5 | Replace the sample content | 1:00 | Spot the amber "Sample" marks and replace them before publishing | Dashed amber outline, samplebar, CMS "Sample" tag, Publish warning |
| 2.6 | Give the AI your files | 1:00 | Add a PDF menu, a Word doc, photos in the chat; the AI reads and uses them | Paperclip, 10 files, AI notes, content appears |
| 2.7 | Add a section: ask, then adjust | 1:30 | Ask the AI for a new section ("add a classes schedule under the hero"); then move or tweak it by hand; drop a saved component when it's already there | Chat request → section appears → inspector tweak; Components tab, Layers tree |

### Level 3 · Make it yours: design (7 lessons, ~10 min)

| # | Name | Length | After this you can… | What's on screen |
|---|------|--------|---------------------|------------------|
| 3.1 | Colours and fonts | 1:30 | Ask the AI for a new palette or font pairing; then fine-tune one colour in Styles with the hex picker | Chat "warmer palette" → Styles panel, swatches, picker, fonts |
| 3.2 | Text styles | 1:00 | Edit the look of all headings / paragraphs at once | Text-style editor, size, weight, spacing |
| 3.3 | The inspector | 1:30 | Change one element: spacing, size, alignment, link, visible/hidden, per device | Click element → right panel, Layout, Link, Visible, Phone-only values |
| 3.4 | Buttons that react | 1:00 | Set hover colours and motion (lift, grow, glow) for one button or all like it | Regular / Hover switch, "All N like this" |
| 3.5 | Effects: appear, scroll, loop | 1:30 | Ask the AI for motion across the site; then set one element's appear / scroll / loop, shadow or blur by hand, without slowing the site | Chat "add subtle motion" → Effects section, Play preview, "no phone" switch |
| 3.6 | Redesign a section by asking | 1:15 | Ask for a new layout of one section; ask for fixes (not redesigns) when something is off; then polish by hand | Right-click section → Ask; "make the hero photo-led"; fix round; one hand tweak |
| 3.7 | Go dark (or light) | 0:50 | Ask for a dark version of the whole design; switch the builder itself light/dark | "Make the whole site dark"; rail sun/moon; Settings → Appearance |

### Level 4 · Launch it (7 lessons, ~10 min)

| # | Name | Length | After this you can… | What's on screen |
|---|------|--------|---------------------|------------------|
| 4.1 | Site settings: name, favicon, share image | 1:15 | Set the site name, language, favicon, the picture shown when the link is shared | Settings → General |
| 4.2 | SEO: how Google sees you | 1:30 | Fix the SEO panel's issues; per-page title/description with the Google preview; hide a page from search | SEO rail panel, issue cards, Page settings, "Show in Google" / "Show in AI search" |
| 4.3 | Your own domain | 1:45 | Point rosasbakery.com at the site: add the records, wait for "Live" | Settings → Domain, records table with Copy, Waiting for DNS → Live, auto republish |
| 4.4 | Other hosting: Vercel, Cloudflare, GitHub, FTP | 1:45 | Publish to your own Vercel / Netlify / Cloudflare Pages / GitHub Pages / web host; make one the default | Publish drawer "Or use your own hosting", connect, Default for Publish |
| 4.5 | Redirects | 0:50 | Send an old address to a new page | Settings → Redirects |
| 4.6 | Custom code: analytics, pixels, chat | 1:15 | Add Google Analytics, a Meta pixel, a chat widget or cookie banner with the starters | Settings → Custom code, snippet cards, on/off, which pages |
| 4.7 | Backups and downloads | 1:15 | Back up the site to a private GitHub repo (two-way); download all files as a zip | Settings → Backup, connect GitHub, auto backup; Download .zip (paid) |

### Level 5 · Master Bilvo (4 lessons, ~6 min)

| # | Name | Length | After this you can… | What's on screen |
|---|------|--------|---------------------|------------------|
| 5.1 | Write a brief that gets a great site | 1:45 | Give brand colours, fonts, tone, real content and photos up front so the first build is right | New-site screen, a strong brief vs a weak one, side-by-side results |
| 5.2 | Start from a template, or Quick build | 1:30 | Pick one of the free templates (AI fills the words), or Quick build (AI's own design), then "Upgrade the design" later | New-site tabs: Bilvo design · Default AI build · From a template · Import |
| 5.3 | Bring your old website in | 1:45 | Import a live site; prove you own it; bring big lists in by spreadsheet | Import my site, copy card, "needs your answer", owner code, CSV import |
| 5.4 | Work on two sites at once | 1:00 | Hand-edit another site while the AI builds a new one; AI requests wait their turn | Open another site mid-build, "will run after the build" note |

### Also: 5 short "Fix it" clips (30–45 s each, no level)

For the help button and support replies, not the course: **AI signed out** (reconnect) · **Workspace asleep** (it wakes by itself) · **"Sample content is still on your site"** · **Site over the free traffic limit** · **I can't rename the home page**.

**Total:** 34 lessons ≈ 48 minutes of video + 5 clips. Level 0 + 1 (9 lessons) is the "first day" path and goes first.

## 3. Teaching rules (apply to every lesson)

1. **Dark builder, always.** Record in dark mode only.
2. **AI first, hands second.** For anything complex or new (section, page, feature, redesign, dark version, effects on many elements): show the customer asking the AI in the chat, get the result, then show the small hand tweak if one is needed. Never teach building a section by hand from scratch.
3. **Hands are for precision.** Click-to-edit, the inspector, Styles, Effects and Hover are shown as the way to polish what the AI made: one word, one photo, one colour, one button.
4. **Say the rule out loud once per level.** A short line like "Big change? Ask. Small touch? Click." so it sticks.
5. **One job per video, 60–120 seconds, real screen, one running example (Rosa's Bakery).**

## 4. How each lesson page works (the interactive part)

```
┌─────────────────────────────────────────────────────────┐
│  Level 1 · Your first edits          3 of 6 done  ●●●○○○ │
│                                                         │
│  ┌───────────────────────────┐  Now you try it           │
│  │                           │  ☐ Click any photo        │
│  │       VIDEO 1:15          │     [Open my site]        │
│  │  ▸ Pick · Unsplash · Own  │  ☐ Search Unsplash        │
│  └───────────────────────────┘  ☐ Or upload your own     │
│  chapters under the video       ☐ Check it on Phone      │
│                                                         │
│  Did it work?  "Does the new photo show on phone view?" │
│  [Yes, next lesson →]   [Something's off → Fix-it clip] │
└─────────────────────────────────────────────────────────┘
```

- **Chapters** come from the lesson's timeline (the same step chips the video shows).
- **Open my site** opens build.bilvo.io on the customer's current site with the right panel open (`?open=styles`, `?open=settings/domain`…). Signed-out visitors see the sign-up page.
- **Progress** is saved in the browser (no account needed). A finished level shows a badge; the builder's Learn button shows "Level 2 · 4 of 7".
- Everything on the page is plain words; no "lesson 3.4" on screen (numbers are only in this plan).

## 5. Production: how a lesson gets made

Already built for lesson 0.3 and reused for every lesson (folder `grayskills/tutorials/`):

1. **Script** — `script.md`: screen, voice line, caption per step (like lesson 0.3's table). Reviewed by Farhan before recording.
2. **Record** — the driver runs headless Chrome on the live builder (dark mode) as the team test account on the Rosa's Bakery site, records 1920×1080 frames and logs every cursor move and click. Customer email shown as you@yourbusiness.com.
3. **Voice** — one ElevenLabs generation per lesson (voice Chris, `eleven_multilingual_v2`), split at the pauses into per-line clips. About 1,000 credits per lesson → roughly **35k credits for the whole library**.
4. **Render** — `timeline.json` joins clips, voice, chips, highlighted words and zooms → MP4 with window frame, captions, cursor effects, music.
5. **Check** — stills at key moments, full watch, Farhan review. Fix, re-render.
6. **Publish** — MP4 + chapters + checklist → learn site; same MP4 → YouTube.

Rules: builds in recordings run ~25 min, so building parts are sped up or cut; the test account is shared (another session once switched sites mid-recording — record when nobody else is on it).

## 6. Order and timeline

| Batch | Lessons | Why first | Rough effort |
|-------|---------|-----------|--------------|
| A — First day | 0.1, 0.2, (0.3 done), 1.1–1.6 | Everything a new sign-up needs on day one; feeds the welcome emails | 8 lessons |
| B — Whole site | 2.1–2.7 | Second session: pages, menu, CMS, files | 7 lessons |
| C — Launch | 4.1–4.7 | Customers hit domains/SEO/hosting questions here; cuts support | 7 lessons |
| D — Design | 3.1–3.7 | Power features; also makes good marketing clips | 7 lessons |
| E — Master + Fix-its | 5.1–5.4 + 5 clips | Import, templates, briefs — some features still staging-only | 4 + 5 |

Each batch: scripts → Farhan OK → record + voice + render → Farhan review → publish. Batch A scripts are at [/scripts/](/scripts/). Batch A lands first; the learn site goes public once A and B are up.

## 7. What Farhan decides

1. **OK the lesson list?** Anything to cut, merge or add. (My suggestion: keep all 34; 60–120 s each stays easy to watch.)
2. **Interactive format:** A) video + "Now you try it" checklist + progress (recommended) or B) videos only, playlist style.
3. **Batch order:** A → B → C → D → E as above, or launch-first (C before B)?
4. **Address:** learn.bilvo.io at go-live (recommended), or tutorials inside bilvo.io/learn.
5. **YouTube:** publish the same videos publicly (free marketing) or keep them in the app only.

## 8. Done so far / next

- ✅ Lesson 0.3 "Make your first website" video made (26 Oct 2026, review pending).
- ✅ Recorder, renderer, voice and music pipeline working.
- ✅ This plan, hosted at bilvo-learn.kovaai.site.
- ✅ Rules added 26 Oct: dark builder only · professional, friendly male voice · AI first, hands second.
- ✅ Video 0.1 "What Bilvo is" rendered 26 Oct: [watch it](/videos/0.1-what-bilvo-is.mp4) (review pending).
- ✅ Batch A scripts written 26 Oct (0.1, 0.2, 1.1–1.6): [scripts](/scripts/) — review, then recording starts.
- ⏭ Next: Farhan reviews the batch A scripts → record, voice, render 0.1 first → scripts for batch A.