CoherentDS
shared · Page blocks

GettingStartedSection

components/landing/getting-started-section.tsx

preview
[05]Getting started

One command. Then just talk.

new app
$ npx @getcoherent/cli init my-app

Creates a Next.js app with create-next-app and shadcn, adds a welcome page, and installs the Coherent agent.

existing next.js app
$ cd my-next-app
$ npx @getcoherent/cli init

Adds the agent, its config and a dev dependency; your UI code is not changed. Then ask for the design system: components get IDs, and the pages are checked to render exactly as before.

Open the folder in Claude Code and approve the coherent MCP server once. The Coherent agent is already the default. Coherent needs no API key of its own: your agent does the designing, Coherent keeps it consistent and checks it. Requires Node.js 20+ and a Next.js App Router project.

Then just ask · a real session on Orbit, the app above
claude · ~/orbit
>Show me the design system
coherent
27 components: 13 shared, 14 base
37 tokens · 8 pages · every component has an ID
readyopen /design-system
>CID-007: make the chart title a bit bolder
coherent0s
MrrChart only · 1 file
/ and /revenue render it · changed, as expected
/cohorts, /customers/[id] · pixel-identical
verified
>CID-007: rename the paddings, nothing should look different
coherent0s
refactor · every page it reaches must stay the same
4 pages, light and dark · pixel-identical
verified
>CID-007: round legend dots
coherent0s
customers/page.tsx changed too
it is outside the edit
failednot committed · the agent rolled its edit back

Times are from a laptop and include a production build and the renders. The design system for an existing app is generated the same way, from its code.

usage · in this app
app/page.tsx
import { GettingStartedSection } from '@/components/landing/getting-started-section'

<GettingStartedSection />
props
{}
used on · 1
/
tokens · 19
referenced in its file
--accent--background--border--border-strong--fg-dim--fg-muted--font-sans--foreground--leading-copy--leading-display--shadow-lift--surface--surface-2--text-caption--text-display-md--text-display-xl--text-ui--tracking-heading--tracking-label
history · 5
verified
CID-059: the first-day session is centred in the section
2026-10-22
partial
Getting started: the first-day session plays as a terminal chat (FirstDaySession)
2026-10-22
verified
Getting started: a real first-day session on Orbit
2026-10-21
verified
Previews for the site components
2026-10-21
verified
Home: every section is its own component; the page composes them
2026-10-21
Coherent Design MethodGitHubDesign system read from this app's code