npm - yuanflow-cli - Versions diffs - 0.1.43 → 0.1.45 - Mend

yuanflow-cli 0.1.43 → 0.1.45

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 (23) hide show

package/skills/yuanflow-skill//350/247/206/350/247/211/345/215/241/347/211/207/347/224/237/346/210/220/assets/templates/lifestyle-collage.html ADDED Viewed

@@ -0,0 +1,49 @@
+<!doctype html>
+<html lang="zh-CN" data-parent-style="lifestyle-collage">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <title>Lifestyle Collage Template</title>
+  <style>
+    :root { --paper:#f2ece6; --ink:#25211d; --muted:#82766b; --line:rgba(37,33,29,.18); --accent:#7f8d74; --serif:"Songti SC","STSong","SimSun",serif; --sans:system-ui,sans-serif; --mono:ui-monospace,monospace; }
+    * { box-sizing:border-box; }
+    body { margin:0; padding:48px; background:#1d1b19; font-family:var(--sans); }
+    .sheet { display:flex; flex-direction:column; align-items:center; gap:42px; }
+    .poster { position:relative; overflow:hidden; background:var(--paper); color:var(--ink); isolation:isolate; }
+    .poster[data-ratio="xhs"] { width:1080px; height:1440px; }
+    .poster[data-ratio="article"] { width:1600px; height:900px; }
+    .lc-pad { height:100%; padding:88px; display:flex; flex-direction:column; position:relative; z-index:2; }
+    [data-ratio="article"] .lc-pad { padding:76px 110px; }
+    .lc-title { font-family:var(--serif); font-size:104px; line-height:1.08; font-weight:500; margin:0 0 34px; }
+    .soft-photo { height:560px; margin:0; border-radius:28px; overflow:hidden; background:#d8d0c6; box-shadow:0 20px 60px rgba(37,33,29,.14); }
+    .soft-photo img { width:100%; height:100%; object-fit:cover; }
+    .note-list { display:flex; gap:18px; margin-top:auto; }
+    .note-list p,.specimen-tags span { padding:18px 24px; background:rgba(255,255,255,.36); border:1px solid var(--line); }
+    .collage-desk { --paper:#ead8ba; --ink:#2d2014; --muted:#7d6750; --accent:#315d93; }
+    .paper-stack { flex:1; position:relative; }
+    .paper-stack figure { position:absolute; width:48%; height:42%; background:#f6ead6; box-shadow:0 14px 30px rgba(45,32,20,.18); margin:0; }
+    .paper-stack figure:nth-child(1) { left:4%; top:10%; transform:rotate(-5deg); }
+    .paper-stack figure:nth-child(2) { right:8%; top:22%; transform:rotate(4deg); }
+    .paper-stack figure:nth-child(3) { left:22%; bottom:8%; transform:rotate(-2deg); }
+    .stamp,.timecode { font-family:var(--mono); letter-spacing:.14em; color:var(--accent); }
+    .botanical-organic { --paper:#eef0df; --ink:#172418; --muted:#62715e; --accent:#3f7d4a; }
+    .specimen { height:520px; margin:0 0 34px; display:grid; place-items:center; background:rgba(63,125,74,.10); border:1px solid var(--line); }
+    .specimen img { max-width:80%; max-height:80%; object-fit:contain; }
+    .specimen-tags { display:flex; gap:16px; margin-top:auto; }
+    .film-contact-sheet { --paper:#1b1712; --ink:#f2dec1; --muted:#b69d78; --line:rgba(242,222,193,.2); --accent:#e0a34d; }
+    .frames { display:grid; grid-template-columns:repeat(2,1fr); gap:22px; margin-top:auto; }
+    .frames figure { height:260px; margin:0; background:#30271d; border:10px solid #0b0907; }
+  </style>
+</head>
+<body>
+  <main class="sheet">
+    <section class="poster lifestyle-collage soft-studio" data-ratio="xhs" data-style="soft-studio">
+      <main class="lc-pad soft">
+        <h1 class="lc-title">周末整理<br>工作台</h1>
+        <figure class="soft-photo"><img src="assets/table.jpg" alt=""></figure>
+        <div class="note-list"><p>光线</p><p>收纳</p><p>节奏</p></div>
+      </main>
+    </section>
+  </main>
+</body>
+</html>

package/skills/yuanflow-skill//350/247/206/350/247/211/345/215/241/347/211/207/347/224/237/346/210/220/assets/templates/product-brand.html ADDED Viewed

@@ -0,0 +1,50 @@
+<!doctype html>
+<html lang="zh-CN" data-parent-style="product-brand">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <title>Product Brand Template</title>
+  <style>
+    :root { --paper:#f8f7f2; --ink:#101214; --muted:#6f757c; --line:rgba(16,18,20,.16); --accent:#0d6efd; --accent2:#16a34a; --sans:system-ui,sans-serif; --serif:"Songti SC","STSong","SimSun",serif; --mono:ui-monospace,monospace; }
+    * { box-sizing:border-box; }
+    body { margin:0; padding:48px; background:#191a1b; font-family:var(--sans); }
+    .sheet { display:flex; flex-direction:column; align-items:center; gap:42px; }
+    .poster { position:relative; overflow:hidden; background:var(--paper); color:var(--ink); isolation:isolate; }
+    .poster[data-ratio="xhs"] { width:1080px; height:1440px; }
+    .poster[data-ratio="article"] { width:1600px; height:900px; }
+    .poster[data-ratio="wide"] { width:2100px; height:900px; }
+    .pb-pad { height:100%; padding:88px; display:flex; flex-direction:column; position:relative; z-index:2; }
+    [data-ratio="article"] .pb-pad, [data-ratio="wide"] .pb-pad { padding:76px 110px; }
+    .pb-title { margin:0; font-size:104px; line-height:1.04; font-weight:300; letter-spacing:-.02em; max-width:860px; }
+    .product-hero { flex:1; margin:44px 0; display:grid; place-items:center; background:radial-gradient(circle at center, rgba(13,110,253,.14), transparent 54%); }
+    .product-hero img { max-width:78%; max-height:78%; object-fit:contain; filter:drop-shadow(0 34px 42px rgba(16,18,20,.22)); }
+    .callouts,.feature-tags { display:flex; gap:16px; margin-top:auto; }
+    .callouts span,.feature-tags span { padding:16px 22px; border:1px solid var(--line); background:#fff; font-size:28px; }
+    .luxury-minimal { --paper:#10100f; --ink:#f4ead7; --muted:#a89777; --line:rgba(244,234,215,.18); --accent:#d0a85a; }
+    .luxury .pb-title { font-family:var(--serif); font-weight:500; margin-top:auto; }
+    .isolated { background:transparent; border:1px solid var(--line); }
+    .small-label { font-family:var(--mono); letter-spacing:.14em; color:var(--muted); text-transform:uppercase; }
+    .brand-system { --paper:#f5f3ed; --ink:#121212; --muted:#626262; --accent:#c8372d; --accent2:#243c72; }
+    .palette { display:flex; gap:18px; margin:54px 0; }
+    .palette span { width:120px; height:120px; background:var(--accent); }
+    .palette span:nth-child(2) { background:var(--accent2); }
+    .palette span:nth-child(3) { background:var(--ink); }
+    .component-row { display:flex; gap:18px; margin-top:auto; }
+    .component-row button { border:0; padding:20px 28px; background:var(--accent); color:white; font-size:24px; }
+    .component-row button:nth-child(2) { background:transparent; color:var(--ink); border:1px solid var(--line); }
+    .screen-frame { margin:44px 0 0; height:520px; border:1px solid var(--line); background:#fff; padding:28px; }
+    .screen-frame img { width:100%; height:100%; object-fit:contain; }
+  </style>
+</head>
+<body>
+  <main class="sheet">
+    <section class="poster product-brand product-cutout" data-ratio="xhs" data-style="product-cutout">
+      <main class="pb-pad">
+        <h1 class="pb-title">一个工具<br>解决三件事</h1>
+        <figure class="product-hero"><img src="assets/product.png" alt=""></figure>
+        <div class="callouts"><span>快</span><span>稳</span><span>可控</span></div>
+      </main>
+    </section>
+  </main>
+</body>
+</html>

package/skills/yuanflow-skill//350/247/206/350/247/211/345/215/241/347/211/207/347/224/237/346/210/220/assets/templates/social-campaign.html ADDED Viewed

@@ -0,0 +1,49 @@
+<!doctype html>
+<html lang="zh-CN" data-parent-style="social-campaign">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <title>Social Campaign Template</title>
+  <style>
+    :root { --paper:#fff04a; --ink:#111; --accent:#ff3b7f; --accent2:#00a1ff; --mono:ui-monospace,monospace; --sans:system-ui,sans-serif; }
+    * { box-sizing: border-box; }
+    body { margin:0; padding:48px; background:#181818; font-family:var(--sans); }
+    .sheet { display:flex; flex-direction:column; align-items:center; gap:42px; }
+    .poster { position:relative; overflow:hidden; background:var(--paper); color:var(--ink); isolation:isolate; }
+    .poster[data-ratio="xhs"] { width:1080px; height:1440px; }
+    .poster[data-ratio="poster"] { width:1200px; height:1800px; }
+    .poster[data-ratio="wide"] { width:2100px; height:900px; }
+    .sc-pad { height:100%; padding:78px; display:flex; flex-direction:column; position:relative; z-index:2; }
+    .sc-title { margin:0; font-size:142px; line-height:.95; font-weight:900; letter-spacing:-.03em; max-width:880px; }
+    .burst,.warning,.event-meta,.ticket { font-family:var(--mono); letter-spacing:.14em; text-transform:uppercase; }
+    .burst { align-self:flex-start; background:var(--accent); color:#fff; padding:14px 18px; transform:rotate(-4deg); margin-bottom:28px; }
+    .cutout-stage { flex:1; margin:38px 0; background:rgba(255,255,255,.28); border:5px solid var(--ink); display:grid; place-items:center; }
+    .cutout-stage img { max-width:72%; max-height:72%; object-fit:contain; }
+    .badge-row { display:flex; gap:16px; margin-top:auto; }
+    .badge-row span { border:4px solid var(--ink); padding:16px 24px; font-size:34px; font-weight:800; background:#fff; }
+    .neo-brutalist { --paper:#f5f5f0; --accent:#ff4a00; }
+    .brutal { border:8px solid var(--ink); }
+    .warning { background:var(--accent); padding:16px 20px; font-size:26px; margin-bottom:34px; }
+    .hard-rows { margin-top:auto; border-top:6px solid var(--ink); }
+    .hard-rows p { margin:0; padding:26px 0; border-bottom:4px solid var(--ink); font-size:46px; font-weight:900; }
+    .maximal-poster { --paper:#101010; --ink:#f7f03a; --accent:#f0185c; --accent2:#00d4ff; }
+    .repeat-word { position:absolute; inset:60px 20px auto; font-size:118px; font-weight:900; color:var(--accent); opacity:.55; line-height:.85; }
+    .maximal .sc-title { margin-top:auto; color:var(--ink); text-shadow:8px 8px 0 var(--accent); }
+    .event-key-visual { --paper:#151414; --ink:#fff1d0; --accent:#ffcf33; --accent2:#ff5a3d; }
+    .key-shape { width:520px; height:520px; background:linear-gradient(135deg,var(--accent),var(--accent2)); margin:auto; transform:rotate(12deg); }
+    .ticket { border-top:2px solid rgba(255,241,208,.4); padding-top:22px; font-size:24px; color:var(--ink); }
+  </style>
+</head>
+<body>
+  <main class="sheet">
+    <section class="poster social-campaign pop-magazine" data-ratio="xhs" data-style="pop-magazine">
+      <main class="sc-pad">
+        <p class="burst">SAVE THIS</p>
+        <h1 class="sc-title">这 6 个<br>真的好用</h1>
+        <div class="cutout-stage"><img src="assets/item.png" alt=""></div>
+        <div class="badge-row"><span>实测</span><span>清单</span><span>避坑</span></div>
+      </main>
+    </section>
+  </main>
+</body>
+</html>

package/skills/yuanflow-skill//350/247/206/350/247/211/345/215/241/347/211/207/347/224/237/346/210/220/assets/templates/technical-diagram.html ADDED Viewed

@@ -0,0 +1,45 @@
+<!doctype html>
+<html lang="zh-CN" data-parent-style="technical-diagram">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <title>Technical Diagram Template</title>
+  <style>
+    :root { --paper:#fafaf8; --ink:#0a0a0a; --muted:#737373; --line:#d4d4d2; --accent:#002fa7; --sans:system-ui,sans-serif; --mono:ui-monospace,monospace; }
+    * { box-sizing:border-box; }
+    body { margin:0; padding:48px; background:#1b1b1b; font-family:var(--sans); }
+    .sheet { display:flex; flex-direction:column; align-items:center; gap:42px; }
+    .poster { position:relative; overflow:hidden; background:var(--paper); color:var(--ink); isolation:isolate; }
+    .poster[data-ratio="xhs"] { width:1080px; height:1440px; }
+    .poster[data-ratio="article"] { width:1600px; height:900px; }
+    .poster[data-ratio="wide"] { width:2100px; height:900px; }
+    .td-pad { height:100%; padding:88px; display:flex; flex-direction:column; position:relative; z-index:2; }
+    [data-ratio="article"] .td-pad, [data-ratio="wide"] .td-pad { padding:76px 110px; }
+    .td-meta,.legend,.terminal { font-family:var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:0 0 28px; }
+    .td-title { margin:0; font-size:118px; line-height:1.04; font-weight:250; letter-spacing:-.02em; max-width:860px; }
+    .td-matrix { margin-top:auto; display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
+    .td-matrix div,.hud-grid div,.node-map span,.flow span { border:1px solid var(--line); padding:30px; font-size:34px; background:rgba(0,0,0,.03); }
+    .blueprint-technical { --paper:#092448; --ink:#e6f2ff; --muted:#9db9d6; --line:rgba(230,242,255,.26); --accent:#58c7ff; }
+    .blueprint::before { content:""; position:absolute; inset:0; opacity:.22; background-image:linear-gradient(to right,var(--ink) 1px,transparent 1px),linear-gradient(to bottom,var(--ink) 1px,transparent 1px); background-size:48px 48px; }
+    .node-map { margin-top:auto; display:grid; grid-template-columns:repeat(3,1fr); gap:28px; position:relative; z-index:2; }
+    .cyber-interface { --paper:#090b12; --ink:#edf4ff; --muted:#8aa0bf; --line:rgba(237,244,255,.22); --accent:#00e0ff; }
+    .cyber { background:radial-gradient(circle at 80% 20%, rgba(0,224,255,.18), transparent 34%); }
+    .terminal { color:var(--accent); }
+    .hud-grid { margin-top:auto; display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
+    .calm-diagram { --paper:#f7f5ef; --ink:#1f2933; --muted:#6b7280; --line:#d8d4c8; --accent:#4c6fff; }
+    .flow { margin-top:auto; display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
+    .flow span { border-color:var(--accent); text-align:center; }
+  </style>
+</head>
+<body>
+  <main class="sheet">
+    <section class="poster technical-diagram swiss-data" data-ratio="xhs" data-style="swiss-data">
+      <main class="td-pad">
+        <p class="td-meta">SYSTEM / 01</p>
+        <h1 class="td-title">一个流程<br>四个节点</h1>
+        <div class="td-matrix"><div>输入</div><div>处理</div><div>验证</div><div>输出</div></div>
+      </main>
+    </section>
+  </main>
+</body>
+</html>

package/skills/yuanflow-skill//350/247/206/350/247/211/345/215/241/347/211/207/347/224/237/346/210/220/overview.html ADDED Viewed

@@ -0,0 +1,272 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <title>YuanFlow Visual Card Sample Wall</title>
+  <style>
+    :root {
+      --bg: #121212;
+      --text: #f4eee4;
+      --muted: #aaa195;
+      --line: rgba(244,238,228,.14);
+      --serif: "Songti SC", "STSong", "SimSun", serif;
+      --sans: system-ui, sans-serif;
+      --mono: ui-monospace, monospace;
+    }
+    * { box-sizing: border-box; }
+    body {
+      margin: 0;
+      background:
+        radial-gradient(circle at 18% 0%, rgba(200,55,45,.20), transparent 32%),
+        radial-gradient(circle at 86% 10%, rgba(0,47,167,.18), transparent 30%),
+        var(--bg);
+      color: var(--text);
+      font-family: var(--sans);
+      -webkit-font-smoothing: antialiased;
+    }
+    main { max-width: 1680px; margin: 0 auto; padding: 64px 36px 96px; }
+    h1, h2, h3, p { margin: 0; }
+    .hero { margin-bottom: 64px; }
+    .kicker {
+      font-family: var(--mono);
+      font-size: 13px;
+      letter-spacing: .18em;
+      text-transform: uppercase;
+      color: #d6a84f;
+      margin-bottom: 18px;
+    }
+    h1 {
+      max-width: 1040px;
+      font-family: var(--serif);
+      font-size: clamp(46px, 6vw, 104px);
+      line-height: 1.04;
+      font-weight: 500;
+      letter-spacing: .02em;
+    }
+    .lead {
+      max-width: 900px;
+      margin-top: 20px;
+      color: var(--muted);
+      font-size: 20px;
+      line-height: 1.7;
+    }
+    .group { margin-top: 76px; }
+    .group-head {
+      display: flex;
+      align-items: end;
+      justify-content: space-between;
+      gap: 24px;
+      border-bottom: 1px solid var(--line);
+      padding-bottom: 20px;
+      margin-bottom: 26px;
+    }
+    h2 {
+      font-family: var(--serif);
+      font-size: 42px;
+      line-height: 1.15;
+      font-weight: 500;
+    }
+    .group-head p {
+      max-width: 520px;
+      color: var(--muted);
+      line-height: 1.6;
+      text-align: right;
+    }
+    .wall {
+      display: grid;
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+      gap: 22px;
+      align-items: stretch;
+    }
+    @media (max-width: 1200px) { .wall { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
+    @media (max-width: 720px) {
+      main { padding: 42px 18px 72px; }
+      .wall { grid-template-columns: 1fr; }
+      .group-head { display: block; }
+      .group-head p { text-align: left; margin-top: 12px; }
+    }
+    .sample {
+      min-height: 520px;
+      overflow: hidden;
+      position: relative;
+      color: var(--ink);
+      background: var(--paper);
+      border: 1px solid rgba(255,255,255,.12);
+      box-shadow: 0 20px 50px rgba(0,0,0,.22);
+    }
+    .sample.wide { grid-column: span 2; min-height: 380px; }
+    @media (max-width: 720px) { .sample.wide { grid-column: span 1; } }
+    .pad { height: 100%; padding: 34px; display: flex; flex-direction: column; position: relative; z-index: 2; }
+    .label {
+      font-family: var(--mono);
+      font-size: 10px;
+      letter-spacing: .15em;
+      text-transform: uppercase;
+      color: var(--muted2);
+      margin-bottom: 18px;
+    }
+    .title {
+      font-size: 46px;
+      line-height: 1.08;
+      font-weight: 650;
+      max-width: 340px;
+    }
+    .deck {
+      margin-top: 16px;
+      font-size: 16px;
+      line-height: 1.55;
+      color: var(--muted2);
+      max-width: 300px;
+    }
+    .foot {
+      margin-top: auto;
+      border-top: 1px solid var(--line2);
+      padding-top: 12px;
+      display: flex;
+      justify-content: space-between;
+      font-family: var(--mono);
+      font-size: 10px;
+      letter-spacing: .12em;
+      color: var(--muted2);
+      text-transform: uppercase;
+    }
+    .photo {
+      margin-top: 26px;
+      min-height: 170px;
+      background:
+        linear-gradient(135deg, rgba(255,255,255,.45), rgba(0,0,0,.08)),
+        var(--soft);
+      border: 1px solid var(--line2);
+    }
+    .grain::before {
+      content: "";
+      position: absolute;
+      inset: 0;
+      opacity: .24;
+      background-image: radial-gradient(currentColor 1px, transparent 1.5px);
+      background-size: 4px 4px;
+      pointer-events: none;
+      mix-blend-mode: multiply;
+    }
+    .mag { --paper:#f3f0e8; --ink:#0a0a0b; --muted2:#68625a; --line2:rgba(10,10,11,.2); --soft:#d8d2c6; font-family:var(--serif); }
+    .mag .title { font-family:var(--serif); font-weight:500; letter-spacing:.04em; }
+    .chinese { --paper:#f5ead8; --ink:#25180f; --muted2:#7a6048; --line2:rgba(37,24,15,.18); --soft:#dfcdb4; font-family:var(--serif); }
+    .chinese .title { writing-mode: vertical-rl; letter-spacing:.16em; height: 260px; font-family:var(--serif); font-weight:500; }
+    .newspaper { --paper:#f4f0e7; --ink:#111; --muted2:#5e5850; --line2:rgba(17,17,17,.24); --soft:#d8d0c3; font-family:var(--serif); }
+    .newspaper .columns { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:24px; }
+    .newspaper .columns p { border-top:1px solid var(--line2); padding-top:12px; font-size:14px; line-height:1.55; }
+    .museum { --paper:#efeee9; --ink:#1b1915; --muted2:#706b62; --line2:rgba(27,25,21,.18); --soft:#d8d6ce; font-family:var(--serif); }
+    .museum .object { margin:auto 0 28px; height:230px; background:radial-gradient(circle,#c7c4b9,transparent 64%); border:1px solid var(--line2); }
+    .pop { --paper:#fff04a; --ink:#111; --muted2:#4f3d00; --line2:#111; --soft:#fff8a8; }
+    .pop .title { font-size:58px; font-weight:900; letter-spacing:-.04em; }
+    .badge-row { display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; }
+    .badge-row span { border:3px solid var(--ink); background:white; padding:8px 11px; font-size:18px; font-weight:900; }
+    .brutal { --paper:#f5f5f0; --ink:#050505; --muted2:#333; --line2:#050505; --soft:#ff4a00; border:6px solid #050505; }
+    .brutal .title { font-size:60px; line-height:.96; font-weight:950; }
+    .brutal .rows { margin-top:auto; border-top:4px solid #050505; }
+    .brutal .rows p { margin:0; padding:12px 0; border-bottom:3px solid #050505; font-size:22px; font-weight:900; }
+    .maximal { --paper:#101010; --ink:#f7f03a; --muted2:#f36b2b; --line2:rgba(247,240,58,.35); --soft:#f0185c; }
+    .maximal .title { font-size:66px; font-weight:950; text-shadow:5px 5px 0 #f0185c; }
+    .maximal .repeat { position:absolute; inset:26px auto auto 18px; font-size:76px; font-weight:950; color:#f0185c; opacity:.38; line-height:.85; }
+    .event { --paper:#151414; --ink:#fff1d0; --muted2:#d5b986; --line2:rgba(255,241,208,.25); --soft:#ffcf33; }
+    .event .shape { width:190px; height:190px; background:linear-gradient(135deg,#ffcf33,#ff5a3d); margin:auto; transform:rotate(12deg); }
+    .swiss { --paper:#fafaf8; --ink:#0a0a0a; --muted2:#737373; --line2:#d4d4d2; --soft:#f0f0ee; }
+    .swiss .title { font-weight:250; letter-spacing:-.03em; }
+    .matrix { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:auto; }
+    .matrix div { background:var(--soft); padding:18px; font-size:22px; border:1px solid var(--line2); }
+    .blueprint { --paper:#092448; --ink:#e6f2ff; --muted2:#9db9d6; --line2:rgba(230,242,255,.25); --soft:#123660; }
+    .blueprint::after { content:""; position:absolute; inset:0; opacity:.16; background-image:linear-gradient(to right,var(--ink) 1px,transparent 1px),linear-gradient(to bottom,var(--ink) 1px,transparent 1px); background-size:28px 28px; }
+    .cyber { --paper:#090b12; --ink:#edf4ff; --muted2:#8aa0bf; --line2:rgba(237,244,255,.22); --soft:#00e0ff; }
+    .cyber .terminal { margin-top:auto; border:1px solid var(--line2); padding:18px; color:#00e0ff; font-family:var(--mono); }
+    .calm { --paper:#f7f5ef; --ink:#1f2933; --muted2:#6b7280; --line2:#d8d4c8; --soft:#e8ebf8; }
+    .flow { display:flex; gap:10px; margin-top:auto; }
+    .flow span { flex:1; border:1px solid #4c6fff; padding:16px 8px; text-align:center; }
+    .soft { --paper:#f2ece6; --ink:#25211d; --muted2:#82766b; --line2:rgba(37,33,29,.18); --soft:#d8d0c6; font-family:var(--serif); }
+    .soft .photo { border-radius:20px; box-shadow:0 14px 42px rgba(37,33,29,.15); }
+    .collage { --paper:#ead8ba; --ink:#2d2014; --muted2:#7d6750; --line2:rgba(45,32,20,.18); --soft:#f6ead6; font-family:var(--serif); }
+    .papers { position:relative; flex:1; }
+    .papers span { position:absolute; width:54%; height:36%; background:#f6ead6; box-shadow:0 12px 25px rgba(45,32,20,.18); }
+    .papers span:nth-child(1){left:2%;top:10%;transform:rotate(-5deg)} .papers span:nth-child(2){right:5%;top:24%;transform:rotate(4deg)} .papers span:nth-child(3){left:24%;bottom:8%;transform:rotate(-2deg)}
+    .botanical { --paper:#eef0df; --ink:#172418; --muted2:#62715e; --line2:rgba(23,36,24,.18); --soft:#d2dfc8; font-family:var(--serif); }
+    .botanical .leaf { margin:auto; width:220px; height:280px; border-radius:70% 0 70% 0; background:#3f7d4a; transform:rotate(-18deg); opacity:.82; }
+    .film { --paper:#1b1712; --ink:#f2dec1; --muted2:#b69d78; --line2:rgba(242,222,193,.2); --soft:#30271d; font-family:var(--serif); }
+    .frames { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:auto; }
+    .frames span { height:88px; background:#30271d; border:6px solid #0b0907; }
+    .product { --paper:#f8f7f2; --ink:#101214; --muted2:#6f757c; --line2:rgba(16,18,20,.16); --soft:#e8eef8; }
+    .product .object { margin:auto; width:210px; height:210px; border-radius:28px; background:linear-gradient(145deg,rgba(255,255,255,.65),rgba(0,0,0,.08)),#0d6efd; box-shadow:0 30px 60px rgba(16,18,20,.22); transform:rotate(-6deg); }
+    .luxury { --paper:#10100f; --ink:#f4ead7; --muted2:#a89777; --line2:rgba(244,234,215,.18); --soft:#d0a85a; font-family:var(--serif); }
+    .luxury .title { font-family:var(--serif); font-weight:500; margin-top:auto; }
+    .brand { --paper:#f5f3ed; --ink:#121212; --muted2:#626262; --line2:rgba(18,18,18,.16); --soft:#c8372d; }
+    .palette { display:flex; gap:10px; margin-top:auto; }
+    .palette span { width:54px; height:54px; background:#c8372d; } .palette span:nth-child(2){background:#243c72} .palette span:nth-child(3){background:#121212}
+    .app { --paper:#f8f7f2; --ink:#101214; --muted2:#6f757c; --line2:rgba(16,18,20,.16); --soft:#fff; }
+    .screen { height:190px; border:1px solid var(--line2); background:#fff; padding:16px; margin-top:auto; display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; }
+    .screen span { background:#eef1f5; border:1px solid #d6dbe2; }
+  </style>
+</head>
+<body>
+<main>
+  <section class="hero">
+    <p class="kicker">YuanFlow Visual Card Skill / Sample Wall</p>
+    <h1>母风格样张墙：从系统说明页改为真实视觉预览</h1>
+    <p class="lead">5 个母风格各自有独立模板骨架。子风格不是换颜色，而是换字体、材料、版式、图像处理和内容节奏。</p>
+  </section>
+  <section class="group">
+    <div class="group-head"><h2>Editorial Publishing</h2><p>文章插图、文化内容、研究摘要、精致封面。</p></div>
+    <div class="wall">
+      <article class="sample mag grain"><div class="pad"><p class="label">Magazine Paper</p><h3 class="title">在信息里<br>找到一条路</h3><div class="photo"></div><div class="foot"><span>观察</span><span>结论</span></div></div></article>
+      <article class="sample chinese grain"><div class="pad"><p class="label">Chinese Literary</p><h3 class="title">春山慢记</h3><p class="deck">把一段路写成一页安静的注脚。</p><div class="foot"><span>本地旅行</span><span>卷二</span></div></div></article>
+      <article class="sample newspaper"><div class="pad"><p class="label">Data Newspaper</p><h3 class="title">三组数据解释<br>本轮变化</h3><div class="columns"><p>核心观察一，来自真实材料。</p><p>核心观察二，配合一组小图表。</p></div><div class="foot"><span>Report</span><span>2026</span></div></div></article>
+      <article class="sample museum"><div class="pad"><p class="label">Museum Label</p><div class="object"></div><h3 class="title">Object<br>Study 01</h3><p class="deck">材料、功能与设计判断。</p></div></article>
+    </div>
+  </section>
+  <section class="group">
+    <div class="group-head"><h2>Social Campaign</h2><p>小红书封面、活动视觉、爆款图、强观点海报。</p></div>
+    <div class="wall">
+      <article class="sample pop"><div class="pad"><p class="label">Pop Magazine</p><h3 class="title">这 6 个<br>真的好用</h3><div class="photo"></div><div class="badge-row"><span>实测</span><span>清单</span><span>避坑</span></div></div></article>
+      <article class="sample brutal"><div class="pad"><p class="label">Neo Brutalist</p><h3 class="title">别再这样<br>做封面</h3><div class="rows"><p>01 字太小</p><p>02 图太散</p><p>03 没焦点</p></div></div></article>
+      <article class="sample maximal"><div class="repeat">FLOW FLOW FLOW</div><div class="pad"><p class="label">Maximal Poster</p><h3 class="title">年度<br>灵感大会</h3><div class="foot"><span>06.18</span><span>LIVE</span></div></div></article>
+      <article class="sample event"><div class="pad"><p class="label">Event Key Visual</p><h3 class="title">AI 内容<br>工作坊</h3><div class="shape"></div><div class="foot"><span>Online</span><span>Free Entry</span></div></div></article>
+    </div>
+  </section>
+  <section class="group">
+    <div class="group-head"><h2>Technical Diagram</h2><p>产品解释、系统架构、AI 工作流、文章图解。</p></div>
+    <div class="wall">
+      <article class="sample swiss"><div class="pad"><p class="label">Swiss Data</p><h3 class="title">一个流程<br>四个节点</h3><div class="matrix"><div>输入</div><div>处理</div><div>验证</div><div>输出</div></div></div></article>
+      <article class="sample blueprint"><div class="pad"><p class="label">Blueprint Technical</p><h3 class="title">Runtime<br>Control Map</h3><div class="matrix"><div>Agent</div><div>Tool</div><div>Memory</div><div>Guard</div></div></div></article>
+      <article class="sample cyber"><div class="pad"><p class="label">Cyber Interface</p><h3 class="title">自动化<br>进入可控状态</h3><div class="terminal">~/yuanflow/run --visual</div></div></article>
+      <article class="sample calm"><div class="pad"><p class="label">Calm Diagram</p><h3 class="title">从想法<br>到图像</h3><div class="flow"><span>提炼</span><span>转译</span><span>排版</span><span>验证</span></div></div></article>
+    </div>
+  </section>
+  <section class="group">
+    <div class="group-head"><h2>Lifestyle Collage</h2><p>旅行、读书、生活方式、照片故事、自然食材。</p></div>
+    <div class="wall">
+      <article class="sample soft"><div class="pad"><p class="label">Soft Studio</p><h3 class="title">周末整理<br>工作台</h3><div class="photo"></div><div class="badge-row"><span>光线</span><span>收纳</span><span>节奏</span></div></div></article>
+      <article class="sample collage"><div class="pad"><p class="label">Collage Desk</p><h3 class="title">本周<br>灵感桌面</h3><div class="papers"><span></span><span></span><span></span></div><div class="foot"><span>Archive</span><span>06</span></div></div></article>
+      <article class="sample botanical"><div class="pad"><p class="label">Botanical Organic</p><div class="leaf"></div><h3 class="title">春天的<br>食材清单</h3><div class="foot"><span>Fresh</span><span>Seasonal</span></div></div></article>
+      <article class="sample film"><div class="pad"><p class="label">Film Contact Sheet</p><h3 class="title">一天里的<br>六个画面</h3><div class="frames"><span></span><span></span><span></span><span></span></div><div class="foot"><span>Roll 02</span><span>18:42</span></div></div></article>
+    </div>
+  </section>
+  <section class="group">
+    <div class="group-head"><h2>Product Brand</h2><p>产品推荐、App 功能图、品牌系统、商业封面。</p></div>
+    <div class="wall">
+      <article class="sample product"><div class="pad"><p class="label">Product Cutout</p><h3 class="title">一个工具<br>解决三件事</h3><div class="object"></div><div class="badge-row"><span>快</span><span>稳</span><span>可控</span></div></div></article>
+      <article class="sample luxury"><div class="pad"><p class="label">Luxury Minimal</p><div class="photo"></div><h3 class="title">Quiet<br>Precision</h3><div class="foot"><span>Object</span><span>2026</span></div></div></article>
+      <article class="sample brand"><div class="pad"><p class="label">Brand System</p><h3 class="title">Visual<br>System</h3><div class="palette"><span></span><span></span><span></span></div><div class="foot"><span>Tokens</span><span>Components</span></div></div></article>
+      <article class="sample app"><div class="pad"><p class="label">App Feature</p><h3 class="title">新版工作台<br>少点三次</h3><div class="screen"><span></span><span></span><span></span></div><div class="badge-row"><span>自动</span><span>批量</span><span>可见</span></div></div></article>
+    </div>
+  </section>
+</main>
+</body>
+</html>

package/skills/yuanflow-skill//350/247/206/350/247/211/345/215/241/347/211/207/347/224/237/346/210/220/references/commercial-system.md ADDED Viewed

@@ -0,0 +1,56 @@
+# Commercial System
+This skill is designed as a long-term reusable production system, not a one-off prompt style.
+## Fixed Backbone
+Keep these stable across every task:
+- Intake: purpose, platform, ratio, source material, required copy, image/screenshot availability, and rights constraints.
+- Planning: one page = one visual idea; page role must be named before HTML is built.
+- Ratio: use fixed pixel boards from `layout-playbook.md`; compose each ratio separately.
+- Typography: mobile-readable text; cut copy before shrinking below readable sizes.
+- Evidence: real screenshots/photos/data must stay truthful and legible.
+- Output: task folder with `index.html`, `assets/`, optional `output/`, and source notes when web assets are used.
+- Validation: run `quality-check.md`; run `scripts/check_visual_card.py` on HTML when practical.
+## Flexible Design Layer
+Change these to create meaningful variants:
+- Style family: e.g. Editorial Paper, Pop Magazine, Blueprint Technical, Luxury Minimal.
+- Palette: controlled 2-4 color system; one primary accent.
+- Layout module: cover, image-led, object-callout, matrix, ledger, diagram, quote, contact sheet.
+- Material: paper, film, blueprint, museum wall, screen, collage, studio backdrop, dark interface.
+- Image treatment: full-bleed, framed, cutout, screenshot chrome, generated object, texture-only, photo grid.
+- Copy rhythm: title-heavy, data-heavy, quote-led, annotation-led, checklist-led.
+## Decision Matrix
+| User asks for | Fixed output decision | Flexible direction |
+| --- | --- | --- |
+| 小红书封面/图文 | 3:4, cover + pages, thumbnail-first title | Pop Magazine, Chinese Editorial, Soft Studio, Product Cutout |
+| 公众号封面 | 21:9 + optional 1:1, separate compositions | Editorial Paper, Luxury Minimal, Event Key Visual |
+| 文章插图 | 16:9 / 4:3, one concept image | Calm Diagram, Museum Label, Blueprint Technical, Editorial Paper |
+| 设计稿/设计图 | ratio by use, explain or persuade first | Swiss Data, Blueprint Technical, Product Cutout, Maximal Poster |
+| 产品功能图 | object/screenshot + callouts | Product Cutout, Swiss Data, Cyber Interface |
+| 活动/课程海报 | poster or 3:4, title/date/location hierarchy | Event Key Visual, Maximal Poster, Neo-Brutalist |
+| 风格探索 | same content, 3-6 variants | Change style + layout + image treatment, not color only |
+## Commercial Constraints
+- Do not invent data, product specs, rankings, endorsements, user quotes, awards, or press mentions.
+- Do not use real brand logos as decoration unless the user supplies them or the use is clearly contextual.
+- Do not put final Chinese/English title text inside generated image assets; final text belongs in HTML for editability.
+- Do not produce a style that depends on a single fragile effect. It should still work if the image changes.
+- Do not make parent templates too specific. Keep them reusable through style tokens and modules.
+## Maturity Criteria
+A generated result is mature enough for reuse when:
+- The same HTML structure can accept a new topic with only copy/image/style-token changes.
+- The page role is clear without reading source notes.
+- Style identity survives grayscale thumbnail review.
+- The design has at least one memorable visual decision.
+- The output can be revised by changing HTML/CSS, not by regenerating the whole image.

package/skills/yuanflow-skill//350/247/206/350/247/211/345/215/241/347/211/207/347/224/237/346/210/220/references/layout-playbook.md ADDED Viewed

@@ -0,0 +1,98 @@
+# Layout Playbook
+## Ratios
+- Rednote 3:4: `1080x1440`, best for cover and carousel pages.
+- Square cover: `1080x1080`, best for WeChat square, avatar-like covers, quote cards.
+- WeChat main: `2100x900`, compose as wide cover, not a crop.
+- Article illustration: `1600x900`, `1440x1080`, or `1500x1000`.
+- Poster: `1200x1800` or `1080x1620`.
+## Fixed Composition Rules
+- Keep safe margins: 72-96px on 1080-wide cards, 96-140px on wide covers.
+- Use fixed pixel boards for export. Do not build poster content with `vw` or `vh`.
+- Keep each page to one main idea and one main focal point.
+- Use footer/meta as a quiet anchor, not as a second title.
+- Use a stable page sequence for carousels; vary the layout rhythm inside the sequence.
+## Cover Layouts
+- Big title + hero image: use when the image is evidence or mood.
+- Big title + abstract system block: use for tools, concepts, frameworks.
+- Type-only title: use for strong thesis, quotes, premium covers.
+- Split object cover: title on one side, product/person/object on the other.
+- Full-bleed photo cover: only if the photo has a quiet zone for text.
+- Event key visual: title + date/location + one dominant visual mark.
+- Product cutout cover: object/screenshot + 2-4 callouts + benefit title.
+- Newspaper cover: headline + data strip + one chart or photo.
+## Content Page Layouts
+- Checklist: 4-6 rows, one point per row.
+- Matrix: 6-12 cells, one highlighted cell maximum.
+- Before/After: top/bottom on 3:4, left/right on 21:9.
+- Evidence feature: screenshot/photo takes 45%-65% of page.
+- Diagram: 3-5 nodes or steps, one flow direction.
+- Pull quote: one sentence plus source/context anchors.
+- Contact sheet: 3-6 photos, each with short captions.
+- Object study: one object, three annotations, one conclusion.
+- Exploded callout: one object/screenshot with 3-5 labeled callouts.
+- Timeline: 4-7 moments with one clear time axis.
+- Scorecard: 4-6 criteria with ratings or short judgments.
+- Myth/fact: paired rows for misconception correction.
+- Recipe/process: ingredients/resources at top, steps below.
+## Page Sequencing For Rednote
+1. Cover: hook + visual promise.
+2. Context: why this matters.
+3. Evidence: screenshot/photo/data.
+4. Method: steps or framework.
+5. Detail: checklist, comparison, matrix.
+6. Result: takeaway or before/after.
+7. Closing: comment prompt or summary.
+Use 5-9 pages for most posts. If a page has only one weak point, merge it with the previous page.
+Recommended rhythm:
+- Page 1: cover hook.
+- Page 2: context or promise.
+- Page 3: evidence or visual proof.
+- Page 4: method / framework.
+- Page 5: checklist / comparison / matrix.
+- Page 6: example / case / before-after.
+- Page 7: summary / save-worthy list.
+- Page 8-9: optional FAQ, resource list, comment prompt.
+## Article Illustration
+- Do not force full carousel logic into article images.
+- Make one strong concept image: title optional, labels useful, paragraph text minimal.
+- For technical articles, use Calm Diagram, Blueprint Technical, Swiss Data, or Cyber Interface.
+- For essays, use Editorial Paper, Chinese Editorial, Museum Label, Film Contact Sheet, or Luxury Minimal.
+- Prefer one diagram, one object, one scene, or one metaphor. Avoid mini-posters with too many slogans.
+## Design Graphics
+- Define the intended function first: explain, compare, decorate, summarize, brand, or persuade.
+- If it explains: diagram/matrix/checklist.
+- If it persuades: cover/poster/quote.
+- If it decorates an article: image-led or object-led with light labels.
+- If it summarizes: data-led, ledger, or contact sheet.
+## Layout Module Library
+- `hero-title`: large title + subtitle + footer.
+- `image-led`: image well or full-bleed image + title in safe zone.
+- `object-callout`: cutout or screenshot + label pins.
+- `matrix-grid`: 6-12 cells, one accent maximum.
+- `ledger-list`: 4-7 rows with number/title/short note.
+- `data-chart`: bars, towers, score rows, or stat blocks.
+- `diagram-flow`: 3-5 nodes connected by lines/arrows.
+- `quote-page`: one core sentence with source/context anchors.
+- `contact-sheet`: 3-6 image frames with captions.
+- `split-compare`: before/after, old/new, pro/con, A/B.
+Choose one primary module per page. A secondary module is allowed only if it supports the primary idea.