One prompt, and the system sets itself up
The official way in
One prompt. Copy it into Claude Code — or any coding agent — and the whole journey below runs itself:
Read https://ambientui.ai/start.md and set this project up by following it. It will ask me for a design reference at the right moment — everything else is yours to run.
The guide it reads runs the same journey as the steps below and ends by telling you to press ⌘K. The manual path is the same story with the why attached — worth one read even if the agent does the typing.
What the agent does with it
The prompt points the agent at ambientui.ai/start.md — a guide written for the agent, not for you. It runs the journey in a fixed order: look at the project, install the system AND its own rulebook (the skill lands in your repo with the constitution beside it — the document that defines how a screenshot becomes a configuration and why every border follows the theme), wire the shipped stylesheets into your global CSS and verify the install actually landed — pressing ⌘K itself before you ever do — then ask you for one design reference, express that reference as Foundation configuration, build, prove that every control re-themes everything it built, and end with the reveal.
Before anything installs, the guide makes the agent look at what it is walking into. There are two situations, and the journey forks on which one you are in.
If you already have a product
The agent must ask you one question first — and wait for the answer:
Do you want the ambient layer only — the assistant living above your existing screens, which stay exactly as they are — or the full design architecture, where the Foundation also governs your tokens, spacing, radius and motion from one configuration?
Ambient layer only: the assistant installs and mounts above your product. Your screens keep their own styling; nothing about them changes.
The design architecture: the Foundation becomes the single place your look is decided — and the agent is required to warn you that saving it restyles every component that consumes its tokens, and to migrate gently rather than rewriting screens you did not ask it to touch.
If you are starting from scratch
The agent scaffolds the reference environment — Vite, React, Tailwind CSS v4, shadcn — installs both doors, and asks you the one question the whole journey needs: show it something with the feel you want. A screenshot, a link, or a few words.
On this path one page is mandatory: /ds, a settings page where every Foundation value is a control — accent, gray, radius, spacing, type scaling, motion. If your app already has a /ds route the agent checks first and uses /foundation instead, and says so. At handover it walks you through the page: what each control governs, that every change propagates to every component, and that Save is what persists it.
The reveal
The journey ends with three words: press ⌘K. The spotlight opens over your own product — search across it, with the assistant behind it. Drag the orb to the right edge and the panel docks; drag it to the top and you get the palette.
Where to next
Installation
Every command, what it lands in your repo, and the pieces you can take one at a time.
The agent skill
One door installs this whole journey as a skill, so the repo itself carries the guidance.
Set up the Foundation
The configuration space itself — accent, gray, radius, spacing, type and motion, every value a control.
The governing documents
DESIGN.md, the setup guide, the working rules and the porting specs — rendered here from the release the site ships.