airkjw/open-design
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor project name from "Open Claude Design" to "Open Design"

Browse Source 
- 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.
This commit is contained in:
pftom
2026-04-28 14:48:45 +08:00
parent a98096a042
commit af3f96379a
122 changed files with 952 additions and 474 deletions
Download Patch File Download Diff File Expand all files Collapse all files
skills/web-prototype/SKILL.md
+2 -2
View File
@@ -12,7 +12,7 @@ triggers:
- "single page"
- "marketing page"
- "homepage"
ocd:
od:
mode: prototype
platform: desktop
scenario: design
@@ -83,7 +83,7 @@ Wrap `index.html` in `<artifact>` tags. One sentence before describing what's th
- **Display font is serif** (Iowan Old Style / Charter / Georgia in the seed). Sans for body. Mono for numerics, captions, eyebrows.
- **Image placeholders, not external URLs.** Use the `.ph-img` class — never link to a stock photo CDN.
- **Mobile reflow already works** via the seed's media query at 920px. Don't break it by adding fixed widths.
- **`data-ocd-id` on every `<section>`** so comment mode can target it.
- **`data-od-id` on every `<section>`** so comment mode can target it.
## Output contract
skills/web-prototype/assets/template.html
+4 -4
View File
@@ -1,6 +1,6 @@
<!doctype html>
<!--
OCD web-prototype seed.
OD web-prototype seed.
Copy this file to <project>/index.html, then fill `<main id="content">` by
pasting blocks from `references/layouts.md`. Every class referenced in
@@ -293,7 +293,7 @@
</style>
</head>
<body>
<header class="topnav" data-ocd-id="topnav">
<header class="topnav" data-od-id="topnav">
<div class="container topnav-inner">
<span class="logo">[REPLACE] Brand</span>
<nav>
@@ -315,7 +315,7 @@
│ ► End with a CTA strip + footer (Layout 6 / footer below). │
└─────────────────────────────────────────────────────────────────┘
-->
<section class="section hero" data-ocd-id="hero">
<section class="section hero" data-od-id="hero">
<div class="container hero-center">
<p class="eyebrow">[REPLACE] Eyebrow</p>
<h1>[REPLACE] One sharp sentence about what this is.</h1>
@@ -328,7 +328,7 @@
</section>
</main>
<footer class="pagefoot" data-ocd-id="footer">
<footer class="pagefoot" data-od-id="footer">
<div class="container row-between">
<span>© [REPLACE] Brand · [REPLACE] Year</span>
<span class="meta">[REPLACE] tagline · contact@example.com</span>
skills/web-prototype/example.html
+6 -6
View File
@@ -36,7 +36,7 @@
</style>
</head>
<body>
<header data-ocd-id="topnav">
<header data-od-id="topnav">
<span class="logo">🍅 Tomato</span>
<nav>
<a href="#features">Features</a>
@@ -45,7 +45,7 @@
</nav>
</header>
<main>
<section class="hero" data-ocd-id="hero">
<section class="hero" data-od-id="hero">
<h1>Twenty-five minutes at a time.</h1>
<p>The pomodoro timer that actually keeps your hands off Slack. Block notifications, log every cycle, ship more before lunch.</p>
<div class="cta">
@@ -54,23 +54,23 @@
</div>
</section>
<section class="features" id="features">
<div class="feature" data-ocd-id="feature-block">
<div class="feature" data-od-id="feature-block">
<div class="icon"></div>
<h3>Block on, not off</h3>
<p>Slack and email go quiet for 25 minutes. They come back loud at the break, with a digest.</p>
</div>
<div class="feature" data-ocd-id="feature-stats">
<div class="feature" data-od-id="feature-stats">
<div class="icon"></div>
<h3>Stats that don't lie</h3>
<p>Weekly review tells you which days you actually shipped versus which you only seemed busy.</p>
</div>
<div class="feature" data-ocd-id="feature-team">
<div class="feature" data-od-id="feature-team">
<div class="icon"></div>
<h3>Team-friendly silences</h3>
<p>Your status auto-updates so teammates know when to ask, when to wait, and when you're done.</p>
</div>
</section>
<section class="closing" data-ocd-id="closing">
<section class="closing" data-od-id="closing">
<h2>Stop measuring meetings. Start measuring focus.</h2>
<p>Free for solo. $4/mo per teammate after that.</p>
<button class="btn-primary">Try Tomato free</button>
skills/web-prototype/references/checklist.md
+2 -2
View File
@@ -11,9 +11,9 @@ Run this before emitting `<artifact>`. P0 = must pass; P1 = should pass; P2 = ni
- [ ] **No emoji used as feature icons.** Use the inline SVG monoline marks shipped in Layout 3, or a tasteful single-character glyph in `--font-mono`. ✨ 🚀 🎯 are out.
- [ ] **No invented metrics.** Every number on the page came from the user, the brief, or is clearly labelled as a placeholder (e.g. `[REPLACE] · 38×`). "10× faster", "99.9% uptime" without source = remove.
- [ ] **No filler copy.** Zero "Feature One / Feature Two", lorem ipsum, "Lorem ipsum dolor". If a section feels empty, delete it; do not pad.
- [ ] **`data-ocd-id` on every top-level `<section>`.** Used by comment mode to target sections.
- [ ] **`data-od-id` on every top-level `<section>`.** Used by comment mode to target sections.
- [ ] **Mobile reflow works.** All `grid-2`, `grid-3`, `grid-4`, `grid-2-1`, `grid-1-2` collapse to one column at ≤920px (the default media query in `template.html` does this). Verify by mentally narrowing — no horizontal scroll.
- [ ] **No `scrollIntoView()` calls.** Breaks the OCD preview iframe. Use `scrollTo({...})` if you need scroll behaviour.
- [ ] **No `scrollIntoView()` calls.** Breaks the OD preview iframe. Use `scrollTo({...})` if you need scroll behaviour.
## P1 — should pass
skills/web-prototype/references/layouts.md
+8 -8
View File
@@ -24,7 +24,7 @@ If you reach for a class not on this list, define it in `<style>` first or use `
Use when the page leads with a thesis sentence (most landings, most marketing pages). One eyebrow, one h1 (≤14 words), one lead sentence, two CTAs.
```html
<section class="section hero" data-ocd-id="hero">
<section class="section hero" data-od-id="hero">
<div class="container hero-center">
<p class="eyebrow">EYEBROW · CONTEXT</p>
<h1>One sharp sentence about what this is.</h1>
@@ -42,7 +42,7 @@ Use when the page leads with a thesis sentence (most landings, most marketing pa
Use when there is a real product visual (product UI, screenshot, photograph). Left half copy, right half a `ph-img` placeholder the user replaces.
```html
<section class="section" data-ocd-id="hero-split">
<section class="section" data-od-id="hero-split">
<div class="container hero-split">
<div>
<p class="eyebrow">EYEBROW · ROLE</p>
@@ -63,7 +63,7 @@ Use when there is a real product visual (product UI, screenshot, photograph). Le
Three feature cells. Lead with a small `<h2>` framing the row. Don't put an icon on every heading — one tasteful mark per cell, monoline.
```html
<section class="section" data-ocd-id="features">
<section class="section" data-od-id="features">
<div class="container stack" style="gap: 56px;">
<div style="max-width: 36ch;">
<p class="eyebrow">WHAT'S DIFFERENT</p>
@@ -101,7 +101,7 @@ Three feature cells. Lead with a small `<h2>` framing the row. Don't put an icon
Use when there are real numbers. Three stats max — four feels like a brochure. **Don't invent metrics.** If you don't have a number, use a different layout.
```html
<section class="section" data-ocd-id="stats">
<section class="section" data-od-id="stats">
<div class="container">
<p class="eyebrow" style="margin-bottom: 40px;">BY THE NUMBERS · 2026</p>
<div class="grid-3">
@@ -127,7 +127,7 @@ Use when there are real numbers. Three stats max — four feels like a brochure.
A single decisive quote with attribution. Use sparingly — one per page, never two in a row.
```html
<section class="section" data-ocd-id="quote">
<section class="section" data-od-id="quote">
<div class="container" style="max-width: 800px;">
<div class="quote-mark">"</div>
<blockquote class="quote">Filebase pays for itself in the first month. We were going to hire a dedicated DevOps person to babysit our sync — instead we just switched.</blockquote>
@@ -141,7 +141,7 @@ A single decisive quote with attribution. Use sparingly — one per page, never
End the page on one decisive ask. Centered, generous whitespace, one primary button. No secondary unless the page has zero other buttons.
```html
<section class="section" data-ocd-id="cta-strip" style="text-align: center;">
<section class="section" data-od-id="cta-strip" style="text-align: center;">
<div class="container" style="max-width: 600px;">
<h2>Stop measuring meetings. Start measuring focus.</h2>
<p class="lead" style="margin: 16px auto 32px;">Free for solo. $4/mo per teammate after that.</p>
@@ -155,7 +155,7 @@ End the page on one decisive ask. Centered, generous whitespace, one primary but
Editorial layout for a list of dated entries. Date in mono on the left, title + dek in the middle, optional pull stat on the right. Borders on top, never around — boxes feel like a brochure.
```html
<section class="section" data-ocd-id="log">
<section class="section" data-od-id="log">
<div class="container">
<div class="row-between" style="margin-bottom: 32px;">
<h2>Recent changes</h2>
@@ -196,7 +196,7 @@ Editorial layout for a list of dated entries. Date in mono on the left, title +
Hairline borders, mono numerics, one column highlighted via an accent border. Don't put the whole row in surface-color — that screams "table".
```html
<section class="section" data-ocd-id="pricing">
<section class="section" data-od-id="pricing">
<div class="container">
<div style="text-align: center; max-width: 36ch; margin: 0 auto 56px;">
<p class="eyebrow">PRICING</p>