Refactor project name from "Open Claude Design" to "Open Design" (#1)

* 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. * 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:03:35 +08:00
parent a98096a042
commit 6f6bf31dd2
131 changed files with 2560 additions and 650 deletions
@@ -14,7 +14,7 @@ triggers:
  - "app mockup"
  - "移动端"
  - "手机 app"
-ocd:
+od:
  mode: prototype
  platform: mobile
  scenario: design
@@ -1,6 +1,6 @@
 <!doctype html>
 <!--
-  OCD mobile-app seed.
+  OD mobile-app seed.

  A pixel-accurate iPhone 15 Pro frame (390 × 844) with Dynamic Island,
  status-bar SVG icons, and home indicator — drawn entirely in HTML/SVG, no
@@ -361,7 +361,7 @@
  <div class="stage">
    <div class="caption"><strong>[REPLACE] App</strong> · [REPLACE] Screen name</div>

-    <div class="device" data-ocd-id="device">
+    <div class="device" data-od-id="device">
      <span class="btn-rail left-1"  aria-hidden></span>
      <span class="btn-rail left-2"  aria-hidden></span>
      <span class="btn-rail left-3"  aria-hidden></span>
@@ -394,8 +394,8 @@
        </div>

        <!-- ─── Scrollable content (paste a layout from references/layouts.md HERE) ─── -->
-        <main class="content" data-ocd-id="content">
-          <div class="header" data-ocd-id="header">
+        <main class="content" data-od-id="content">
+          <div class="header" data-od-id="header">
            <div>
              <p class="greeting">Tuesday · April 22</p>
              <h1>[REPLACE] Hi there.</h1>
@@ -405,7 +405,7 @@
            </button>
          </div>

-          <div class="pad stack" data-ocd-id="empty-slot">
+          <div class="pad stack" data-od-id="empty-slot">
            <div class="card" style="text-align: center; padding: 28px 20px;">
              <p class="meta" style="margin: 0 0 6px;">PASTE A LAYOUT FROM</p>
              <p class="h3" style="margin: 0 0 6px;">references/layouts.md</p>
@@ -415,7 +415,7 @@
        </main>

        <!-- ─── Tab bar (drop if the screen kind doesn't have one) ─── -->
-        <nav class="tabbar" style="--tabs: 4;" data-ocd-id="tabbar">
+        <nav class="tabbar" style="--tabs: 4;" data-od-id="tabbar">
          <a class="tab active">
            <svg viewBox="0 0 24 24"><path d="M3 12 12 3l9 9"/><path d="M5 10v10h14V10"/></svg>
            Home
@@ -50,14 +50,14 @@
  </style>
 </head>
 <body>
-  <div class="frame" data-ocd-id="frame">
+  <div class="frame" data-od-id="frame">
    <div class="screen">
      <div class="status"><span>9:41</span><span class="right">·· 5G · 100%</span></div>
-      <div class="header" data-ocd-id="header">
+      <div class="header" data-od-id="header">
        <p class="greeting">Tuesday · April 22</p>
        <h1>Two pomodoros to lunch.</h1>
      </div>
-      <div class="timer-card" data-ocd-id="timer">
+      <div class="timer-card" data-od-id="timer">
        <p class="label">Focus session</p>
        <div class="countdown">15:42</div>
        <div class="progress"><span></span></div>
@@ -66,7 +66,7 @@
          <button class="primary">Pause</button>
        </div>
      </div>
-      <div class="section" data-ocd-id="stats">
+      <div class="section" data-od-id="stats">
        <p class="label">Today</p>
        <div class="stats">
          <div class="stat"><div class="v">3</div><div class="l">Sessions</div></div>
@@ -74,13 +74,13 @@
          <div class="stat"><div class="v">2</div><div class="l">Tasks done</div></div>
        </div>
      </div>
-      <div class="tasks" data-ocd-id="tasks">
+      <div class="tasks" data-od-id="tasks">
        <p class="section label" style="padding: 0;">Up next</p>
        <div class="task done"><div class="check"></div><div class="body"><div class="title">Review Q2 OKRs</div><div class="meta">25m · completed</div></div></div>
        <div class="task"><div class="check"></div><div class="body"><div class="title">Draft sync-engine post</div><div class="meta">2 sessions estimated</div></div></div>
        <div class="task"><div class="check"></div><div class="body"><div class="title">1:1 prep with Mira</div><div class="meta">1 session</div></div></div>
      </div>
-      <nav class="tabbar" data-ocd-id="tabbar">
+      <nav class="tabbar" data-od-id="tabbar">
        <div class="tab active"><div class="icon">⏱</div>Focus</div>
        <div class="tab"><div class="icon">✓</div>Tasks</div>
        <div class="tab"><div class="icon">📊</div>Stats</div>
@@ -11,11 +11,11 @@ Run this before emitting `<artifact>`. P0 must pass.
 - [ ] **Tap targets ≥ 44px tall.** The seed's `.btn-primary` (48px), `.tab` (~50px), `.icon-btn` (36px ≥ touch with padding), `.list-row` (≥48px with padding) all pass. Don't ship a button under 44px.
 - [ ] **Body text ≥ 14px.** `--fs-body: 15px` already enforces this on most copy. List-row sub text uses 13px max — that's the floor.
 - [ ] **One accent, used at most twice on the screen.** Typically: one active tab + one CTA, OR one accent card + one tab. Never three.
- [ ] **No external image URLs.** Use the `.ph-img` placeholder class. External CDN images break the OCD preview iframe and look fake when they 404.
+- [ ] **No external image URLs.** Use the `.ph-img` placeholder class. External CDN images break the OD preview iframe and look fake when they 404.
 - [ ] **Tab bar matches the screen kind.** Onboarding / detail / checkout: drop the `<nav class="tabbar">` entirely. Feed / focus / profile: keep it.
 - [ ] **Display headlines use `var(--font-display)` (serif).** The seed binds this via `.h1`, `.h2`, `.header h1`. Don't override headings to system-sans — it instantly looks like a stock template.
 - [ ] **No emoji icons in the UI.** SVG monoline only. Emoji in copy is fine ("9:41 ☀️ Tuesday" is not, but "Sunny day in Berlin" is).
- [ ] **`data-ocd-id` on the device, content, header, and any major sections.**
+- [ ] **`data-od-id` on the device, content, header, and any major sections.**

 ## P1 — should pass

@@ -21,7 +21,7 @@ If you reach for a class not on this list, define it in the seed's `<style>` fir
 Top: greeting + title. Body: 4–6 list rows, hairline-separated. Tab bar: yes.

 ```html
-<div class="header" data-ocd-id="header">
+<div class="header" data-od-id="header">
  <div>
    <p class="greeting">Tuesday · April 22</p>
    <h1>Inbox</h1>
@@ -31,7 +31,7 @@ Top: greeting + title. Body: 4–6 list rows, hairline-separated. Tab bar: yes.
  </button>
 </div>

-<section class="pad" data-ocd-id="filters" style="margin-bottom: 8px;">
+<section class="pad" data-od-id="filters" style="margin-bottom: 8px;">
  <div class="row" style="overflow-x: auto; padding-bottom: 4px;">
    <span class="pill">All · 14</span>
    <span class="tag">Mentions</span>
@@ -40,7 +40,7 @@ Top: greeting + title. Body: 4–6 list rows, hairline-separated. Tab bar: yes.
  </div>
 </section>

-<section class="pad" data-ocd-id="feed">
+<section class="pad" data-od-id="feed">
  <div class="list-row">
    <div class="avatar"></div>
    <div class="body">
@@ -81,21 +81,21 @@ Top: greeting + title. Body: 4–6 list rows, hairline-separated. Tab bar: yes.
 Hero image up top, eyebrow + title + meta, body text, primary action floating at the bottom. Tab bar: no.

 ```html
-<div class="ph-img wide" style="border-radius: 0; aspect-ratio: 4/3;" data-ocd-id="hero">[ Hero image ]</div>
+<div class="ph-img wide" style="border-radius: 0; aspect-ratio: 4/3;" data-od-id="hero">[ Hero image ]</div>

-<section class="pad" style="padding-top: 18px;" data-ocd-id="meta">
+<section class="pad" style="padding-top: 18px;" data-od-id="meta">
  <span class="pill">Studio session</span>
  <h1 class="h2" style="margin: 10px 0 6px;">Filebase v3 — what we shipped, what we cut.</h1>
  <p class="meta">Mira Hassan · April 22 · 9 min read</p>
 </section>

-<section class="pad stack" style="margin-top: 18px; gap: 14px;" data-ocd-id="body">
+<section class="pad stack" style="margin-top: 18px; gap: 14px;" data-od-id="body">
  <p>The biggest unlock in v3 was the new content-defined chunker. On Final Cut projects, post-edit re-uploads dropped 38× — from full multi-GB pushes to the few hundred KB that actually changed.</p>
  <p>What we cut: per-folder compression. It looked great on benchmarks; on real footage it was slower than no compression at all because the chunker was already doing the dedup work.</p>
  <p>Next quarter: dual-region replication on R2 + S3, rolling out to Enterprise first.</p>
 </section>

-<section class="pad" style="padding-top: 24px; padding-bottom: 8px;" data-ocd-id="cta">
+<section class="pad" style="padding-top: 24px; padding-bottom: 8px;" data-od-id="cta">
  <button class="btn-primary">Save to library</button>
 </section>
 ```
@@ -105,7 +105,7 @@ Hero image up top, eyebrow + title + meta, body text, primary action floating at
 Illustration block + headline + subhead + paginator + primary CTA. Tab bar: no. Status bar still visible.

 ```html
-<section class="pad stack" style="height: 100%; padding-top: 24px; padding-bottom: 24px; gap: 24px;" data-ocd-id="onboarding">
+<section class="pad stack" style="height: 100%; padding-top: 24px; padding-bottom: 24px; gap: 24px;" data-od-id="onboarding">
  <div class="ph-img square" style="aspect-ratio: 1/1; max-width: 240px; margin: 0 auto;">[ Illustration ]</div>

  <div style="text-align: center;">
@@ -136,7 +136,7 @@ Illustration block + headline + subhead + paginator + primary CTA. Tab bar: no.
 Avatar + name + meta row; stat row; tabbed content underneath. Tab bar: yes (often the surrounding app's tabs).

 ```html
-<section class="pad" style="padding-top: 8px;" data-ocd-id="head">
+<section class="pad" style="padding-top: 8px;" data-od-id="head">
  <div class="row" style="gap: 16px;">
    <div class="avatar" style="width: 64px; height: 64px;"></div>
    <div>
@@ -150,7 +150,7 @@ Avatar + name + meta row; stat row; tabbed content underneath. Tab bar: yes (oft
  </div>
 </section>

-<section class="pad" data-ocd-id="stats" style="margin-top: 18px;">
+<section class="pad" data-od-id="stats" style="margin-top: 18px;">
  <div class="grid-3">
    <div class="card flat" style="text-align: center;">
      <div class="num" style="font-size: 22px; letter-spacing: -0.02em;">218</div>
@@ -167,7 +167,7 @@ Avatar + name + meta row; stat row; tabbed content underneath. Tab bar: yes (oft
  </div>
 </section>

-<section class="pad" data-ocd-id="tabs" style="margin-top: 12px;">
+<section class="pad" data-od-id="tabs" style="margin-top: 12px;">
  <div class="row" style="border-bottom: 1px solid var(--border); gap: 24px;">
    <span style="padding: 12px 0; border-bottom: 2px solid var(--accent); color: var(--fg); font-weight: 500; font-size: 14px;">Posts</span>
    <span style="padding: 12px 0; color: var(--muted); font-size: 14px;">Replies</span>
@@ -175,7 +175,7 @@ Avatar + name + meta row; stat row; tabbed content underneath. Tab bar: yes (oft
  </div>
 </section>

-<section class="pad" data-ocd-id="post-list" style="margin-top: 4px;">
+<section class="pad" data-od-id="post-list" style="margin-top: 4px;">
  <div class="list-row" style="grid-template-columns: 1fr;">
    <div class="body">
      <div class="title">"Bandwidth pricing went up 4× — sync engine choice is no longer cosmetic."</div>
@@ -196,11 +196,11 @@ Avatar + name + meta row; stat row; tabbed content underneath. Tab bar: yes (oft
 Stacked card sections (item summary → details → totals), bottom-fixed CTA. Tab bar: no.

 ```html
-<section class="pad" style="padding-top: 12px;" data-ocd-id="title">
+<section class="pad" style="padding-top: 12px;" data-od-id="title">
  <h1 class="h2">Confirm order</h1>
 </section>

-<section class="pad" data-ocd-id="item">
+<section class="pad" data-od-id="item">
  <div class="card row" style="gap: 14px; align-items: flex-start;">
    <div class="ph-img square" style="width: 64px; height: 64px; aspect-ratio: 1; border-radius: 10px;"></div>
    <div style="flex: 1;">
@@ -211,7 +211,7 @@ Stacked card sections (item summary → details → totals), bottom-fixed CTA. T
  </div>
 </section>

-<section class="pad stack" data-ocd-id="details" style="margin-top: 14px; gap: 10px;">
+<section class="pad stack" data-od-id="details" style="margin-top: 14px; gap: 10px;">
  <div class="card flat row-between">
    <span>Seats</span>
    <span class="num">40</span>
@@ -226,14 +226,14 @@ Stacked card sections (item summary → details → totals), bottom-fixed CTA. T
  </div>
 </section>

-<section class="pad" data-ocd-id="totals" style="margin-top: 14px;">
+<section class="pad" data-od-id="totals" style="margin-top: 14px;">
  <div class="card row-between" style="border-top: 1px solid var(--fg); border-radius: 0; padding: 16px 0; background: transparent;">
    <span style="font-weight: 600;">Total today</span>
    <span class="num" style="font-size: 22px; letter-spacing: -0.01em;">$1,920</span>
  </div>
 </section>

-<section class="pad" style="padding-top: 16px; padding-bottom: 12px;" data-ocd-id="cta">
+<section class="pad" style="padding-top: 16px; padding-bottom: 12px;" data-od-id="cta">
  <button class="btn-primary">Pay $1,920</button>
  <p class="meta" style="text-align: center; margin: 12px 0 0;">By tapping Pay you agree to the terms.</p>
 </section>
@@ -244,7 +244,7 @@ Stacked card sections (item summary → details → totals), bottom-fixed CTA. T
 A single accent-coloured hero card dominates; small supporting content underneath. Tab bar: yes.

 ```html
-<div class="header" data-ocd-id="header">
+<div class="header" data-od-id="header">
  <div>
    <p class="greeting">Tuesday · April 22</p>
    <h1>Two pomodoros to lunch.</h1>
@@ -254,7 +254,7 @@ A single accent-coloured hero card dominates; small supporting content underneat
  </button>
 </div>

-<section class="pad" data-ocd-id="hero-card" style="margin-top: 4px;">
+<section class="pad" data-od-id="hero-card" style="margin-top: 4px;">
  <div class="card accent" style="padding: 28px 24px; text-align: center;">
    <p class="meta" style="margin: 0 0 6px; color: rgba(255,255,255,0.72);">FOCUS SESSION</p>
    <div class="num" style="font-size: 64px; line-height: 1; letter-spacing: -0.03em; font-weight: 600; margin: 8px 0 18px;">15:42</div>
@@ -266,7 +266,7 @@ A single accent-coloured hero card dominates; small supporting content underneat
  </div>
 </section>

-<section class="pad" data-ocd-id="stats-row" style="margin-top: 18px;">
+<section class="pad" data-od-id="stats-row" style="margin-top: 18px;">
  <p class="meta" style="margin: 0 0 8px;">TODAY</p>
  <div class="grid-3">
    <div class="card"><div class="num" style="font-size: 22px;">3</div><div class="meta">Sessions</div></div>
@@ -275,7 +275,7 @@ A single accent-coloured hero card dominates; small supporting content underneat
  </div>
 </section>

-<section class="pad" data-ocd-id="up-next" style="margin-top: 18px;">
+<section class="pad" data-od-id="up-next" style="margin-top: 18px;">
  <p class="meta" style="margin: 0 0 8px;">UP NEXT</p>
  <div>
    <div class="list-row" style="grid-template-columns: 22px 1fr auto;">