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/magazine-poster/SKILL.md
+2 -2
View File
@@ -17,7 +17,7 @@ triggers:
- "long-form poster"
- "杂志海报"
- "报纸版式"
ocd:
od:
mode: prototype
platform: desktop
scenario: marketing
@@ -67,7 +67,7 @@ Sunday paper. Long-form, deliberate, type-driven.
- Background uses a creamy paper tint (`#f3eee2` or DS canvas) plus a
subtle paper noise (`radial-gradient` dots at low opacity).
- 2-column body grid via CSS Grid; min-width 1100px page.
- `data-ocd-id` on header, headline, deck, each cell, footer.
- `data-od-id` on header, headline, deck, each cell, footer.
5. **Self-check**:
- Type hierarchy is unmistakable — headline owns the page.
- Strikethrough + italic accent both appear, exactly once each.
skills/magazine-poster/example.html
+12 -12
View File
@@ -138,55 +138,55 @@
</head>
<body>
<div class="page">
<div class="top-rule" data-ocd-id="top-rule">
<div class="top-rule" data-od-id="top-rule">
<span>01 · AI ENTHUSIAST</span>
<span>17 · APR · 2026</span>
</div>
<div class="eyebrow-row" data-ocd-id="eyebrow">— POSTED TODAY</div>
<div class="eyebrow-row" data-od-id="eyebrow">— POSTED TODAY</div>
<h1 class="headline" data-ocd-id="headline">
<h1 class="headline" data-od-id="headline">
You don't need <span class="strike">a designer</span><br />
to ship your <span class="accent">first draft</span><br />
anymore.
</h1>
<p class="deck" data-ocd-id="deck">
<p class="deck" data-od-id="deck">
Six honest ways I'm using AI to move faster from idea → artifact this week — <b>what works</b>, what I'd still hand to a human, and the exact prompts that got me there.
</p>
<div class="accent-rule"></div>
<div class="grid" data-ocd-id="grid">
<section class="cell" data-ocd-id="cell-1">
<div class="grid" data-od-id="grid">
<section class="cell" data-od-id="cell-1">
<div class="num"><span class="bar"></span>01 · SHIP FAST</div>
<h3>Clickable prototype in 90 seconds</h3>
<p>Describe the flow in plain English. Get a real, tappable prototype — not static screens. Export to HTML and share the link.</p>
<div class="quote">Onboarding flow for a fintech app — 5 screens, dark mode, rounded cards, haptic-style transitions.</div>
</section>
<section class="cell" data-ocd-id="cell-2">
<section class="cell" data-od-id="cell-2">
<div class="num"><span class="bar"></span>02 · PITCH</div>
<h3>Investor deck from a napkin idea</h3>
<p>Skip the template hunt. Draft the deck, refine it section-by-section, then export straight to PPTX or PDF — notes included.</p>
<div class="quote">10-slide seed pitch for a RAG tool for lawyers. Keep it minimal, data-first, one chart per slide.</div>
</section>
<section class="cell" data-ocd-id="cell-3">
<section class="cell" data-od-id="cell-3">
<div class="num"><span class="bar"></span>03 · BRAND LOCK</div>
<h3>Your design system, auto-applied</h3>
<p>Point the model at your tokens, components, or a codebase. Every new asset respects your type, color, and spacing scale.</p>
<div class="quote">Use our /design-system tokens. Build a pricing page variant. Match the radius + shadow of the marketing site.</div>
</section>
<section class="cell" data-ocd-id="cell-4">
<section class="cell" data-od-id="cell-4">
<div class="num"><span class="bar"></span>04 · MARKETING</div>
<h3>Landing pages &amp; launch collateral</h3>
<p>One-pagers, email headers, feature comparison grids — editable, on-brand, and ready to hand off in minutes, not days.</p>
<div class="quote">One-pager for a Series A launch. Headline, three proof points, CTA. Editorial feel, no stock photos.</div>
</section>
<section class="cell" data-ocd-id="cell-5">
<section class="cell" data-od-id="cell-5">
<div class="num"><span class="bar"></span>05 · HANDOFF</div>
<h3>Design → engineering bundle</h3>
<p>Finished the mock? Ship the whole handoff to your dev environment. Specs, tokens, components — no translation layer.</p>
<div class="quote">Export this mock to code. Wire the auth screen to Supabase. Add a loading state and empty state.</div>
</section>
<section class="cell" data-ocd-id="cell-6">
<section class="cell" data-od-id="cell-6">
<div class="num"><span class="bar"></span>06 · EXPLORE</div>
<h3>Ten directions in ten minutes</h3>
<p>Generate N visual directions side-by-side. Use sliders to dial tone: playful, brutalist, editorial, corporate — same copy.</p>
@@ -194,7 +194,7 @@
</section>
</div>
<div class="footer" data-ocd-id="footer">
<div class="footer" data-od-id="footer">
<div class="pro-tip">
<span class="badge">PRO TIP</span>
<span class="text">Don't prompt for <b>"a good design."</b> Prompt for a mood — <b>"serene", "brutalist", "Bloomberg terminal," "Sunday newspaper."</b> Aesthetic specificity is the unlock.</span>