@w3kits-com/plugin-opendesign 0.1.8 → 0.1.9

package/dist/__w3kits/assets/design-templates/mobile-app/references/layouts.md

@@ -0,0 +1,312 @@
+# Mobile app layouts
+
+**6 paste-ready screen archetypes.** Drop into `<main class="content">` of `assets/template.html`. Don't write screens from scratch — pick the closest archetype, paste, swap copy.
+
+## Pre-flight
+
+1. **Read `assets/template.html`** at minimum through the `<style>` block — every class below is defined there. The Dynamic Island, status bar, home indicator, and tab bar are already drawn; do not re-implement them inline.
+2. **Pick exactly one archetype.** A mobile screen does one job. Mixing "feed + checkout + profile" into one mock is the #1 reason mobile prototypes feel fake.
+3. **If the archetype implies a tab bar, keep it; otherwise delete the entire `<nav class="tabbar">` block.** Onboarding, detail, and checkout screens generally don't show one.
+
+## Class inventory
+
+> `pad` `stack` `row` `row-between` `grid-2` `grid-3` `header` `greeting` `h2` `h3` `meta` `num` `card` `card.accent` `card.flat` `list-row` `avatar` `tag` `pill` `tabbar` `tab` `tab.active` `btn-primary` `btn-secondary` `ph-img` `progress`
+
+If you reach for a class not on this list, define it in the seed's `<style>` first.
+
+---
+
+## Archetype A — Feed (home / for-you / inbox)
+
+Top: greeting + title. Body: 4–6 list rows, hairline-separated. Tab bar: yes.
+
+```html
+<div class="header" data-od-id="header">
+  <div>
+    <p class="greeting">Tuesday · April 22</p>
+    <h1>Inbox</h1>
+  </div>
+  <button class="icon-btn" aria-label="Compose">
+    <svg viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></svg>
+  </button>
+</div>
+
+<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>
+    <span class="tag">Following</span>
+    <span class="tag">Shared</span>
+  </div>
+</section>
+
+<section class="pad" data-od-id="feed">
+  <div class="list-row">
+    <div class="avatar"></div>
+    <div class="body">
+      <div class="title">Mira Hassan · Sync engine v3 review</div>
+      <div class="sub">"Merged the chunker — egress is down 38% on Northwind."</div>
+    </div>
+    <span class="meta">2m</span>
+  </div>
+  <div class="list-row">
+    <div class="avatar"></div>
+    <div class="body">
+      <div class="title">#engineering · 7 new replies</div>
+      <div class="sub">Latency spike between 03:40 and 04:10 — probably the cron.</div>
+    </div>
+    <span class="meta">14m</span>
+  </div>
+  <div class="list-row">
+    <div class="avatar"></div>
+    <div class="body">
+      <div class="title">Northwind Studios · Invoice paid</div>
+      <div class="sub">$2,184 · April · auto-receipt sent to billing@</div>
+    </div>
+    <span class="meta">1h</span>
+  </div>
+  <div class="list-row">
+    <div class="avatar"></div>
+    <div class="body">
+      <div class="title">Daniel Park · Re: Next Tuesday's review</div>
+      <div class="sub">"I'll have the Q2 numbers by Monday EOD."</div>
+    </div>
+    <span class="meta">3h</span>
+  </div>
+</section>
+```
+
+## Archetype B — Detail (single item)
+
+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-od-id="hero">[ Hero image ]</div>
+
+<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-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-od-id="cta">
+  <button class="btn-primary">Save to library</button>
+</section>
+```
+
+## Archetype C — Onboarding (1 of N)
+
+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-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;">
+    <p class="meta" style="margin: 0 0 6px;">STEP 2 OF 4</p>
+    <h1 style="font-family: var(--font-display); font-size: 26px; margin: 0 0 10px; letter-spacing: -0.02em; line-height: 1.15;">Sync only what changed.</h1>
+    <p style="margin: 0 auto; max-width: 26ch; color: var(--muted); font-size: 14px; line-height: 1.5;">No more 4 GB re-uploads when you fix one frame. We diff at the byte level so the network stays quiet.</p>
+  </div>
+
+  <!-- pagination dots -->
+  <div class="row" style="justify-content: center; gap: 6px;">
+    <span style="width: 6px; height: 6px; border-radius: 50%; background: var(--border);"></span>
+    <span style="width: 18px; height: 6px; border-radius: 999px; background: var(--accent);"></span>
+    <span style="width: 6px; height: 6px; border-radius: 50%; background: var(--border);"></span>
+    <span style="width: 6px; height: 6px; border-radius: 50%; background: var(--border);"></span>
+  </div>
+
+  <div class="stack" style="gap: 10px; margin-top: auto;">
+    <button class="btn-primary">Continue</button>
+    <button class="btn-secondary" style="border: 0; color: var(--muted);">Skip</button>
+  </div>
+</section>
+```
+
+> Drop the `<nav class="tabbar">` block from the seed for this archetype.
+
+## Archetype D — Profile (someone's page)
+
+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-od-id="head">
+  <div class="row" style="gap: 16px;">
+    <div class="avatar" style="width: 64px; height: 64px;"></div>
+    <div>
+      <h1 class="h2" style="margin: 0;">Mira Hassan</h1>
+      <p class="meta" style="margin: 4px 0 0;">CTO · Northwind Studios · Joined 2024</p>
+    </div>
+  </div>
+  <div class="row" style="margin-top: 16px; gap: 8px;">
+    <button class="btn-secondary" style="flex: 1; min-height: 38px; font-size: 13px;">Message</button>
+    <button class="btn-secondary" style="flex: 1; min-height: 38px; font-size: 13px;">Follow</button>
+  </div>
+</section>
+
+<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>
+      <div class="meta">Posts</div>
+    </div>
+    <div class="card flat" style="text-align: center;">
+      <div class="num" style="font-size: 22px; letter-spacing: -0.02em;">3.1k</div>
+      <div class="meta">Followers</div>
+    </div>
+    <div class="card flat" style="text-align: center;">
+      <div class="num" style="font-size: 22px; letter-spacing: -0.02em;">142</div>
+      <div class="meta">Following</div>
+    </div>
+  </div>
+</section>
+
+<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>
+    <span style="padding: 12px 0; color: var(--muted); font-size: 14px;">Likes</span>
+  </div>
+</section>
+
+<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>
+      <div class="sub" style="margin-top: 6px;">2 days ago · 142 likes</div>
+    </div>
+  </div>
+  <div class="list-row" style="grid-template-columns: 1fr;">
+    <div class="body">
+      <div class="title">"Shipped v3 today. The team carried this one."</div>
+      <div class="sub" style="margin-top: 6px;">5 days ago · 88 likes</div>
+    </div>
+  </div>
+</section>
+```
+
+## Archetype E — Checkout / form
+
+Stacked card sections (item summary → details → totals), bottom-fixed CTA. Tab bar: no.
+
+```html
+<section class="pad" style="padding-top: 12px;" data-od-id="title">
+  <h1 class="h2">Confirm order</h1>
+</section>
+
+<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;">
+      <div class="h3">Filebase Team · annual</div>
+      <p class="meta" style="margin: 4px 0 0;">$4 / seat / month, billed yearly</p>
+    </div>
+    <span class="num">$1,920</span>
+  </div>
+</section>
+
+<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>
+  </div>
+  <div class="card flat row-between">
+    <span>Billing email</span>
+    <span class="meta">billing@northwind.studio</span>
+  </div>
+  <div class="card flat row-between">
+    <span>Payment</span>
+    <span class="meta">Visa · 4242</span>
+  </div>
+</section>
+
+<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-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>
+```
+
+## Archetype F — Focus / hero card (timer, map, single tool)
+
+A single accent-coloured hero card dominates; small supporting content underneath. Tab bar: yes.
+
+```html
+<div class="header" data-od-id="header">
+  <div>
+    <p class="greeting">Tuesday · April 22</p>
+    <h1>Two pomodoros to lunch.</h1>
+  </div>
+  <button class="icon-btn" aria-label="Settings">
+    <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><circle cx="12" cy="3" r="0.5"/><circle cx="12" cy="21" r="0.5"/><circle cx="3" cy="12" r="0.5"/><circle cx="21" cy="12" r="0.5"/></svg>
+  </button>
+</div>
+
+<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>
+    <div class="progress" style="margin-bottom: 18px;"><span style="width: 38%;"></span></div>
+    <div class="row" style="justify-content: center; gap: 8px;">
+      <button style="padding: 10px 22px; border: 1px solid rgba(255,255,255,0.4); background: rgba(255,255,255,0.12); color: #fff; border-radius: 999px; font: inherit; font-weight: 500;">Skip</button>
+      <button style="padding: 10px 22px; border: 0; background: #fff; color: var(--accent); border-radius: 999px; font: inherit; font-weight: 600;">Pause</button>
+    </div>
+  </div>
+</section>
+
+<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>
+    <div class="card"><div class="num" style="font-size: 22px;">75m</div><div class="meta">Focused</div></div>
+    <div class="card"><div class="num" style="font-size: 22px;">2</div><div class="meta">Done</div></div>
+  </div>
+</section>
+
+<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;">
+      <span style="width: 18px; height: 18px; border-radius: 50%; background: var(--accent);"></span>
+      <div class="body">
+        <div class="title" style="text-decoration: line-through; color: var(--muted);">Review Q2 OKRs</div>
+        <div class="sub">25m · completed</div>
+      </div>
+    </div>
+    <div class="list-row" style="grid-template-columns: 22px 1fr auto;">
+      <span style="width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--border);"></span>
+      <div class="body">
+        <div class="title">Draft sync-engine post</div>
+        <div class="sub">2 sessions estimated</div>
+      </div>
+    </div>
+  </div>
+</section>
+```
+
+---
+
+## Choosing an archetype from a brief
+
+| If the brief mentions… | Use |
+|---|---|
+| feed, inbox, timeline, list, messages | A — Feed |
+| article, post, item, recipe, song, product | B — Detail |
+| sign-up, welcome, intro, walkthrough | C — Onboarding |
+| profile, account, user page, bio | D — Profile |
+| checkout, payment, order, form, settings step | E — Checkout |
+| timer, map, dashboard widget, single big number | F — Focus |
+
+If two fit, pick the one that better matches the *primary* action the user takes on this screen.

package/dist/__w3kits/assets/design-templates/mobile-onboarding/SKILL.md

@@ -0,0 +1,54 @@
+---
+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
+  featured: 13
+  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>
+```

package/dist/__w3kits/assets/design-templates/mobile-onboarding/example.html

@@ -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>

package/dist/__w3kits/assets/design-templates/motion-frames/SKILL.md

@@ -0,0 +1,90 @@
+---
+name: motion-frames
+description: |
+  A single-frame motion-design composition with looping CSS animations —
+  rotating type ring, animated globe, ticking timer, parallax labels.
+  Renders as a hero video poster you can hand straight to HyperFrames or
+  any keyframe-based exporter. Use when the brief asks for "motion design",
+  "animated hero", "loop", "video poster", "title card", or pairs Open
+  Claude Design with HyperFrames for a kinetic export.
+triggers:
+  - "motion design"
+  - "motion graphic"
+  - "animated hero"
+  - "loop animation"
+  - "video poster"
+  - "title card"
+  - "hyperframes"
+  - "kinetic typography"
+  - "动态设计"
+  - "动效"
+od:
+  mode: prototype
+  platform: desktop
+  scenario: marketing
+  featured: 6
+  preview:
+    type: html
+    entry: index.html
+  design_system:
+    requires: true
+    sections: [color, typography, layout, components]
+  example_prompt: "Design an animated hero — a rotating type ring around a wireframe globe, with the headline ‘Reach every country.’ Loop at 12s, ready for HyperFrames export."
+---
+
+# Motion Frames Skill
+
+Produce a single full-bleed motion composition. Inline CSS animations only —
+the page is the loop. Treat it as a poster frame that an exporter (HyperFrames,
+Lottie, etc.) can capture into a video.
+
+## Workflow
+
+1. **Read the active DESIGN.md** (injected above). Motion lives or dies on
+   typography contrast — pick the most expressive serif / display token in
+   the DS for the headline; the body / mono token labels everything else.
+2. **Compose** the canvas as a 16:9 hero with these layers, back to front:
+   - **Stage** — full-bleed `<main>`. Off-white or DS-canvas background, very
+     subtle dotted grid texture (CSS background, `radial-gradient` dots at
+     22–32px intervals).
+   - **Concentric rings** — 2–3 SVG circles radiating from a focal point.
+     Ultra-thin strokes (0.5–1px) in DS-foreground at low opacity. These
+     rotate at different speeds (60s, 90s, 180s).
+   - **Focal mark** — a wireframe globe, a stylized object, or a typographic
+     monogram drawn as inline SVG. ~28% of the canvas wide.
+   - **Ring labels** — short words / phonetic tokens placed around one of
+     the rings (e.g. "Hola · Bonjour · 你好 · नमस्ते"). They co-rotate with
+     the ring, with `<text>` paths counter-rotated so the words stay upright.
+   - **Headline** — bottom-left or center-bottom. Display serif, italic
+     accent on one word. Add a subtle `letterSpacing` + opacity reveal
+     animation (`@keyframes type-in`).
+   - **Frame chrome** — corner stamps (top-left lab tag, top-right brand or
+     issue number) and a thin baseline rule. Static.
+3. **Animate** with `@keyframes` only — no JS:
+   - `rotate-slow`, `rotate-med`, `rotate-fast` for rings.
+   - `globe-spin` for the focal mark.
+   - `pulse` for the focal dot, ~2s, easing.
+   - `marquee-fade` to reveal headline once on load.
+4. **Write** a single HTML document:
+   - `<!doctype html>` through `</html>`, CSS inline.
+   - All motion uses CSS — no scripts, so HyperFrames or any frame-grabber
+     can capture it deterministically.
+   - `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
+     velocity, not parallax tricks).
+   - Accent appears once — usually the italic word in the headline.
+
+## Output contract
+
+Emit between `<artifact>` tags:
+
+```
+<artifact identifier="motion-slug" type="text/html" title="Motion — Title">
+<!doctype html>
+<html>...</html>
+</artifact>
+```
+
+One sentence before the artifact, nothing after.