wehub-resource-sync
070959e133
landing-page-staging / Deploy landing page to staging (push) Has been skipped
landing-page-ci / Validate landing page (push) Failing after 4s
visual-baseline / Capture visual baselines (push) Has been cancelled
bake-plugin-previews / Bake plugin previews (push) Has been cancelled
298 lines
16 KiB
HTML
298 lines
16 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<title>Write a Demo Day Pitch like a Top Accelerator Partner - Fundraising pitch</title>
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Geist:wght@300;400;500;600&family=Geist+Mono:wght@400;500;600&display=swap');
|
|
|
|
/* ============ tokens (taste-skill: one accent, off-black/off-white, cool neutral) ============ */
|
|
:root{
|
|
--paper:#f4f5f3;
|
|
--paper-2:#ebedea;
|
|
--ink:#121417;
|
|
--ink-2:#4d5359;
|
|
--ink-3:#878d93;
|
|
--line:rgba(18,20,23,.12);
|
|
--line-strong:rgba(18,20,23,.28);
|
|
--accent:#2b49ff;
|
|
--accent-ink:#ffffff;
|
|
--font-display:'Space Grotesk',sans-serif;
|
|
--font-body:'Geist',-apple-system,BlinkMacSystemFont,sans-serif;
|
|
--font-mono:'Geist Mono',SFMono-Regular,Menlo,monospace;
|
|
--ease:cubic-bezier(.16,1,.3,1);
|
|
}
|
|
*,*::before,*::after{box-sizing:border-box}
|
|
html,body{margin:0;padding:0;background:var(--paper);color:var(--ink);
|
|
font-family:var(--font-body);font-weight:400;line-height:1.55;
|
|
-webkit-font-smoothing:antialiased}
|
|
a{color:inherit;text-decoration:none}
|
|
|
|
/* ============ deck (static preview: slides stacked) ============ */
|
|
.deck{width:100vw}
|
|
.slide{position:relative;width:100vw;height:100vh;overflow:hidden;
|
|
display:flex;flex-direction:column;justify-content:center;
|
|
padding:88px 104px;border-bottom:1px solid var(--line)}
|
|
|
|
/* footer baseline row, shared */
|
|
.base{position:absolute;left:104px;right:104px;bottom:44px;
|
|
display:flex;justify-content:space-between;align-items:baseline;
|
|
font-family:var(--font-mono);font-size:11.5px;letter-spacing:.04em;color:var(--ink-3)}
|
|
|
|
/* ============ type scale ============ */
|
|
.display{font-family:var(--font-display);font-weight:600;letter-spacing:-.035em;line-height:.98;
|
|
font-size:clamp(64px,8.5vw,118px);margin:0}
|
|
.h2{font-family:var(--font-display);font-weight:600;letter-spacing:-.03em;line-height:1.04;
|
|
font-size:clamp(40px,4.6vw,60px);margin:0}
|
|
.h3{font-family:var(--font-display);font-weight:600;letter-spacing:-.015em;font-size:23px;line-height:1.25;margin:0 0 8px}
|
|
.lede{font-size:20px;line-height:1.55;color:var(--ink-2);font-weight:300;max-width:56ch;margin:0}
|
|
.body{font-size:16px;color:var(--ink-2);margin:0;max-width:46ch}
|
|
.mono{font-family:var(--font-mono)}
|
|
.kicker{font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:0 0 22px;font-weight:500}
|
|
em.ac{font-style:normal;color:var(--accent)}
|
|
|
|
/* ============ entrance motion (gsap-skills discipline: transform+opacity, reduced-motion safe) ============ */
|
|
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
|
|
.slide>.in{animation:rise .7s var(--ease) both}
|
|
.slide>.in:nth-child(2){animation-delay:.06s}
|
|
.slide>.in:nth-child(3){animation-delay:.12s}
|
|
.slide>.in:nth-child(4){animation-delay:.18s}
|
|
@media (prefers-reduced-motion:reduce){.slide>.in{animation:none}}
|
|
|
|
/* ============ S1 cover ============ */
|
|
.cover{justify-content:flex-end;padding-bottom:150px}
|
|
.cover .meta-top{position:absolute;top:52px;left:104px;right:104px;display:flex;justify-content:space-between;
|
|
font-family:var(--font-mono);font-size:12px;letter-spacing:.05em;color:var(--ink-2)}
|
|
.cover .sub{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:64px;align-items:end;margin-top:40px}
|
|
|
|
/* ============ S2 problem: editorial statement ============ */
|
|
.statement{font-family:var(--font-display);font-weight:500;letter-spacing:-.025em;line-height:1.12;
|
|
font-size:clamp(34px,3.9vw,52px);max-width:24ch;margin:0}
|
|
.statement .mute{color:var(--ink-3)}
|
|
|
|
/* ============ S3 solution: split 7/5 ============ */
|
|
.split{display:grid;grid-template-columns:7fr 5fr;gap:96px;align-items:center}
|
|
.flow{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-strong)}
|
|
.flow li{display:grid;grid-template-columns:44px 1fr;gap:18px;padding:17px 0;border-bottom:1px solid var(--line);align-items:baseline}
|
|
.flow .n{font-family:var(--font-mono);font-size:12.5px;color:var(--ink-3)}
|
|
.flow .t{font-size:16.5px}
|
|
.flow .t strong{font-weight:600;color:var(--ink)}
|
|
|
|
/* ============ S4 convictions: indexed rows ============ */
|
|
.rows{border-top:1px solid var(--line-strong);margin-top:44px}
|
|
.rowi{display:grid;grid-template-columns:130px 320px 1fr;gap:40px;padding:30px 0;border-bottom:1px solid var(--line);align-items:start}
|
|
.rowi .idx{font-family:var(--font-display);font-weight:600;font-size:34px;letter-spacing:-.02em;color:var(--ink-3);line-height:1}
|
|
.rowi:hover .idx{color:var(--accent)}
|
|
|
|
/* ============ S5 numbers board ============ */
|
|
.board{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:0;border-top:1px solid var(--line-strong);margin-top:40px}
|
|
.cell{padding:34px 36px 30px 0;border-bottom:1px solid var(--line)}
|
|
.cell+.cell{border-left:1px solid var(--line);padding-left:36px}
|
|
.cell .v{font-family:var(--font-display);font-weight:600;letter-spacing:-.03em;line-height:1;font-size:clamp(44px,4.2vw,64px)}
|
|
.cell:first-child .v{font-size:clamp(84px,8vw,128px);color:var(--accent)}
|
|
.cell .l{font-size:14px;color:var(--ink-2);margin-top:12px;max-width:22ch}
|
|
|
|
/* ============ S6 economics: ledger compare ============ */
|
|
.ledger{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--line-strong);margin-top:44px}
|
|
.ledger>div{padding:40px 48px 44px 0}
|
|
.ledger>div+div{border-left:1px solid var(--line-strong);padding-left:48px}
|
|
.ledger .who{font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
|
|
.ledger .price{font-family:var(--font-display);font-weight:600;letter-spacing:-.035em;line-height:1;font-size:clamp(72px,7vw,108px);margin:18px 0 10px}
|
|
.ledger .od .price{color:var(--accent)}
|
|
|
|
/* ============ S7 traction bars ============ */
|
|
.bars{display:flex;align-items:flex-end;gap:10px;height:300px;margin-top:52px;border-bottom:1px solid var(--line-strong);padding-bottom:0}
|
|
.bars .b{flex:1;background:var(--ink);position:relative;min-height:16px}
|
|
.bars .b.hot{background:var(--accent)}
|
|
.bars .b i{position:absolute;top:-30px;left:0;right:0;text-align:center;font-style:normal;font-family:var(--font-mono);font-size:13px;font-weight:500}
|
|
.bars .b u{position:absolute;bottom:-30px;left:0;right:0;text-align:center;text-decoration:none;font-family:var(--font-mono);font-size:11px;color:var(--ink-3)}
|
|
|
|
/* ============ S8 quote ============ */
|
|
.q{font-family:var(--font-display);font-weight:500;letter-spacing:-.02em;line-height:1.18;
|
|
font-size:clamp(32px,3.6vw,48px);max-width:26ch;margin:0}
|
|
.attr{margin-top:36px;font-size:15px;color:var(--ink-2)}
|
|
.attr b{display:block;color:var(--ink);font-weight:600}
|
|
|
|
/* ============ S9 ask: single deliberate inversion ============ */
|
|
.ask{background:var(--ink);color:var(--paper);border-bottom:none}
|
|
.ask .kicker{color:var(--paper);opacity:.5}
|
|
.ask .lede{color:rgba(244,245,243,.72)}
|
|
.ask .stats{display:flex;gap:72px;margin-top:60px}
|
|
.ask .stats .v{font-family:var(--font-display);font-weight:600;font-size:54px;letter-spacing:-.03em;line-height:1}
|
|
.ask .stats .l{font-size:13.5px;color:rgba(244,245,243,.55);margin-top:8px}
|
|
.ask .cta{display:inline-flex;align-items:center;gap:14px;margin-top:56px;
|
|
background:var(--accent);color:var(--accent-ink);font-family:var(--font-display);font-weight:600;
|
|
font-size:17px;padding:18px 34px;transition:transform .25s var(--ease)}
|
|
.ask .cta:hover{transform:translateY(-2px)}
|
|
.ask .cta2{margin-left:18px;background:transparent;color:var(--paper);border:1px solid rgba(244,245,243,.35)}
|
|
.ask .base{color:rgba(244,245,243,.4)}
|
|
|
|
/* ============ S10 thanks ============ */
|
|
.thanks .display{font-size:clamp(96px,13vw,180px)}
|
|
.links{display:flex;gap:44px;margin-top:48px;font-family:var(--font-mono);font-size:14px;color:var(--ink-2)}
|
|
.links a{border-bottom:1px solid var(--line-strong);padding-bottom:4px}
|
|
.links a:hover{color:var(--accent);border-color:var(--accent)}
|
|
|
|
@media print{.slide{page-break-after:always}}
|
|
@media (max-width:768px){
|
|
.slide{padding:56px 28px;height:auto;min-height:100vh}
|
|
.base,.cover .meta-top{left:28px;right:28px}
|
|
.split,.cover .sub,.ledger,.board{grid-template-columns:1fr;gap:32px}
|
|
.rowi{grid-template-columns:64px 1fr;gap:20px}
|
|
.rowi p{grid-column:2}
|
|
.cell+.cell{border-left:none;padding-left:0}
|
|
.ask .stats{flex-wrap:wrap;gap:36px}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="deck">
|
|
|
|
<!-- 1 · Cover -->
|
|
<section class="slide cover">
|
|
<div class="meta-top"><span>Open Design</span><span>Demo Day · Batch W26</span></div>
|
|
<h1 class="display in">The design tool<br>built for the <em class="ac">agent</em><br>era.</h1>
|
|
<div class="sub in">
|
|
<p class="lede">Every coding agent already on a developer's desktop can now design, too. Open, local, and already inside 64,000+ repos.</p>
|
|
<p class="body mono" style="font-size:13px">github.com/nexu-io/open-design</p>
|
|
</div>
|
|
<div class="base"><span>Demo Day, 2026</span><span>01 / 10</span></div>
|
|
</section>
|
|
|
|
<!-- 2 · Problem -->
|
|
<section class="slide">
|
|
<p class="kicker in">The problem</p>
|
|
<h2 class="statement in">Claude Design proved an LLM can truly design. <span class="mute">But it is closed-source, cloud-only, and locked to one model. Every solo builder and design agency we interviewed is stuck paying for a tool that can't touch their own files.</span></h2>
|
|
<div class="base"><span>Open Design</span><span>02 / 10</span></div>
|
|
</section>
|
|
|
|
<!-- 3 · Solution -->
|
|
<section class="slide">
|
|
<div class="split in">
|
|
<div>
|
|
<h2 class="h2">Open Design puts that capability in every agent's hands.</h2>
|
|
<p class="lede" style="margin-top:26px">Point Claude Code, Codex, or Cursor at Open Design and it designs like a senior product designer, on your own machine, without lock-in.</p>
|
|
</div>
|
|
<ul class="flow">
|
|
<li><span class="n">01</span><span class="t"><strong>Describe a goal</strong> in one sentence, or start from a template</span></li>
|
|
<li><span class="n">02</span><span class="t"><strong>The agent already on your machine</strong> reads files, Figma, and repos</span></li>
|
|
<li><span class="n">03</span><span class="t"><strong>Real runnable files</strong> appear in a live sandbox, not a mockup</span></li>
|
|
<li><span class="n">04</span><span class="t"><strong>Ship straight to engineering</strong>, or export it as a marketing video</span></li>
|
|
<li><span class="n">05</span><span class="t"><strong>Every decision compounds</strong> into reusable design memory</span></li>
|
|
</ul>
|
|
</div>
|
|
<div class="base"><span>Open Design</span><span>03 / 10</span></div>
|
|
</section>
|
|
|
|
<!-- 4 · Convictions -->
|
|
<section class="slide">
|
|
<h2 class="h2 in">Three reasons this is a wedge, not a feature.</h2>
|
|
<div class="rows in">
|
|
<div class="rowi">
|
|
<span class="idx">A</span>
|
|
<h3 class="h3">We activate on day one</h3>
|
|
<p class="body">21 coding agents are already installed on millions of developer machines. Open Design switches on the moment it's installed: zero new login, zero seat to sell against.</p>
|
|
</div>
|
|
<div class="rowi">
|
|
<span class="idx">B</span>
|
|
<h3 class="h3">Plug in agents, don't rebuild them</h3>
|
|
<p class="body">Claude Code, Codex, and Cursor already do the reasoning. We only had to build the design-native runtime around them: a fraction of the surface area of a foundation-model competitor.</p>
|
|
</div>
|
|
<div class="rowi">
|
|
<span class="idx">C</span>
|
|
<h3 class="h3">Taste compounds against leaving</h3>
|
|
<p class="body">Every session writes to a local design-system memory. Thirty days in, a team's install knows their brand better than a new hire would; the switching cost rises every week they stay.</p>
|
|
</div>
|
|
</div>
|
|
<div class="base"><span>Open Design</span><span>04 / 10</span></div>
|
|
</section>
|
|
|
|
<!-- 5 · Ecosystem numbers -->
|
|
<section class="slide">
|
|
<h2 class="h2 in">An ecosystem, not just an app.</h2>
|
|
<div class="board in">
|
|
<div class="cell"><div class="v">64K+</div><div class="l">GitHub stars in 11 months, Apache-2.0, zero paid marketing</div></div>
|
|
<div class="cell"><div class="v">220+</div><div class="l">plugins shipped by the community: prototypes, slides, dashboards</div></div>
|
|
<div class="cell"><div class="v">340</div><div class="l">paying teams on Open Design Cloud since March launch</div></div>
|
|
<div class="cell"><div class="v">21</div><div class="l">coding agents auto-detected from PATH, zero config</div></div>
|
|
</div>
|
|
<p class="body in" style="margin-top:30px;max-width:64ch">Claude Code, Codex CLI, Cursor Agent, Gemini CLI and more. Any OpenAI, Azure, or Google-compatible endpoint works via BYOK.</p>
|
|
<div class="base"><span>Open Design</span><span>05 / 10</span></div>
|
|
</section>
|
|
|
|
<!-- 6 · Economics -->
|
|
<section class="slide">
|
|
<h2 class="h2 in">BYOK makes our moat structural.</h2>
|
|
<div class="ledger in">
|
|
<div>
|
|
<p class="who">Claude Design</p>
|
|
<p class="price">$500</p>
|
|
<p class="body">per seat, per month. Closed cloud subscription, one vendor, one model.</p>
|
|
</div>
|
|
<div class="od">
|
|
<p class="who" style="color:var(--accent)">Open Design Cloud</p>
|
|
<p class="price">~$79</p>
|
|
<p class="body">per seat with BYOK. We only charge for orchestration; model spend goes straight to the provider, at cost.</p>
|
|
</div>
|
|
</div>
|
|
<p class="body in" style="margin-top:28px">Apache-2.0 licensed. Fork it, self-host it, run it fully offline: the moat is the agent integrations and design memory, not a paywall.</p>
|
|
<div class="base"><span>Open Design</span><span>06 / 10</span></div>
|
|
</section>
|
|
|
|
<!-- 7 · Traction -->
|
|
<section class="slide">
|
|
<p class="kicker in">Traction</p>
|
|
<h2 class="h2 in">$81K MRR, growing 34% month over month.</h2>
|
|
<div class="bars in" aria-label="Open Design Cloud MRR by month">
|
|
<div class="b" style="height:10%"><i>$6K</i><u>Oct</u></div>
|
|
<div class="b" style="height:18%"><i>$14K</i><u>Nov</u></div>
|
|
<div class="b" style="height:30%"><i>$24K</i><u>Dec</u></div>
|
|
<div class="b" style="height:48%"><i>$38K</i><u>Jan</u></div>
|
|
<div class="b" style="height:72%"><i>$57K</i><u>Feb</u></div>
|
|
<div class="b hot" style="height:100%"><i>$81K</i><u>Mar</u></div>
|
|
</div>
|
|
<p class="body in" style="margin-top:48px">Open Design Cloud MRR, month over month. 340 paying teams, monthly logo churn trending down to 4%.</p>
|
|
<div class="base"><span>Open Design</span><span>07 / 10</span></div>
|
|
</section>
|
|
|
|
<!-- 8 · Voice of the community -->
|
|
<section class="slide">
|
|
<blockquote style="margin:0;padding:0">
|
|
<p class="q in">"Our whole team ships client mockups through Claude Code now. Open Design is the only tool that lets our agent touch the real Figma file and hand back real code."</p>
|
|
<p class="attr in"><b>Priya Raman</b>Head of Product, Fern Studio · Open Design Cloud customer</p>
|
|
</blockquote>
|
|
<div class="base"><span>Open Design</span><span>08 / 10</span></div>
|
|
</section>
|
|
|
|
<!-- 9 · Ask -->
|
|
<section class="slide ask">
|
|
<p class="kicker in">The ask</p>
|
|
<h2 class="h2 in">Raising $2.5M<br>to own the wedge.</h2>
|
|
<p class="lede in" style="margin-top:24px">18 months of runway to take Open Design Cloud from $81K to $500K MRR while the agent-native design category is still undefined.</p>
|
|
<div class="stats in">
|
|
<div><div class="v">$2.5M</div><div class="l">seed, SAFE, $18M post-money cap</div></div>
|
|
<div><div class="v">18 mo</div><div class="l">runway to Series A</div></div>
|
|
<div><div class="v">$500K</div><div class="l">MRR target by close</div></div>
|
|
</div>
|
|
<div class="in">
|
|
<a class="cta" href="https://open-design.ai/" target="_blank" rel="noreferrer noopener">Meet the team</a>
|
|
<a class="cta cta2" href="https://github.com/nexu-io/open-design" target="_blank" rel="noreferrer noopener">See the metrics</a>
|
|
</div>
|
|
<div class="base"><span>Open Design</span><span>09 / 10</span></div>
|
|
</section>
|
|
|
|
<!-- 10 · Thanks -->
|
|
<section class="slide thanks">
|
|
<h1 class="display in">Thanks<em class="ac">.</em></h1>
|
|
<div class="links in">
|
|
<a href="https://github.com/nexu-io/open-design" target="_blank" rel="noreferrer noopener">GitHub</a>
|
|
<a href="https://discord.gg/mHAjSMV6gz" target="_blank" rel="noreferrer noopener">Discord</a>
|
|
<a href="https://x.com/nexudotio" target="_blank" rel="noreferrer noopener">X</a>
|
|
</div>
|
|
<div class="base"><span>Demo Day, 2026</span><span>10 / 10</span></div>
|
|
</section>
|
|
|
|
</div>
|
|
|
|
</body></html>
|