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" (#1)

Browse Source 
* 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.
This commit is contained in:
Tom Huang
2026-04-28 16:03:35 +08:00
committed by GitHub
parent a98096a042
commit 6f6bf31dd2
131 changed files with 2560 additions and 650 deletions
Download Patch File Download Diff File Expand all files Collapse all files
skills/blog-post/SKILL.md
+2 -2
View File
@@ -14,7 +14,7 @@ triggers:
- "newsletter"
- "博客"
- "文章"
ocd:
od:
mode: prototype
platform: desktop
scenario: marketing
@@ -57,7 +57,7 @@ Produce a single long-form article page — editorial layout, no chrome.
rule (typically 680–720px).
- Drop caps (`first-letter`) only if the DS mood is editorial / serif —
skip on tech-y DSes.
- `data-ocd-id` on the headline, hero, body, pull quote, related grid.
- `data-od-id` on the headline, hero, body, pull quote, related grid.
5. **Self-check**:
- Type hierarchy is unambiguous — H1 is clearly the headline; H2s are
section dividers; pull quotes do not compete with H1.
skills/blog-post/example.html
+2 -2
View File
@@ -34,7 +34,7 @@
</style>
</head>
<body>
<article class="wrap" data-ocd-id="article">
<article class="wrap" data-od-id="article">
<nav class="top"><a href="#">← Filebase blog</a></nav>
<div class="eyebrow">Engineering</div>
<h1>Why we rewrote our sync engine in Rust</h1>
@@ -43,7 +43,7 @@
<span>By Mira Hassan · April 22, 2026 · 8 min read</span>
</div>
<p class="lede">For two years our Go sync engine was good enough. Then video editors started joining the customer list, and the GC pauses we'd been politely ignoring turned into bug reports we couldn't ignore.</p>
<div class="hero-figure" data-ocd-id="hero-figure"></div>
<div class="hero-figure" data-od-id="hero-figure"></div>
<p>The decision wasn't sudden. We'd been watching the GC pause distribution shift for six months before we admitted what the data was telling us. P50 latency was great. P99 was a horror movie. Customers syncing 30 GB of <code>.psd</code> files in active editing sessions were the ones writing in.</p>
skills/critique/SKILL.md
+2 -2
View File
@@ -19,7 +19,7 @@ triggers:
- "review my landing page"
- "评审"
- "复盘"
ocd:
od:
mode: prototype
platform: desktop
scenario: design
@@ -52,7 +52,7 @@ the *huashu-design* expert-critique flow.
A single self-contained `<artifact type="text/html">` review report
including:
1. **Header** — what artifact was reviewed, date, reviewer ("OCD ·
1. **Header** — what artifact was reviewed, date, reviewer ("OD ·
Critique skill"), 1-line verdict
2. **Radar chart** (inline SVG, no library) showing the 5 scores
3. **Five dimension cards**, each with:
skills/critique/example.html
+2 -2
View File
@@ -389,7 +389,7 @@
<span>·</span>
<span>2026.04.27</span>
<span>·</span>
<span>OCD · Critique skill</span>
<span>OD · Critique skill</span>
</div>
<h1 class="hd-title">magazine-web-ppt<br>example deck</h1>
</div>
@@ -662,7 +662,7 @@
</div>
<footer class="ft">
<span>OCD · Critique skill · v0.1</span>
<span>OD · Critique skill · v0.1</span>
<span>5 dimensions · Phil / Hier / Det / Func / Innov</span>
<span class="br">github.com/alchaincyf/huashu-design</span>
</footer>
skills/dashboard/SKILL.md
+2 -2
View File
@@ -12,7 +12,7 @@ triggers:
- "control panel"
- "后台"
- "管理后台"
ocd:
od:
mode: prototype
platform: desktop
scenario: operations
@@ -49,7 +49,7 @@ Produce a single-screen admin / analytics dashboard.
- `<!doctype html>` through `</html>`, CSS in one inline `<style>` block.
- CSS Grid for the overall layout; Flexbox inside cards.
- Semantic HTML: `<aside>`, `<header>`, `<main>`, `<section>`.
- Tag each logical region with `data-ocd-id="slug"` for comment mode.
- Tag each logical region with `data-od-id="slug"` for comment mode.
5. **Charts**: inline SVG only, no JS libraries. A line chart is ~10 lines of
`<polyline>` with a subtle area fill. A bar chart is N `<rect>`s with
DS-accent fill. Label axes lightly (muted text, smaller scale).
skills/dashboard/example.html
+6 -6
View File
@@ -48,7 +48,7 @@
</style>
</head>
<body>
<aside class="sidebar" data-ocd-id="sidebar">
<aside class="sidebar" data-od-id="sidebar">
<div class="brand">◐ Pulse</div>
<nav class="nav">
<a href="#" class="active">Overview</a>
@@ -63,7 +63,7 @@
</nav>
</aside>
<main>
<div class="topbar" data-ocd-id="topbar">
<div class="topbar" data-od-id="topbar">
<h1>Overview · April 2026</h1>
<div class="right">
<button class="btn-secondary">Last 30 days ▾</button>
@@ -71,7 +71,7 @@
</div>
</div>
<div class="kpis" data-ocd-id="kpis">
<div class="kpis" data-od-id="kpis">
<div class="kpi"><div class="label">MRR</div><div class="value">$48.2K</div><div class="delta up">+12.4% MoM</div></div>
<div class="kpi"><div class="label">Active accounts</div><div class="value">3,184</div><div class="delta up">+204 this month</div></div>
<div class="kpi"><div class="label">Churn (30d)</div><div class="value">2.1%</div><div class="delta down">+0.4 pp</div></div>
@@ -79,7 +79,7 @@
</div>
<div class="panels-row">
<div class="panel" data-ocd-id="chart-panel">
<div class="panel" data-od-id="chart-panel">
<h3>Revenue · 30 days</h3>
<div class="chart">
<svg viewBox="0 0 600 240" preserveAspectRatio="none">
@@ -87,7 +87,7 @@
</svg>
</div>
</div>
<div class="panel" data-ocd-id="signups-panel">
<div class="panel" data-od-id="signups-panel">
<h3>New accounts</h3>
<table>
<thead><tr><th>Account</th><th>Plan</th><th>Status</th></tr></thead>
@@ -101,7 +101,7 @@
</div>
</div>
<div class="panel" data-ocd-id="recent-events">
<div class="panel" data-od-id="recent-events">
<h3>Recent events</h3>
<table>
<thead><tr><th>Time</th><th>Account</th><th>Event</th><th>Plan</th></tr></thead>
skills/dating-web/SKILL.md
+2 -2
View File
@@ -16,7 +16,7 @@ triggers:
- "consumer dashboard"
- "约会应用"
- "婚恋"
ocd:
od:
mode: prototype
platform: desktop
scenario: personal
@@ -72,7 +72,7 @@ accent, lots of negative space, *no* swipe deck or hookup tropes.
- Background creamy off-white, body serif, mono labels everywhere.
- Use `font-feature-settings: 'tnum'` on the metric numerals.
- SVG bar chart with ~30 bars, varied heights.
- `data-ocd-id` on ticker, sidebar, kpi grid, chart, trend.
- `data-od-id` on ticker, sidebar, kpi grid, chart, trend.
5. **Self-check**:
- Reads as restrained, editorial, slightly funny — not horny.
- Single accent token used in 3–4 places max (one KPI, two highlight
skills/dating-web/example.html
+6 -6
View File
@@ -110,7 +110,7 @@
</style>
</head>
<body>
<div class="ticker" data-ocd-id="ticker">
<div class="ticker" data-od-id="ticker">
<div class="left">
<span>YOUR DATING LIFE, MEASURED BY THE COMPANY YOU KEEP</span>
<span style="opacity:0.6;">·</span>
@@ -120,7 +120,7 @@
</div>
<div class="layout">
<aside class="rail" data-ocd-id="rail">
<aside class="rail" data-od-id="rail">
<div class="brand">mutuals<span class="dot">.</span></div>
<div class="user">
<div class="avatar">si</div>
@@ -159,8 +159,8 @@
</div>
</aside>
<main data-ocd-id="main">
<section class="grid" data-ocd-id="kpis">
<main data-od-id="main">
<section class="grid" data-od-id="kpis">
<div class="stat">
<div class="label">Mutuals on file</div>
<div class="value"><em>1,842</em></div>
@@ -210,7 +210,7 @@
</div>
</section>
<section class="panel" data-ocd-id="bars">
<section class="panel" data-od-id="bars">
<div class="panel-head">
<h3>mutuals — <em>last 30 days</em></h3>
<div class="meta">↑ TRENDING UP · +3 CLOSE MUTUALS THIS MONTH · TWO VIA THE SAME OFFSITE</div>
@@ -252,7 +252,7 @@
<div class="axis"><span>MAR 18</span><span>MAR 25</span><span>APR 1</span><span>APR 8</span><span>APR 15</span><span>TODAY</span></div>
</section>
<section class="panel lower-panel" data-ocd-id="trend">
<section class="panel lower-panel" data-od-id="trend">
<div class="panel-head">
<h3>match rate — <em>last 12 weeks</em></h3>
<div class="meta">STEADY CLIMB FROM 8% → 14%. ATTRIBUTABLE TO ONE COMMUNITY JOIN (FOUNDERS WHO POST, WK 4).</div>
skills/digital-eguide/SKILL.md
+2 -2
View File
@@ -18,7 +18,7 @@ triggers:
- "ebook"
- "电子指南"
- "电子书"
ocd:
od:
mode: prototype
platform: desktop
scenario: marketing
@@ -71,7 +71,7 @@ serif display headings, careful column rhythm.
- `<!doctype html>` through `</html>`, CSS inline.
- Pages are 600×860 paper-tone cards with 6px shadow, slight rotation
opposing each other (±0.6deg) for a magazine-on-desk feel.
- `data-ocd-id` on cover, spread, toc, pull-quote, exercise.
- `data-od-id` on cover, spread, toc, pull-quote, exercise.
5. **Self-check**:
- Type hierarchy is editorial — title owns page 1, sub-title owns page 2.
- Italic accent appears once per page.
skills/digital-eguide/example.html
+5 -5
View File
@@ -137,7 +137,7 @@
</style>
</head>
<body>
<article class="page left cover" data-ocd-id="cover">
<article class="page left cover" data-od-id="cover">
<div class="eyebrow">
<div class="left"><span class="dot"></span>STYLE &amp; FORMAT GUIDE FOR CREATORS</div>
<div class="right">2026 EDITION</div>
@@ -155,7 +155,7 @@
<h2 class="inside">What's <em>inside.</em></h2>
<div class="toc" data-ocd-id="toc">
<div class="toc" data-od-id="toc">
<div class="item"><span class="name">Find your voice</span><span class="leader"></span><span class="pn">04</span></div>
<div class="item"><span class="name">Pick a format</span><span class="leader"></span><span class="pn">12</span></div>
<div class="item"><span class="name">Tone &amp; tension</span><span class="leader"></span><span class="pn">18</span></div>
@@ -168,7 +168,7 @@
<div class="cover-footer"><span>FIND YOUR VOICE</span><span>01 / 64</span></div>
</article>
<article class="page right spread" data-ocd-id="spread">
<article class="page right spread" data-od-id="spread">
<div class="eyebrow">
<div class="left"><span class="dot"></span>CHAPTER 02 · TONE</div>
<div class="right">3 — RULES, 1 — EXERCISE</div>
@@ -187,13 +187,13 @@
</div>
</div>
<div class="pullquote" data-ocd-id="pullquote">
<div class="pullquote" data-od-id="pullquote">
<span class="open">"</span>
Specificity is the unlock — write what only you saw.
<span class="by">— AUNY · CHAPTER 02</span>
</div>
<div class="exercise" data-ocd-id="exercise">
<div class="exercise" data-od-id="exercise">
<span class="label">EXERCISE</span>
<span class="text">Rewrite your last three captions without the words <em>just</em>, <em>really</em>, or <em>very</em>. Keep what survives.</span>
</div>
skills/docs-page/SKILL.md
+2 -2
View File
@@ -11,7 +11,7 @@ triggers:
- "tutorial"
- "api reference"
- "文档"
ocd:
od:
mode: prototype
platform: desktop
scenario: engineering
@@ -48,7 +48,7 @@ Produce a single, three-column documentation page in one HTML file.
- Code blocks: monospace token, soft surface fill, copy-button affordance
(visual only — no JS needed).
- Anchor IDs on every H2/H3 so the TOC links work.
- `data-ocd-id` on the nav, article, and TOC.
- `data-od-id` on the nav, article, and TOC.
5. **Prose**: write at least 350 words of believable docs. Include at least
one shell command, one code snippet (5–15 lines), one callout, one table.
6. **Self-check**:
skills/docs-page/example.html
+4 -4
View File
@@ -45,12 +45,12 @@
</style>
</head>
<body>
<header class="topbar" data-ocd-id="topbar">
<header class="topbar" data-od-id="topbar">
<span class="brand">◰ Filebase docs</span>
<input placeholder="Search · ⌘K" />
</header>
<div class="layout">
<nav class="sidebar" data-ocd-id="sidebar">
<nav class="sidebar" data-od-id="sidebar">
<div class="group">
<div class="group-label">Getting started</div>
<a href="#" class="active">Quickstart</a>
@@ -70,7 +70,7 @@
<a href="#">Subcommands</a>
</div>
</nav>
<article data-ocd-id="article">
<article data-od-id="article">
<div class="crumbs">Docs › Getting started › Quickstart</div>
<h1>Quickstart</h1>
<p class="lede">Sync your first folder in under five minutes. The CLI is the fastest path; the desktop app and the API client all wrap the same engine.</p>
@@ -110,7 +110,7 @@ build/</code></pre>
<a href="#" style="text-align: right;"><small>Next →</small>Conflict resolution</a>
</div>
</article>
<aside class="toc" data-ocd-id="toc">
<aside class="toc" data-od-id="toc">
<div class="toc-label">On this page</div>
<a href="#install" class="active">1. Install the CLI</a>
<a href="#auth">2. Authenticate</a>
skills/email-marketing/SKILL.md
+2 -2
View File
@@ -15,7 +15,7 @@ triggers:
- "mjml"
- "邮件营销"
- "邮件模板"
ocd:
od:
mode: prototype
platform: desktop
scenario: marketing
@@ -65,7 +65,7 @@ email body. Treat it like a marketing artifact: one big idea, one CTA.
so the email-on-page metaphor reads.
- No external images — use inline SVG or DS-tinted gradient blocks for the
product photo.
- `data-ocd-id` on the masthead, hero, headline, CTA, specs.
- `data-od-id` on the masthead, hero, headline, CTA, specs.
5. **Self-check**:
- Email reads top to bottom in 8–10 seconds.
- One CTA. Accent appears at most twice (eyebrow + CTA, or headline word).
skills/email-marketing/example.html
+8 -8
View File
@@ -68,8 +68,8 @@
</style>
</head>
<body>
<div class="frame" data-ocd-id="email">
<header class="masthead" data-ocd-id="masthead">
<div class="frame" data-od-id="email">
<header class="masthead" data-od-id="masthead">
<div class="wordmark">
<span class="mark"></span>
<span class="lockup">SPORT TEST</span>
@@ -78,7 +78,7 @@
<nav class="nav"><a href="#">SHOP</a><a href="#">JOURNAL</a><a href="#">MEMBERS</a></nav>
</header>
<div class="hero" data-ocd-id="hero">
<div class="hero" data-od-id="hero">
<div class="stamp-tl">— SPORT TEST</div>
<svg class="shoe" viewBox="0 0 600 280" aria-hidden="true">
<defs>
@@ -113,18 +113,18 @@
<div class="stamp-br">DROP 04 · 04—2026</div>
</div>
<section class="article" data-ocd-id="article">
<section class="article" data-od-id="article">
<div class="eyebrow"><span class="bar"></span>NEW · MAX-CUSHION TRAINER · EMBER FLARE</div>
<h1 class="lockup" data-ocd-id="headline">
<h1 class="lockup" data-od-id="headline">
Meet the<br/>
<span class="axis">Axis Pro.</span><br/>
A sneaker that runs.
</h1>
<p class="body">A plush, gel-cushioned trainer wrapped in a painterly flame-knit upper. Built for long days on the road, café runs, and everything between — softer underfoot, louder on the outside. Limited first drop in <em>Ember Flare</em>.</p>
<a class="cta" href="#" data-ocd-id="cta">Shop the Axis Pro <span class="arrow"></span></a>
<a class="cta" href="#" data-od-id="cta">Shop the Axis Pro <span class="arrow"></span></a>
</section>
<section class="specs" data-ocd-id="specs">
<section class="specs" data-od-id="specs">
<div class="head"><span class="bar"></span>SPECIFICATIONS · WOMEN'S</div>
<div class="specs-grid">
<div class="spec">
@@ -146,7 +146,7 @@
</div>
</section>
<footer class="footer" data-ocd-id="footer">
<footer class="footer" data-od-id="footer">
<div class="left">
<div class="marks"><span style="display:inline-block;width:18px;height:18px;background:var(--accent);transform:skew(-12deg);"></span><span class="lockup" style="font-family:'Anton',sans-serif;font-size:18px;letter-spacing:0.04em;">SPORT TEST</span></div>
<div>118 Stillman St · Brooklyn NY 11211</div>
skills/eng-runbook/SKILL.md
+1 -1
View File
@@ -12,7 +12,7 @@ triggers:
- "sre doc"
- "service runbook"
- "运维手册"
ocd:
od:
mode: prototype
platform: desktop
scenario: engineering
skills/finance-report/SKILL.md
+1 -1
View File
@@ -13,7 +13,7 @@ triggers:
- "mrr review"
- "财报"
- "财务报告"
ocd:
od:
mode: prototype
platform: desktop
scenario: finance
skills/gamified-app/SKILL.md
+2 -2
View File
@@ -18,7 +18,7 @@ triggers:
- "life management app"
- "游戏化"
- "习惯打卡"
ocd:
od:
mode: prototype
platform: mobile
scenario: personal
@@ -85,7 +85,7 @@ Three phone frames side-by-side, each one its own moment in the journey.
- `<!doctype html>` through `</html>`, CSS inline.
- All in CSS — no images. Use `linear-gradient` and inline SVG glyphs
for tile chips and tab icons.
- `data-ocd-id` on stage, each phone, each frame's regions.
- `data-od-id` on stage, each phone, each frame's regions.
9. **Self-check**:
- Three frames, each with a distinct purpose. Not three copies of the
same screen.
skills/gamified-app/example.html
+10 -10
View File
@@ -171,16 +171,16 @@
</style>
</head>
<body>
<div class="stage-bar" data-ocd-id="stage-bar">
<div class="stage-bar" data-od-id="stage-bar">
<span>HI-FI PROTOTYPE · IPHONE</span>
<span class="word">level<span style="color:var(--accent);">.</span></span>
<span>3 SCREENS · LIGHT MODE</span>
</div>
<div class="phones" data-ocd-id="phones">
<div class="phones" data-od-id="phones">
<!-- Phone 1 — cover -->
<div class="phone" data-ocd-id="phone-cover">
<div class="phone" data-od-id="phone-cover">
<div class="screen cover">
<div class="status"><span>9:41</span><span class="right">·· 5G · 100%</span></div>
<div class="body">
@@ -194,14 +194,14 @@
</div>
<!-- Phone 2 — quests dashboard -->
<div class="phone" data-ocd-id="phone-home">
<div class="phone" data-od-id="phone-home">
<div class="screen home">
<div class="status"><span>9:41</span><span class="right">·· 5G · 100%</span></div>
<div class="head">
<h2>Good morning, Sam</h2>
<div class="bell">×3</div>
</div>
<div class="level-ribbon" data-ocd-id="level-ribbon">
<div class="level-ribbon" data-od-id="level-ribbon">
<div class="lv">14</div>
<div class="meta"><div class="label">LEVEL</div><div class="name">Level 14</div></div>
<div class="xp">1648 / 2480</div>
@@ -209,7 +209,7 @@
</div>
<div class="sub">8 quests waiting · earn <span class="pill">430 XP</span> today</div>
<div class="quests" data-ocd-id="quests">
<div class="quests" data-od-id="quests">
<div class="q q1">
<div class="glyph">B</div>
<p class="title">Body</p>
@@ -248,7 +248,7 @@
</div>
</div>
<div class="tabbar" data-ocd-id="tabbar-home">
<div class="tabbar" data-od-id="tabbar-home">
<div class="tab active"><div class="icon"></div>Today</div>
<div class="tab"><div class="icon"></div>Library</div>
<div class="tab center"><div class="icon">+</div>&nbsp;</div>
@@ -259,7 +259,7 @@
</div>
<!-- Phone 3 — detail -->
<div class="phone" data-ocd-id="phone-detail">
<div class="phone" data-od-id="phone-detail">
<div class="screen detail">
<div class="status"><span>9:41</span><span class="right">·· 5G · 100%</span></div>
<div class="topbar"><div class="back">←</div>QUEST · 03 / 08</div>
@@ -269,7 +269,7 @@
<h2>20 minutes that change Wednesday.</h2>
<p>A short, repeatable strength block — pushups, planks, and one wildcard. No equipment. Sam, you've finished this 11 times this month.</p>
</div>
<div class="steps" data-ocd-id="steps">
<div class="steps" data-od-id="steps">
<h3>Today's micro-tasks</h3>
<div class="step done"><div class="check"></div><div class="name">Roll out the mat</div><div class="meta">+5 XP</div></div>
<div class="step"><div class="check"></div><div class="name">3 × 12 pushups</div><div class="meta">+30 XP</div></div>
@@ -277,7 +277,7 @@
<div class="step"><div class="check"></div><div class="name">Wildcard: lunges</div><div class="meta">+25 XP</div></div>
</div>
<div class="start">Start quest</div>
<div class="tabbar" data-ocd-id="tabbar-detail">
<div class="tabbar" data-od-id="tabbar-detail">
<div class="tab active"><div class="icon"></div>Today</div>
<div class="tab"><div class="icon"></div>Library</div>
<div class="tab center"><div class="icon">+</div>&nbsp;</div>
skills/guizang-ppt/SKILL.md
+1 -1
View File
@@ -16,7 +16,7 @@ triggers:
- "网页 PPT"
- "发布会"
- "分享 PPT"
ocd:
od:
mode: deck
scenario: marketing
featured: 9
skills/hr-onboarding/SKILL.md
+1 -1
View File
@@ -11,7 +11,7 @@ triggers:
- "first week"
- "入职"
- "新员工"
ocd:
od:
mode: prototype
platform: desktop
scenario: hr
skills/invoice/SKILL.md
+1 -1
View File
@@ -10,7 +10,7 @@ triggers:
- "billing statement"
- "发票"
- "账单"
ocd:
od:
mode: prototype
platform: desktop
scenario: finance
skills/kanban-board/SKILL.md
+1 -1
View File
@@ -12,7 +12,7 @@ triggers:
- "trello"
- "jira board"
- "看板"
ocd:
od:
mode: prototype
platform: desktop
scenario: operations
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>
skills/meeting-notes/SKILL.md
+1 -1
View File
@@ -11,7 +11,7 @@ triggers:
- "1:1 notes"
- "all-hands recap"
- "会议纪要"
ocd:
od:
mode: prototype
platform: desktop
scenario: operations
skills/mobile-app/SKILL.md
+1 -1
View File
@@ -14,7 +14,7 @@ triggers:
- "app mockup"
- "移动端"
- "手机 app"
ocd:
od:
mode: prototype
platform: mobile
scenario: design
skills/mobile-app/assets/template.html
+6 -6
View File
@@ -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
skills/mobile-app/example.html
+6 -6
View File
@@ -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>
skills/mobile-app/references/checklist.md
+2 -2
View File
@@ -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
skills/mobile-app/references/layouts.md
+21 -21
View File
@@ -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;">
skills/mobile-onboarding/SKILL.md
+1 -1
View File
@@ -12,7 +12,7 @@ triggers:
- "phone signup"
- "app onboarding"
- "移动端引导"
ocd:
od:
mode: prototype
platform: mobile
scenario: design
skills/motion-frames/SKILL.md
+2 -2
View File
@@ -18,7 +18,7 @@ triggers:
- "kinetic typography"
- "动态设计"
- "动效"
ocd:
od:
mode: prototype
platform: desktop
scenario: marketing
@@ -69,7 +69,7 @@ Lottie, etc.) can capture into a video.
- `<!doctype html>` through `</html>`, CSS inline.
- All motion uses CSS — no scripts, so HyperFrames or any frame-grabber
can capture it deterministically.
- `data-ocd-id` on stage, focal, ring, headline, chrome.
- `data-od-id` on stage, focal, ring, headline, chrome.
5. **Self-check**:
- The composition still reads as a poster with motion paused at frame 0.
- At least 3 layers move at different speeds (depth comes from delta
skills/motion-frames/example.html
+5 -5
View File
@@ -148,7 +148,7 @@
</style>
</head>
<body>
<main data-ocd-id="stage">
<main data-od-id="stage">
<div class="chrome top">
<div>ANTHROPIC LABS — APR 17 · 2026</div>
<div class="right"><div class="rule"></div><div>HOW IT WORKS</div></div>
@@ -164,13 +164,13 @@
</div>
<div class="stage">
<div class="composition" data-ocd-id="composition">
<div class="composition" data-od-id="composition">
<div class="ring r1"></div>
<div class="ring r2"></div>
<div class="ring r3"></div>
<div class="ring r4"></div>
<div class="globe" data-ocd-id="globe">
<div class="globe" data-od-id="globe">
<svg viewBox="0 0 200 200" aria-hidden="true">
<defs>
<radialGradient id="globeShade" cx="35%" cy="32%" r="78%">
@@ -203,11 +203,11 @@
</div>
</div>
<div class="ring-labels" data-ocd-id="ring-labels" aria-hidden="true">
<div class="ring-labels" data-od-id="ring-labels" aria-hidden="true">
<!-- positioned around the outer ring; co-rotates with .ring -->
</div>
<div class="headline" data-ocd-id="headline">
<div class="headline" data-od-id="headline">
<span class="em">Reach</span> every <span class="accent">country.</span>
</div>
<div class="baseline"></div>
skills/pm-spec/SKILL.md
+1 -1
View File
@@ -11,7 +11,7 @@ triggers:
- "feature brief"
- "feature doc"
- "需求文档"
ocd:
od:
mode: prototype
platform: desktop
scenario: product
skills/pricing-page/SKILL.md
+2 -2
View File
@@ -12,7 +12,7 @@ triggers:
- "compare plans"
- "定价"
- "套餐"
ocd:
od:
mode: prototype
platform: desktop
scenario: sales
@@ -52,7 +52,7 @@ Produce a single-screen pricing page that respects the active DESIGN.md.
4. **Write** one self-contained HTML document:
- `<!doctype html>` through `</html>`, CSS in one inline `<style>`.
- CSS Grid for the plan-card row; CSS Grid for the comparison table.
- `data-ocd-id` on each tier card and each table row.
- `data-od-id` on each tier card and each table row.
5. **Money rendering**: use the display font for the big number, body for the
currency and "/mo" — sizes per DESIGN.md scale.
6. **Self-check**:
skills/pricing-page/example.html
+4 -4
View File
@@ -50,7 +50,7 @@
</head>
<body>
<div class="wrap">
<header data-ocd-id="header">
<header data-od-id="header">
<h1>One flat rate. No throttling.</h1>
<p>Start free. Pick a paid tier the day you outgrow it. Switch yearly billing for two months off.</p>
<div class="toggle">
@@ -59,7 +59,7 @@
</div>
</header>
<section class="tiers" data-ocd-id="tiers">
<section class="tiers" data-od-id="tiers">
<div class="tier">
<h2>Solo</h2>
<p class="desc">For individuals.</p>
@@ -100,7 +100,7 @@
</div>
</section>
<section class="compare" data-ocd-id="compare">
<section class="compare" data-od-id="compare">
<h3>Plan comparison</h3>
<table>
<thead><tr><th>Feature</th><th>Solo</th><th>Team</th><th>Enterprise</th></tr></thead>
@@ -116,7 +116,7 @@
</table>
</section>
<section class="faq" data-ocd-id="faq">
<section class="faq" data-od-id="faq">
<h3>Common questions</h3>
<details><summary>Can I change tiers mid-month?</summary><p>Yes. Switching upward charges a prorated difference; downgrades take effect at the next billing cycle.</p></details>
<details><summary>Is there a free tier?</summary><p>14-day free trial on every paid tier. No credit card required.</p></details>
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>
skills/simple-deck/SKILL.md
+1 -1
View File
@@ -13,7 +13,7 @@ triggers:
- "presentation"
- "幻灯"
- "ppt 模板"
ocd:
od:
mode: deck
scenario: product
preview:
skills/simple-deck/assets/template.html
+3 -3
View File
@@ -1,6 +1,6 @@
<!doctype html>
<!--
OCD simple-deck seed.
OD simple-deck seed.
Single-file horizontal-swipe HTML deck. Each `<section class="slide">`
is one slide; the body uses CSS scroll-snap to lock to slide boundaries.
@@ -277,7 +277,7 @@
<script>
/*
Five hard rules for deck nav inside an iframe (the OCD preview is one).
Five hard rules for deck nav inside an iframe (the OD preview is one).
The naive `document.body.scrollLeft` pattern silently fails: clicks
register, but keyboard does nothing, and the counter freezes at "1 / N"
while the user is on slide 6.
@@ -292,7 +292,7 @@
var slides = document.querySelectorAll('.slide');
var counter = document.getElementById('deck-counter');
var progress = document.getElementById('deck-progress');
var KEY = 'ocd-deck-pos';
var KEY = 'od-deck-pos';
var active = 0;
function scroller() {
skills/simple-deck/example.html
+7 -7
View File
@@ -51,21 +51,21 @@
</style>
</head>
<body>
<section class="slide title" data-ocd-id="slide-1">
<section class="slide title" data-od-id="slide-1">
<div class="eyebrow" style="color:#c96442;">Filebase · Series B · Q2 2026</div>
<h1>The bandwidth bill is the bug.</h1>
<p class="body">A sync engine that ships only what changed. Backed by 3,184 paying teams.</p>
</section>
<section class="slide" data-ocd-id="slide-2">
<section class="slide" data-od-id="slide-2">
<div class="eyebrow">Problem</div>
<h2>Every other tool re-uploads the whole file.</h2>
<p class="body">Edit one frame in a 4 GB Final Cut project; today's tools sync all 4 GB. The video, post-production, and design industries are eating multi-thousand-dollar bandwidth bills they shouldn't be.</p>
</section>
<section class="slide big-stat" data-ocd-id="slide-3">
<section class="slide big-stat" data-od-id="slide-3">
<div class="number">38×</div>
<div class="caption">less data moved over the wire vs. naive sync, on real customer workloads.</div>
</section>
<section class="slide" data-ocd-id="slide-4">
<section class="slide" data-od-id="slide-4">
<div class="eyebrow">Why now</div>
<h2>Three shifts make this market real.</h2>
<div class="grid-3">
@@ -74,12 +74,12 @@
<div class="pt"><h3 class="h">Bandwidth pricing</h3><p class="p">Egress costs 4× what it did in 2022. Storage is cheap; movement is expensive.</p></div>
</div>
</section>
<section class="slide" data-ocd-id="slide-5">
<section class="slide" data-od-id="slide-5">
<div class="quote-mark">"</div>
<p class="quote-text">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.</p>
<p class="quote-author">— Mira Hassan, CTO at Northwind Studios</p>
</section>
<section class="slide title" data-ocd-id="slide-6">
<section class="slide title" data-od-id="slide-6">
<div class="eyebrow" style="color:#c96442;">Ask</div>
<h1>$22M to ship the next sync engine.</h1>
<p class="body">18-month runway, hire 14, expand to enterprise on-prem.</p>
@@ -95,7 +95,7 @@
// Detect the real scroller — when body has `display: flex` + `overflow-x: auto`
// the scroller can be body OR documentElement depending on the host (in
// particular, the OCD srcdoc iframe). Pick whichever actually overflows.
// particular, the OD srcdoc iframe). Pick whichever actually overflows.
function scroller() {
if (document.body.scrollWidth > document.body.clientWidth + 1) return document.body;
return document.scrollingElement || document.documentElement;
skills/social-carousel/SKILL.md
+2 -2
View File
@@ -17,7 +17,7 @@ triggers:
- "social series"
- "三连发"
- "轮播图"
ocd:
od:
mode: prototype
platform: desktop
scenario: marketing
@@ -71,7 +71,7 @@ own.
- `<!doctype html>` through `</html>`, CSS inline.
- Cards are sized via `width: clamp(280px, 30vw, 380px)` so 3 fit
comfortably across most desktops and stack at < 1100px.
- `data-ocd-id` on stage, each card, each headline.
- `data-od-id` on stage, each card, each headline.
6. **Self-check**:
- The three headlines together form one sentence and feel cinematic.
- Mono is used only for the wordmark index, the loop stamp, and the
skills/social-carousel/example.html
+5 -5
View File
@@ -158,7 +158,7 @@
</style>
</head>
<body>
<div class="stage" data-ocd-id="stage">
<div class="stage" data-od-id="stage">
<div class="stage-head">
<div>
<h1>Three posts<span class="dot">.</span> One <em>beat</em><span class="dot">.</span></h1>
@@ -167,9 +167,9 @@
<span class="badge">SERIES · 01 → 03</span>
</div>
<div class="row" data-ocd-id="cards">
<div class="row" data-od-id="cards">
<article class="card c1" data-ocd-id="card-1">
<article class="card c1" data-od-id="card-1">
<div class="figure"></div>
<div class="scrim"></div>
<div class="top">
@@ -183,7 +183,7 @@
</div>
</article>
<article class="card c2" data-ocd-id="card-2">
<article class="card c2" data-od-id="card-2">
<div class="trees"></div>
<div class="figure"></div>
<div class="scrim"></div>
@@ -198,7 +198,7 @@
</div>
</article>
<article class="card c3" data-ocd-id="card-3">
<article class="card c3" data-od-id="card-3">
<div class="ridge"></div>
<div class="figure"></div>
<div class="scrim"></div>
skills/sprite-animation/SKILL.md
+2 -2
View File
@@ -20,7 +20,7 @@ triggers:
- "精灵图"
- "像素动画"
- "复古动画"
ocd:
od:
mode: prototype
platform: desktop
scenario: marketing
@@ -73,7 +73,7 @@ display, looping CSS animations, kinetic Japanese / English display type.
- All animations use `@keyframes` + `animation: ... infinite`.
- Stage uses a fixed canvas ratio (e.g. 16:9 letterboxed) so the loop
reads as a single frame from a video.
- `data-ocd-id` on stage, year, sprite, caption, and tick ribbon.
- `data-od-id` on stage, year, sprite, caption, and tick ribbon.
8. **Self-check**:
- The page is one cohesive scene, not a collage. The eye lands on the
year first, then the sprite, then the caption.
skills/sprite-animation/example.html
+8 -8
View File
@@ -178,14 +178,14 @@
</style>
</head>
<body>
<div class="stage" data-ocd-id="stage">
<div class="stage" data-od-id="stage">
<span class="reg tl"></span>
<span class="reg tr"></span>
<span class="reg bl"></span>
<span class="reg br"></span>
<div class="topbar" data-ocd-id="topbar">
<div class="topbar" data-od-id="topbar">
<div class="slug">
<span class="jp">名次の番組</span>
<span class="en">EP. 01 · NINTENDO TRIVIA</span>
@@ -197,17 +197,17 @@
</div>
</div>
<div class="kana" data-ocd-id="kana"><span>花</span><span>札</span></div>
<div class="kana" data-od-id="kana"><span>花</span><span>札</span></div>
<div class="year-label" data-ocd-id="year-label">CHAPTER 01 · KYOTO · A PLAYING-CARD COMPANY</div>
<div class="year" data-ocd-id="year">
<div class="year-label" data-od-id="year-label">CHAPTER 01 · KYOTO · A PLAYING-CARD COMPANY</div>
<div class="year" data-od-id="year">
<span class="num">
1889
<span class="glitch" aria-hidden="true">1889</span>
</span><span class="jp-suffix">年</span>
</div>
<div class="sprite-stack" data-ocd-id="sprite">
<div class="sprite-stack" data-od-id="sprite">
<div class="sprite-card">
<!-- Hanafuda card sprite — pixel-art flower -->
<svg width="120" height="160" viewBox="0 0 24 32" xmlns="http://www.w3.org/2000/svg" aria-label="Hanafuda card">
@@ -240,13 +240,13 @@
</div>
</div>
<div class="caption" data-ocd-id="caption">
<div class="caption" data-od-id="caption">
<strong>Nintendo started as a hanafuda maker.</strong>
Founded in Kyoto by Fusajiro Yamauchi to print hand-painted playing
cards. Mario wouldn&rsquo;t show up for another <em>ninety-six</em> years.
</div>
<div class="ribbon" data-ocd-id="ribbon">
<div class="ribbon" data-od-id="ribbon">
<div class="ribbon-track">
<div class="tick"><span class="dot"></span><span class="label">1889</span><span class="note">HANAFUDA · KYOTO</span></div>
<div class="tick"><span class="dot"></span><span class="label">1907</span><span class="note">WESTERN CARDS</span></div>
skills/team-okrs/SKILL.md
+1 -1
View File
@@ -11,7 +11,7 @@ triggers:
- "key results"
- "objectives"
- "目标"
ocd:
od:
mode: prototype
platform: desktop
scenario: product
skills/tweaks/SKILL.md
+1 -1
View File
@@ -18,7 +18,7 @@ triggers:
- "可调参数面板"
- "side panel"
- "knobs"
ocd:
od:
mode: prototype
platform: desktop
scenario: design
skills/tweaks/example.html
+1 -1
View File
@@ -579,7 +579,7 @@ $ filebase sync --watch
<footer class="ft">
<span>© 2026 Filebase, Inc.</span>
<span>Privacy · Terms · Status</span>
<span>built with the OCD tweaks skill</span>
<span>built with the OD tweaks skill</span>
</footer>
</div>
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>
skills/weekly-update/SKILL.md
+1 -1
View File
@@ -11,7 +11,7 @@ triggers:
- "weekly status"
- "weekly review"
- "周报演示"
ocd:
od:
mode: deck
scenario: operations
preview:
skills/wireframe-sketch/SKILL.md
+3 -2
View File
@@ -17,10 +17,11 @@ triggers:
- "手绘原型"
- "草图"
- "线框图"
ocd:
od:
mode: prototype
platform: desktop
scenario: design
fidelity: wireframe
preview:
type: html
entry: index.html
@@ -74,7 +75,7 @@ fills, dashed borders, slight rotations.
Daughter" fonts via Google Fonts; otherwise fall back to italic serif.
- Slight rotations everywhere (`transform: rotate(-0.6deg)`) to break
the grid and feel hand-drawn.
- `data-ocd-id` on header, tabs, sidebar, KPIs, chart, bar-chart,
- `data-od-id` on header, tabs, sidebar, KPIs, chart, bar-chart,
sticky notes.
5. **Self-check**:
- The page should *not* look pixel-perfect. If it does, you over-rendered.
skills/wireframe-sketch/example.html
+14 -14
View File
@@ -143,7 +143,7 @@
</head>
<body>
<div class="page">
<div class="head" data-ocd-id="head">
<div class="head" data-od-id="head">
<h1><em>Zentou AI · Portal</em>
<span class="pin"><span class="x"></span>WIREFRAME v0.1</span>
</h1>
@@ -151,7 +151,7 @@
<div class="meta"><b>DATE</b> 2026-04-18 · <b>DEVICE</b> DESKTOP 1440 · <b>FIDELITY</b> LOW</div>
</div>
<div class="tabs" data-ocd-id="tabs">
<div class="tabs" data-od-id="tabs">
<div class="tab"><span class="glyph"></span><span class="num">00</span>ALL</div>
<div class="tab"><span class="glyph"></span><span class="num">01</span>A · 整理型 (元画面ベース)</div>
<div class="tab active"><span class="glyph"></span><span class="num">02</span>B · ダッシュボード (KPI)</div>
@@ -159,17 +159,17 @@
<div class="tab"><span class="glyph"></span><span class="num">04</span>D · 学習体験型</div>
</div>
<div class="canvas" data-ocd-id="canvas">
<div class="canvas" data-od-id="canvas">
<div class="section-label">
<h2>B · ダッシュボード</h2>
<span class="pill">DATA-FORWARD</span>
</div>
<p class="lede">KPIを最上段に。「今の自分の位置」を一目で把握 → 詳細は下へスクロール。</p>
<div class="browser" data-ocd-id="browser"><div class="dots"><span></span><span></span><span></span></div><div class="url">zentou-ai.jp / portal / dashboard</div><div class="user">motoki.daisuke</div></div>
<div class="browser" data-od-id="browser"><div class="dots"><span></span><span></span><span></span></div><div class="url">zentou-ai.jp / portal / dashboard</div><div class="user">motoki.daisuke</div></div>
<div class="layout">
<aside class="nav" data-ocd-id="sidebar">
<aside class="nav" data-od-id="sidebar">
<span class="brand">全統 AI</span>
<ul>
<li class="active"><span class="square"></span>ダッシュボード</li>
@@ -180,7 +180,7 @@
</ul>
</aside>
<div data-ocd-id="main">
<div data-od-id="main">
<div style="display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;">
<div>
<div class="greeting">おかえりなさい</div>
@@ -193,15 +193,15 @@
</div>
</div>
<div class="kpis" data-ocd-id="kpis">
<div class="kpis" data-od-id="kpis">
<div class="kpi tilt-1"><div class="label">認定ランク</div><div class="value">A2</div><div class="small">基礎認定</div></div>
<div class="kpi tilt-2"><div class="label">偏差値</div><div class="value ink" style="color:#3b6e8e;">39</div><div class="small">↑ +3.2 前回比</div></div>
<div class="kpi tilt-3"><div class="label">次回まで</div><div class="value">1日</div><div class="small">04/19 10:00</div></div>
<div class="kpi tilt-4"><div class="label">練習進捗</div><div class="value ink" style="color:#3b6e8e;">62%</div><div class="small">▰▰▰▰▰▱▱▱</div></div>
</div>
<div class="panels" data-ocd-id="panels">
<div class="panel" data-ocd-id="chart">
<div class="panels" data-od-id="panels">
<div class="panel" data-od-id="chart">
<h3><span class="dot"></span>CHART · 偏差値推移</h3>
<svg class="scribble" viewBox="0 0 480 160" aria-hidden="true">
<path d="M 14 142 L 460 142" stroke="#4d473d" stroke-width="1.6" fill="none"/>
@@ -214,7 +214,7 @@
<circle cx="440" cy="28" r="4" fill="#d8482b"/>
</svg>
</div>
<div class="panel" data-ocd-id="bars">
<div class="panel" data-od-id="bars">
<h3><span class="dot"></span>SUBJECTS · 科目別</h3>
<svg class="scribble" viewBox="0 0 320 160" aria-hidden="true">
<defs>
@@ -233,12 +233,12 @@
</div>
</div>
<div class="events" data-ocd-id="events">
<div class="events" data-od-id="events">
<div class="label">📣 お知らせ (直近 3 件)</div>
<div class="lines"><span></span><span></span><span></span></div>
</div>
<div class="next-step" data-ocd-id="next-step">
<div class="next-step" data-od-id="next-step">
<div class="head">● NEXT STEP / 次にやること</div>
<ul>
<li>試験の申込を完了する</li>
@@ -248,8 +248,8 @@
</div>
</div>
<div class="sticky sn1" data-ocd-id="sticky-1"><div class="tape"></div>一日目から触りたくなる画面に</div>
<div class="sticky sn2" data-ocd-id="sticky-2"><div class="tape"></div><b>page-1 / 5</b><br/>余白は気持ちよく。<br/>密度は B 案ぐらい。</div>
<div class="sticky sn1" data-od-id="sticky-1"><div class="tape"></div>一日目から触りたくなる画面に</div>
<div class="sticky sn2" data-od-id="sticky-2"><div class="tape"></div><b>page-1 / 5</b><br/>余白は気持ちよく。<br/>密度は B 案ぐらい。</div>
</div>
</div>
</body>