diff --git a/packages/app/next.config.ts b/packages/app/next.config.ts index 4023a9c..0f1aa0e 100644 --- a/packages/app/next.config.ts +++ b/packages/app/next.config.ts @@ -5,6 +5,13 @@ const nextConfig: NextConfig = { experimental: { optimizePackageImports: ['@fluentui/react-components'], }, + async rewrites() { + return { + beforeFiles: [ + { source: '/', destination: '/marketing.html' }, + ], + }; + }, }; export default nextConfig; diff --git a/packages/app/public/marketing.html b/packages/app/public/marketing.html new file mode 100644 index 0000000..f638278 --- /dev/null +++ b/packages/app/public/marketing.html @@ -0,0 +1,815 @@ + + + + + +Originmain — AI-Native Design Engineering Platform + + + + + + + + + + + +
+
+ + ● 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 is a code diff. +

+ +
+ Request Early Access + + + Watch the demo + +
+ + +
+
+
+
+
+ Originmain — DashboardCard.tsx +
+ +
+
+
↖
+
✥
+
+
+
⬜
+
＋
+
+
+
◈
+
△
+
+
+
+ ● Live +
+
100%
+
+
+ +
+ +
+
Artboards
+
+
DashboardCard +
+
+
UserProfile +
+
+
NavSidebar +
+
+
DataTable +
+
+
Origin Graph
+
+
src/components +
+
+
DashboardCard +
+
+
StatsCard +
+
+
src/app +
+
+ + +
+
+
DashboardCard
+
+
+
+
+
+
+
Revenue Overview
+
Live
+
+
$12,450
+
↑ +2.4% vs last month
+
+
+
Q4 2024
+
MRR
+
+
+
+
+ + +
+
+
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: #0F52BA
+
+
+
Render Target
+
filedashboard.tsx:42
+
statusconnected
+
agentclaude-code
+
+
+
+ +
+
+ Live render connected + Agent Bridge: ready + Graph: 284 nodes +
+
+
+ + +
+
+
+ The Problem +

Every design tool lies.

+

Your design file and your codebase diverge the moment you ship. Every handoff creates a gap. Every gap creates debt.

+
+
+
+
↕
+

The Handoff Gap

+

Design files describe pixels. Code describes behaviour. Neither speaks the other's language — designers spec what they imagine, engineers ship what they can build in time.

+
+
+
⊘
+

The Context Collapse

+

Switch from Figma to your editor and every annotation, constraint, and decision stays behind. Context collapses into a Slack thread that nobody reads twice.

+
+
+
□
+

The Blank Canvas Problem

+

AI tools generate strangers. v0 produces components your design system doesn't recognise. The blank canvas ignores all the decisions already encoded in your app.

+
+
+
+
+ + +
+
+
+ Core Concepts +

Five ideas that change how design works.

+

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 say "increase Card border-radius" — not a PNG redline.

+
+
+
◈
+

Completion Zone

+

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

+
+
+
⇄
+

Agent Bridge

+

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

+
+
+
+
+ + +
+
+
+ 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 existing 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.

+
+
+
🔗 Linear
+
💬 Slack
+
🐙 GitHub
+
🖱 Cursor
+
🤖 Claude Code
+
◆ Figma (import)
+
▲ Next.js
+
⚛ React
+
🟦 VS Code
+
+
+
+ + +
+
+
+ Differentiation +

Not another design tool.

+

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

+
+
+
+
vs.
+
Figma
+
+

Figma is the best interface design tool ever made — but what you design is a fiction. It has no knowledge of your codebase, tokens, or component API surface. 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
+
+

v0 and Cursor are 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, duplicated, and modified visually — with every change traced back to a diff in your actual codebase.

+
— Design Engineer at a Series B startup
+
+
+ + +
+
+
+ Pricing +

Simple, team-based pricing.

+

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

+
+
+
+
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 +
+
+
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
    • +
+ Request early access +
+
+
Enterprise
+
Custom
+
Unlimited seats
+
+
    +
  • Everything in Team
    • +
  • SSO / SAML
    • +
  • On-premise deployment
    • +
  • SLA & dedicated support
    • +
  • Custom integrations
    • +
  • Design system audit
    • +
+ Talk to us +
+
+
+
+ + + + + + +