mirror of
https://github.com/nexu-io/open-design.git
synced 2026-07-09 16:35:54 +08:00
c7e422d7a2
* feat(plugins): unify all 56 official deck seeds with the Open Design product narrative Apply the same canonical 10-section story used for the community slides batch (sourced from the homepage structure doc + README) to every official deck plugin seed that ships an example.html: cover, why, three claims, numbers board (60K+ stars / 300+ contributors / 217+ plugins / 129 design systems / 21 agents), 5-step workflow, multimodal outputs, capabilities, agent ecosystem, testimonial, and CTA with GitHub/Discord/X links. Scenario decks keep their framing with Open Design as the subject: weekly-report/weekly-update become OD growth reports, course-module a getting-started tutorial, testing-safety-alert the local-data-security story, xhs-* decks OD-themed xiaohongshu notes, ib-pitch-book an investor narrative, presenter-mode-reveal keeps its presenter-mode demo. open-design-landing-deck only gets its numbers aligned to the canonical figures. Skipped (no example.html seed): guizang-ppt, html-ppt, replit-deck. Content-only edits: CSS tokens, layouts, decorations, animations, keyboard nav, hash routing and functional JS untouched. zh 13 decks / en 43 decks per existing typography. All 56 verified: script syntax, cover screenshot, no fictional brand residue. * fix(decks): wire dead Download/closing CTAs to real destinations Review follow-up for #4145: primary Download CTAs now point to https://open-design.ai/ (the canonical download landing), and the remaining href="#" closing links (Star on GitHub / Discord / X / See All Agents) point to the repo, Discord invite, and X profile. Also split the landing-deck primary CTA off the repo-root URL so the primary and secondary actions no longer share a destination. * style(official-decks): anti-slop visual pass across the official deck seeds Restyle/polish sweep over all 55 official example decks (taste-skill + impeccable + gsap-skills guidelines): - A-class seeds (AI-slop look: default Inter, purple-blue gradients, uniform rounded shadow cards) fully restyled with distinct typographic systems, locked single accents, and off-white/off-black grounds. - B-class seeds (clear style family, e.g. the zhangzara-* craft set) kept their family signature and received polish only: spacing rhythm, contrast to WCAG AA, hairline discipline, reduced-motion guards. - Motion limited to transform/opacity with prefers-reduced-motion guards; signature ease cubic-bezier(.16,1,.3,1). - Content is unchanged: all copy, numbers (60K+ stars, 217+ plugins, 129 design systems, 21 agents, -80% cost), links, slide counts and the deck engine scripts are byte-identical to the previous seeds. - html-ppt-zhangzara-pin-and-paper already met every rule (craft fonts, single ink accent, static content) and is intentionally untouched. * i18n(official-decks): translate all Chinese deck seeds to English All official slide seeds are now English-only per template policy. 15 decks translated (~12,000 CJK chars): presenter-mode-reveal, testing-safety-alert, xhs-pastel-card, tech-sharing, obsidian-claude-gradient, knowledge-arch-blueprint, xhs-white-editorial, hermes-cyber-terminal, xhs-post, dir-key-nav-minimal, graphify-dark-graph, ppt-keynote, guizang-editorial, swiss-international, open-slide-canvas. - Layout, engine scripts, slide counts, stats (60K+/300+/217+/129/21/ -80%) and links unchanged; only content language changed. - CJK-specific Google Fonts (Noto Sans/Serif SC, ZCOOL KuaiLe, Songti) replaced with Latin families matching each deck's voice (Inter, IBM Plex Sans, Nunito, Patrick Hand, Georgia, Noto Serif). - The xhs-* social decks keep their Xiaohongshu aesthetic with native English social copy. - Overflow from longer English copy fixed with minor per-element type sizing; every deck screenshot-verified; zero CJK characters remain across all 56 official deck seeds. * fix(xhs-pastel-card): restore absolute positioning of topbar/footer chrome The content-layer rule '.slide > *:not(.xp-blob){position:relative}' (specificity 0,3,0) overrode the absolutely-positioned .xp-topbar and .xp-footer (0,2,0), dropping both into the flex flow: the chip overlapped the headline, left:90px turned into a 90px rightward shift that pushed the page number off-canvas, and bottom:40px lifted the footer into the body copy on every slide. Excluding the two chrome elements from the content-layer rule restores the intended layout; verified per-slide screenshots across all 8 slides. * feat(deck-seeds): expand the three sampler decks to full 10-page examples deck-guizang-editorial, deck-swiss-international, and deck-open-slide-canvas shipped as 1-2 page style samplers while every other official seed carries a full 8-11 page example. Each is now a 10-page deck built from its own SKILL.md layout vocabulary: - guizang-editorial: one page per L01-L10 layout, single Ink/Monocle palette per the 5-pick-1 rule, ink/paper reversal for rhythm. - swiss-international: 10 of the 22 locked layouts (statement, cards, six-cell grid, timeline, duo compare, loop diagram, why-now, closing manifesto), Klein Blue as the single accent; SKILL.md example_desc updated from the stale two-page wording. - open-slide-canvas: ten free-composition 1920x1080 canvases (asymmetric split, oversized numerals, positioned-block flow, editorial quote, comparison spread) with keyboard + hash navigation per its own convention. Content follows the English-only OD narrative with canonical stats and links; every page screenshot-verified; zero CJK; single-file with Google Fonts as the only external resource. * fix(decks): wire the two remaining dead closing-slide CTAs Review follow-up for #4145 (nettee, looper reviewer): - 8-bit-orbit: the closing 'Download Open Design' / 'Star on GitHub' pixel buttons were plain <button> elements with no click handling; converted to anchors targeting https://open-design.ai/ and the GitHub repo, keeping the .pixel-btn skin. - retro-windows: the closing copy promised download/star actions but the action row was the old unwired Restart / Contact / End Session set; replaced with Download Open Design / Star on GitHub / Join Discord anchors in the same .btn-retro skin. * fix(decks): wire remaining button-skinned dead CTAs across deck seeds Review follow-up for #4145 (looper reviewer round 3). Converts every remaining action-copy control that carried button/chip skin but no href into a real anchor with the canonical targets, keeping each deck's skin: - zhangzara-long-table: closing .pill chips (GitHub / Download) and the cover 'Star on GitHub' pill - zhangzara-raw-grid: closing .label arrow Download + the two .s10-rb-block tiles (macOS-Windows / Star on GitHub) - zhangzara-peoples-platform: GET STARTED slide DOWNLOAD block - obsidian-claude-gradient: all four .oc-pill chips on the CTA slide - zhangzara-biennale-yellow / sakura-chroma / cobalt-grid colophon ftag labels, zhangzara-pink-script 'Star on GitHub' tile, and ib-pitch-book 'Download Open Design' stamp (same pattern, found by a repo-wide sweep for the regression class) * fix(decks): wire zhangzara-coral closing-slide social icons to anchors * feat(plugins): unify guizang-ppt (magazine-web-ppt) deck default with the Open Design product narrative in English The deck-mode default seed (magazine-web-ppt, dir guizang-ppt) was the one official deck the narrative+i18n pass missed, because its content lives in assets/example-slides.html + assets/template.html rather than example.html. - Rewrite the 9-slide example deck to the English Open Design product narrative (60K+ stars / 300+ contributors / 217+ plugins / 129 design systems / 21 agents / -80% cost), preserving the magazine editorial layout vocabulary and hitting all 8 layout categories. English titles use the Playfair .h-hero-en family; copy follows anti-slop craft (no decorative em-dashes, real labelled metrics, tight hierarchy). - Translate template.html (title, hint, all CSS/JS comments), SKILL.md, references/*.md, open-design.json, and the design-templates README to English. - Keep magazine-web-ppt name, mode=deck, default_for=deck intact. - Both synced copies (plugins/_official + design-templates) updated identically. --------- Co-authored-by: free666799 <293857035+free666799@users.noreply.github.com>
362 lines
17 KiB
HTML
362 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>Graphify Dark Graph</title>
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@600;700&family=Inter:wght@400;500;700&family=JetBrains+Mono:wght@400;500;600&display=swap');
|
|
|
|
/* graphify-dark-graph :: dark ground + force-directed graph signature
|
|
tokens: green-tinted off-black, single emerald accent, hairlines over glass */
|
|
:root{
|
|
--bg:#0f1211;
|
|
--text:#eef1ee;
|
|
--text-2:#a2aba4;
|
|
--text-3:#7d8780;
|
|
--line:rgba(238,241,238,.1);
|
|
--line-strong:rgba(238,241,238,.24);
|
|
--accent:#3ecf8e;
|
|
--accent-dim:rgba(62,207,142,.16);
|
|
--font-display:'Archivo','Inter',sans-serif;
|
|
--font-body:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
|
|
--font-mono:'JetBrains 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);
|
|
font-family:var(--font-body);font-weight:400;line-height:1.6;
|
|
-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
|
|
a{color:inherit;text-decoration:none}
|
|
img,svg{max-width:100%;display:block}
|
|
|
|
/* ============ 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:72px 96px;border-bottom:1px solid var(--line);
|
|
background:
|
|
radial-gradient(rgba(238,241,238,.045) 1px,transparent 1px) 0 0/28px 28px,
|
|
var(--bg)}
|
|
|
|
/* slide number, top right */
|
|
.snum{position:absolute;top:34px;right:48px;font-family:var(--font-mono);
|
|
font-size:11.5px;letter-spacing:.22em;color:var(--text-3)}
|
|
|
|
/* ============ type ============ */
|
|
.eyebrow{font-family:var(--font-mono);font-size:12px;font-weight:500;letter-spacing:.18em;
|
|
text-transform:uppercase;color:var(--accent);margin:0 0 18px}
|
|
.eyebrow.quiet{color:var(--text-3)}
|
|
.h1{font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;line-height:1.04;
|
|
font-size:clamp(60px,7vw,92px);margin:0;color:var(--text)}
|
|
.h2{font-family:var(--font-display);font-weight:700;letter-spacing:-.015em;line-height:1.1;
|
|
font-size:clamp(38px,4.4vw,54px);margin:0}
|
|
.lede{font-size:20px;line-height:1.7;color:var(--text-2);font-weight:400;max-width:60ch;margin:0}
|
|
.ac{color:var(--accent)}
|
|
|
|
/* ============ graph motif primitives ============ */
|
|
.node-dot{display:inline-block;width:9px;height:9px;border-radius:50%;
|
|
background:var(--accent);box-shadow:0 0 0 4px var(--accent-dim);flex:none}
|
|
.node-dot.hollow{background:transparent;border:1.5px solid var(--text-3);box-shadow:none}
|
|
|
|
/* callout: edge-line into a node */
|
|
.callout{display:flex;gap:18px;align-items:baseline;border-top:1px solid var(--line-strong);
|
|
padding-top:22px;margin-top:34px;max-width:72ch}
|
|
.callout .node-dot{transform:translateY(-1px)}
|
|
.callout p{margin:0;font-size:17px;line-height:1.7;color:var(--text-2)}
|
|
.callout p .ac{color:var(--accent)}
|
|
|
|
/* ============ entrance motion: transform+opacity only, staggered ============ */
|
|
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
|
|
.slide .in{animation:rise .65s 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}
|
|
.slide .in:nth-child(5){animation-delay:.24s}
|
|
@media (prefers-reduced-motion:reduce){.slide .in{animation:none}}
|
|
|
|
/* ============ S1 cover ============ */
|
|
.cover-graph{position:absolute;inset:0;width:100%;height:100%;opacity:.55;pointer-events:none}
|
|
.cover-inner{position:relative;margin-top:auto;padding-bottom:24px}
|
|
.cover .h1{font-size:clamp(54px,5.6vw,72px)}
|
|
|
|
/* ============ S3 capability grid ============ */
|
|
.cap-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line-strong);
|
|
border-bottom:1px solid var(--line);margin-top:36px}
|
|
.cap{padding:28px 26px 30px 0;display:flex;flex-direction:column;gap:10px}
|
|
.cap+.cap{border-left:1px solid var(--line);padding-left:26px}
|
|
.cap .idx{font-family:var(--font-mono);font-size:12px;color:var(--text-3);letter-spacing:.08em;
|
|
display:flex;align-items:center;gap:10px}
|
|
.cap h4{font-family:var(--font-display);font-weight:600;font-size:18.5px;letter-spacing:-.01em;
|
|
line-height:1.3;margin:6px 0 0;color:var(--text)}
|
|
.cap p{margin:0;font-size:13.5px;line-height:1.65;color:var(--text-2)}
|
|
|
|
/* ============ S4 code ============ */
|
|
.cmd{font-family:var(--font-mono);font-size:clamp(20px,2.4vw,28px);font-weight:600;
|
|
color:var(--accent);letter-spacing:-.01em;margin:14px 0 0}
|
|
.codebox{background:#0b0e0d;border:1px solid var(--line);border-radius:4px;
|
|
padding:24px 28px;font-family:var(--font-mono);font-size:14px;line-height:1.85;
|
|
color:#ccd4ce;margin:26px 0 0;max-width:760px;overflow:hidden}
|
|
.codebox .cm{color:var(--text-3)}
|
|
.codebox .kw{color:var(--accent)}
|
|
.codebox .st{color:#dfe5e0}
|
|
.codebox .fn{color:var(--text-2)}
|
|
|
|
/* ============ S5 race tracks + stat board ============ */
|
|
.race{max-width:920px;margin-top:38px}
|
|
.track{display:grid;grid-template-columns:96px 1fr;gap:24px;align-items:center;padding:26px 0}
|
|
.track+.track{border-top:1px solid var(--line)}
|
|
.track .who{font-family:var(--font-display);font-weight:600;font-size:16px;line-height:1.35;
|
|
text-align:right;color:var(--text-2)}
|
|
.track.open .who{color:var(--text)}
|
|
.track .lane{position:relative;height:40px}
|
|
.track .lane::before{content:'';position:absolute;left:0;right:0;top:50%;height:1px;background:var(--line-strong)}
|
|
.track .lane .marker{position:absolute;top:50%;transform:translate(-50%,-50%);
|
|
width:11px;height:11px;border-radius:50%}
|
|
.track.closed .lane .marker{left:26%;background:transparent;border:1.5px solid var(--text-3)}
|
|
.track.open .lane .marker{left:calc(100% - 6px);background:var(--accent);box-shadow:0 0 0 5px var(--accent-dim)}
|
|
.track .lane .lbl{position:absolute;top:-12px;font-family:var(--font-mono);font-size:13px;letter-spacing:.02em}
|
|
.track.closed .lane .lbl{left:calc(26% + 18px);color:var(--text-3)}
|
|
.track.open .lane .lbl{right:26px;color:var(--accent)}
|
|
|
|
.stat-board{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line-strong);
|
|
margin-top:40px;max-width:920px}
|
|
.stat{padding:28px 32px 6px 0}
|
|
.stat+.stat{border-left:1px solid var(--line);padding-left:32px}
|
|
.stat .v{font-family:var(--font-display);font-weight:700;letter-spacing:-.03em;line-height:1;
|
|
font-size:clamp(52px,5.4vw,76px);color:var(--text)}
|
|
.stat:first-child .v{color:var(--accent)}
|
|
.stat .l{font-size:13.5px;color:var(--text-2);margin-top:10px}
|
|
|
|
/* ============ S6 pipeline: steps as nodes on one edge ============ */
|
|
.pipe{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:40px;margin-top:64px}
|
|
.pipe::before{content:'';position:absolute;top:6px;left:8px;right:8px;height:1px;background:var(--line-strong)}
|
|
.step{position:relative;padding-top:34px}
|
|
.step::before{content:'';position:absolute;top:0;left:0;width:13px;height:13px;border-radius:50%;
|
|
background:var(--bg);border:1.5px solid var(--text-3)}
|
|
.step.last::before{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 5px var(--accent-dim)}
|
|
.step .sn{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.16em;color:var(--text-3)}
|
|
.step h4{font-family:var(--font-display);font-weight:600;font-size:21px;letter-spacing:-.01em;margin:8px 0 6px;color:var(--text)}
|
|
.step p{margin:0;font-size:13.5px;line-height:1.6;color:var(--text-2)}
|
|
|
|
/* ============ S7 CTA ============ */
|
|
.cta-dl{font-family:var(--font-mono);font-size:clamp(18px,2.1vw,24px);font-weight:600;
|
|
color:var(--text);margin:12px 0 0;letter-spacing:-.01em}
|
|
.tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:40px}
|
|
.tag{font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;color:var(--text-2);
|
|
border:1px solid var(--line-strong);border-radius:2px;padding:7px 14px}
|
|
|
|
/* ============ S8 thanks ============ */
|
|
.thanks{text-align:center;align-items:center}
|
|
.thanks .big{font-family:var(--font-display);font-weight:700;letter-spacing:-.03em;line-height:1;
|
|
font-size:clamp(110px,15vw,190px);margin:0}
|
|
.thanks .lede{margin:30px auto 0}
|
|
|
|
@media print{.slide{page-break-after:always}}
|
|
@media (max-width:768px){
|
|
.slide{padding:48px 28px;height:auto;min-height:100vh}
|
|
.snum{right:28px}
|
|
.cap-grid,.stat-board,.pipe{grid-template-columns:1fr}
|
|
.cap+.cap,.stat+.stat{border-left:none;padding-left:0;border-top:1px solid var(--line)}
|
|
.pipe::before{display:none}
|
|
.track{grid-template-columns:1fr;gap:8px}
|
|
.track .who{text-align:left}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="tpl-graphify-dark-graph">
|
|
<div class="deck">
|
|
|
|
<!-- 1. COVER -->
|
|
<section class="slide is-active cover">
|
|
<!-- force-directed graph signature: hairline edges, neutral nodes, accent hubs -->
|
|
<svg class="cover-graph" viewBox="0 0 1600 900" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
|
<g stroke="rgba(238,241,238,.15)" stroke-width="1" fill="none">
|
|
<line x1="300" y1="200" x2="520" y2="340"/>
|
|
<line x1="520" y1="340" x2="780" y2="260"/>
|
|
<line x1="780" y1="260" x2="1040" y2="420"/>
|
|
<line x1="520" y1="340" x2="640" y2="560"/>
|
|
<line x1="640" y1="560" x2="900" y2="620"/>
|
|
<line x1="900" y1="620" x2="1040" y2="420"/>
|
|
<line x1="1040" y1="420" x2="1260" y2="300"/>
|
|
<line x1="1260" y1="300" x2="1380" y2="500"/>
|
|
<line x1="900" y1="620" x2="1120" y2="720"/>
|
|
<line x1="300" y1="200" x2="200" y2="420"/>
|
|
<line x1="200" y1="420" x2="360" y2="640"/>
|
|
<line x1="360" y1="640" x2="640" y2="560"/>
|
|
</g>
|
|
<g>
|
|
<circle cx="300" cy="200" r="7" fill="none" stroke="rgba(238,241,238,.35)" stroke-width="1.5"/>
|
|
<circle cx="520" cy="340" r="10" fill="#3ecf8e" opacity=".9"/>
|
|
<circle cx="780" cy="260" r="6" fill="none" stroke="rgba(238,241,238,.35)" stroke-width="1.5"/>
|
|
<circle cx="1040" cy="420" r="13" fill="#3ecf8e" opacity=".55"/>
|
|
<circle cx="640" cy="560" r="8" fill="none" stroke="rgba(238,241,238,.35)" stroke-width="1.5"/>
|
|
<circle cx="900" cy="620" r="9" fill="none" stroke="rgba(62,207,142,.7)" stroke-width="1.5"/>
|
|
<circle cx="1260" cy="300" r="5" fill="none" stroke="rgba(238,241,238,.3)" stroke-width="1.5"/>
|
|
<circle cx="1380" cy="500" r="7" fill="none" stroke="rgba(238,241,238,.3)" stroke-width="1.5"/>
|
|
<circle cx="1120" cy="720" r="6" fill="none" stroke="rgba(238,241,238,.3)" stroke-width="1.5"/>
|
|
<circle cx="200" cy="420" r="5" fill="none" stroke="rgba(238,241,238,.3)" stroke-width="1.5"/>
|
|
<circle cx="360" cy="640" r="8" fill="none" stroke="rgba(62,207,142,.7)" stroke-width="1.5"/>
|
|
</g>
|
|
</svg>
|
|
<div class="snum">01 / 08</div>
|
|
<div class="cover-inner">
|
|
<p class="eyebrow in">Open Source · Apache-2.0</p>
|
|
<h1 class="h1 in">Open Design<br><span class="ac">Open · Local · Agent-driven</span></h1>
|
|
<p class="lede in" style="margin-top:24px">From idea to prototypes, websites, slides, and HTML video — <span style="color:var(--text)">the entire product design workflow, on your own machine.</span></p>
|
|
<p class="eyebrow quiet in" style="margin:30px 0 0">Apache-2.0 · Runs locally · BYOK · No sign-up</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 2. SECTION DIVIDER -->
|
|
<section class="slide">
|
|
<div class="snum">02 / 08</div>
|
|
<div style="margin:auto 0">
|
|
<p class="eyebrow quiet in">Part 01</p>
|
|
<h1 class="h1 in" style="font-size:clamp(88px,10vw,128px)">Why <span class="ac">Open</span>?</h1>
|
|
<p class="lede in" style="margin-top:24px">In April 2026, Claude Design proved for the first time that LLMs can genuinely design — but it's closed source, paid, and cloud-only. Open Design sets that capability free.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 3. CONTENT — plugin grid -->
|
|
<section class="slide">
|
|
<div class="snum">03 / 08</div>
|
|
<p class="eyebrow in">Core Capabilities</p>
|
|
<h2 class="h2 in">One platform, <span class="ac">four things</span></h2>
|
|
<div class="cap-grid in">
|
|
<div class="cap">
|
|
<span class="idx"><span class="node-dot hollow"></span>n.01</span>
|
|
<h4>Desktop-native</h4>
|
|
<p>Reads local files, Figma exports, and code repos directly</p>
|
|
</div>
|
|
<div class="cap">
|
|
<span class="idx"><span class="node-dot hollow"></span>n.02</span>
|
|
<h4>21 coding agents</h4>
|
|
<p>Auto-detects CLIs on your PATH — zero config</p>
|
|
</div>
|
|
<div class="cap">
|
|
<span class="idx"><span class="node-dot hollow"></span>n.03</span>
|
|
<h4>129 design systems</h4>
|
|
<p>Import from GitHub / Figma / local files</p>
|
|
</div>
|
|
<div class="cap">
|
|
<span class="idx"><span class="node-dot"></span>n.04</span>
|
|
<h4>BYOK end to end</h4>
|
|
<p>Anthropic / OpenAI / Azure / Google + 14 media providers</p>
|
|
</div>
|
|
</div>
|
|
<div class="callout in">
|
|
<span class="node-dot"></span>
|
|
<p>It doesn't build an agent — it <span class="ac">wires the Claude Code / Codex / Cursor on your machine into a complete design workflow</span>.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 4. CODE -->
|
|
<section class="slide">
|
|
<div class="snum">04 / 08</div>
|
|
<p class="eyebrow in">Local-first</p>
|
|
<h2 class="h2 in">Data stays local, <span class="ac">keys never leave</span></h2>
|
|
<p class="cmd in">$ git clone github.com/nexu-io/open-design</p>
|
|
<pre class="codebox in"><span class="cm"># .od/ — all runtime data lives on your machine</span>
|
|
<span class="kw">.od/</span>
|
|
<span class="st">app.sqlite</span> <span class="cm"># local SQLite, no cloud dependency</span>
|
|
<span class="st">projects/</span> <span class="cm"># agent working directories</span>
|
|
<span class="st">artifacts/</span> <span class="cm"># saved render artifacts</span>
|
|
<span class="st">media-config.json</span> <span class="cm"># BYOK credentials, never uploaded</span>
|
|
|
|
<span class="kw">byok</span>:
|
|
providers: [<span class="st">anthropic</span>, <span class="st">openai</span>, <span class="st">azure</span>, <span class="st">google</span>]
|
|
self_host: <span class="fn">true</span> <span class="cm"># Apache-2.0, self-host freely</span></pre>
|
|
</section>
|
|
|
|
<!-- 5. CHART — race diagram -->
|
|
<section class="slide">
|
|
<div class="snum">05 / 08</div>
|
|
<p class="eyebrow in">Cost Race</p>
|
|
<h2 class="h2 in">Closed cloud vs <span class="ac">open local</span></h2>
|
|
<div class="race in">
|
|
<div class="track closed">
|
|
<div class="who">Closed<br>cloud</div>
|
|
<div class="lane">
|
|
<span class="marker"></span>
|
|
<span class="lbl">Locked model · $500/mo · data in the cloud</span>
|
|
</div>
|
|
</div>
|
|
<div class="track open">
|
|
<div class="who">Open<br>local</div>
|
|
<div class="lane">
|
|
<span class="marker"></span>
|
|
<span class="lbl">Any agent · BYOK ~$73/mo · data stays local</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="stat-board in">
|
|
<div class="stat"><div class="v">-80%</div><p class="l">monthly cost ($500 → ~$73)</p></div>
|
|
<div class="stat"><div class="v">21</div><p class="l">coding agents connected</p></div>
|
|
<div class="stat"><div class="v">217+</div><p class="l">plugins in the ecosystem</p></div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 6. PIPELINE -->
|
|
<section class="slide">
|
|
<div class="snum">06 / 08</div>
|
|
<p class="eyebrow in">Workflow</p>
|
|
<h2 class="h2 in">Idea to delivery in <span class="ac">4 steps</span></h2>
|
|
<div class="pipe in">
|
|
<div class="step">
|
|
<span class="sn">STEP 01</span>
|
|
<h4>Start</h4>
|
|
<p>One sentence / template / plugin</p>
|
|
</div>
|
|
<div class="step">
|
|
<span class="sn">STEP 02</span>
|
|
<h4>Style</h4>
|
|
<p>Palette & fonts auto-applied</p>
|
|
</div>
|
|
<div class="step">
|
|
<span class="sn">STEP 03</span>
|
|
<h4>Generate</h4>
|
|
<p>Artifacts in a live sandbox</p>
|
|
</div>
|
|
<div class="step last">
|
|
<span class="sn">STEP 04</span>
|
|
<h4>Ship</h4>
|
|
<p>Hand off to engineering or render video</p>
|
|
</div>
|
|
</div>
|
|
<div class="callout in">
|
|
<span class="node-dot"></span>
|
|
<p>Every choice settles into design systems, preferences, and memory — each generation lands closer to what you want.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 7. CTA -->
|
|
<section class="slide">
|
|
<div class="snum">07 / 08</div>
|
|
<p class="eyebrow in">Try it tonight</p>
|
|
<h2 class="h1 in" style="font-size:clamp(56px,6.4vw,80px)">Bring AI design <span class="ac">back to your desk</span></h2>
|
|
<p class="cmd in" style="margin-top:30px">$ git clone github.com/nexu-io/open-design</p>
|
|
<p class="cta-dl in">→ Download Open Design · macOS / Windows</p>
|
|
<div class="tags in">
|
|
<span class="tag">#open-source</span>
|
|
<span class="tag">#local-first</span>
|
|
<span class="tag">#agent-native</span>
|
|
<span class="tag">#byok</span>
|
|
<span class="tag">#apache-2.0</span>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 8. THANKS -->
|
|
<section class="slide thanks">
|
|
<div class="snum">08 / 08</div>
|
|
<div style="margin:auto 0">
|
|
<h1 class="big in">Thanks<span class="ac">.</span></h1>
|
|
<p class="lede in">github.com/nexu-io/open-design · stars, issues, and PRs welcome</p>
|
|
</div>
|
|
</section>
|
|
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|