CoherentDS
shared · Page blocks

ProofSection

components/landing/proof-section.tsx

preview
[04]Every edit proven

“Done” means checked.
In a real browser, before it lands.

Before an edit, Coherent knows from your code which pages it can affect. After it, it builds the app, renders those pages, and compares a sample of pages that should not change pixel by pixel. It flags hardcoded colors and sizes that should be tokens, new browser errors, your real name in mock data. A failed edit is not committed: the agent fixes it and checks again, or rolls it back.

coherent_verify_edit · final
request
"On Earnings only, make the KPI cards more prominent. Other KPI pages must not change."
scope variantwrite set kpi-card.tsx, creator/earnings/page.tsx
routeexpectedpixels changed
/creator/earningschange · must change17.9%
/advertiseridentical · also uses KpiCard0.00%
/advertiser/campaigns/[id]identical · also uses KpiCard0.00%
+ 2 more controlsidentical · unrelated pages0.00%
  • write set held
  • no new type errors
  • production build
  • no new browser errors
  • no identity leaks
verdict: verified

You don't run any of this. Your agent calls Coherent on every change and reports the verdict as it is. How agent mode works →

usage · in this app
app/page.tsx
import { ProofSection } from '@/components/landing/proof-section'

<ProofSection />
props
{}
used on · 1
/
tokens · 11
referenced in its file
--accent--background--border--fg-dim--fg-muted--leading-copy--leading-display--text-body--text-display-lg--text-display-sm--tracking-heading
history · 2
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