diff --git a/packages/app/public/marketing.html b/packages/app/public/marketing.html new file mode 100644 index 0000000..bfd8524 --- /dev/null +++ b/packages/app/public/marketing.html @@ -0,0 +1,2753 @@ + + + + + +Originmain — Where design intent becomes production code + + + + + + + + + + + +
+
+ +
+ + + Early Access — Now Open + +
+ +

+ Design is code.
Code is design. +

+ +

+ The first canvas where every artboard is a live render of your actual app — + and every edit writes a code diff. +

+ +
+ Get Started Free + + + Watch the demo + +
+ +

Free to start · No credit card required · Works with any React codebase

+ + +
+ +
+
+
+
+
+ 🔒 + app.originmain.io/canvas +
+
+ + +
+ + +
+ Om• +
+
+
↖
+
✥
+
+
+
+
+
+
+
+
+
+
+
+
+
100%
+
+
+ Live +
+
+
+ + +
+
Artboards
+
+
DashboardCard +
+
+
UserProfile +
+
+
NavSidebar +
+
+
DataTable +
+
+
Files
+
+
src/components +
+
+
DashboardCard +
+
+
UserProfile +
+
+
StatsCard +
+
+
Graph
+
+ ● + 284 nodes indexed +
+
+ + +
+
+ + +
+
DashboardCard
+
+
+
+
+
+
+
Revenue Overview
+
Live
+
+
$12,450
+
↑ +2.4% vs last month
+
+
+
Q4 2024
+
MRR
+
+
+
+ + +
+
UserProfile
+
+
+
Sarah Chen
+
Design Engineer
+
TeamAcme Inc
+
RoleAdmin
+
+
+ +
+ + +
+
+
PROPS
+
DIFF
+
GRAPH
+
+
+
Component Props
+
title"Revenue Overview"
+
value"$12,450"
+
delta+2.4
+
period"monthly"
+
loadingfalse
+
+
+
Intent Diff
+
− borderRadius: 8px
+
+ borderRadius: 12px
+
− accentColor: #2A6CD4
+
+ accentColor: #0066FF
+
+
+
Render Target
+
filedashboard.tsx:42
+
statusconnected
+
agentclaude-code
+
+
+ ● Live render + Agent: ready + 284 nodes +
+
+ +
+
+
+ + +
+
+

Used by design engineers at

+
+
Vercel
+
Linear
+
Stripe
+
Resend
+
PlanetScale
+
Lemon Squeezy
+
+
+
+ + +
+
+
+ Live Artboard +

Your app, live in the canvas.

+

Not a mockup. Not a screenshot. Every artboard is a real render of your actual component tree — running your real code, connected to your real data.

+
    +
  • + + Any route becomes an artboard. Open a URL and it renders instantly. +
    • +
  • + + Changes in the canvas write back to your component props — no round trips. +
    • +
  • + ⚡ + Hot reload and real-time data. The canvas reflects your app state at all times. +
    • +
+ See it in action → +
+
+
+
+
+
+
DashboardCard — live
+
Revenue Overview
+
$12,450
+
+
+
+ +
+
+
+
+
+ + +
+
+
+ Intent Diff +

Ship a diff, not a redline.

+

Visual changes expressed at the component level — not the pixel level. Every edit on the canvas becomes a machine-readable diff of exactly what changed and why.

+
    +
  • + + Intent Diffs describe changes in your design language: "increase Card border-radius." +
    • +
  • + 🤖 + Agents receive the diff and apply it precisely — no interpretation required. +
    • +
  • + ✓ + Parity is verified automatically. The canvas confirms the result. +
    • +
+ Explore Intent Diff → +
+
+
+
Intent Diff — DashboardCard.tsx
+
src/components/DashboardCard.tsx · 3 changes
+
<Card
+
− borderRadius={8}
+
+ borderRadius={12}
+
elevation="medium"
+
− accentColor="#2A6CD4"
+
+ accentColor="#0066FF"
+
>
+
− padding={16}
+
+ padding={20}
+
+
+
+
+ + +
+
+
+ Origin Graph +

Every surface, indexed.

+

A queryable graph of every component, token, and relationship in your codebase. Know exactly what composes each surface — and what changes cascade.

+
    +
  • + + 284 nodes. Every component traced to its source, tokens, and parent routes. +
    • +
  • + + Completion Zone uses the graph to constrain AI suggestions to your design language. +
    • +
  • + + Agent Bridge exposes the graph to external AI tools via MCP protocol. +
    • +
+ Explore the Graph → +
+
+
+ +
App
+
DashboardCard
+
UserProfile
+
StatsCard
+
ProgressBar
+
Avatar
+
+ 278 more nodes
+ +
+
+
+
+
+ + +
+
+
+ Everything you need +

Five ideas that close the gap.

+

Each feature removes a seam between design intent and production code.

+
+
+
+
+

Live Artboard

+

A live render of your actual application — not a mockup. Every artboard is backed by a real component tree running your real code.

+
+
+
+

Origin Graph

+

Every artboard traces its provenance through a queryable graph. Know exactly which files, props, and tokens compose each surface.

+
+
+
+

Intent Diff

+

Visual changes expressed at the component level, not the pixel level. Ship diffs that describe intent — not PNG redlines.

+
+
+
+

Completion Zone

+

Mark a region. AI fills it within your design language constraints — using your actual tokens, your actual components.

+
+
+
+

Agent Bridge

+

Bidirectional MCP channel between your canvas and coding agents. Claude, Cursor, Copilot — they all see the canvas and the graph.

+
+
+
+

Integrations

+

Slots into Linear, Slack, GitHub, Figma import, and every major AI coding tool. No migration. No lock-in.

+
+
+
+
+ + +
+
+
+ Workflow +

From codebase to canvas in five steps.

+
+
+
+
01
+

Ingest

+

Point Originmain at your repo. The Origin Graph indexes your components, tokens, and routes.

+
+
+
02
+

Edit

+

Open any route as a live artboard. Every visual change is a real prop or style edit.

+
+
+
03
+

Complete

+

Mark a region and let AI suggest completions constrained to your design language.

+
+
+
04
+

Export

+

Export an Intent Diff — a machine-readable, component-level description of what changed.

+
+
+
05
+

Verify

+

Agents apply the diff and verify rendering parity. The canvas confirms the result.

+
+
+
+
+ + +
+
+
+
+
+
+ Integrations +

Connects to your entire stack.

+

Slots into the tools you already use. No migration required.

+
+ +
+ + +
+
+ + + +
+
+
GitHub
+
PR reviews, branch tracking, and automatic code sync on every push. Full origin-graph diff computed on every merge.
+
+
+ Version Control + Live +
+
+ + +
+
+ + + + + + + +
+
+
Figma Import
+
Design tokens, components & layouts synced live into the graph.
+
+
+ Design + Live +
+
+ + +
+
+ + + + +
+
+
Linear
+
Issue tracking & milestone sync tied to every component change.
+
+
+ Project Mgmt + Live +
+
+ + +
+
+ + + + + + + +
+
+
Slack
+
Deploy alerts, review pings & diff summaries in your channels.
+
+
+ Communication + Live +
+
+ + +
+
+ + + + +
+
+
Cursor
+
Origin diffs surface inline as Cursor suggestions. Accept or reject component changes without leaving your editor — zero context-switching.
+
+
+ AI IDE + Live +
+
+ + +
+
+ + + + +
+
+
VS Code
+
Extension & workspace sync, inline diff annotations.
+
+
+ IDE + Live +
+
+ + +
+
+ + + + +
+
+
Claude Code
+
AI pair programming with full graph context.
+
+
+ AI + Live +
+
+ + +
+
+ + + + + + + + +
+
+
TypeScript
+
Type-safe component contracts and prop inference.
+
+
+ Language + Live +
+
+ + +
+
+ + + +
+
+
Next.js
+
App Router, RSC, and server actions — fully understood.
+
+
+ Framework + Live +
+
+ + +
+
+ + + + + + +
+
+
React
+
Component tree, hooks, and context — mapped to the graph.
+
+
+ Library + Live +
+
+ + +
+
+8
+
More integrations
shipping soon
+
+ +
+
+
+ + +
+
+
+ Differentiation +

Not another design tool.

+

Existing tools solve half the problem. Originmain closes the loop.

+
+
+
+
vs.
+
Figma
+
+

The best interface design tool ever made — but what you design is a fiction. No knowledge of your codebase, tokens, or component API. The handoff is manual, lossy, and perpetually stale.

+
+ Static mockups + Manual handoff + No code awareness +
+
+
+
Originmain
+
Design is live code.
+
+

Every artboard is a live render. Every edit writes code. The gap between design and production is zero — because they're the same surface, indexed by the same graph.

+
+ Live renders + Code diffs + AI-constrained + Graph-indexed +
+
+
+
vs.
+
v0 / Cursor
+
+

Exceptional at generating code from a blank slate — but they hallucinate design systems. They don't know your tokens, your component API, or what "on-brand" means for your product.

+
+ Generates strangers + No design system + No visual canvas +
+
+
+
+
+ + +
+
+ +

+ "The ideal design tool is a canvas where any view of your application can be rendered, explored, and modified visually — with every change traced back to a diff in your actual codebase. Originmain is that tool." +

+
+ Jamie K. — Design Engineer, Growth Stage SaaS +
+
+
+ + +
+
+
+ Pricing +

Simple, honest pricing.

+

Early access is free. All plans include the full Origin Graph and Live Artboard engine.

+
+
+
+
Monthly
+
Annual
+
+ +
+
+
+
Starter
+
Free
+
Solo use, forever
+
+
    +
  • ✓ Unlimited artboards
    • +
  • ✓ Origin Graph (up to 5k nodes)
    • +
  • ✓ Intent Diff export
    • +
  • ✓ 3 AI completions / day
    • +
  • ✓ GitHub integration
    • +
+ Get started free +
+
+
Most popular
+
Team
+
$49
+
per seat / month · up to 10 seats
+
+
    +
  • ✓ Everything in Starter
    • +
  • ✓ Unlimited Origin Graph nodes
    • +
  • ✓ Unlimited AI completions
    • +
  • ✓ Agent Bridge (MCP)
    • +
  • ✓ Linear + Slack integration
    • +
  • ✓ Multiplayer canvas
    • +
+ Get Started Free +
+
+
Enterprise
+
Custom
+
Unlimited seats
+
+
    +
  • ✓ Everything in Team
    • +
  • ✓ SSO / SAML
    • +
  • ✓ On-premise deployment
    • +
  • ✓ SLA & dedicated support
    • +
  • ✓ Custom integrations
    • +
  • ✓ Design system audit
    • +
+ Talk to us +
+
+
+
+ + +
+
+

Start building
the right way.

+

Join the engineers who are done shipping pixel-perfect mockups that no one implements correctly.

+
+ Get Started Free + Read the docs → +
+
+
+ + + + + + +