feat(dev): auto-switch ports on dev:all when defaults are busy

Adds a small launcher (scripts/dev-all.mjs) that probes free ports for the daemon (OD_PORT, default 7456) and Vite (VITE_PORT, default 5173) before invoking concurrently, so a stray process holding either port no longer breaks the boot. The resolved ports are exported into the child env; vite.config.ts now reads VITE_PORT to keep its dev server and /api proxy aligned with the daemon's actual port. Made-with: Cursor
Enhance README and add star promotion assets
2026-04-28 22:19:42 +08:00 · 2026-04-28 20:32:39 +08:00 · 2026-04-28 16:23:44 +08:00 · 2026-04-28 16:20:14 +08:00 · 2026-04-28 16:16:51 +08:00 · 2026-04-28 16:11:46 +08:00
15 changed files with 984 additions and 83 deletions
@@ -16,3 +16,5 @@ dist
 tsconfig.tsbuildinfo

 .claude-sessions/*
+
+.cursor/*
@@ -211,7 +211,7 @@ DISCOVERY directives  (turn-1 form, turn-2 brand branch, TodoWrite, 5-dim critiq
  + active SKILL.md    (19 skills available)
  + project metadata   (kind, fidelity, speakerNotes, animations, inspiration ids)
  + skill side files   (auto-injected pre-flight: read assets/template.html + references/*.md)
-  + (deck mode only)   DECK_FRAMEWORK_DIRECTIVE   (nav / counter / scroll / print)
+  + (deck kind, no skill seed) DECK_FRAMEWORK_DIRECTIVE   (nav / counter / scroll / print)
 ```

 Every layer is composable. Every layer is a file you can edit. Read [`src/prompts/system.ts`](src/prompts/system.ts) and [`src/prompts/discovery.ts`](src/prompts/discovery.ts) to see the actual contract.
@@ -538,6 +538,14 @@ Phased delivery → [`docs/roadmap.md`](docs/roadmap.md).

 This is an early implementation — the closed loop (detect → pick skill + design system → chat → parse `<artifact>` → preview → save) runs end-to-end. The prompt stack and skill library are where most of the value lives, and they're stable. The component-level UI is shipping daily.

+## Star us
+
+<p align="center">
+  <a href="https://github.com/nexu-io/open-design"><img src="docs/assets/star-us.png" alt="Star Open Design on GitHub — github.com/nexu-io/open-design" width="100%" /></a>
+</p>
+
+If this saved you thirty minutes — give it a ★. Stars don't pay rent, but they tell the next designer, agent, and contributor that this experiment is worth their attention. One click, three seconds, real signal: [github.com/nexu-io/open-design](https://github.com/nexu-io/open-design).
+
 ## Contributing

 Issues, PRs, new skills, and new design systems are all welcome. The highest-leverage contributions are usually one folder, one Markdown file, or one PR-sized adapter:
@@ -211,7 +211,7 @@ DISCOVERY 指令         （turn-1 表单、turn-2 品牌分支、TodoWrite、
  + 激活的 SKILL.md    （19 套备选）
  + 项目元数据          （kind、fidelity、speakerNotes、animations、灵感 system id）
  + Skill 副文件       （自动注入 pre-flight：先读 assets/template.html + references/*.md）
-  + （仅 deck 模式）    DECK_FRAMEWORK_DIRECTIVE   （nav / counter / scroll / print）
+  + （deck kind 且无 skill 种子时） DECK_FRAMEWORK_DIRECTIVE   （nav / counter / scroll / print）
 ```

 每一层都可组合。每一层都是一个你能改的文件。看 [`src/prompts/system.ts`](src/prompts/system.ts) 和 [`src/prompts/discovery.ts`](src/prompts/discovery.ts) 就知道真实契约长什么样。
@@ -538,6 +538,14 @@ Daemon 启动时从 `PATH` 自动检测，无需配置。

 这是一个早期实现 —— 闭环（检测 → 选 skill + design system → 对话 → 解析 `<artifact>` → 预览 → 保存）已经端到端跑通。提示词栈和 skill 库是价值最重的部分，目前已稳定。组件级 UI 仍在每天迭代。

+## 给我们点个 Star
+
+<p align="center">
+  <a href="https://github.com/nexu-io/open-design"><img src="docs/assets/star-us.png" alt="给 Open Design 点个 Star —— github.com/nexu-io/open-design" width="100%" /></a>
+</p>
+
+如果这套东西帮你省了半小时，给它一个 ★。Star 不付房租，但它告诉下一个设计师、Agent 和贡献者：这个实验值得他们的注意力。一次点击、三秒钟、真实信号：[github.com/nexu-io/open-design](https://github.com/nexu-io/open-design)。
+
 ## 贡献

 欢迎 issue、PR、新 skill、新 design system。收益最高的贡献往往就是一个文件夹、一份 Markdown，或者一个 PR 大小的 adapter：
@@ -2,9 +2,9 @@
 // front-matter, returns listing. No watching in this MVP — re-scans on every
 // GET /api/skills, which is fine for dozens of skills.

-import { readdir, readFile, stat } from 'node:fs/promises';
-import path from 'node:path';
-import { parseFrontmatter } from './frontmatter.js';
+import { readdir, readFile, stat } from "node:fs/promises";
+import path from "node:path";
+import { parseFrontmatter } from "./frontmatter.js";

 export async function listSkills(skillsRoot) {
  const out = [];
@@ -17,26 +17,32 @@ export async function listSkills(skillsRoot) {
  for (const entry of entries) {
    if (!entry.isDirectory()) continue;
    const dir = path.join(skillsRoot, entry.name);
-    const skillPath = path.join(dir, 'SKILL.md');
+    const skillPath = path.join(dir, "SKILL.md");
    try {
      const stats = await stat(skillPath);
      if (!stats.isFile()) continue;
-      const raw = await readFile(skillPath, 'utf8');
+      const raw = await readFile(skillPath, "utf8");
      const { data, body } = parseFrontmatter(raw);
      const hasAttachments = await dirHasAttachments(dir);
      const mode = data.od?.mode || inferMode(body, data.description);
      out.push({
        id: data.name || entry.name,
        name: data.name || entry.name,
-        description: data.description || '',
+        description: data.description || "",
        triggers: Array.isArray(data.triggers) ? data.triggers : [],
        mode,
-        platform: normalizePlatform(data.od?.platform, mode, body, data.description),
+        platform: normalizePlatform(
+          data.od?.platform,
+          mode,
+          body,
+          data.description
+        ),
        scenario: normalizeScenario(data.od?.scenario, body, data.description),
-        previewType: data.od?.preview?.type || 'html',
+        previewType: data.od?.preview?.type || "html",
        designSystemRequired: data.od?.design_system?.requires ?? true,
        defaultFor: normalizeDefaultFor(data.od?.default_for),
-        upstream: typeof data.od?.upstream === 'string' ? data.od.upstream : null,
+        upstream:
+          typeof data.od?.upstream === "string" ? data.od.upstream : null,
        featured: normalizeFeatured(data.od?.featured),
        // Optional metadata hints used by 'Use this prompt' fast-create so
        // the resulting project mirrors the shipped example.html. Each hint
@@ -63,15 +69,15 @@ export async function listSkills(skillsRoot) {
 // open those files via absolute paths.
 function withSkillRootPreamble(body, dir) {
  const preamble = [
-    '> **Skill root (absolute):** `' + dir + '`',
-    '>',
-    '> This skill ships side files alongside `SKILL.md`. When the workflow',
-    '> below references relative paths such as `assets/template.html` or',
-    '> `references/layouts.md`, resolve them against the skill root above and',
-    '> open them via their full absolute path.',
-    '',
-    '',
-  ].join('\n');
+    "> **Skill root (absolute):** `" + dir + "`",
+    ">",
+    "> This skill ships side files alongside `SKILL.md`. When the workflow",
+    "> below references relative paths such as `assets/template.html` or",
+    "> `references/layouts.md`, resolve them against the skill root above and",
+    "> open them via their full absolute path.",
+    "",
+    "",
+  ].join("\n");
  return preamble + body;
 }

@@ -79,7 +85,9 @@ async function dirHasAttachments(dir) {
  try {
    const entries = await readdir(dir, { withFileTypes: true });
    return entries.some(
-      (e) => e.name !== 'SKILL.md' && (e.isDirectory() || /\.(md|html|css|js|json|txt)$/i.test(e.name)),
+      (e) =>
+        e.name !== "SKILL.md" &&
+        (e.isDirectory() || /\.(md|html|css|js|json|txt)$/i.test(e.name))
    );
  } catch {
    return false;
@@ -96,7 +104,7 @@ function normalizeDefaultFor(value) {
 // 'high-fidelity' are meaningful — anything else collapses to null so the
 // caller falls back to the form default ('high-fidelity').
 function normalizeFidelity(value) {
-  if (value === 'wireframe' || value === 'high-fidelity') return value;
+  if (value === "wireframe" || value === "high-fidelity") return value;
  return null;
 }

@@ -104,11 +112,11 @@ function normalizeFidelity(value) {
 // to a real boolean. Returns null for anything we can't interpret so the
 // caller knows to fall back to the form default.
 function normalizeBoolHint(value) {
-  if (typeof value === 'boolean') return value;
-  if (typeof value === 'string') {
+  if (typeof value === "boolean") return value;
+  if (typeof value === "string") {
    const v = value.trim().toLowerCase();
-    if (v === 'true' || v === 'yes' || v === '1') return true;
-    if (v === 'false' || v === 'no' || v === '0') return false;
+    if (v === "true" || v === "yes" || v === "1") return true;
+    if (v === "false" || v === "no" || v === "0") return false;
  }
  return null;
 }
@@ -119,8 +127,8 @@ function normalizeBoolHint(value) {
 // natural alphabetical order.
 function normalizeFeatured(value) {
  if (value === true) return 1;
-  if (typeof value === 'number' && Number.isFinite(value)) return value;
-  if (typeof value === 'string' && value.trim()) {
+  if (typeof value === "number" && Number.isFinite(value)) return value;
+  if (typeof value === "string" && value.trim()) {
    const n = Number(value);
    if (Number.isFinite(n)) return n;
  }
@@ -133,66 +141,70 @@ function normalizeFeatured(value) {
 // serves as a passable starter prompt.
 function derivePrompt(data) {
  const explicit = data.od?.example_prompt;
-  if (typeof explicit === 'string' && explicit.trim()) return explicit.trim();
-  const desc = typeof data.description === 'string' ? data.description.trim() : '';
-  if (!desc) return '';
-  const collapsed = desc.replace(/\s+/g, ' ').trim();
+  if (typeof explicit === "string" && explicit.trim()) return explicit.trim();
+  const desc =
+    typeof data.description === "string" ? data.description.trim() : "";
+  if (!desc) return "";
+  const collapsed = desc.replace(/\s+/g, " ").trim();
  const firstSentence = collapsed.match(/^.+?[.!?。！？](?:\s|$)/)?.[0]?.trim();
  return (firstSentence || collapsed).slice(0, 320);
 }

 function inferMode(body, description) {
-  const hay = `${description ?? ''}\n${body ?? ''}`.toLowerCase();
-  if (/\bppt|deck|slide|presentation|幻灯|投影/.test(hay)) return 'deck';
-  if (/\bdesign[- ]system|\bdesign\.md|\bdesign tokens/.test(hay)) return 'design-system';
-  if (/\btemplate\b/.test(hay)) return 'template';
-  return 'prototype';
+  const hay = `${description ?? ""}\n${body ?? ""}`.toLowerCase();
+  if (/\bppt|deck|slide|presentation|幻灯|投影/.test(hay)) return "deck";
+  if (/\bdesign[- ]system|\bdesign\.md|\bdesign tokens/.test(hay))
+    return "design-system";
+  if (/\btemplate\b/.test(hay)) return "template";
+  return "prototype";
 }

 // Validate platform tag — only desktop / mobile are meaningful for the
 // Examples gallery. Falls back to autodetecting "mobile" from descriptions
 // so legacy skills sort under the right pill without authoring changes.
 function normalizePlatform(value, mode, body, description) {
-  if (value === 'desktop' || value === 'mobile') return value;
-  if (mode !== 'prototype') return null;
-  const hay = `${description ?? ''}\n${body ?? ''}`.toLowerCase();
-  if (/mobile|phone|ios|android|手机|移动端/.test(hay)) return 'mobile';
-  return 'desktop';
+  if (value === "desktop" || value === "mobile") return value;
+  if (mode !== "prototype") return null;
+  const hay = `${description ?? ""}\n${body ?? ""}`.toLowerCase();
+  if (/mobile|phone|ios|android|手机|移动端/.test(hay)) return "mobile";
+  return "desktop";
 }

 // Normalise a scenario tag to a small fixed vocabulary so the filter pills
 // stay tidy. Unknown values pass through verbatim so authors can experiment;
 // missing values default to "general".
 const KNOWN_SCENARIOS = new Set([
-  'general',
-  'engineering',
-  'product',
-  'design',
-  'marketing',
-  'sales',
-  'finance',
-  'hr',
-  'operations',
-  'support',
-  'legal',
-  'education',
-  'personal',
+  "general",
+  "engineering",
+  "product",
+  "design",
+  "marketing",
+  "sales",
+  "finance",
+  "hr",
+  "operations",
+  "support",
+  "legal",
+  "education",
+  "personal",
 ]);
 function normalizeScenario(value, body, description) {
-  if (typeof value === 'string') {
+  if (typeof value === "string") {
    const v = value.trim().toLowerCase();
    if (v) return v;
  }
-  const hay = `${description ?? ''}\n${body ?? ''}`.toLowerCase();
-  if (/finance|invoice|expense|budget|p&l|revenue/.test(hay)) return 'finance';
-  if (/\bhr\b|onboarding|payroll|employee|人事/.test(hay)) return 'hr';
-  if (/marketing|campaign|brand|landing/.test(hay)) return 'marketing';
-  if (/runbook|incident|deploy|engineering|sre|api/.test(hay)) return 'engineering';
-  if (/spec|prd|roadmap|product manager|product team/.test(hay)) return 'product';
-  if (/design system|moodboard|mockup|ui kit/.test(hay)) return 'design';
-  if (/sales|quote|proposal|lead/.test(hay)) return 'sales';
-  if (/operations|ops|logistics|inventory/.test(hay)) return 'operations';
-  return 'general';
+  const hay = `${description ?? ""}\n${body ?? ""}`.toLowerCase();
+  if (/finance|invoice|expense|budget|p&l|revenue/.test(hay)) return "finance";
+  if (/\bhr\b|onboarding|payroll|employee|人事/.test(hay)) return "hr";
+  if (/marketing|campaign|brand|landing/.test(hay)) return "marketing";
+  if (/runbook|incident|deploy|engineering|sre|api/.test(hay))
+    return "engineering";
+  if (/spec|prd|roadmap|product manager|product team/.test(hay))
+    return "product";
+  if (/design system|moodboard|mockup|ui kit/.test(hay)) return "design";
+  if (/sales|quote|proposal|lead/.test(hay)) return "sales";
+  if (/operations|ops|logistics|inventory/.test(hay)) return "operations";
+  return "general";
 }
 // Surface the vocabulary so callers (frontend filter UI) could mirror it
 // later if they want to. Not exported today, kept here for documentation.
@@ -0,0 +1,743 @@
+<!doctype html>
+<html lang='en'>
+<head>
+<meta charset='utf-8' />
+<title>Open Design — Star us on GitHub</title>
+<link rel='preconnect' href='https://fonts.googleapis.com'>
+<link rel='preconnect' href='https://fonts.gstatic.com' crossorigin>
+<link href='https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,500;0,9..144,700;1,9..144,500;1,9..144,700&family=JetBrains+Mono:wght@400;500&family=Inter:wght@400;500;600&display=swap' rel='stylesheet'>
+<style>
+  :root {
+    --bg: #0d0a06;
+    --bg-2: #14100a;
+    --ink: #f3ead8;
+    --muted: #9b8f78;
+    --rule: #4a3f2c;
+    --accent: #f0833f;
+    --accent-2: #e85a2c;
+    --gold: #ffc83d;
+    --gold-2: #ffb000;
+    --paper: #f6efdd;
+
+    --gh-bg: #0d1117;
+    --gh-fg: #e6edf3;
+    --gh-muted: #8b949e;
+    --gh-border: #30363d;
+    --gh-border-2: #21262d;
+    --gh-btn: #21262d;
+    --gh-btn-hover: #30363d;
+    --gh-pill: #1f2328;
+    --gh-link: #4493f8;
+    --gh-tag-bg: #15295a;
+    --gh-tag-fg: #79c0ff;
+  }
+  * { box-sizing: border-box; }
+  html, body {
+    margin: 0;
+    padding: 0;
+    width: 1920px;
+    height: 1080px;
+    background: var(--bg);
+    color: var(--ink);
+    font-family: 'Inter', -apple-system, system-ui, sans-serif;
+    overflow: hidden;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+  body {
+    background:
+      radial-gradient(1200px 760px at 80% 18%, rgba(255,200,61,0.10), transparent 70%),
+      radial-gradient(900px 600px at 12% 80%, rgba(240,131,63,0.06), transparent 70%),
+      linear-gradient(180deg, #0e0b07 0%, #0a0805 100%);
+    padding: 56px 72px;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .mono {
+    font-family: 'JetBrains Mono', ui-monospace, monospace;
+    font-size: 12px;
+    letter-spacing: 0.18em;
+    text-transform: uppercase;
+    color: var(--muted);
+  }
+
+  header {
+    display: grid;
+    grid-template-columns: 1fr auto 1fr;
+    align-items: center;
+    padding-bottom: 22px;
+    border-bottom: 1px solid var(--rule);
+  }
+  header .l { text-align: left; }
+  header .r { text-align: right; }
+  header .center {
+    font-family: 'Fraunces', serif;
+    font-style: italic;
+    font-weight: 500;
+    font-size: 22px;
+    color: var(--ink);
+    letter-spacing: 0.01em;
+  }
+  header .center .star {
+    color: var(--gold);
+    margin-right: 6px;
+    font-size: 20px;
+    vertical-align: 1px;
+  }
+
+  main {
+    flex: 1;
+    display: grid;
+    grid-template-columns: 1.05fr 1fr;
+    column-gap: 64px;
+    padding-top: 56px;
+    align-items: stretch;
+  }
+
+  /* --------- LEFT: editorial copy --------- */
+  .left {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+  }
+  .eyebrow {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 28px;
+  }
+  .pill {
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 11px;
+    letter-spacing: 0.22em;
+    color: #f6e9d4;
+    background: rgba(240,131,63,0.16);
+    border: 1px solid rgba(240,131,63,0.45);
+    padding: 6px 12px;
+    border-radius: 999px;
+    text-transform: uppercase;
+  }
+  .pill.alt {
+    color: var(--muted);
+    background: transparent;
+    border-color: var(--rule);
+  }
+  .pill.gold {
+    color: #2a1a05;
+    background: linear-gradient(180deg, var(--gold), var(--gold-2));
+    border: 1px solid rgba(255,200,61,0.85);
+  }
+
+  h1 {
+    font-family: 'Fraunces', serif;
+    font-weight: 500;
+    font-size: 100px;
+    line-height: 0.94;
+    letter-spacing: -0.025em;
+    color: var(--ink);
+    margin: 0 0 32px 0;
+  }
+  h1 em {
+    font-style: italic;
+    color: var(--accent);
+    font-weight: 500;
+  }
+  h1 .star-glyph {
+    color: var(--gold);
+    font-style: normal;
+    font-weight: 500;
+    display: inline-block;
+    transform: translateY(8px);
+    text-shadow:
+      0 0 24px rgba(255,200,61,0.55),
+      0 0 60px rgba(255,176,0,0.35);
+  }
+  h1 .underline-accent {
+    position: relative;
+    display: inline-block;
+  }
+  h1 .underline-accent::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: -6px;
+    height: 6px;
+    background: var(--accent);
+    border-radius: 4px;
+    opacity: 0.85;
+  }
+
+  .lede {
+    font-family: 'Fraunces', serif;
+    font-weight: 300;
+    font-size: 22px;
+    line-height: 1.5;
+    color: #d8cdb6;
+    max-width: 640px;
+    margin: 0 0 28px 0;
+  }
+  .lede b { font-weight: 500; color: #f3ead8; }
+
+  .url-card {
+    display: inline-flex;
+    align-items: center;
+    gap: 18px;
+    padding: 16px 22px;
+    border: 1px solid var(--rule);
+    border-radius: 14px;
+    background: rgba(255,255,255,0.02);
+    margin-bottom: 36px;
+    box-shadow: 0 14px 30px rgba(0,0,0,0.35);
+  }
+  .url-card .arrow {
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 12px;
+    letter-spacing: 0.22em;
+    color: var(--muted);
+    text-transform: uppercase;
+  }
+  .url-card .url {
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 22px;
+    color: var(--ink);
+    letter-spacing: 0.01em;
+  }
+  .url-card .url b {
+    color: var(--accent);
+    font-weight: 500;
+  }
+  .url-card .copybtn {
+    margin-left: 8px;
+    border: 1px solid var(--rule);
+    color: var(--muted);
+    padding: 4px 10px;
+    border-radius: 6px;
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 10px;
+    letter-spacing: 0.22em;
+    text-transform: uppercase;
+  }
+
+  .meta {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 0;
+    border-top: 1px solid var(--rule);
+    padding-top: 22px;
+  }
+  .meta .cell {
+    border-right: 1px solid var(--rule);
+    padding-right: 18px;
+  }
+  .meta .cell:last-child { border-right: none; }
+  .meta .num {
+    font-family: 'Fraunces', serif;
+    font-weight: 500;
+    font-size: 42px;
+    line-height: 1;
+    color: var(--ink);
+    letter-spacing: -0.01em;
+  }
+  .meta .num em {
+    font-style: italic;
+    color: var(--accent);
+    font-weight: 500;
+  }
+  .meta .num .gold {
+    color: var(--gold);
+    text-shadow: 0 0 18px rgba(255,200,61,0.45);
+  }
+  .meta .lbl {
+    margin-top: 10px;
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 10.5px;
+    letter-spacing: 0.18em;
+    color: var(--muted);
+    text-transform: uppercase;
+    line-height: 1.4;
+  }
+
+  /* --------- RIGHT: GitHub mock --------- */
+  .right {
+    position: relative;
+  }
+  .stage {
+    position: absolute;
+    inset: 0;
+  }
+
+  .window {
+    position: absolute;
+    top: 130px;
+    left: 0;
+    right: 0;
+    background: var(--gh-bg);
+    color: var(--gh-fg);
+    border-radius: 16px;
+    overflow: hidden;
+    border: 1px solid var(--gh-border);
+    box-shadow:
+      0 1px 0 rgba(255,255,255,0.04) inset,
+      0 24px 60px rgba(0,0,0,0.55),
+      0 6px 18px rgba(0,0,0,0.45);
+    transform: rotate(-1deg);
+  }
+  .winbar {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 12px 16px;
+    border-bottom: 1px solid var(--gh-border);
+    background: linear-gradient(180deg, #15191e, #0f1216);
+  }
+  .winbar .dots { display: flex; gap: 6px; margin-right: 8px; }
+  .winbar .dot { width: 12px; height: 12px; border-radius: 50%; background: #3a3a3a; }
+  .winbar .dot.r { background: #ff5f57; }
+  .winbar .dot.y { background: #febc2e; }
+  .winbar .dot.g { background: #28c840; }
+  .winbar .urlbar {
+    flex: 1;
+    background: #161b22;
+    border: 1px solid var(--gh-border);
+    border-radius: 8px;
+    padding: 6px 12px;
+    color: var(--gh-muted);
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 12px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+  .winbar .urlbar .lock { color: #6e7681; font-size: 10px; }
+  .winbar .urlbar b { color: var(--gh-fg); font-weight: 500; }
+
+  .ghnav {
+    display: flex;
+    align-items: center;
+    gap: 18px;
+    padding: 10px 22px;
+    border-bottom: 1px solid var(--gh-border);
+    background: var(--gh-bg);
+    font-size: 13px;
+    color: var(--gh-fg);
+  }
+  .ghnav .logo { width: 22px; height: 22px; }
+  .ghnav .crumbs { color: var(--gh-fg); font-weight: 500; }
+  .ghnav .crumbs .slash { color: var(--gh-muted); margin: 0 6px; font-weight: 300; }
+  .ghnav .crumbs .repo { color: var(--gh-link); }
+  .ghnav .private {
+    margin-left: 8px;
+    font-size: 11px;
+    color: var(--gh-muted);
+    border: 1px solid var(--gh-border);
+    border-radius: 999px;
+    padding: 2px 10px;
+  }
+
+  .ghhead {
+    padding: 22px 26px 6px;
+  }
+  .ghhead .row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    flex-wrap: nowrap;
+  }
+  .ghhead .row > .repotitle { min-width: 0; flex-shrink: 1; }
+  .repotitle {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 18px;
+    font-weight: 500;
+    white-space: nowrap;
+  }
+  .repotitle .icon { color: var(--gh-muted); }
+  .repotitle .org { color: var(--gh-link); }
+  .repotitle .name { color: var(--gh-link); font-weight: 600; }
+  .repotitle .sep { color: var(--gh-muted); font-weight: 300; }
+  .repotitle .badge {
+    margin-left: 10px;
+    border: 1px solid var(--gh-border);
+    color: var(--gh-muted);
+    border-radius: 999px;
+    padding: 2px 10px;
+    font-size: 11px;
+  }
+
+  .actions {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    flex-shrink: 0;
+  }
+  .ghbtn {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    background: var(--gh-btn);
+    border: 1px solid var(--gh-border);
+    color: var(--gh-fg);
+    padding: 5px 10px;
+    border-radius: 6px;
+    font-size: 12px;
+    font-weight: 500;
+    white-space: nowrap;
+    line-height: 1.2;
+  }
+  .ghbtn .icon { color: var(--gh-muted); width: 14px; height: 14px; }
+  .ghbtn .count {
+    margin-left: 4px;
+    padding: 1px 6px;
+    background: var(--gh-pill);
+    border-radius: 999px;
+    color: var(--gh-fg);
+    font-weight: 500;
+    font-size: 11px;
+  }
+  .ghbtn .caret {
+    width: 0; height: 0;
+    border-left: 4px solid transparent;
+    border-right: 4px solid transparent;
+    border-top: 5px solid var(--gh-muted);
+    margin-left: 6px;
+  }
+
+  .star-wrap {
+    position: relative;
+    padding: 6px;
+    margin: -6px;
+    border: 2px dashed var(--accent-2);
+    border-radius: 12px;
+    box-shadow:
+      0 0 0 4px rgba(232,90,44,0.10),
+      0 0 36px rgba(255,200,61,0.18);
+    background: rgba(232,90,44,0.04);
+  }
+  .ghbtn.star {
+    background: linear-gradient(180deg, #1c1f25, #14171c);
+    border-color: var(--gh-border);
+  }
+  .ghbtn.star .icon { color: var(--gold); }
+  .ghbtn.star .label { color: var(--gh-fg); font-weight: 600; }
+
+  /* CTA arrow & note pointing at the star */
+  .point {
+    position: absolute;
+    z-index: 10;
+    pointer-events: none;
+  }
+  .point .note {
+    font-family: 'Fraunces', serif;
+    font-style: italic;
+    font-weight: 500;
+    font-size: 28px;
+    color: var(--accent);
+    line-height: 1.15;
+    text-shadow: 0 6px 18px rgba(0,0,0,0.55);
+  }
+  .point .note .gold { color: var(--gold); }
+  .point .sub {
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 11px;
+    letter-spacing: 0.22em;
+    color: var(--muted);
+    text-transform: uppercase;
+    margin-top: 8px;
+  }
+  .point.tap {
+    top: -20px;
+    right: 60px;
+    text-align: right;
+  }
+  .arrow-svg {
+    position: absolute;
+    overflow: visible;
+    z-index: 9;
+    pointer-events: none;
+  }
+
+  /* floating sparkle */
+  .sparkle {
+    position: absolute;
+    color: var(--gold);
+    text-shadow: 0 0 16px rgba(255,200,61,0.6);
+    font-size: 22px;
+  }
+
+  .stamp {
+    position: absolute;
+    bottom: 30px;
+    right: 0;
+    width: 110px;
+    height: 110px;
+    border-radius: 50%;
+    background: radial-gradient(circle at 35% 30%, #ffe27a, var(--gold-2) 80%);
+    color: #2a1a05;
+    font-family: 'Fraunces', serif;
+    font-style: italic;
+    font-weight: 700;
+    font-size: 14px;
+    line-height: 1.15;
+    text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transform: rotate(8deg);
+    box-shadow: 0 14px 30px rgba(255,176,0,0.45);
+    z-index: 5;
+  }
+  .stamp .big { font-size: 28px; line-height: 1; display: block; margin-bottom: 2px; }
+
+  /* secondary stat strip below window */
+  .ghbody {
+    display: grid;
+    grid-template-columns: 1fr 220px;
+    gap: 0;
+    padding: 18px 26px 22px;
+    border-top: 1px solid var(--gh-border);
+    background: var(--gh-bg);
+  }
+  .ghbody .desc {
+    color: var(--gh-fg);
+    font-size: 13px;
+    line-height: 1.55;
+  }
+  .ghbody .desc .em { color: var(--gh-link); }
+  .ghbody .topics {
+    margin-top: 10px;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+  }
+  .topic {
+    font-size: 11px;
+    color: var(--gh-tag-fg);
+    background: var(--gh-tag-bg);
+    padding: 2px 10px;
+    border-radius: 999px;
+  }
+  .ghbody .stats {
+    font-size: 12px;
+    color: var(--gh-muted);
+    text-align: right;
+  }
+  .ghbody .stats .row {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 6px;
+    margin-bottom: 6px;
+  }
+  .ghbody .stats .row .icon { color: var(--gh-muted); }
+  .ghbody .stats .row b { color: var(--gh-fg); font-weight: 500; }
+
+  footer {
+    margin-top: 48px;
+    padding-top: 22px;
+    border-top: 1px solid var(--rule);
+    display: grid;
+    grid-template-columns: 1fr auto 1fr;
+    align-items: center;
+  }
+  footer .l { text-align: left; }
+  footer .r { text-align: right; }
+  footer .c {
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 11px;
+    letter-spacing: 0.28em;
+    color: var(--muted);
+    text-transform: uppercase;
+  }
+</style>
+</head>
+<body>
+  <header>
+    <div class='mono l'>Open Design · Community · 2026 Edition</div>
+    <div class='center'><span class='star'>★</span>open.design</div>
+    <div class='mono r'>Cover · 03 / 08 · Star Us</div>
+  </header>
+
+  <main>
+    <section class='left'>
+      <div>
+        <div class='eyebrow'>
+          <span class='pill gold'>★ STAR US</span>
+          <span class='pill alt'>Open Source · Apache 2.0</span>
+        </div>
+        <h1>
+          If this saved<br/>
+          you <em>thirty</em><br/>
+          minutes,<br/>
+          give it a <span class='star-glyph'>★</span>.
+        </h1>
+        <p class='lede'>
+          Open Design is built and maintained in the open. <b>Stars don't pay rent —</b>
+          but they tell the next designer, agent, and contributor that this experiment
+          is worth their attention. One click, three seconds, real signal.
+        </p>
+
+        <div class='url-card'>
+          <span class='arrow'>· DROP BY →</span>
+          <span class='url'>github.com/<b>nexu-io/open-design</b></span>
+          <span class='copybtn'>· COPY</span>
+        </div>
+      </div>
+
+      <div class='meta'>
+        <div class='cell'>
+          <div class='num'>71</div>
+          <div class='lbl'>Design<br/>Systems</div>
+        </div>
+        <div class='cell'>
+          <div class='num'>19</div>
+          <div class='lbl'>Composable<br/>Skills</div>
+        </div>
+        <div class='cell'>
+          <div class='num'>06</div>
+          <div class='lbl'>Coding<br/>Agents</div>
+        </div>
+        <div class='cell'>
+          <div class='num'><span class='gold'>★</span></div>
+          <div class='lbl'>One click =<br/>one signal</div>
+        </div>
+      </div>
+    </section>
+
+    <!-- RIGHT: stylized GitHub repo header -->
+    <section class='right'>
+      <div class='stage'>
+
+        <!-- Pointing note above the star -->
+        <div class='point tap'>
+          <div class='note'>Tap the <span class='gold'>★</span> Star<br/>top-right.</div>
+          <div class='sub'>· three seconds · one click ·</div>
+        </div>
+
+        <!-- arc arrow from the note down to the Star button -->
+        <svg class='arrow-svg' style='top:30px; right:30px; width:200px; height:200px;' viewBox='0 0 200 200' fill='none'>
+          <path d='M 30 60 C 60 90, 120 120, 168 168' stroke='#f0833f' stroke-width='2.5' stroke-linecap='round' fill='none' stroke-dasharray='2 8'/>
+          <path d='M 152 156 L 168 170 L 162 150' stroke='#f0833f' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/>
+        </svg>
+
+        <!-- sparkles -->
+        <span class='sparkle' style='top:200px; right:30px; font-size:18px;'>✦</span>
+        <span class='sparkle' style='top:260px; right:120px; font-size:14px; opacity:.7;'>✦</span>
+        <span class='sparkle' style='top:150px; right:240px; font-size:12px; opacity:.55;'>✦</span>
+
+        <div class='window'>
+          <div class='winbar'>
+            <div class='dots'>
+              <span class='dot r'></span><span class='dot y'></span><span class='dot g'></span>
+            </div>
+            <div class='urlbar'>
+              <span class='lock'>🔒</span>
+              <span>github.com/<b>nexu-io/open-design</b></span>
+            </div>
+          </div>
+
+          <div class='ghnav'>
+            <svg class='logo' viewBox='0 0 16 16' fill='currentColor'>
+              <path d='M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z'/>
+            </svg>
+            <div class='crumbs'>
+              <span class='org'>nexu-io</span>
+              <span class='slash'>/</span>
+              <span class='repo'>open-design</span>
+            </div>
+            <span class='private'>Public</span>
+          </div>
+
+          <div class='ghhead'>
+            <div class='row'>
+              <div class='repotitle'>
+                <svg class='icon' width='18' height='18' viewBox='0 0 16 16' fill='currentColor'>
+                  <path fill-rule='evenodd' d='M2 2.5A2.5 2.5 0 0 1 4.5 0h8.75a.75.75 0 0 1 .75.75v12.5a.75.75 0 0 1-.75.75h-2.5a.75.75 0 0 1 0-1.5h1.75v-2h-8a1 1 0 0 0-.692 1.72.75.75 0 0 1-1.034 1.084A2.5 2.5 0 0 1 2 11.5v-9zm10.5-1V9h-8c-.356 0-.694.074-1 .208V2.5a1 1 0 0 1 1-1h8zM5 12.25v3.25a.25.25 0 0 0 .4.2l1.45-1.087a.25.25 0 0 1 .3 0L8.6 15.7a.25.25 0 0 0 .4-.2v-3.25a.25.25 0 0 0-.25-.25h-3.5a.25.25 0 0 0-.25.25z'/>
+                </svg>
+                <span class='org'>nexu-io</span>
+                <span class='sep'>/</span>
+                <span class='name'>open-design</span>
+                <span class='badge'>Public</span>
+              </div>
+
+              <div class='actions'>
+                <span class='ghbtn'>
+                  <svg class='icon' viewBox='0 0 16 16' fill='currentColor'><path d='M11.013 1.427a1.75 1.75 0 0 1 2.474 0l1.086 1.086a1.75 1.75 0 0 1 0 2.474l-8.61 8.61c-.21.21-.47.364-.756.445l-3.251.93a.75.75 0 0 1-.927-.928l.929-3.25c.081-.286.235-.547.445-.756l8.61-8.61Z'/></svg>
+                  <span>Edit Pins</span>
+                  <span class='caret'></span>
+                </span>
+                <span class='ghbtn'>
+                  <svg class='icon' viewBox='0 0 16 16' fill='currentColor'><path d='M8 2c1.981 0 3.671.992 4.933 2.078 1.27 1.091 2.187 2.345 2.637 3.023a1.62 1.62 0 0 1 0 1.798c-.45.678-1.367 1.932-2.637 3.023C11.67 13.008 9.981 14 8 14c-1.981 0-3.671-.992-4.933-2.078C1.797 10.83.88 9.576.43 8.898a1.62 1.62 0 0 1 0-1.798c.45-.678 1.367-1.932 2.637-3.023C4.33 2.992 6.019 2 8 2ZM1.679 7.932a.12.12 0 0 0 0 .136c.411.622 1.241 1.75 2.366 2.717C5.176 11.758 6.527 12.5 8 12.5c1.473 0 2.825-.742 3.955-1.715 1.124-.967 1.954-2.096 2.366-2.717a.12.12 0 0 0 0-.136c-.412-.621-1.242-1.75-2.366-2.717C10.824 4.242 9.473 3.5 8 3.5c-1.473 0-2.825.742-3.955 1.715-1.124.967-1.954 2.096-2.366 2.717ZM8 10a2 2 0 1 1-.001-3.999A2 2 0 0 1 8 10Z'/></svg>
+                  <span>Watch</span>
+                  <span class='count'>0</span>
+                  <span class='caret'></span>
+                </span>
+                <span class='ghbtn'>
+                  <svg class='icon' viewBox='0 0 16 16' fill='currentColor'><path d='M5 5.372v.878c0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75v-.878a2.25 2.25 0 1 1 1.5 0v.878a2.25 2.25 0 0 1-2.25 2.25h-1.5v2.128a2.251 2.251 0 1 1-1.5 0V8.5h-1.5A2.25 2.25 0 0 1 3.5 6.25v-.878a2.25 2.25 0 1 1 1.5 0ZM5 3.25a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Zm6.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm-3 8.75a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Z'/></svg>
+                  <span>Fork</span>
+                  <span class='count'>0</span>
+                  <span class='caret'></span>
+                </span>
+                <span class='star-wrap'>
+                  <span class='ghbtn star'>
+                    <svg class='icon' viewBox='0 0 16 16' fill='currentColor'><path d='M8 .25a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.751.751 0 0 1-1.088.791L8 12.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.818 6.374a.75.75 0 0 1 .416-1.28l4.21-.611L7.327.668A.75.75 0 0 1 8 .25Z'/></svg>
+                    <span class='label'>Star</span>
+                    <span class='count'>1</span>
+                    <span class='caret'></span>
+                  </span>
+                </span>
+              </div>
+            </div>
+          </div>
+
+          <div class='ghbody'>
+            <div>
+              <div class='desc'>
+                <span class='em'>★</span> Local-first open replica of Anthropic's <b>Claude Design</b>.
+                ⚡ 19 Skills · ✶ 71 brand-grade Design Systems · ⛁ sandboxed preview ·
+                ⇩ HTML / PDF / PPTX export. Runs on Claude Code · Codex · Cursor · Gemini CLI · OpenCode · Qwen.
+              </div>
+              <div class='topics'>
+                <span class='topic'>react</span>
+                <span class='topic'>design</span>
+                <span class='topic'>design-systems</span>
+                <span class='topic'>typescript</span>
+                <span class='topic'>skills</span>
+                <span class='topic'>cursor</span>
+                <span class='topic'>local-first</span>
+                <span class='topic'>byok</span>
+                <span class='topic'>claude</span>
+                <span class='topic'>ai-agents</span>
+              </div>
+            </div>
+            <div class='stats'>
+              <div class='row'>
+                <span>Apache 2.0</span>
+                <svg class='icon' width='14' height='14' viewBox='0 0 16 16' fill='currentColor'><path d='M8.75.75V2h.985c.304 0 .603.08.867.231l1.29.736c.038.022.08.033.124.033h2.234a.75.75 0 0 1 0 1.5h-.427l2.111 4.692a.75.75 0 0 1-.154.838l-.53-.53.529.531-.001.002-.002.002-.006.006-.006.005-.01.01-.045.04c-.21.176-.441.327-.686.45C14.556 10.78 13.88 11 13 11a4.498 4.498 0 0 1-2.023-.454 3.544 3.544 0 0 1-.686-.45l-.045-.04-.016-.015-.006-.006-.004-.004v-.001a.75.75 0 0 1-.154-.838L12.178 4.5h-.162c-.305 0-.604-.079-.868-.231l-1.29-.736a.245.245 0 0 0-.124-.033H8.75V13h2.5a.75.75 0 0 1 0 1.5h-6.5a.75.75 0 0 1 0-1.5h2.5V3.5h-.984a.245.245 0 0 0-.124.033l-1.289.737c-.265.15-.564.23-.869.23h-.162l2.112 4.692a.75.75 0 0 1-.154.838l-.53-.53.529.531-.001.002-.002.002-.006.006-.016.015-.045.04c-.21.176-.441.327-.686.45C4.556 10.78 3.88 11 3 11a4.498 4.498 0 0 1-2.023-.454 3.544 3.544 0 0 1-.686-.45l-.045-.04-.016-.015-.006-.006-.004-.004v-.001a.75.75 0 0 1-.154-.838L2.178 4.5H1.75a.75.75 0 0 1 0-1.5h2.234a.249.249 0 0 0 .125-.033l1.288-.737c.265-.15.564-.23.869-.23h.984V.75a.75.75 0 0 1 1.5 0Z'/></svg>
+              </div>
+              <div class='row'><b>3</b> Commits</div>
+              <div class='row'><b>2</b> Branches</div>
+              <div class='row'><b>0</b> Tags</div>
+              <div class='row'><b>0</b> Issues</div>
+              <div class='row' style='color:var(--gold);'>★ <b style='color:var(--gold);'>1</b> Star · be the next</div>
+            </div>
+          </div>
+        </div>
+
+        <div class='stamp'>
+          <span><span class='big'>★</span>STAR<br/>US!</span>
+        </div>
+      </div>
+    </section>
+  </main>
+
+  <footer>
+    <div class='mono l'>Local-first · BYOK · Apache 2.0</div>
+    <div class='c'>· git clone · pnpm install · pnpm dev ·</div>
+    <div class='mono r'>github.com/nexu-io/open-design</div>
+  </footer>
+</body>
+</html>
@@ -11,7 +11,7 @@
  "scripts": {
    "daemon": "node daemon/cli.js --no-open",
    "dev": "vite",
-    "dev:all": "concurrently -k -n daemon,web -c cyan,magenta \"npm:daemon\" \"npm:dev\"",
+    "dev:all": "node scripts/dev-all.mjs",
    "build": "tsc -b && vite build",
    "preview": "vite preview",
    "typecheck": "tsc -b --noEmit",
@@ -0,0 +1,84 @@
+#!/usr/bin/env node
+// Launcher for `npm run dev:all`.
+//
+// Probes for free ports for the daemon (OD_PORT, default 7456) and the Vite
+// dev server (VITE_PORT, default 5173) before spawning `concurrently`, so a
+// stray process holding either port doesn't kill the whole boot. The
+// resolved ports are exported into the child env, which means:
+//   * the daemon's cli.js sees the new OD_PORT and binds to it
+//   * vite.config.ts reads the same OD_PORT and points its /api proxy at
+//     the daemon's actual port
+//   * Vite itself binds to VITE_PORT
+//
+// If a port is busy we walk forward up to PORT_SEARCH_RANGE steps and log
+// the switch so the user notices.
+
+import { spawn } from 'node:child_process';
+import net from 'node:net';
+
+const HOST = '127.0.0.1';
+const PORT_SEARCH_RANGE = 50;
+
+function isPortFree(port, host = HOST) {
+  return new Promise((resolve) => {
+    const server = net.createServer();
+    server.unref();
+    server.once('error', () => resolve(false));
+    server.listen({ port, host, exclusive: true }, () => {
+      server.close(() => resolve(true));
+    });
+  });
+}
+
+async function findFreePort(start, label) {
+  for (let port = start; port < start + PORT_SEARCH_RANGE; port++) {
+    if (await isPortFree(port)) return port;
+  }
+  throw new Error(
+    `[dev:all] could not find a free ${label} port near ${start} (tried ${PORT_SEARCH_RANGE})`,
+  );
+}
+
+const desiredDaemon = Number(process.env.OD_PORT) || 7456;
+const desiredVite = Number(process.env.VITE_PORT) || 5173;
+
+const daemonPort = await findFreePort(desiredDaemon, 'daemon');
+const vitePort = await findFreePort(desiredVite, 'vite');
+
+if (daemonPort !== desiredDaemon) {
+  console.log(
+    `[dev:all] daemon port ${desiredDaemon} is busy, switching to ${daemonPort}`,
+  );
+}
+if (vitePort !== desiredVite) {
+  console.log(
+    `[dev:all] vite port ${desiredVite} is busy, switching to ${vitePort}`,
+  );
+}
+
+const env = {
+  ...process.env,
+  OD_PORT: String(daemonPort),
+  VITE_PORT: String(vitePort),
+};
+
+// We spawn the local `concurrently` bin via shell so Windows .cmd shims
+// resolve correctly. The `npm:daemon` / `npm:dev` shorthand runs the
+// matching package.json scripts, so any future tweak to those scripts is
+// picked up automatically.
+const child = spawn(
+  'concurrently',
+  ['-k', '-n', 'daemon,web', '-c', 'cyan,magenta', 'npm:daemon', 'npm:dev'],
+  { env, stdio: 'inherit', shell: true },
+);
+
+child.on('exit', (code, signal) => {
+  if (signal) process.kill(process.pid, signal);
+  else process.exit(code ?? 0);
+});
+
+for (const sig of ['SIGINT', 'SIGTERM']) {
+  process.on(sig, () => {
+    if (!child.killed) child.kill(sig);
+  });
+}
@@ -313,6 +313,22 @@ Decks regress when each turn re-authors the scale-to-fit logic, the keyboard han

 **You do not write any of that. You do not modify any of that.** Your job is to fill content slots only.

+## Workflow — copy framework first, then fill content
+
+When the user asks for slides, your TodoWrite plan **must** start with "copy the deck framework verbatim" before any content step. The intended order is:
+
+\`\`\`
+1.  Bind the active direction's palette + fonts to :root in the framework
+2.  Copy the canonical skeleton below as index.html (nothing else first)
+3.  Plan the slide arc and theme rhythm (state aloud before writing)
+4.  Add per-deck classes inside the second <style> block
+5.  Replace each <section class="slide"> SLOT with real content
+6.  Self-check (no rewriting framework chrome / @media print / nav script)
+7.  Emit single <artifact>
+\`\`\`
+
+If you find yourself writing \`<style>\` rules for \`.deck-shell\`, \`.deck-stage\`, \`.slide\`, \`.canvas\`, \`fit()\`, \`@media print\`, or a keyboard handler — STOP. The framework already has them. Re-read this directive, then keep going from "fill SLOT content".
+
 ## The contract

 When you start a new deck, your output is a single HTML file built from the canonical skeleton below. **Copy the skeleton verbatim**, including its first \`<style>\` block, the \`.deck-shell\` / \`.deck-stage\` / \`.deck-counter\` / \`.deck-hint\` chrome, and the entire trailing \`<script>\`.
@@ -142,6 +142,8 @@ The standard plan template (adapt the middle steps to the brief):
 - 9.  Emit single <artifact>
 \`\`\`

+**Decks especially — framework first, content second.** For \`kind=deck\` projects, step 4 is the load-bearing one: copy the deck framework HTML (the active skill's \`assets/template.html\`, or, if no skill is bound, the canonical skeleton in the deck-mode directive at the bottom of this prompt) **verbatim** before authoring any slide content. Do NOT write your own scale-to-fit logic, keyboard handler, slide visibility toggle, counter, or print stylesheet — every freeform attempt at this re-introduces the same iframe positioning / scaling bugs we have already fixed in the framework. Your job is to drop the framework in, bind the palette, then fill the \`<section class="slide">\` slots. That's it.
+
 After TodoWrite, immediately update — **mark step 1 \`in_progress\` before starting it, \`completed\` the moment it's done, mark step 2 \`in_progress\`**, etc. Do not batch updates at the end of the turn; the live progress is the point. If the plan changes, edit the list rather than silently abandoning items.

 Step 7 (checklist) and step 8 (critique) are non-negotiable.
@@ -14,11 +14,17 @@
 *      (`assets/template.html`) and references (`references/layouts.md`,
 *      `references/checklist.md`), we inject a hard pre-flight rule above
 *      the skill body so the agent reads them BEFORE writing any code.
- *   4. For decks (skillMode === 'deck'), the deck framework directive
- *      (./deck-framework.ts) is pinned LAST so it overrides any softer
- *      slide-handling wording earlier in the stack — this is the
- *      load-bearing nav / counter / scroll JS / print stylesheet contract
- *      that PDF stitching depends on.
+ *   4. For decks (skillMode === 'deck' OR metadata.kind === 'deck'), the
+ *      deck framework directive (./deck-framework.ts) is pinned LAST so it
+ *      overrides any softer slide-handling wording earlier in the stack —
+ *      this is the load-bearing nav / counter / scroll JS / print
+ *      stylesheet contract that PDF stitching depends on. We also fire on
+ *      the metadata path so deck-kind projects without a bound skill
+ *      (skill_id null) still get a framework, instead of having the agent
+ *      re-author scaling / nav / print logic from scratch each turn. When
+ *      the active skill ships its own seed (skill body references
+ *      `assets/template.html`), we defer to that seed and skip the generic
+ *      skeleton — the skill's framework wins to avoid double-injection.
 *
 * The composed string is what the daemon sees as `systemPrompt` and what
 * the Anthropic path sends as `system`.
@@ -85,7 +91,23 @@ export function composeSystemPrompt({
  // Decks have a load-bearing framework (nav, counter, scroll JS, print
  // stylesheet for PDF stitching). Pin it last so it overrides any softer
  // wording earlier in the stack ("write a script that handles arrows…").
-  if (skillMode === 'deck') {
+  //
+  // We fire on either (a) the active skill is a deck skill OR (b) the
+  // project metadata declares kind=deck. Case (b) catches projects created
+  // without a skill (skill_id null) — without this, a deck-kind project
+  // with no bound skill gets neither a skill seed nor the framework
+  // skeleton, and the agent writes scaling / nav / print logic from scratch
+  // with the same buggy `place-items: center` + transform pattern we keep
+  // having to fix at runtime. Skill seeds (when present) win — they
+  // already define their own opinionated framework (simple-deck's
+  // scroll-snap, guizang-ppt's magazine layout) and re-pinning the generic
+  // skeleton would conflict. The skill-seed path takes over via
+  // `derivePreflight` above, so we only fire the generic skeleton when no
+  // skill seed is on offer.
+  const isDeckProject = skillMode === 'deck' || metadata?.kind === 'deck';
+  const hasSkillSeed =
+    !!skillBody && /assets\/template\.html/.test(skillBody);
+  if (isDeckProject && !hasSkillSeed) {
    parts.push(`\n\n---\n\n${DECK_FRAMEWORK_DIRECTIVE}`);
  }

@@ -16,10 +16,10 @@
 */
 export function buildSrcdoc(
  html: string,
-  options: { deck?: boolean } = {},
+  options: { deck?: boolean } = {}
 ): string {
  const head = html.trimStart().slice(0, 64).toLowerCase();
-  const isFullDoc = head.startsWith('<!doctype') || head.startsWith('<html');
+  const isFullDoc = head.startsWith("<!doctype") || head.startsWith("<html");
  const wrapped = isFullDoc
    ? html
    : `<!doctype html>
@@ -68,8 +68,10 @@ function injectSandboxShim(doc: string): string {
  tryShim('localStorage');
  tryShim('sessionStorage');
 })();</script>`;
-  if (/<head[^>]*>/i.test(doc)) return doc.replace(/<head[^>]*>/i, (m) => `${m}${shim}`);
-  if (/<body[^>]*>/i.test(doc)) return doc.replace(/<body[^>]*>/i, (m) => `${m}${shim}`);
+  if (/<head[^>]*>/i.test(doc))
+    return doc.replace(/<head[^>]*>/i, (m) => `${m}${shim}`);
+  if (/<body[^>]*>/i.test(doc))
+    return doc.replace(/<body[^>]*>/i, (m) => `${m}${shim}`);
  return shim + doc;
 }

@@ -101,7 +103,7 @@ function injectDeckBridge(doc: string): string {
 .stage, .deck-stage, .deck-shell { place-content: center !important; }
 </style>`;
  const docWithStyle = /<\/head>/i.test(doc)
-    ? doc.replace(/<\/head>/i, styleFix + '</head>')
+    ? doc.replace(/<\/head>/i, styleFix + "</head>")
    : /<head[^>]*>/i.test(doc)
    ? doc.replace(/<head[^>]*>/i, (m) => m + styleFix)
    : styleFix + doc;
@@ -265,6 +267,7 @@ function injectDeckBridge(doc: string): string {
  }
  observeSlides();
 })();</script>`;
-  if (/<\/body>/i.test(doc)) return doc.replace(/<\/body>/i, `${script}</body>`);
+  if (/<\/body>/i.test(doc))
+    return doc.replace(/<\/body>/i, `${script}</body>`);
  return doc + script;
 }
@@ -2,11 +2,12 @@ import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';

 const DAEMON_PORT = Number(process.env.OD_PORT) || 7456;
+const VITE_PORT = Number(process.env.VITE_PORT) || 5173;

 export default defineConfig({
  plugins: [react()],
  server: {
-    port: 5173,
+    port: VITE_PORT,
    proxy: {
      '/api': {
        target: `http://127.0.0.1:${DAEMON_PORT}`,
Author	SHA1	Message	Date
pftom	89d92d8ae0	feat(dev): auto-switch ports on dev:all when defaults are busy Adds a small launcher (scripts/dev-all.mjs) that probes free ports for the daemon (OD_PORT, default 7456) and Vite (VITE_PORT, default 5173) before invoking concurrently, so a stray process holding either port no longer breaks the boot. The resolved ports are exported into the child env; vite.config.ts now reads VITE_PORT to keep its dev server and /api proxy aligned with the daemon's actual port. Made-with: Cursor	2026-04-28 22:19:42 +08:00
pftom	5a63d09f2f	Enhance README and add star promotion assets - Added a "Star us" section in both English and Chinese README files to encourage users to star the project on GitHub. - Included a new image asset for the star promotion. - Introduced a new HTML file for a dedicated star promotion page. - Updated .gitignore to exclude new cursor-related files.	2026-04-28 20:32:39 +08:00
pftom	19b5272f38	Merge branch 'main' into feat/optimize-naming	2026-04-28 16:23:44 +08:00
pftom	1337907df3	Merge branch 'main' of github.com:nexu-io/open-design	2026-04-28 16:20:14 +08:00
pftom	490bbe29c9	Merge branch 'feat/optimize-naming' of github.com:nexu-io/open-design into feat/optimize-naming	2026-04-28 16:16:51 +08:00
pftom	0eef347336	Update README and documentation for deck framework directives - Clarified DECK_FRAMEWORK_DIRECTIVE description in both English and Chinese README files to specify conditions for deck kind without a skill seed. - Added detailed workflow instructions in deck-framework.ts to emphasize the importance of copying the framework before adding content. - Enhanced discovery.ts to reinforce the framework-first approach for deck projects. - Updated system.ts to ensure proper handling of deck projects with and without bound skills, preventing re-authorship of scaling and navigation logic.	2026-04-28 16:11:46 +08:00
pftom	243e611eeb	Update README and documentation for deck framework directives - Clarified DECK_FRAMEWORK_DIRECTIVE description in both English and Chinese README files to specify conditions for deck kind without a skill seed. - Added detailed workflow instructions in deck-framework.ts to emphasize the importance of copying the framework before adding content. - Enhanced discovery.ts to reinforce the framework-first approach for deck projects. - Updated system.ts to ensure proper handling of deck projects with and without bound skills, preventing re-authorship of scaling and navigation logic.	2026-04-28 16:07:52 +08:00
pftom	985238403f	Add contributing guidelines in English and Chinese - Introduced CONTRIBUTING.md and CONTRIBUTING.zh-CN.md to provide clear instructions for contributors. - Outlined contribution types, local setup instructions, and merging criteria for skills and design systems. - Enhanced README files to reference the new contributing guidelines.	2026-04-28 16:02:17 +08:00
pftom	af3f96379a	Refactor project name from "Open Claude Design" to "Open Design" - Updated project name in package.json, package-lock.json, and README files. - Changed CLI commands and references from "ocd" to "od". - Adjusted file structure references in documentation and code to reflect new naming conventions. - Enhanced .gitignore to include new runtime data files. - Updated metadata in LICENSE file to match new project name.	2026-04-28 14:48:45 +08:00