ProblemSection
components/landing/problem-section.tsx
Pretty, one screen at a time.
You ask for a dashboard, then billing, then settings. Each one looks good. Together they don't: three button styles, four grays, a card that is a little different on every page. Change the card and another page shifts. Nobody can say what the system is, because there isn't one.
- every page invents its own buttons, cards and grays
- colors and sizes hardcoded, so a brand change misses half the app
- change one card, and another page quietly shifts
- no list of what exists, so nothing gets reused
- no docs: the next person starts from scratch
- pages reuse one set of tokens and components; new hardcoded values are flagged
- every component and token has an ID you can point at
- an edit by ID is held to that component or token
- a living design system with docs, generated from the code
- every edit checked in a real browser; a failed one is never committed
Why not just ask Claude Code?
You still do. Coherent runs inside Claude Code and does not replace it. It adds the three things an agent does not keep on its own.
An agent edits the file you point at. Coherent reads the import graph first and tells it which pages render that component, so the edit is scoped before a line changes.
Types and a build can pass while another page shifts. Coherent renders the pages the edit reaches and compares pages that should not change, pixel for pixel.
Each session starts from the files. Coherent keeps IDs in the code and a design system generated from it, so the next session and the next person start from the same map.
import { ProblemSection } from '@/components/landing/problem-section'
<ProblemSection />{}