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/saas-landing/SKILL.md
+4 -4
View File
@@ -8,7 +8,7 @@ triggers:
- "saas landing"
- "marketing page"
- "product landing"
ocd:
od:
mode: prototype
platform: desktop
scenario: marketing
@@ -85,7 +85,7 @@ Output a single self-contained `index.html` with:
- System font fallbacks if DESIGN.md fonts aren't loadable from Google Fonts etc.
- No external JS.
- Semantic HTML (`<header>`, `<main>`, `<section>`, `<footer>`).
- Each editable element tagged with `data-ocd-id="<unique-slug>"` so the host app's comment mode can target it.
- Each editable element tagged with `data-od-id="<unique-slug>"` so the host app's comment mode can target it.
## 5. Self-check
@@ -114,9 +114,9 @@ saas-landing-skill/
```
Things to notice:
- The `ocd:` front-matter block is optional for Claude-Code-only compatibility, but adding it lights up OCD's typed inputs, sliders, preview metadata, and capability gating.
- The `od:` front-matter block is optional for Claude-Code-only compatibility, but adding it lights up OD's typed inputs, sliders, preview metadata, and capability gating.
- The workflow below the front-matter is plain Markdown that the agent reads as its system prompt.
- DESIGN.md is treated as a collaborator, not an override. The skill gives the agent authority to override when the brief conflicts, but never to invent new tokens.
- `data-ocd-id` tagging is how we wire elements to comment mode. Skills that want comment-mode compatibility must annotate their output.
- `data-od-id` tagging is how we wire elements to comment mode. Skills that want comment-mode compatibility must annotate their output.
See [`../../skills-protocol.md`](../../skills-protocol.md) for the full protocol.
skills/saas-landing/example.html
+7 -7
View File
@@ -55,7 +55,7 @@
</head>
<body>
<div class="wrap">
<header data-ocd-id="topnav">
<header data-od-id="topnav">
<span class="logo">◰ Filebase</span>
<nav>
<a href="#features">Features</a>
@@ -64,7 +64,7 @@
<button class="btn-secondary" style="margin-left: 12px;">Sign in</button>
</nav>
</header>
<section class="hero" data-ocd-id="hero">
<section class="hero" data-od-id="hero">
<h1>File sync that doesn't eat your bandwidth.</h1>
<p>Block-level deltas, end-to-end encryption, and a pricing model that doesn't punish you for working with video.</p>
<div class="cta">
@@ -74,7 +74,7 @@
</section>
</div>
<section class="features" id="features" data-ocd-id="features">
<section class="features" id="features" data-od-id="features">
<div class="wrap feature-grid">
<div class="feature">
<span class="num">01</span>
@@ -94,12 +94,12 @@
</div>
</section>
<section class="proof wrap" data-ocd-id="proof">
<section class="proof wrap" data-od-id="proof">
<h2>Used by teams at</h2>
<div class="logos"><span>Anthropic</span><span>Stripe</span><span>Linear</span><span>Vercel</span><span>Cursor</span></div>
</section>
<section class="pricing wrap" id="pricing" data-ocd-id="pricing">
<section class="pricing wrap" id="pricing" data-od-id="pricing">
<h2>Pricing</h2>
<p class="lede">Pick a tier. Switch or cancel any time.</p>
<div class="tiers">
@@ -140,7 +140,7 @@
</div>
</section>
<section class="closing" data-ocd-id="closing">
<section class="closing" data-od-id="closing">
<div class="wrap">
<h2>Sync less, ship more.</h2>
<p>14-day free trial. No credit card needed.</p>
@@ -148,6 +148,6 @@
</div>
</section>
<footer class="wrap" data-ocd-id="footer">© Filebase · Privacy · Terms · Status</footer>
<footer class="wrap" data-od-id="footer">© Filebase · Privacy · Terms · Status</footer>
</body>
</html>