Let’s VibeLiving Sanctuary

Prototype studio

Where Let’s Vibe ideas take shape

Interactive prototypes, the brand system, and the code behind them — served live, no build.

Start a prototype with Claude

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.

  1. 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.

  2. Start up to date

    Paste the “Get the latest” prompt below, so you begin from what everyone else has already done.

  3. 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).

  4. 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 …”.

  5. 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. It must support both light and dark mode (our brand tokens are built for it). 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, both light and dark mode, keyboard, working links and Back button), and add dark mode if the earlier version did not have it. 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. It must support both light and dark mode. 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.

Claude shortcuts (skills)

In Claude Code, type a / command instead of pasting a long prompt. Each one runs the same checks as the prompts above. Type the command, then add your details in your own words.

/get-latest

Updates your copy to the newest work on main, reads our rules, and tells you in one paragraph what your teammates changed recently.

Use it when: Start of every session.

Example:

/get-latest

/new-prototype

Creates a brand-new prototype as v1 in the right folder, with our brand, accessible and mobile-friendly layouts, working links and Back button, a flow map and a changelog. Asks you up to three short questions if details are missing, then publishes it.

Use it when: You have a new idea, flow or screen.

Example:

/new-prototype A booking flow where a Seeker reserves a place at an event. Name it event-booking.

/new-version

Copies the latest version of a prototype into the next version (v2, v3 …), leaves the old ones untouched, applies your changes, writes the changelog and publishes it.

Use it when: You want to change something people have already reviewed.

Example:

/new-version wellness-hub: simplify the sign-in screen and add a welcome step for new Seekers

/check-standards

Tests a prototype in a real browser for accessibility, phone and computer layouts, and links and the Back button, explains any problems in plain language, fixes them and checks again.

Use it when: Before you share something, or to review a teammate's work.

Example:

/check-standards partners v1

/ship

Updates from main, runs the checks, saves your work straight to main (no pull request) and gives you the live link plus a two-line summary to paste to the team.

Use it when: You're happy with it and want the team to see it live.

Example:

/ship Added the event booking prototype

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.

Foundations

Brand & docs

Browse all files