Prototype
Living Sanctuary
Where Let’s Vibe ideas take shape
Interactive prototypes, the brand system, and the code behind them — served live, no build.
Explore
Prototypes
Start here
Create with Claude — no technical knowledge needed
Anyone on the team can start a new prototype or a new version by pasting a prompt into Claude. Claude follows our brand, accessibility and link rules on its own.
-
Open Claude on this repo
Easiest: go to claude.ai/code, start a new session, and choose the repository HighestVibrations/vibe-prototypes. Already use Claude Code on your computer? Open it in the vibe-prototypes folder instead.
-
Start up to date
Paste the “Get the latest” prompt below, so you begin from what everyone else has already done.
-
Describe what you want
Pick the prompt that matches your goal, copy it, and replace the [bracketed parts] with your own words. Plain language is perfect. Claude already knows the brand and our standards (it reads AGENTS.md by itself).
-
Review and refine
Claude will tell you how to open what it built. Look at it on your phone and your computer, then ask for changes in your own words: “make the header calmer”, “add a step for …”.
-
Publish it
Paste the “Save and publish” prompt. Claude saves your work to the shared main copy, and our site updates automatically in a minute or two. Claude gives you the live link to share. Because everyone works on the same copy, Claude always updates first and never overwrites a teammate's work.
Copy-ready prompts
Replace the [bracketed parts] with your own words, then paste into Claude.
Get the latestDo this first, every time you start.
Before we start, make sure you're working from the latest version of the vibe-prototypes repo on GitHub (the main branch). Read AGENTS.md and follow it for everything we do. Tell me in plain language if anything is in the way, and give me a one-paragraph summary of what's changed recently so I know what my teammates have been up to.
Create a new prototypeYou have a new idea, flow or screen to try. Claude command: /new-prototype
I'd like to create a brand-new Let's Vibe prototype. What it is: [describe it in plain words, e.g. a flow where a Seeker books a place at an event] Who it's for: [Seeker, Practitioner, or both] Screens or steps I imagine: [list them, or write "you decide"] Name: [a short name like event-booking, or write "pick one"] Read AGENTS.md first and follow it exactly. Build it as v1 in the right folder, using our brand. Check it on a phone and a computer, in light and dark mode and with the keyboard only, and make sure every screen has its own link that still works after a reload and with the Back button. Once it passes, save it straight to main and publish it (no pull request needed), updating from main first so you never overwrite a teammate's work. When you're done, tell me in plain language what you built, give me the live link and how to open it locally, and anything you could not check.
Create a new version of an existing prototypeYou want to change something people have already reviewed. Claude command: /new-version
Create a new version of the prototype [name, e.g. wellness-hub]. Start from its latest version and leave all older versions untouched. What I want to change: [describe the changes in plain words] Read AGENTS.md first and follow it. Write a changelog that explains what is different from the previous version, update the version list, and run the same checks (phone and computer, light and dark, keyboard, working links and Back button). Once it passes, save it straight to main and publish it (no pull request needed), updating from main first. Tell me in plain language what changed and give me the live link to the new version.
Make a small change to the latest versionA typo, a wording tweak or a small fix that does not change the design.
Make a small change to the latest version of [prototype name]: [describe the change]. Only do this in place if it's a minor fix that doesn't change what people already reviewed. If it changes the design, flow or behaviour, stop and ask me, and make a new version instead. Record the change in that version's changelog, check it still works on a phone and a computer, then update from main, save it straight to main and publish it (no pull request needed). Give me the live link.
Build from a design or screenshotYou have a Figma link, screenshots or a sketch.
Build a Let's Vibe prototype from this design: [paste a Figma link, or attach screenshots or a sketch]. Purpose: [what it should show or prove] Name: [a short name, or write "pick one"] Read AGENTS.md first. Match our brand tokens (colours, fonts, spacing) rather than copying exact values from the design, and tell me where you made a judgement call. Check phone and computer, light and dark, keyboard, and working links. Once it passes, update from main, save it straight to main and publish it (no pull request needed), and give me the live link.
Check a prototype against our standardsBefore you share something, or to review someone else's work. Claude command: /check-standards
Check [prototype name and version, e.g. partners v1] against our standards in AGENTS.md: accessibility, phone and computer layouts, and links and the Back button. List anything that fails in plain language, fix it, and check again. Tell me exactly what you tested and what you could not.
Save and publish my workYou're happy with it and want the team to see it live. Claude command: /ship
Save and publish my work. First update from the latest main so nothing a teammate did gets overwritten. Run the checks in AGENTS.md (the app builds, my prototype loads, phone and computer layouts, working links). If those pass, commit with a clear message, push straight to main (no pull request needed), and tell me when it's live along with the link and a two-line summary I can paste to the team. If something conflicts with a teammate's work, stop and explain it simply before changing anything.
Help me understand this repoFirst time here, or you're lost.
I'm new to this repo and not technical. Explain in plain language what's here, how prototypes are organised, how I can preview them, and what I'd do to start my first one. Keep it short and ask me what I want to make.
Good to know
- You never need to write code. Describe what you want like you would to a designer.
- Always let Claude read AGENTS.md. It holds our brand, accessibility and link rules, and Claude follows it automatically.
- We move fast: work is saved straight to main and the site updates itself, with no pull requests. That's why Claude checks everything before it publishes.
- Keep new ideas as a new prototype or a new version, so earlier work stays available to compare.
- Always start with “Get the latest”, so you build on your teammates' newest work.
- Don't paste passwords, keys or real customer information into a prompt or a prototype.
Using Claude Code? Type /new-prototype, /new-version, /check-standards or /ship for the same thing in one step.
Foundations
Brand & docs
Browse all files
api/
getting-started/
letsvibe-brand/
prototypes/
partners/
v1/
vibe-landing/
v1/
wellness-hub/
- AGENTS.md
- app.js
- CHANGELOG.md
- CLAUDE.md
- package.json
- README.md
- vercel.json