npm - @w3kits-com/plugin-opendesign - Versions diffs - 0.1.8 → 0.1.9 - Mend

@w3kits-com/plugin-opendesign 0.1.8 → 0.1.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1706) hide show

package/dist/__w3kits/assets/design-templates/docs-page/example.html ADDED Viewed

@@ -0,0 +1,122 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Filebase docs — Quickstart</title>
+  <style>
+    :root {
+      --bg: #fafaf9; --fg: #1c1b1a; --muted: #6b6964; --border: #e6e4e0;
+      --accent: #c96442; --surface: #ffffff; --code-bg: #f4f4f2;
+    }
+    * { box-sizing: border-box; }
+    body { margin: 0; background: var(--bg); color: var(--fg); font: 15px/1.6 -apple-system, system-ui, sans-serif; }
+    .topbar { background: var(--surface); border-bottom: 1px solid var(--border); padding: 12px 28px; display: flex; justify-content: space-between; align-items: center; }
+    .topbar .brand { font-weight: 600; }
+    .topbar input { padding: 6px 12px; border-radius: 6px; border: 1px solid var(--border); width: 280px; font: inherit; background: var(--bg); }
+    .layout { display: grid; grid-template-columns: 240px minmax(0, 1fr) 220px; gap: 0; min-height: calc(100vh - 50px); }
+    @media (max-width: 1024px) { .layout { grid-template-columns: 220px 1fr; } .toc { display: none; } }
+    @media (max-width: 720px) { .layout { grid-template-columns: 1fr; } .sidebar { display: none; } }
+    .sidebar { padding: 24px 16px; border-right: 1px solid var(--border); overflow-y: auto; font-size: 14px; }
+    .sidebar .group { margin-bottom: 22px; }
+    .sidebar .group-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; padding: 0 8px 8px; }
+    .sidebar a { display: block; color: var(--fg); text-decoration: none; padding: 5px 8px; border-radius: 6px; }
+    .sidebar a:hover { background: var(--surface); }
+    .sidebar a.active { background: var(--accent); color: white; }
+    article { padding: 40px 56px 80px; max-width: 760px; }
+    .crumbs { color: var(--muted); font-size: 13px; margin-bottom: 12px; }
+    h1 { font-size: 36px; letter-spacing: -0.02em; margin: 0 0 12px; }
+    .lede { color: var(--muted); font-size: 17px; margin: 0 0 32px; }
+    h2 { font-size: 22px; letter-spacing: -0.01em; margin: 40px 0 12px; }
+    h3 { font-size: 16px; margin: 24px 0 8px; }
+    p { margin: 12px 0; }
+    code { font-family: ui-monospace, monospace; background: var(--code-bg); padding: 1px 5px; border-radius: 4px; font-size: 0.9em; }
+    pre { background: var(--code-bg); border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px; overflow-x: auto; font-size: 13px; line-height: 1.55; }
+    pre code { background: transparent; padding: 0; }
+    .callout { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 8px; padding: 14px 18px; margin: 20px 0; font-size: 14px; }
+    .callout .label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent); margin-bottom: 4px; }
+    .toc { padding: 40px 24px 24px; font-size: 13px; border-left: 1px solid var(--border); }
+    .toc .toc-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 10px; }
+    .toc a { display: block; color: var(--muted); text-decoration: none; padding: 4px 0; }
+    .toc a.active { color: var(--accent); font-weight: 500; }
+    .pager { display: flex; justify-content: space-between; gap: 12px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--border); }
+    .pager a { flex: 1; text-decoration: none; color: var(--fg); padding: 12px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; }
+    .pager a small { display: block; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 2px; }
+  </style>
+</head>
+<body>
+  <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-od-id="sidebar">
+      <div class="group">
+        <div class="group-label">Getting started</div>
+        <a href="#" class="active">Quickstart</a>
+        <a href="#">Concepts</a>
+        <a href="#">Authentication</a>
+      </div>
+      <div class="group">
+        <div class="group-label">Sync engine</div>
+        <a href="#">Block-level deltas</a>
+        <a href="#">Conflict resolution</a>
+        <a href="#">Resumable uploads</a>
+      </div>
+      <div class="group">
+        <div class="group-label">CLI</div>
+        <a href="#">Install</a>
+        <a href="#">Configuration</a>
+        <a href="#">Subcommands</a>
+      </div>
+    </nav>
+    <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>
+      <h2 id="install">1. Install the CLI</h2>
+      <p>The CLI is distributed as a single binary for macOS, Linux, and Windows.</p>
+<pre><code># macOS · Homebrew
+brew install filebase
+# Linux · curl
+curl -fsSL https://get.filebase.dev | sh</code></pre>
+      <p>Verify the install:</p>
+<pre><code>filebase --version
+# filebase 0.6.4</code></pre>
+      <h2 id="auth">2. Authenticate</h2>
+      <p>Sign in with your Filebase account. The token is stored in <code>~/.config/filebase/credentials</code>.</p>
+<pre><code>filebase auth login
+# → opens your browser
+# ✓ Logged in as you@example.com</code></pre>
+      <div class="callout">
+        <div class="label">Note</div>
+        On servers without a browser, use <code>filebase auth login --device</code> for a device-code flow.
+      </div>
+      <h2 id="sync">3. Sync a folder</h2>
+      <p>Pick a local directory and link it to a remote root. Filebase watches it for changes and pushes block-level diffs in the background.</p>
+<pre><code>cd ~/projects
+filebase init my-team
+filebase sync</code></pre>
+      <h3>Excluding files</h3>
+      <p>Add a <code>.filebaseignore</code> at the root of the synced folder. Same syntax as <code>.gitignore</code>:</p>
+<pre><code>node_modules/
+*.log
+build/</code></pre>
+      <h2 id="next">4. Where to go next</h2>
+      <p>Read <a href="#">Conflict resolution</a> to understand how Filebase merges concurrent edits, or skip to the <a href="#">CLI reference</a> for the full subcommand list.</p>
+      <div class="pager">
+        <a href="#"><small>← Previous</small>Concepts</a>
+        <a href="#" style="text-align: right;"><small>Next →</small>Conflict resolution</a>
+      </div>
+    </article>
+    <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>
+      <a href="#sync">3. Sync a folder</a>
+      <a href="#next">4. Where to go next</a>
+    </aside>
+  </div>
+</body>
+</html>

package/dist/__w3kits/assets/design-templates/email-marketing/SKILL.md ADDED Viewed

@@ -0,0 +1,85 @@
+---
+name: email-marketing
+description: |
+  A brand product-launch email — masthead with wordmark, hero image block,
+  headline lockup with skewed-italic accent, body copy, primary CTA, and a
+  specifications grid. Pure HTML email layout (centered single column, table
+  fallback). Use when the brief asks for an "email", "newsletter blast",
+  "MJML", "product launch email", or "email template".
+triggers:
+  - "email"
+  - "email template"
+  - "newsletter"
+  - "email blast"
+  - "product launch email"
+  - "mjml"
+  - "邮件营销"
+  - "邮件模板"
+od:
+  mode: prototype
+  platform: desktop
+  scenario: marketing
+  featured: 7
+  preview:
+    type: html
+    entry: index.html
+  design_system:
+    requires: true
+    sections: [color, typography, layout, components]
+  example_prompt: "Design a launch email for a sporty running shoe brand — masthead, hero, big headline lockup, specs grid, CTA."
+---
+# Email Marketing Skill
+Produce a single HTML email — centered, single column, no chrome around the
+email body. Treat it like a marketing artifact: one big idea, one CTA.
+## Workflow
+1. **Read the active DESIGN.md** (injected above). Email leans on the display
+   font more than any other surface — pick the loudest type token in the DS
+   for the headline lockup.
+2. **Pick the brand + product** from the brief. Generate a real wordmark, a
+   real product name, and one real benefit sentence — no placeholders.
+3. **Layout**, in order, all centered inside a 600–680px column on a tinted
+   page background (so the email body looks like an email, not the page):
+   - **Masthead** — wordmark on the left + 3 short nav links (SHOP, JOURNAL,
+     MEMBERS) on the right. Thin underline.
+   - **Hero block** — a 16:9 product image placeholder. Use a DS-tinted
+     gradient or a stylized SVG silhouette of the product (shoe, bottle,
+     headphones, whatever the brief implies). Add a tiny brand stamp on the
+     top-left and a colorway tag on the bottom-left.
+   - **Eyebrow** — small caps, accent color, separated by `·` characters
+     (e.g. "NEW · MAX-CUSHION TRAINER · EMBER FLARE").
+   - **Headline lockup** — 2–3 line headline using the display font, all caps,
+     extra-tight tracking. Apply a slight skew (`transform: skew(-6deg)`) on
+     one accent word to give it a sporty parallelogram feel.
+   - **Body** — 2–3 sentence paragraph, left-aligned, body font.
+   - **Primary CTA** — solid pill or block button. One only.
+   - **Specs grid** — 2×2 grid of (big number + unit + label) callouts using
+     the display font for the numbers.
+   - **Footer** — wordmark, address line, unsubscribe + view-in-browser links.
+4. **Write** a single HTML document:
+   - `<!doctype html>` through `</html>`, CSS inline.
+   - Center the column with `margin: 0 auto`. Set `body { background: <tint> }`
+     so the email-on-page metaphor reads.
+   - No external images — use inline SVG or DS-tinted gradient blocks for the
+     product photo.
+   - `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).
+   - Looks legible on a 480px window (column reflows, type drops one step).
+## Output contract
+Emit between `<artifact>` tags:
+```
+<artifact identifier="email-slug" type="text/html" title="Email — Subject Line">
+<!doctype html>
+<html>...</html>
+</artifact>
+```
+One sentence before the artifact, nothing after.

package/dist/__w3kits/assets/design-templates/email-marketing/example.html ADDED Viewed

@@ -0,0 +1,159 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>SPORT TEST — Meet the Axis Pro</title>
+  <style>
+    :root {
+      --page: #d9d6d0;
+      --paper: #f4efe7;
+      --ink: #1a1816;
+      --muted: #6b6964;
+      --border: #d8d3c8;
+      --accent: #d8482b;
+    }
+    * { box-sizing: border-box; }
+    body { margin: 0; background: var(--page); color: var(--ink); font: 15px/1.55 'Inter', -apple-system, system-ui, sans-serif; }
+    .frame { max-width: 680px; margin: 0 auto; background: var(--paper); padding: 0; }
+    .masthead { display: flex; justify-content: space-between; align-items: center; padding: 22px 32px; border-bottom: 1px solid var(--border); }
+    .wordmark { display: flex; align-items: center; gap: 10px; font-family: 'Anton', 'Bebas Neue', Impact, sans-serif; font-size: 22px; letter-spacing: 0.04em; }
+    .wordmark .lockup { display: flex; align-items: center; gap: 8px; }
+    .wordmark .mark { width: 22px; height: 22px; background: var(--accent); transform: skew(-12deg); display: inline-block; }
+    .wordmark .est { font: 11px/1 ui-monospace, monospace; color: var(--muted); padding: 4px 6px; border: 1px solid var(--border); border-radius: 3px; letter-spacing: 0.08em; }
+    .nav { display: flex; gap: 28px; font-size: 12px; letter-spacing: 0.18em; color: var(--ink); }
+    .nav a { color: inherit; text-decoration: none; }
+    .hero { position: relative; aspect-ratio: 4 / 3; background:
+      radial-gradient(circle at 30% 20%, #ffd6b8 0%, transparent 55%),
+      radial-gradient(circle at 75% 70%, #f59a6c 0%, transparent 60%),
+      linear-gradient(135deg, #c9c4b8 0%, #aaa39a 100%); overflow: hidden; }
+    .hero .stamp-tl { position: absolute; top: 18px; left: 22px; font: 11px/1 ui-monospace, monospace; color: rgba(26,24,22,0.78); letter-spacing: 0.18em; }
+    .hero .stamp-bl { position: absolute; bottom: 18px; left: 22px; font: 11px/1 ui-monospace, monospace; color: rgba(26,24,22,0.78); letter-spacing: 0.18em; }
+    .hero .stamp-br { position: absolute; bottom: 18px; right: 22px; font: 11px/1 ui-monospace, monospace; color: rgba(26,24,22,0.6); letter-spacing: 0.18em; }
+    .hero svg.shoe { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 78%; height: auto; filter: drop-shadow(0 18px 26px rgba(26,24,22,0.18)); }
+    .article { padding: 44px 44px 12px; }
+    .eyebrow { font: 11px/1 ui-monospace, monospace; color: var(--accent); letter-spacing: 0.22em; margin-bottom: 28px; display: flex; gap: 12px; align-items: center; }
+    .eyebrow span.bar { display: inline-block; width: 22px; height: 2px; background: var(--accent); }
+    h1.lockup { font-family: 'Anton', 'Bebas Neue', Impact, sans-serif; font-weight: 400; font-size: clamp(56px, 9vw, 96px); line-height: 0.95; letter-spacing: -0.005em; margin: 0 0 28px; text-transform: uppercase; }
+    h1.lockup .axis { color: var(--accent); display: inline-block; transform: skew(-8deg); }
+    p.body { font-size: 16px; line-height: 1.55; color: var(--ink); margin: 0 0 30px; max-width: 56ch; }
+    p.body em { font-style: italic; color: var(--accent); }
+    .cta { display: inline-flex; align-items: center; gap: 14px; background: var(--ink); color: var(--paper); padding: 14px 22px; font: 12px/1 'Inter', sans-serif; letter-spacing: 0.2em; text-transform: uppercase; text-decoration: none; }
+    .cta .arrow { display: inline-block; width: 22px; height: 1px; background: var(--paper); position: relative; }
+    .cta .arrow::after { content: ''; position: absolute; right: 0; top: -3px; border: 4px solid transparent; border-left-color: var(--paper); }
+    .specs { padding: 56px 44px 12px; border-top: 1px solid var(--border); margin-top: 44px; }
+    .specs .head { font: 11px/1 ui-monospace, monospace; color: var(--accent); letter-spacing: 0.22em; margin-bottom: 24px; display: flex; align-items: center; gap: 10px; }
+    .specs .head span.bar { display: inline-block; width: 22px; height: 2px; background: var(--accent); }
+    .specs-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px 48px; }
+    .spec .num { font-family: 'Anton', 'Bebas Neue', Impact, sans-serif; font-size: 56px; line-height: 0.9; letter-spacing: -0.005em; }
+    .spec .num sup { font-size: 18px; vertical-align: top; margin-left: 4px; color: var(--muted); font-family: ui-monospace, monospace; letter-spacing: 0.04em; }
+    .spec .label { font: 11px/1.45 ui-monospace, monospace; color: var(--muted); letter-spacing: 0.16em; text-transform: uppercase; margin-top: 8px; max-width: 22ch; }
+    .footer { padding: 56px 44px 40px; margin-top: 32px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
+    .footer .left { display: flex; flex-direction: column; gap: 12px; font-size: 12px; color: var(--muted); }
+    .footer .marks { display: flex; align-items: center; gap: 10px; }
+    .footer .right { font: 11px/1.6 ui-monospace, monospace; color: var(--muted); letter-spacing: 0.06em; text-align: right; }
+    .footer a { color: var(--muted); }
+    @media (max-width: 540px) {
+      .article, .specs, .footer { padding-left: 24px; padding-right: 24px; }
+      h1.lockup { font-size: 48px; }
+      .nav { display: none; }
+      .specs-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
+    }
+  </style>
+</head>
+<body>
+  <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>
+        <span class="est">EST · 2024</span>
+      </div>
+      <nav class="nav"><a href="#">SHOP</a><a href="#">JOURNAL</a><a href="#">MEMBERS</a></nav>
+    </header>
+    <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>
+          <linearGradient id="upper" x1="0%" y1="0%" x2="100%" y2="100%">
+            <stop offset="0%" stop-color="#ffe0c4"/>
+            <stop offset="55%" stop-color="#f78c4c"/>
+            <stop offset="100%" stop-color="#c8442d"/>
+          </linearGradient>
+          <linearGradient id="midsole" x1="0%" y1="0%" x2="0%" y2="100%">
+            <stop offset="0%" stop-color="#fff8ee"/>
+            <stop offset="100%" stop-color="#e7dccd"/>
+          </linearGradient>
+        </defs>
+        <path d="M 60 180 C 80 130, 160 90, 230 92 C 290 94, 330 110, 380 115 C 430 120, 470 125, 500 145 C 530 165, 540 195, 520 210 L 100 210 C 80 210, 55 200, 60 180 Z" fill="url(#upper)" stroke="#7c2615" stroke-width="2"/>
+        <path d="M 60 180 L 100 210 L 520 210 L 540 200 C 550 190, 545 175, 530 175 L 90 175 C 75 175, 60 175, 60 180 Z" fill="url(#midsole)" stroke="#7c2615" stroke-width="2"/>
+        <path d="M 100 210 L 100 230 L 540 230 L 540 220" fill="none" stroke="#7c2615" stroke-width="3" stroke-linecap="round"/>
+        <g stroke="#7c2615" stroke-width="2" fill="none" opacity="0.85">
+          <path d="M 200 110 C 220 130, 230 145, 240 165"/>
+          <path d="M 250 105 C 270 125, 280 140, 290 160"/>
+          <path d="M 300 105 C 320 125, 330 140, 340 160"/>
+          <path d="M 350 110 C 370 130, 380 145, 390 165"/>
+        </g>
+        <g fill="#7c2615">
+          <circle cx="220" cy="160" r="3"/>
+          <circle cx="270" cy="158" r="3"/>
+          <circle cx="320" cy="158" r="3"/>
+          <circle cx="370" cy="160" r="3"/>
+        </g>
+        <path d="M 405 145 Q 470 130, 500 150 Q 470 165, 410 162 Z" fill="#fffbf5" stroke="#7c2615" stroke-width="2"/>
+      </svg>
+      <div class="stamp-bl">— EMBER FLARE</div>
+      <div class="stamp-br">DROP 04 · 04—2026</div>
+    </div>
+    <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-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-od-id="cta">Shop the Axis Pro <span class="arrow"></span></a>
+    </section>
+    <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">
+          <div class="num">7.4<sup>OZ</sup></div>
+          <div class="label">Weight (women's US 8)</div>
+        </div>
+        <div class="spec">
+          <div class="num">34<sup>MM</sup></div>
+          <div class="label">Max-cushion stack at the heel</div>
+        </div>
+        <div class="spec">
+          <div class="num">8<sup>MM</sup></div>
+          <div class="label">Heel-to-toe drop for low-impact landing</div>
+        </div>
+        <div class="spec">
+          <div class="num" style="font-size:42px;">Gel-02</div>
+          <div class="label">Heel &amp; forefoot gel shock pods</div>
+        </div>
+      </div>
+    </section>
+    <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>
+        <div><a href="#">Unsubscribe</a> · <a href="#">View in browser</a></div>
+      </div>
+      <div class="right">© 2026 SPORT TEST<br/>ALL RIGHTS RESERVED</div>
+    </footer>
+  </div>
+</body>
+</html>

package/dist/__w3kits/assets/design-templates/eng-runbook/SKILL.md ADDED Viewed

@@ -0,0 +1,51 @@
+---
+name: eng-runbook
+description: |
+  An engineering runbook — service overview, alerts table, dashboards
+  links, common procedures with copy-pasteable commands, on-call rotation,
+  and an incident-response checklist. Use when the brief mentions
+  "runbook", "ops doc", "on-call guide", "SRE doc", or "运维手册".
+triggers:
+  - "runbook"
+  - "ops doc"
+  - "on-call"
+  - "sre doc"
+  - "service runbook"
+  - "运维手册"
+od:
+  mode: prototype
+  platform: desktop
+  scenario: engineering
+  preview:
+    type: html
+    entry: index.html
+  design_system:
+    requires: true
+    sections: [color, typography, layout, components]
+  example_prompt: "Write a runbook for our auth service — alerts, dashboards, common procedures, on-call rotation."
+---
+# Engineering Runbook Skill
+Produce a single-page engineering runbook.
+## Workflow
+1. Read DESIGN.md.
+2. Identify the service from the brief.
+3. Layout:
+   - Header: service name, owner team, severity tier, version.
+   - Service summary paragraph + dependency list.
+   - Alerts table: alert name / severity / what it means / first response.
+   - Dashboards & links list.
+   - Common procedures block (3–4) with code blocks (deploy, rollback, rotate keys).
+   - On-call rotation table (week / primary / secondary / backup).
+   - Incident response checklist (5 numbered steps).
+4. One inline `<style>`, semantic HTML, monospace for code blocks.
+## Output contract
+```
+<artifact identifier="runbook-name" type="text/html" title="Service Runbook">
+<!doctype html>...</artifact>
+```