④段整套同步（六节＋ P/S/F/J ＋模板）＋ open-design 移到技能根

一、④段整套同步（用户选候选 A） - 新增 `references/stage-proto-doc/assets/产品文档模板.html`（16 KB／247 行，从备份拷、转 LF）。 - ④段 SKILL.md 换成备份 15:28 那版，并按模板口径改齐： · 「产品文档框架」从「四块＋一附录」改成**六节** —— 页面结构／功能清单／使用场景／操作流程／跨页与界面状态／待确认与偏离；与模板同构，⛔ 不从空白页重写结构。 · 编号从 R/S/F 改成 **P 页面／S 场景／F 功能／J 二级功能**，各自唯一、按展示顺序通排。 · 保留旧版有价值的要求：每项功能补齐做什么／入口在哪／输入边界／异常与恢复；重点功能三处标红；横向流程图每步写清页面／功能／操作／完成判据。 · 完成标准「七节」→「六节」，自查清单同步换掉「需求」那批条目，补模板与配图两条。 · 路径 `designs/<项目>/` → `docs/pm/<项目>/ui/`（2 处）。 · 补回本机那条「每份产出文档开头都要有一张图」的引用（指向主 skill，段内不复述）。 - 主 skill 同步：四段结构表④行、④段沿革、画图小节（④段画页面结构图＋用户路径）。二、open-design 移到技能根（用户选候选 A） - `git mv product-planning/references/stage-delivery/assets/open-design → open-design/`（4178 文件）。 - `.gitignore` 白名单加 `!/open-design/` —— 否则移出去就不再纳入版本控制。 - 引用改 11 处：路径形态 `assets/open-design/...` → `<技能根>/open-design/...`；「随段携带的自带件」改称「同根技能」；「路径怎么找」那条改成自带件（段内相对路径）与同根技能（`<技能根>/<技能名>/`）两类分开写。 - open-design 自己的 ATTRIBUTION.md 两处同步（它现在与 oil-ui-pro 同层）。 - 副作用（有益）：命名闸门读数由 2063 降到 225 —— 此前它把 open-design 里 919 个第三方 md 当成规则一起扫了；现在只扫本包 23 个 md。已确认④段的 H1 与 4a/4b/4c 子步仍在检查范围内。三、验收 - check_naming.py --ws E:/ProgramData/AIProject/contentm_agent ＝通过 225 / 失败 0 / 提示 27。 - 活文件里 `assets/open-design` 残留 0；工作区 CRLF 文件 0。
2026-10-15 21:17:28 +08:00
1 parent fa0a9026c8
commit 5afeb6b78a
@@ -0,0 +1,53 @@
+---
+name: mobile-onboarding
+description: |
+  A multi-screen mobile onboarding flow rendered as three phone frames
+  side by side — splash, value-prop, sign-in. Status bar, swipe dots,
+  primary CTA. Use when the brief mentions "mobile onboarding", "iOS
+  onboarding", "phone signup", or "移动端引导".
+triggers:
+  - "mobile onboarding"
+  - "ios onboarding"
+  - "android onboarding"
+  - "phone signup"
+  - "app onboarding"
+  - "移动端引导"
+od:
+  mode: prototype
+  platform: mobile
+  scenario: design
+  preview:
+    type: html
+    entry: index.html
+  design_system:
+    requires: true
+    sections: [color, typography, layout, components]
+  craft:
+    requires: [state-coverage, animation-discipline, accessibility-baseline, form-validation, laws-of-ux]
+  example_prompt: "Design a 3-screen mobile onboarding flow for a meditation app — welcome, value props, sign-in."
+---
+
+# Mobile Onboarding Skill
+
+Produce a three-screen mobile onboarding flow on a single HTML page.
+
+## Workflow
+
+1. Read DESIGN.md.
+2. Identify the app + audience.
+3. Layout: three phone frames side by side. Each phone:
+   - Status bar (time, battery, signal).
+   - Hero artwork or icon.
+   - Headline + supporting paragraph.
+   - 3-dot pagination.
+   - Primary CTA (full-width pill button).
+   - "Skip" or alt action top-right.
+4. Last phone is the sign-in / continue-with options screen.
+5. Strong typography, gentle gradients, accessible contrast.
+
+## Output contract
+
+```
+<artifact identifier="mobile-onboarding-name" type="text/html" title="Mobile Onboarding">
+<!doctype html>...</artifact>
+```
@@ -0,0 +1,206 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>Lull · Mobile onboarding</title>
+<style>
+  :root {
+    --canvas: #efece4;
+    --ink: #232118;
+    --muted: #76715f;
+    --accent: #c66e3a;
+    --warm: #e8a76e;
+    --display: 'Iowan Old Style', 'Charter', Georgia, serif;
+    --body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, sans-serif;
+  }
+  * { box-sizing: border-box; }
+  body { margin: 0; background: var(--canvas); font-family: var(--body); color: var(--ink); }
+  .stage {
+    min-height: 100vh;
+    padding: 56px 32px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 32px;
+    background:
+      radial-gradient(ellipse 80% 60% at 50% -10%, rgba(232,167,110,0.35), transparent 70%),
+      radial-gradient(ellipse 80% 50% at 50% 110%, rgba(198,110,58,0.16), transparent 70%),
+      var(--canvas);
+  }
+  .stage h1 {
+    font-family: var(--display);
+    font-size: 28px;
+    margin: 0;
+    letter-spacing: -0.005em;
+  }
+  .stage p.lede { color: var(--muted); margin: 0; max-width: 50ch; text-align: center; }
+
+  .phones {
+    display: grid;
+    grid-template-columns: repeat(3, auto);
+    gap: 36px;
+    align-items: center;
+  }
+  .phone {
+    width: 320px;
+    aspect-ratio: 9 / 19.5;
+    background: #fff;
+    border-radius: 44px;
+    border: 8px solid #1a1814;
+    overflow: hidden;
+    position: relative;
+    box-shadow:
+      0 32px 60px rgba(28,27,26,0.18),
+      0 12px 18px rgba(28,27,26,0.08);
+    display: flex;
+    flex-direction: column;
+  }
+  .phone .notch {
+    position: absolute; top: 0; left: 50%; transform: translateX(-50%);
+    width: 100px; height: 22px;
+    background: #1a1814;
+    border-bottom-left-radius: 14px;
+    border-bottom-right-radius: 14px;
+    z-index: 5;
+  }
+  .statusbar {
+    display: flex; justify-content: space-between; align-items: center;
+    padding: 14px 24px 4px;
+    font-size: 12.5px; font-weight: 600; color: var(--ink);
+  }
+  .statusbar .right { display: flex; gap: 6px; align-items: center; font-size: 11px; }
+  .status-icon { display: inline-block; width: 14px; height: 8px; background: var(--ink); border-radius: 2px; }
+
+  .phone-body {
+    flex: 1;
+    padding: 18px 24px 24px;
+    display: flex;
+    flex-direction: column;
+  }
+  .phone-top { display: flex; justify-content: flex-end; align-items: center; }
+  .skip { font-size: 13px; color: var(--muted); }
+
+  .hero { flex: 1; display: flex; align-items: center; justify-content: center; padding: 24px 0; }
+  .hero .art { width: 220px; height: 220px; }
+
+  .copy { display: flex; flex-direction: column; gap: 10px; padding: 14px 4px; }
+  .copy h2 { font-family: var(--display); font-size: 30px; line-height: 1.1; margin: 0; letter-spacing: -0.01em; font-weight: 700; }
+  .copy p { color: var(--muted); margin: 0; font-size: 15px; line-height: 1.5; }
+
+  .pager { display: flex; justify-content: center; gap: 6px; padding: 14px 0 8px; }
+  .pager span { width: 6px; height: 6px; border-radius: 50%; background: rgba(35,33,24,0.18); }
+  .pager span.active { width: 22px; background: var(--accent); border-radius: 999px; }
+
+  .cta {
+    background: var(--ink); color: #fef9ee;
+    padding: 16px 22px; border-radius: 999px;
+    text-align: center; font-weight: 600; font-size: 15px;
+  }
+  .alt { text-align: center; color: var(--muted); padding-top: 12px; font-size: 13px; }
+  .alt a { color: var(--accent); font-weight: 600; }
+
+  /* Phone 3 — sign-in */
+  .signin-options { display: flex; flex-direction: column; gap: 10px; }
+  .opt { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border: 1px solid rgba(35,33,24,0.12); border-radius: 14px; font-weight: 500; font-size: 14.5px; }
+  .opt .glyph { width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; }
+  .opt.apple .glyph { background: #000; }
+  .opt.google .glyph { background: linear-gradient(135deg, #ea4335, #fbbc05, #34a853, #4285f4); }
+  .opt.email .glyph { background: var(--accent); }
+
+  .terms { font-size: 11px; color: var(--muted); text-align: center; padding-top: 14px; line-height: 1.5; }
+  .terms a { color: var(--accent); }
+
+  @media (max-width: 1100px) {
+    .phones { grid-template-columns: 1fr; }
+    .phone { width: 92vw; max-width: 360px; }
+  }
+</style>
+</head>
+<body>
+<div class="stage">
+  <h1>Lull · onboarding flow</h1>
+  <p class="lede">Three screens, one tone of voice. Designed in the Lull design system — warm canvas, serif headings, single accent.</p>
+
+  <div class="phones">
+    <!-- Screen 1: welcome -->
+    <div class="phone">
+      <div class="notch"></div>
+      <div class="statusbar"><span>9:41</span><div class="right"><span>5G</span><span class="status-icon"></span></div></div>
+      <div class="phone-body">
+        <div class="phone-top"><span class="skip">Skip</span></div>
+        <div class="hero">
+          <svg class="art" viewBox="0 0 220 220">
+            <defs>
+              <radialGradient id="moon1" cx="50%" cy="40%" r="60%">
+                <stop offset="0%" stop-color="#fcebd0"/>
+                <stop offset="100%" stop-color="#e8a76e"/>
+              </radialGradient>
+            </defs>
+            <circle cx="110" cy="110" r="78" fill="url(#moon1)"/>
+            <circle cx="146" cy="92" r="14" fill="#fff" opacity="0.6"/>
+            <circle cx="78" cy="74" r="3" fill="#c66e3a" opacity="0.7"/>
+            <circle cx="60" cy="120" r="2" fill="#c66e3a" opacity="0.5"/>
+            <circle cx="170" cy="140" r="2.5" fill="#c66e3a" opacity="0.6"/>
+            <path d="M 30 200 Q 110 170 200 200 L 200 220 L 30 220 Z" fill="#c66e3a" opacity="0.18"/>
+          </svg>
+        </div>
+        <div class="copy">
+          <h2>Quiet beats noise.</h2>
+          <p>Twelve minutes a day. A practice that fits in a coffee break. No streaks, no badges — just a calmer evening.</p>
+        </div>
+        <div class="pager"><span class="active"></span><span></span><span></span></div>
+        <div class="cta">Continue</div>
+      </div>
+    </div>
+
+    <!-- Screen 2: value props -->
+    <div class="phone">
+      <div class="notch"></div>
+      <div class="statusbar"><span>9:41</span><div class="right"><span>5G</span><span class="status-icon"></span></div></div>
+      <div class="phone-body">
+        <div class="phone-top"><span class="skip">Skip</span></div>
+        <div class="hero">
+          <svg class="art" viewBox="0 0 220 220">
+            <rect x="38" y="48" width="144" height="100" rx="14" fill="#fff" stroke="#c66e3a" stroke-width="1.5"/>
+            <rect x="56" y="68" width="56" height="6" rx="3" fill="#c66e3a"/>
+            <rect x="56" y="84" width="100" height="4" rx="2" fill="#76715f" opacity="0.4"/>
+            <rect x="56" y="96" width="80" height="4" rx="2" fill="#76715f" opacity="0.4"/>
+            <rect x="56" y="116" width="40" height="20" rx="10" fill="#c66e3a"/>
+            <circle cx="170" cy="160" r="22" fill="#e8a76e"/>
+            <path d="M 162 160 L 168 166 L 178 154" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        </div>
+        <div class="copy">
+          <h2>Practice that meets you where you are.</h2>
+          <p>Adaptive sessions that get shorter on busy days, deeper on quiet ones. The kind of routine that survives a Wednesday.</p>
+        </div>
+        <div class="pager"><span></span><span class="active"></span><span></span></div>
+        <div class="cta">Continue</div>
+      </div>
+    </div>
+
+    <!-- Screen 3: sign in -->
+    <div class="phone">
+      <div class="notch"></div>
+      <div class="statusbar"><span>9:41</span><div class="right"><span>5G</span><span class="status-icon"></span></div></div>
+      <div class="phone-body">
+        <div class="phone-top"><span class="skip">Help</span></div>
+        <div style="padding: 24px 0;">
+          <h2 style="font-family: var(--display); font-size: 32px; margin: 0 0 8px; letter-spacing: -0.01em; line-height: 1.05; font-weight: 700;">Make a place for it.</h2>
+          <p style="margin: 0; color: var(--muted); font-size: 15px;">Save your sessions across devices. We don't email, we don't share.</p>
+        </div>
+        <div class="signin-options">
+          <div class="opt apple"><span class="glyph"></span>Continue with Apple</div>
+          <div class="opt google"><span class="glyph"></span>Continue with Google</div>
+          <div class="opt email"><span class="glyph">@</span>Continue with email</div>
+        </div>
+        <div style="flex: 1;"></div>
+        <div class="terms">By continuing, you agree to Lull's <a>Terms</a> and <a>Privacy Policy</a>.</div>
+        <div class="pager"><span></span><span></span><span class="active"></span></div>
+      </div>
+    </div>
+  </div>
+</div>
+</body>
+</html>