mirror of
https://github.com/nexu-io/open-design.git
synced 2026-07-08 07:19:17 +08:00
338 lines
18 KiB
HTML
338 lines
18 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<title>Open Design · Weekly growth update</title>
|
||
<style>
|
||
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');
|
||
|
||
/* tokens: off-black ground, single emerald accent, status-report mono */
|
||
:root {
|
||
--bg: #121417;
|
||
--ink: #edefe9;
|
||
--muted: #a3aaa1;
|
||
--line: rgba(237, 239, 233, 0.14);
|
||
--line-strong: rgba(237, 239, 233, 0.34);
|
||
--accent: #3ecf8e;
|
||
--accent-deep: #0e8a55;
|
||
--accent-ink: #0c1410;
|
||
--display: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||
--mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
|
||
--ease: cubic-bezier(.16, 1, .3, 1);
|
||
}
|
||
* { box-sizing: border-box; }
|
||
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); font-family: var(--display); -webkit-font-smoothing: antialiased; }
|
||
body { overflow: hidden; }
|
||
.deck {
|
||
display: flex;
|
||
width: 100vw; height: 100vh;
|
||
overflow-x: auto;
|
||
overflow-y: hidden;
|
||
scroll-snap-type: x mandatory;
|
||
scroll-behavior: smooth;
|
||
scrollbar-width: none;
|
||
}
|
||
.deck::-webkit-scrollbar { display: none; }
|
||
.slide {
|
||
flex: 0 0 100vw; height: 100vh;
|
||
display: flex; align-items: center; justify-content: center;
|
||
padding: 56px 96px;
|
||
scroll-snap-align: start;
|
||
position: relative;
|
||
}
|
||
.slide-inner { width: 100%; max-width: 1100px; }
|
||
.crumb {
|
||
position: absolute; top: 28px; left: 40px;
|
||
font-family: var(--mono); font-size: 11px; color: var(--muted);
|
||
text-transform: uppercase; letter-spacing: 0.14em;
|
||
}
|
||
.crumb::before { content: ''; display: inline-block; width: 18px; height: 1px; background: var(--accent); vertical-align: middle; margin-right: 10px; }
|
||
.pageno {
|
||
position: absolute; bottom: 28px; right: 40px;
|
||
font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: 0.06em;
|
||
}
|
||
.nav {
|
||
position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%);
|
||
display: flex; gap: 7px; z-index: 5;
|
||
}
|
||
.nav .dot {
|
||
width: 16px; height: 2px; border-radius: 0; background: var(--line-strong);
|
||
cursor: pointer; transition: background .2s var(--ease);
|
||
}
|
||
.nav .dot:hover { background: var(--muted); }
|
||
.nav .dot.active { background: var(--accent); }
|
||
|
||
/* entrance: transform+opacity only, staggered, reduced-motion safe */
|
||
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
|
||
.slide-inner > * { animation: rise .6s var(--ease) both; }
|
||
.slide-inner > *:nth-child(2) { animation-delay: .07s; }
|
||
.slide-inner > *:nth-child(3) { animation-delay: .14s; }
|
||
.slide-inner > *:nth-child(4) { animation-delay: .21s; }
|
||
@media (prefers-reduced-motion: reduce) { .slide-inner > * { animation: none; } }
|
||
|
||
/* Cover */
|
||
.cover { display: flex; flex-direction: column; gap: 30px; }
|
||
.cover .badge { display: inline-flex; align-items: center; gap: 10px; padding: 7px 12px; border: 1px solid var(--line-strong); align-self: flex-start; font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); }
|
||
.cover .badge .dot { width: 6px; height: 6px; background: var(--accent); }
|
||
.cover h1 { font-size: clamp(56px, 8vw, 112px); margin: 0; line-height: 0.96; letter-spacing: -0.035em; font-weight: 700; }
|
||
.cover h1 em { font-style: normal; color: var(--accent); }
|
||
.cover .meta { display: flex; gap: 40px; color: var(--muted); font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.07em; border-top: 1px solid var(--line); padding-top: 22px; }
|
||
|
||
/* Headline */
|
||
.headline { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
|
||
.headline-num { font-size: clamp(120px, 17vw, 210px); line-height: 0.9; letter-spacing: -0.045em; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
|
||
.headline-num small { display: block; font-size: 12px; color: var(--muted); font-weight: 400; letter-spacing: 0.1em; margin-top: 18px; font-family: var(--mono); text-transform: uppercase; }
|
||
.headline-text h2 { font-size: 42px; line-height: 1.08; letter-spacing: -0.025em; margin: 0 0 18px; font-weight: 600; }
|
||
.headline-text p { color: var(--muted); font-size: 17px; max-width: 38ch; line-height: 1.6; margin: 0; }
|
||
|
||
/* Section title */
|
||
.section-title { font-size: clamp(32px, 4vw, 54px); margin: 0 0 40px; line-height: 1.05; letter-spacing: -0.025em; font-weight: 600; }
|
||
.section-title em { font-style: normal; color: var(--accent); }
|
||
|
||
/* Lists of items: hairline ledger rows, no cards */
|
||
.item-list { display: flex; flex-direction: column; border-top: 1px solid var(--line-strong); }
|
||
.item { display: grid; grid-template-columns: 56px 1fr auto; gap: 24px; align-items: center; padding: 24px 0; border-bottom: 1px solid var(--line); }
|
||
.item-num { font-family: var(--mono); font-size: 12px; color: var(--accent); }
|
||
.item-title { font-size: 21px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.3; }
|
||
.item-meta { font-family: var(--mono); font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
|
||
.av-row { display: flex; }
|
||
.av { width: 30px; height: 30px; border: 1px solid var(--line-strong); background: var(--bg); margin-left: -9px; font-family: var(--mono); font-size: 10px; font-weight: 500; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; }
|
||
.av:first-child { margin-left: 0; }
|
||
.av-2 { background: #1b1f23; color: var(--ink); }
|
||
.av-3 { background: #15211b; color: var(--accent); border-color: rgba(62, 207, 142, 0.4); }
|
||
|
||
/* Blocked / problem statement: accent rule, no gradient card */
|
||
.blocked-block { padding: 8px 0 8px 36px; border-left: 3px solid var(--accent); }
|
||
.blocked-block h3 { font-size: 32px; margin: 0 0 14px; letter-spacing: -0.02em; font-weight: 600; line-height: 1.15; }
|
||
.blocked-block p { color: var(--muted); margin: 0 0 26px; font-size: 17px; line-height: 1.6; max-width: 62ch; }
|
||
.blocked-ask { display: inline-flex; padding: 12px 22px; background: var(--accent); color: var(--accent-ink); font-weight: 600; font-size: 14.5px; letter-spacing: -0.005em; }
|
||
|
||
/* Charts: hairline columns, flat strokes, single accent */
|
||
.chart-grid { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line-strong); }
|
||
.chart { padding: 30px 36px 8px 0; }
|
||
.chart + .chart { border-left: 1px solid var(--line); padding-left: 36px; padding-right: 0; }
|
||
.chart h4 { margin: 0 0 6px; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
|
||
.chart .sub { font-family: var(--mono); font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
|
||
.chart svg { width: 100%; height: 200px; display: block; margin-top: 18px; border-bottom: 1px solid var(--line); }
|
||
.chart svg polyline { stroke: var(--accent); vector-effect: non-scaling-stroke; }
|
||
.chart svg circle { fill: var(--accent); }
|
||
.chart svg line { stroke: var(--line); vector-effect: non-scaling-stroke; }
|
||
.big-num { font-size: 68px; font-weight: 700; letter-spacing: -0.035em; line-height: 1; color: var(--ink); margin-top: 22px; font-variant-numeric: tabular-nums; }
|
||
.delta { font-family: var(--mono); font-size: 12px; color: var(--accent); margin-top: 10px; letter-spacing: 0.02em; }
|
||
|
||
/* Asks / outputs: hairline quadrant, no cards */
|
||
.asks { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line-strong); }
|
||
.ask { padding: 30px 36px 30px 0; display: flex; flex-direction: column; gap: 12px; border-bottom: 1px solid var(--line); }
|
||
.ask:nth-child(even) { border-left: 1px solid var(--line); padding-left: 36px; padding-right: 0; }
|
||
.ask .who { display: flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: 11px; color: var(--accent); text-transform: uppercase; letter-spacing: 0.1em; }
|
||
.ask .who .av { width: 26px; height: 26px; margin-left: 0; }
|
||
.ask h3 { font-size: 21px; line-height: 1.25; margin: 0; letter-spacing: -0.015em; font-weight: 600; }
|
||
.ask p { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.55; max-width: 44ch; }
|
||
|
||
/* Closer: the deck's single deliberate inversion */
|
||
.invert { background: var(--ink); color: var(--bg); }
|
||
.invert .crumb, .invert .pageno { color: rgba(18, 20, 23, 0.72); }
|
||
.closer { display: flex; flex-direction: column; gap: 28px; align-items: flex-start; }
|
||
.closer h2 { font-size: clamp(44px, 6vw, 84px); margin: 0; line-height: 1.02; letter-spacing: -0.035em; font-weight: 700; }
|
||
.closer h2 em { font-style: normal; color: var(--accent-deep); }
|
||
.closer p { color: rgba(18, 20, 23, 0.74); font-size: 18px; max-width: 56ch; line-height: 1.6; margin: 0; }
|
||
.closer .signature { display: flex; align-items: center; gap: 16px; padding-top: 26px; border-top: 1px solid rgba(18, 20, 23, 0.22); width: 100%; }
|
||
.closer .signature .av { width: 44px; height: 44px; font-size: 14px; background: var(--accent-deep); border: none; color: var(--ink); font-weight: 600; }
|
||
.closer .signature strong { display: block; font-size: 16px; letter-spacing: -0.01em; }
|
||
.closer .signature span { color: rgba(18, 20, 23, 0.68); font-size: 13px; font-family: var(--mono); }
|
||
|
||
@media (max-width: 760px) {
|
||
.slide { padding: 48px 28px; }
|
||
.headline { grid-template-columns: 1fr; }
|
||
.chart-grid, .asks { grid-template-columns: 1fr; }
|
||
.chart + .chart, .ask:nth-child(even) { border-left: none; padding-left: 0; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="deck" id="deck">
|
||
|
||
<!-- 1. Cover -->
|
||
<section class="slide">
|
||
<span class="crumb">Open Design · weekly</span>
|
||
<div class="slide-inner cover">
|
||
<div class="badge"><span class="dot"></span>Apache-2.0 · Runs Locally · BYOK</div>
|
||
<h1>Open <em>Design</em>, weekly.</h1>
|
||
<div class="meta">
|
||
<span>The open-source, local, agent-driven design platform</span>
|
||
<span>github.com/nexu-io/open-design</span>
|
||
</div>
|
||
</div>
|
||
<span class="pageno">01 / 08</span>
|
||
</section>
|
||
|
||
<!-- 2. Headline number -->
|
||
<section class="slide">
|
||
<span class="crumb">Headline</span>
|
||
<div class="slide-inner headline">
|
||
<div class="headline-num">60K+<small>GitHub Stars · Apache-2.0 open source</small></div>
|
||
<div class="headline-text">
|
||
<h2>The week the community kept compounding.</h2>
|
||
<p>300+ contributors, 217+ plugins, and 129 design systems now power Open Design — with 21 coding agents plugged in, zero config.</p>
|
||
</div>
|
||
</div>
|
||
<span class="pageno">02 / 08</span>
|
||
</section>
|
||
|
||
<!-- 3. Shipped -->
|
||
<section class="slide">
|
||
<span class="crumb">Core capabilities</span>
|
||
<div class="slide-inner">
|
||
<h2 class="section-title">Shipped, <em>top to bottom</em>.</h2>
|
||
<div class="item-list">
|
||
<div class="item"><span class="item-num">01</span><span class="item-title">Desktop-first — local files, Figma, and repos readable in place</span><span class="item-meta">Core · Desktop</span></div>
|
||
<div class="item"><span class="item-num">02</span><span class="item-title">21 coding agents — auto-detected from PATH, zero config</span><span class="item-meta">Agents · BYOK</span></div>
|
||
<div class="item"><span class="item-num">03</span><span class="item-title">HTML video pipeline — programmatic video via HyperFrames</span><span class="item-meta">Video · HyperFrames</span></div>
|
||
<div class="item"><span class="item-num">04</span><span class="item-title">129 design systems — import from GitHub, Figma, or local</span><span class="item-meta">Design Systems</span></div>
|
||
</div>
|
||
</div>
|
||
<span class="pageno">03 / 08</span>
|
||
</section>
|
||
|
||
<!-- 4. In flight -->
|
||
<section class="slide">
|
||
<span class="crumb">Workflow</span>
|
||
<div class="slide-inner">
|
||
<h2 class="section-title">From idea to delivery, <em>5 steps</em>.</h2>
|
||
<div class="item-list">
|
||
<div class="item"><span class="item-num">01</span><span class="item-title">Pick a starting point — one sentence, a template, or a plugin</span><div class="av-row"><span class="av">OD</span></div></div>
|
||
<div class="item"><span class="item-num">02</span><span class="item-title">Set the visual direction — palette, type, and spacing flow in</span><div class="av-row"><span class="av av-2">DS</span></div></div>
|
||
<div class="item"><span class="item-num">03</span><span class="item-title">Generate the artifact — real runnable files, sandbox preview</span><div class="av-row"><span class="av av-2">AG</span><span class="av">OD</span></div></div>
|
||
<div class="item"><span class="item-num">04</span><span class="item-title">Ship it, or film it with HyperFrames — then memory compounds</span><div class="av-row"><span class="av av-3">HF</span></div></div>
|
||
</div>
|
||
</div>
|
||
<span class="pageno">04 / 08</span>
|
||
</section>
|
||
|
||
<!-- 5. Blocked -->
|
||
<section class="slide">
|
||
<span class="crumb">Why</span>
|
||
<div class="slide-inner">
|
||
<h2 class="section-title">The problem we're <em>solving</em>.</h2>
|
||
<div class="blocked-block">
|
||
<h3>Frontier AI design is closed, paid, and cloud-only.</h3>
|
||
<p>In April 2026, Claude Design proved an LLM can truly design — real artifacts, not essays. But it's locked to one model: no agent choice, no self-hosting, no BYOK. Open Design sets that capability free.</p>
|
||
<span class="blocked-ask">Frontier AI design, back on every creator's desk</span>
|
||
</div>
|
||
</div>
|
||
<span class="pageno">05 / 08</span>
|
||
</section>
|
||
|
||
<!-- 6. Metrics -->
|
||
<section class="slide">
|
||
<span class="crumb">Metrics</span>
|
||
<div class="slide-inner">
|
||
<h2 class="section-title">Numbers that <em>moved</em>.</h2>
|
||
<div class="chart-grid">
|
||
<div class="chart">
|
||
<h4>GitHub stars · trend (demo data)</h4>
|
||
<div class="sub">Higher is better</div>
|
||
<svg viewBox="0 0 600 220" preserveAspectRatio="none">
|
||
<polyline fill="none" stroke-width="2.5" stroke-linejoin="round" stroke-linecap="round"
|
||
points="20,160 110,150 200,140 290,124 380,108 470,80 560,52" />
|
||
<circle cx="560" cy="52" r="5"/>
|
||
</svg>
|
||
<div class="big-num">60K+</div>
|
||
<div class="delta">▲ GitHub Stars · Apache-2.0</div>
|
||
</div>
|
||
<div class="chart">
|
||
<h4>Monthly cost vs. Claude Design (demo data)</h4>
|
||
<div class="sub">Lower is better</div>
|
||
<svg viewBox="0 0 600 220" preserveAspectRatio="none">
|
||
<polyline fill="none" stroke-width="2.5" stroke-linejoin="round" stroke-linecap="round"
|
||
points="20,60 110,72 200,90 290,108 380,124 470,148 560,164" />
|
||
<circle cx="560" cy="164" r="5"/>
|
||
</svg>
|
||
<div class="big-num">~$73</div>
|
||
<div class="delta">▼ −80% · from $500 with BYOK</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<span class="pageno">06 / 08</span>
|
||
</section>
|
||
|
||
<!-- 7. Asks -->
|
||
<section class="slide">
|
||
<span class="crumb">Outputs</span>
|
||
<div class="slide-inner">
|
||
<h2 class="section-title">What can you <em>make</em>?</h2>
|
||
<div class="asks">
|
||
<div class="ask">
|
||
<div class="who"><span class="av av-2">PR</span>Prototype</div>
|
||
<h3>High-fidelity mobile & web prototypes.</h3>
|
||
<p>Real runnable files, previewed and edited in a sandbox — then handed off to engineering.</p>
|
||
</div>
|
||
<div class="ask">
|
||
<div class="who"><span class="av av-3">LA</span>Live Artifact</div>
|
||
<h3>Interactive dashboards & live briefs.</h3>
|
||
<p>Agents read full context — local files, Figma exports, code repos — and produce living documents.</p>
|
||
</div>
|
||
<div class="ask">
|
||
<div class="who"><span class="av">SL</span>Slides</div>
|
||
<h3>Creative decks & research reports.</h3>
|
||
<p>Like this one — generated from a one-sentence brief and your own design system.</p>
|
||
</div>
|
||
<div class="ask">
|
||
<div class="who"><span class="av av-2">HF</span>HyperFrames</div>
|
||
<h3>HTML-to-MP4 marketing shorts & product demos.</h3>
|
||
<p>Plus posters, illustrations, mockups, and cinematic generative footage.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<span class="pageno">07 / 08</span>
|
||
</section>
|
||
|
||
<!-- 8. Closing -->
|
||
<section class="slide invert">
|
||
<span class="crumb">Get started</span>
|
||
<div class="slide-inner closer">
|
||
<h2>Back on every <em>creator's desk</em>.</h2>
|
||
<p>Open · Local · Agent-native. Download Open Design for macOS or Windows, or star us on GitHub — Apache-2.0, runs locally, BYOK, no sign-up.</p>
|
||
<div class="signature">
|
||
<span class="av">OD</span>
|
||
<div><strong>Open Design</strong><span>github.com/nexu-io/open-design · discord.gg/mHAjSMV6gz · x.com/nexudotio</span></div>
|
||
</div>
|
||
</div>
|
||
<span class="pageno">08 / 08</span>
|
||
</section>
|
||
</div>
|
||
|
||
<div class="nav" id="nav"></div>
|
||
|
||
<script>
|
||
const deck = document.getElementById('deck');
|
||
const slides = deck.querySelectorAll('.slide');
|
||
const nav = document.getElementById('nav');
|
||
slides.forEach((_, i) => {
|
||
const d = document.createElement('span');
|
||
d.className = 'dot' + (i === 0 ? ' active' : '');
|
||
d.addEventListener('click', () => deck.scrollTo({ left: window.innerWidth * i, behavior: 'smooth' }));
|
||
nav.appendChild(d);
|
||
});
|
||
function activeIndex() {
|
||
return Math.round(deck.scrollLeft / window.innerWidth);
|
||
}
|
||
deck.addEventListener('scroll', () => {
|
||
const idx = activeIndex();
|
||
nav.querySelectorAll('.dot').forEach((d, i) => d.classList.toggle('active', i === idx));
|
||
}, { passive: true });
|
||
document.addEventListener('keydown', (e) => {
|
||
const idx = activeIndex();
|
||
if (e.key === 'ArrowRight' || e.key === 'PageDown') {
|
||
const next = Math.min(slides.length - 1, idx + 1);
|
||
deck.scrollTo({ left: window.innerWidth * next, behavior: 'smooth' });
|
||
} else if (e.key === 'ArrowLeft' || e.key === 'PageUp') {
|
||
const prev = Math.max(0, idx - 1);
|
||
deck.scrollTo({ left: window.innerWidth * prev, behavior: 'smooth' });
|
||
}
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|