mirror of
https://github.com/nexu-io/open-design.git
synced 2026-07-03 12:27:55 +08:00
299 lines
17 KiB
HTML
299 lines
17 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 · Tech Sharing</title>
|
|
<style>/* html-ppt :: tech-sharing webfonts (only families actually used) */
|
|
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;700&family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;1,400&display=swap');
|
|
</style>
|
|
<style>/* tech-sharing :: amber-phosphor terminal deck
|
|
* Stance: warm off-black, single CRT-amber accent, IBM Plex Mono structure,
|
|
* hairline panels with sharp corners, no gradients, no decorative shadows.
|
|
*/
|
|
:root{
|
|
--bg:#151210;
|
|
--surface:#1c1814;
|
|
--line:rgba(236,231,223,.14);
|
|
--line-strong:rgba(236,231,223,.32);
|
|
--text-1:#ece7df;
|
|
--text-2:#a89f91;
|
|
--text-3:#8d8476; /* >=4.5:1 on --bg for 12-13px captions */
|
|
--accent:#e8973c;
|
|
--accent-deep:#a85d14;
|
|
--paper:#f1ece3;
|
|
--paper-ink:#1c1814;
|
|
--font-display:'Sora',-apple-system,BlinkMacSystemFont,sans-serif;
|
|
--font-sans:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif;
|
|
--font-mono:'IBM Plex 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(--bg);color:var(--text-1);
|
|
font-family:var(--font-sans);font-weight:400;line-height:1.65;
|
|
-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
|
|
img,svg,video{max-width:100%;display:block}
|
|
a{color:var(--accent);text-decoration:none}
|
|
a:hover{text-decoration:underline}
|
|
code,kbd,pre,samp{font-family:var(--font-mono)}
|
|
|
|
/* ================= SLIDE SYSTEM (static preview: slides stacked) ================= */
|
|
.deck{width:100vw;background:var(--bg)}
|
|
.slide{position:relative;width:100vw;height:100vh;overflow:hidden;
|
|
display:flex;flex-direction:column;justify-content:center;
|
|
padding:72px 96px;border-bottom:1px solid var(--line);
|
|
background:var(--bg);color:var(--text-1)}
|
|
/* terminal gutter: hairline + tick, the deck's quiet signature */
|
|
.slide::before{content:"";position:absolute;top:0;bottom:0;left:56px;width:1px;
|
|
background:var(--line);pointer-events:none}
|
|
.slide::after{content:"";position:absolute;top:72px;left:52px;width:9px;height:1px;
|
|
background:var(--accent);pointer-events:none}
|
|
|
|
/* ================= TYPOGRAPHY ================= */
|
|
.kicker{font-family:var(--font-mono);font-size:13px;font-weight:500;color:var(--accent);
|
|
letter-spacing:.02em;margin:0 0 18px}
|
|
.kicker::before{content:"> "}
|
|
h1.title,.h1{font-family:var(--font-display);font-size:76px;line-height:1.06;font-weight:700;
|
|
letter-spacing:-.02em;margin:0 0 18px;color:var(--text-1)}
|
|
h2.title,.h2{font-family:var(--font-display);font-size:50px;line-height:1.14;font-weight:600;
|
|
letter-spacing:-.015em;margin:0 0 14px;color:var(--text-1)}
|
|
h3,.h3{font-size:30px;line-height:1.25;font-weight:600;margin:0 0 10px;color:var(--text-1)}
|
|
h4,.h4{font-family:var(--font-display);font-size:20px;line-height:1.35;font-weight:600;margin:0 0 8px;color:var(--text-1)}
|
|
.lede{font-size:21px;line-height:1.6;color:var(--text-2);font-weight:400;max-width:62ch;margin:0}
|
|
.dim{color:var(--text-2)}
|
|
.dim2{color:var(--text-3)}
|
|
.mono{font-family:var(--font-mono)}
|
|
.ac{color:var(--accent)}
|
|
|
|
/* ================= LAYOUT PRIMITIVES ================= */
|
|
.stack>*+*{margin-top:14px}
|
|
.row{display:flex;gap:24px;align-items:center}
|
|
.grid{display:grid;gap:28px}
|
|
.g2{grid-template-columns:repeat(2,1fr)}
|
|
.g3{grid-template-columns:repeat(3,1fr)}
|
|
.center{display:flex;align-items:center;justify-content:center;text-align:center}
|
|
.mt-s{margin-top:8px}.mt-m{margin-top:18px}.mt-l{margin-top:36px}
|
|
.tc{text-align:center}
|
|
|
|
/* ================= PANELS (hairline, sharp corners, no shadows) ================= */
|
|
.card{background:transparent;border:1px solid var(--line);border-radius:0;padding:26px 28px}
|
|
.card-accent{border-top:1px solid var(--accent)}
|
|
/* resolution panel: the one card allowed extra weight (problem/problem/answer rhythm) */
|
|
.card-hot{border-color:var(--accent-deep);border-top-color:var(--accent);background:rgba(232,151,60,.05)}
|
|
.card-hot h4{color:var(--accent)}
|
|
.card p{margin:10px 0 0;font-size:15.5px;line-height:1.7}
|
|
|
|
.tag{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;
|
|
font-family:var(--font-mono);font-size:12.5px;color:var(--text-2);
|
|
border:1px solid var(--line);border-radius:0;background:transparent}
|
|
|
|
/* ================= AGENDA ================= */
|
|
.agenda-row{display:flex;align-items:baseline;gap:28px;padding:19px 0;
|
|
border-bottom:1px solid var(--line);font-family:var(--font-mono)}
|
|
.agenda-row:first-child{border-top:1px solid var(--line-strong)}
|
|
.agenda-row .num{color:var(--accent);flex:none;width:48px;font-size:14px}
|
|
.agenda-row .t{color:var(--text-1);font-size:23px;flex:1;font-family:var(--font-display);font-weight:600;letter-spacing:-.01em}
|
|
.agenda-row .d{color:var(--text-3);font-size:13px}
|
|
|
|
/* ================= TERMINAL (family signature, kept) ================= */
|
|
.terminal{background:#100d0a;border:1px solid var(--line);border-radius:0;overflow:hidden;
|
|
font-family:var(--font-mono);font-size:15px;line-height:1.7}
|
|
.terminal .bar{display:flex;align-items:center;gap:8px;padding:11px 16px;background:var(--surface);
|
|
border-bottom:1px solid var(--line);font-size:12px;color:var(--text-3)}
|
|
.terminal .dot{width:9px;height:9px;border-radius:50%;background:#3c362e}
|
|
.terminal .dot:first-child{background:var(--accent)}
|
|
.terminal pre{margin:0;padding:24px 28px;color:var(--text-1);overflow:auto;max-height:440px}
|
|
/* restrained warm syntax: amber + sand on off-black, no rainbow */
|
|
.kw{color:var(--accent)}
|
|
.fn{color:#f3efe7}
|
|
.str{color:#c9b896}
|
|
.cmt{color:var(--text-3);font-style:italic}
|
|
.terminal .num,pre .num{color:#efc98b}
|
|
|
|
/* ================= SPEAKER ================= */
|
|
.speaker{display:flex;align-items:center;gap:16px;margin-top:32px}
|
|
.speaker .av{width:46px;height:46px;flex:none;background:var(--surface);
|
|
border:1px solid var(--line-strong);position:relative}
|
|
.speaker .av::after{content:"";position:absolute;left:12px;top:13px;width:11px;height:20px;
|
|
background:var(--accent)}
|
|
.speaker b{display:block;color:var(--text-1);font-size:17px;font-weight:600}
|
|
.speaker span{color:var(--text-3);font-size:13px;font-family:var(--font-mono)}
|
|
|
|
/* ================= CHROME ================= */
|
|
.deck-footer{position:absolute;bottom:28px;left:96px;right:96px;display:flex;align-items:baseline;
|
|
justify-content:space-between;font-size:12px;color:var(--text-3);font-family:var(--font-mono);
|
|
z-index:10;pointer-events:none}
|
|
.slide-number::before{content:attr(data-current)}
|
|
.slide-number::after{content:" / " attr(data-total)}
|
|
|
|
/* ================= INVERSION (single deliberate flip: closing slide) ================= */
|
|
.slide.invert{background:var(--paper);color:var(--paper-ink)}
|
|
.slide.invert::before{background:rgba(28,24,20,.16)}
|
|
.slide.invert::after{background:var(--accent-deep)}
|
|
.slide.invert .h2{color:var(--paper-ink)}
|
|
.slide.invert .lede{color:rgba(28,24,20,.72)}
|
|
.slide.invert .tag{color:rgba(28,24,20,.7);border-color:rgba(28,24,20,.28)}
|
|
.slide.invert .glyph{color:var(--accent-deep)}
|
|
|
|
/* ================= MOTION (transform+opacity only, ease-out, staggered) ================= */
|
|
@keyframes kf-rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
|
|
.anim-fade-up{animation:kf-rise .7s var(--ease) both}
|
|
.slide>.kicker{animation:kf-rise .6s var(--ease) both}
|
|
.slide>.h1,.slide>.h2{animation:kf-rise .7s var(--ease) both;animation-delay:.06s}
|
|
.slide>.lede,.slide>.stack,.slide>.grid,.slide>.terminal,.slide>.speaker{
|
|
animation:kf-rise .7s var(--ease) both;animation-delay:.14s}
|
|
@media (prefers-reduced-motion: reduce){
|
|
*,*::before,*::after{animation:none!important;transition:none!important}
|
|
}
|
|
|
|
/* ================= UTILITY / PRINT ================= */
|
|
.hidden{display:none!important}
|
|
.notes{display:none!important}
|
|
@media print{
|
|
.slide{page-break-after:always}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="tpl-tech-sharing">
|
|
<div class="deck">
|
|
|
|
<!-- 1. Cover -->
|
|
<section class="slide" data-title="Cover">
|
|
<p class="kicker">tech-sharing / open-design</p>
|
|
<h1 class="h1 anim-fade-up" data-anim="fade-up">Open Design<br>Open, local, <span class="ac">agent-driven</span></h1>
|
|
<p class="lede mt-m">From idea to prototype, web page, slides, and HTML video — the entire product-design workflow, on your own device.</p>
|
|
<div class="speaker"><div class="av"></div><div><b>Open Design</b><span>github.com/nexu-io/open-design · 45 min + Q&A</span></div></div>
|
|
<div class="deck-footer"><span class="mono">#apache-2.0 #local #byok</span><span class="slide-number" data-current="1" data-total="8"></span></div>
|
|
</section>
|
|
|
|
<!-- 2. Agenda -->
|
|
<section class="slide" data-title="Agenda">
|
|
<p class="kicker">agenda.toml</p>
|
|
<h2 class="h2">Today's roadmap</h2>
|
|
<div class="stack mt-l">
|
|
<div class="agenda-row"><span class="num">01</span><span class="t">Why: design capability should be open</span><span class="d">~5min</span></div>
|
|
<div class="agenda-row"><span class="num">02</span><span class="t">Agents: plugging into 21+ coding agents</span><span class="d">~10min</span></div>
|
|
<div class="agenda-row"><span class="num">03</span><span class="t">Workflow: idea to delivery in 5 steps</span><span class="d">~12min</span></div>
|
|
<div class="agenda-row"><span class="num">04</span><span class="t">Design System as Markdown</span><span class="d">~8min</span></div>
|
|
<div class="agenda-row"><span class="num">05</span><span class="t">Takeaways + Q&A</span><span class="d">~5min</span></div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 3. Context -->
|
|
<section class="slide" data-title="Context">
|
|
<p class="kicker">// why-open</p>
|
|
<h2 class="h2">The problem: frontier AI design power<br>is locked in the cloud.</h2>
|
|
<div class="grid g3 mt-l">
|
|
<div class="card card-accent"><h4>Claude Design</h4><p class="dim">In April 2026 it proved for the first time that LLMs can genuinely do design. But it's closed-source, paid, cloud-only — no agent swapping, no self-hosting, no BYOK.</p><span class="tag mt-s">❌ locked in the cloud</span></div>
|
|
<div class="card card-accent"><h4>Raw coding agents</h4><p class="dim">Claude Code / Codex are strong enough, but lack a design workflow: no visual direction, no design system, no sandbox preview.</p><span class="tag mt-s">😩 no design workflow</span></div>
|
|
<div class="card card-hot"><h4>Open Design</h4><p class="dim">Open source, local, plugs into the agents you already have. Monthly cost drops from $500 to ~$73 — over 80% less.</p><span class="tag mt-s">✅ Apache-2.0 open source</span></div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 4. Deep dive 1 -->
|
|
<section class="slide" data-title="Deep Dive 1">
|
|
<p class="kicker">deep-dive · 1 / 2</p>
|
|
<h2 class="h2">Don't build agents. Plug into them.</h2>
|
|
<div class="grid g2 mt-l" style="align-items:start">
|
|
<div>
|
|
<p class="lede">The <span class="mono">Claude Code</span> / <span class="mono">Codex</span> / <span class="mono">Cursor</span> on your machine are already powerful. Open Design auto-detects the CLIs installed on your PATH and wires them into a complete design workflow — zero configuration.</p>
|
|
<div class="mt-l">
|
|
<span class="tag">21 coding agents</span> <span class="tag">zero config</span> <span class="tag">end-to-end BYOK</span>
|
|
</div>
|
|
</div>
|
|
<div class="terminal">
|
|
<div class="bar"><span class="dot"></span><span class="dot"></span><span class="dot"></span><span>agents.sh</span></div>
|
|
<pre><span class="cmt"># auto-detect CLIs installed on PATH</span>
|
|
<span class="kw">$</span> <span class="fn">od</span> agents
|
|
|
|
<span class="str">✓</span> Claude Code <span class="str">✓</span> Codex CLI
|
|
<span class="str">✓</span> Cursor Agent <span class="str">✓</span> OpenClaw
|
|
<span class="str">✓</span> Hermes Agent <span class="str">✓</span> Gemini CLI
|
|
<span class="str">✓</span> Kimi <span class="str">✓</span> Copilot CLI
|
|
…
|
|
|
|
<span class="cmt">// 21 agents total, zero config</span>
|
|
<span class="cmt">// OpenAI / Azure / Google endpoints via BYOK</span></pre>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 5. Deep dive 2 -->
|
|
<section class="slide" data-title="Deep Dive 2">
|
|
<p class="kicker">deep-dive · 2 / 2</p>
|
|
<h2 class="h2">From idea to delivery in 5 steps.</h2>
|
|
<div class="grid g2 mt-l" style="align-items:start">
|
|
<div>
|
|
<p class="lede">The agent reads the full context and produces real, runnable files you can preview and edit instantly in the sandbox. Every choice becomes context for the next generation — sharper with every use.</p>
|
|
<div class="stack mt-m">
|
|
<div class="tag">✦ 217+ plugins as starting points</div>
|
|
<div class="tag">✦ instant sandbox preview & edits</div>
|
|
<div class="tag">✦ HyperFrames HTML→MP4</div>
|
|
<div class="tag">✦ self-evolving design memory</div>
|
|
</div>
|
|
</div>
|
|
<div class="card" style="padding:32px">
|
|
<h4 class="mono" style="color:var(--accent)">workflow · 5 steps</h4>
|
|
<div class="stack mt-m" style="font-family:var(--font-mono);font-size:14px;line-height:1.9;color:var(--text-2)">
|
|
<div><span style="color:var(--accent)">1.</span> Pick a starting point — describe the goal in one line, or start from a template / Plugin</div>
|
|
<div><span style="color:var(--accent)">2.</span> Set the visual direction — palette, fonts, spacing flow in automatically</div>
|
|
<div><span style="color:var(--accent)">3.</span> Generate the artifact — real runnable files, previewed in the sandbox</div>
|
|
<div><span style="color:var(--accent)">4.</span> Deliver or make video — engineering takes over, or render a marketing clip</div>
|
|
<div><span style="color:var(--accent)">5.</span> Build memory — it becomes context for the next generation</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 6. Code example -->
|
|
<section class="slide" data-title="Code">
|
|
<p class="kicker">design-systems/DESIGN.md</p>
|
|
<h2 class="h2" style="font-size:40px">A design system is a Markdown file you can git diff.</h2>
|
|
<div class="terminal mt-m">
|
|
<div class="bar"><span class="dot"></span><span class="dot"></span><span class="dot"></span><span>DESIGN.md</span></div>
|
|
<pre><span class="kw">## Palette</span>
|
|
- primary: <span class="num">#3B6CFF</span>
|
|
- surface: <span class="num">#0D1117</span>
|
|
|
|
<span class="kw">## Typography</span>
|
|
- display: <span class="str">Inter / 600</span>
|
|
- body: <span class="str">Inter / 400</span>
|
|
|
|
<span class="kw">## Rules</span>
|
|
- Radii fixed at <span class="num">12px</span>; spacing in multiples of <span class="num">8</span>
|
|
- Gradients allowed on marketing pages, banned in product UI
|
|
|
|
<span class="cmt"># 129 Design Systems: import from GitHub / Figma / local files</span>
|
|
<span class="cmt"># Markdown prevents token drift — brand consistency stays auditable and versioned</span></pre>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 7. Takeaways -->
|
|
<section class="slide" data-title="Takeaways">
|
|
<p class="kicker">// takeaways</p>
|
|
<h2 class="h2">Three things to take home.</h2>
|
|
<div class="grid g3 mt-l">
|
|
<div class="card card-accent"><h4>1 · Desktop-native</h4><p class="dim">Design happens on the desktop. Local files, Figma exports, and code repos are directly readable — and the agent has full terminal execution power.</p></div>
|
|
<div class="card card-accent"><h4>2 · Plug into agents, don't build one</h4><p class="dim">The <span class="mono">Claude Code</span> / <span class="mono">Codex</span> / <span class="mono">Cursor</span> on your machine are already strong; Open Design wires them into a complete design workflow.</p></div>
|
|
<div class="card card-accent"><h4>3 · Gets smarter with use</h4><p class="dim">Every choice settles into your Design System, preferences, and memory, so the next generation lands closer to what you want.</p></div>
|
|
</div>
|
|
<p class="lede mt-l">Further reading: <span class="mono">github.com/nexu-io/open-design</span> · <span class="mono">discord.gg/mHAjSMV6gz</span></p>
|
|
</section>
|
|
|
|
<!-- 8. Q&A -->
|
|
<section class="slide center tc invert" data-title="Q and A">
|
|
<div>
|
|
<div class="mono glyph" style="font-size:96px;font-weight:600;letter-spacing:-.04em;line-height:1;margin:0 0 40px">>_</div>
|
|
<h2 class="h2">Bring frontier AI design power<br>back to every creator's desk</h2>
|
|
<p class="lede" style="margin:14px auto">Open · Local · Agent-native</p>
|
|
<div class="row mt-l" style="justify-content:center">
|
|
<span class="tag">download: macOS / Windows</span>
|
|
<span class="tag">star: github.com/nexu-io/open-design · 60K+</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
</div>
|
|
|
|
</body></html>
|