VibeUI
РусEng
Sign in
Beginner guide · 5 minutes

How to use VibeUI

From an empty computer to a finished section on your site. Our part in detail; everyone else's in one line with a link to the official docs.

The whole flow in thirty seconds
1

Workspace

Windows or Mac, no terminal needed: two ordinary installers, an extension and one sentence to the agent — it does the rest.

  1. Node.js

    nodejs.org

    Download the LTS version and install it like any app: “Next → Next → Finish”. It's the engine the site runs on; you won't need to open it.

  2. VS Code

    code.visualstudio.com

    The free editor the agent lives in. Download and install with defaults. Cursor is the same VS Code with the agent already inside: pick it and the next step is not needed.

  3. Claude Code extension

    claude.com/claude-code

    In VS Code open Extensions (the squares icon on the left, or Ctrl+Shift+X), search “Claude Code”, press Install. A Claude icon appears in the sidebar — click it and sign in. Requires a Claude Pro or Max subscription.

  4. Project

    Create an empty folder, say my-site, and open it: “File → Open Folder”. In the Claude panel type one sentence — the agent creates the site, starts it and gives you a localhost:3000 link.

    create a new Next.js site with Tailwind here and run it
2

First block

One block from the catalog to your localhost. Everything after that repeats.

  1. Pick a block

    The preview is exactly what you get. The surface and the controls under the preview go into the link: the agent installs the block the way you saw it.

  2. Copy for AI

    The “Copy for AI” button puts a personal 24-hour link on your clipboard. Through it the agent gets the preview, the code and the instructions: what to keep, what may change. Sign-in required — it's free.

  3. Paste it to the agent

    Say in your own words where the block goes and paste the link into that same sentence.

    1. Open the project folder in VS Code and click the Claude icon in the sidebar.
    2. Send the message:
      put this on the home page as the hero: <link>
    3. The agent opens the link, installs the files and reports what changed.

    Agent can't open links? The block page has “Show the full instructions” — paste that text in full.

  4. Compare with the preview

    Open localhost:3000. The block should match the preview: same animations, spacing, mobile behaviour.

    If the agent “rebuilt it from memory” — no animation, different spacing — reply: “don't recreate it, install the registry component exactly as the linked instructions say”.

Try it right here

Free block hero-001. Copy it, paste it to your agent — and the flow is done.

Open the block page
3

A whole page

Once one block is in, the rest is a matter of quantity.

  • Scenarios

    Ready pages assembled from catalog blocks: landing, portfolio, restaurant. One link — every section in order.

    Browse scenarios

  • Your own palette

    Every block carries its colours in its own `--vibeui-<name>-*` variables. Ask the agent: “put our colours into the block's variables, leave the rest alone”.

  • What the agent keeps and what it changes

    The linked instructions split it: animations, typography, spacing and responsive behaviour — keep; copy, images, brand colours — yours to change.

  • Limits

    Free — 20 copies a month, enough for several sites. PRO removes the limit and unlocks the gated blocks.

    Pricing

First block in place?

Next stop — the catalog: fifteen hundred sections, components and animations, each installed with the same sentence.

Open the catalogScenarios