npm - @hiai-gg/hiai-opencode - Versions diffs - 0.2.1 → 0.2.2 - Mend

@hiai-gg/hiai-opencode 0.2.1 → 0.2.2

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

package/skills/design-templates/html-ppt/templates/full-decks/xhs-pastel-card/index.html ADDED Viewed

@@ -0,0 +1,147 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>XHS Pastel Card</title>
+<link rel="stylesheet" href="../../../assets/fonts.css">
+<link rel="stylesheet" href="../../../assets/base.css">
+<link rel="stylesheet" href="style.css">
+</head>
+<body class="tpl-xhs-pastel-card">
+<div class="deck">
+  <!-- 1. COVER -->
+  <section class="slide is-active">
+    <div class="xp-blob b1"></div>
+    <div class="xp-blob b2"></div>
+    <div class="xp-blob b3"></div>
+    <div class="xp-topbar"><div class="xp-chip">A soft manifesto</div><div class="xp-page">01 · 08</div></div>
+    <div class="xp-kicker">Living With AI · 2026</div>
+    <h1 class="xp-h1">放慢一点，<br>让 <em>AI</em> 帮你<br>过一种 <span class="rose">更温柔</span><br>的生活</h1>
+    <div class="xp-divider"></div>
+    <p class="xp-sub">这不是一份效率指南。这是一份「怎么用 AI 少做一些事」的清单 —— 把挤出来的 4 小时还给你自己。</p>
+    <div class="xp-footer"><span>by lewis · pastel edition</span><span>cover</span></div>
+  </section>
+  <!-- 2. SECTION -->
+  <section class="slide">
+    <div class="xp-blob b2"></div>
+    <div class="xp-blob b3"></div>
+    <div class="xp-topbar"><div class="xp-chip mint">Chapter one</div><div class="xp-page">02 · 08</div></div>
+    <div style="margin:auto 0">
+      <div class="xp-kicker">先问自己</div>
+      <h1 class="xp-h1" style="font-size:120px">什么事<br>是你 <span class="mint">其实不想做</span> 的？</h1>
+      <p class="xp-sub">不是「不得不做」，是「做的时候灵魂在叹气」。</p>
+    </div>
+    <div class="xp-footer"><span>section · chapter 1</span><span>02 · 08</span></div>
+  </section>
+  <!-- 3. CONTENT 2x2 pastel cards -->
+  <section class="slide">
+    <div class="xp-blob b1"></div>
+    <div class="xp-topbar"><div class="xp-chip rose">Four little escapes</div><div class="xp-page">03 · 08</div></div>
+    <h2 class="xp-h2">四件可以<br>完全交给 <em>AI</em> 的小事</h2>
+    <div class="xp-grid-2">
+      <div class="xp-card peach"><div class="xp-num">01</div><h4>回复那种「收到」邮件</h4><p>它们不需要你思考。让 AI 按你的语气自动处理，一周省 40 分钟。</p></div>
+      <div class="xp-card mint"><div class="xp-num">02</div><h4>订餐厅、改签、查路线</h4><p>一句话外包出去。你只负责选最后选项，不负责翻十个 app。</p></div>
+      <div class="xp-card sky"><div class="xp-num">03</div><h4>把会议录音变成行动项</h4><p>录音 → 摘要 → todo 一键完成。你只需要确认和签字。</p></div>
+      <div class="xp-card lilac"><div class="xp-num">04</div><h4>整理上周拍的 300 张照片</h4><p>按事件分类、挑 10 张精选、写图说。整理档案这件事终于被自动化了。</p></div>
+    </div>
+    <div class="xp-footer"><span>content · 2x2</span><span>03 · 08</span></div>
+  </section>
+  <!-- 4. QUOTE -->
+  <section class="slide">
+    <div class="xp-blob b3"></div>
+    <div class="xp-blob b2"></div>
+    <div class="xp-topbar"><div class="xp-chip lilac">A small pause</div><div class="xp-page">04 · 08</div></div>
+    <div class="xp-hero-card">
+      <p class="xp-quote">效率工具的终点，不是<em> 做更多</em>，<br>而是 <em>有资格做更少</em>。</p>
+      <div class="xp-divider"></div>
+      <p class="xp-sub">当你把「收到」邮件、订餐、行程、照片整理都交出去，你才会惊讶地发现 —— 原来一周有 4 个小时是空的。</p>
+    </div>
+    <div class="xp-footer"><span>quote</span><span>04 · 08</span></div>
+  </section>
+  <!-- 5. CODE / PROMPT -->
+  <section class="slide">
+    <div class="xp-blob b1"></div>
+    <div class="xp-topbar"><div class="xp-chip">My auto-reply prompt</div><div class="xp-page">05 · 08</div></div>
+    <h2 class="xp-h2">把「<em>收到邮件</em>」<br>自动化的 <span class="rose">一段 prompt</span></h2>
+    <pre class="xp-codebox"><span class="cm"># auto-reply skill</span>
+<span class="kw">when</span> email matches <span class="st">"收到 / 好的 / 确认 / 收到谢谢"</span>:
+  reply:
+    tone: <span class="st">"温柔，简短，不要太商业"</span>
+    max_lines: <span class="hl">2</span>
+    sign_with: <span class="st">"— Lewis"</span>
+<span class="kw">always_skip</span>:
+  - from: [<span class="st">"家人"</span>, <span class="st">"伴侣"</span>, <span class="st">"亲密朋友"</span>]
+  - contains: [<span class="st">"紧急"</span>, <span class="st">"合同"</span>, <span class="st">"付款"</span>]
+<span class="cm"># 一周省 38 分钟，测过</span></pre>
+    <div class="xp-footer"><span>content · prompt</span><span>05 · 08</span></div>
+  </section>
+  <!-- 6. CHART — time donut -->
+  <section class="slide">
+    <div class="xp-blob b2"></div>
+    <div class="xp-topbar"><div class="xp-chip mint">Your week, rebuilt</div><div class="xp-page">06 · 08</div></div>
+    <h2 class="xp-h2">一周 4 小时 <span class="mint">还给自己</span></h2>
+    <div style="display:flex;align-items:center;gap:60px;margin-top:30px">
+      <svg viewBox="0 0 260 260" style="width:300px;flex-shrink:0">
+        <circle cx="130" cy="130" r="100" fill="none" stroke="#fef0e4" stroke-width="40"/>
+        <!-- email 12% -->
+        <circle cx="130" cy="130" r="100" fill="none" stroke="#f48b5c" stroke-width="40" stroke-dasharray="75 628" stroke-dashoffset="0" transform="rotate(-90 130 130)"/>
+        <!-- logistics 18% -->
+        <circle cx="130" cy="130" r="100" fill="none" stroke="#2e9d70" stroke-width="40" stroke-dasharray="113 628" stroke-dashoffset="-75" transform="rotate(-90 130 130)"/>
+        <!-- meetings 14% -->
+        <circle cx="130" cy="130" r="100" fill="none" stroke="#4e7ed6" stroke-width="40" stroke-dasharray="88 628" stroke-dashoffset="-188" transform="rotate(-90 130 130)"/>
+        <!-- photos 6% -->
+        <circle cx="130" cy="130" r="100" fill="none" stroke="#7b5dc4" stroke-width="40" stroke-dasharray="38 628" stroke-dashoffset="-276" transform="rotate(-90 130 130)"/>
+        <text x="130" y="130" text-anchor="middle" font-family="Playfair Display" font-size="44" font-weight="900" fill="#2a2340">4h</text>
+        <text x="130" y="156" text-anchor="middle" font-family="Inter" font-size="12" fill="#9089a8">per week saved</text>
+      </svg>
+      <div style="flex:1">
+        <div class="xp-grid-2" style="grid-template-columns:1fr;gap:12px;margin-top:0">
+          <div class="xp-card peach" style="padding:14px 20px;display:flex;align-items:center;gap:14px"><div style="width:14px;height:14px;border-radius:50%;background:var(--xp-peach-d)"></div><div><h4 style="margin:0;font-size:17px">48 min · 邮件</h4></div></div>
+          <div class="xp-card mint" style="padding:14px 20px;display:flex;align-items:center;gap:14px"><div style="width:14px;height:14px;border-radius:50%;background:var(--xp-mint-d)"></div><div><h4 style="margin:0;font-size:17px">72 min · 订/改/查</h4></div></div>
+          <div class="xp-card sky" style="padding:14px 20px;display:flex;align-items:center;gap:14px"><div style="width:14px;height:14px;border-radius:50%;background:var(--xp-sky-d)"></div><div><h4 style="margin:0;font-size:17px">56 min · 会议摘要</h4></div></div>
+          <div class="xp-card lilac" style="padding:14px 20px;display:flex;align-items:center;gap:14px"><div style="width:14px;height:14px;border-radius:50%;background:var(--xp-lilac-d)"></div><div><h4 style="margin:0;font-size:17px">24 min · 照片整理</h4></div></div>
+        </div>
+      </div>
+    </div>
+    <div class="xp-footer"><span>chart · donut</span><span>06 · 08</span></div>
+  </section>
+  <!-- 7. CTA -->
+  <section class="slide">
+    <div class="xp-blob b1"></div>
+    <div class="xp-blob b3"></div>
+    <div class="xp-topbar"><div class="xp-chip rose">This weekend</div><div class="xp-page">07 · 08</div></div>
+    <h2 class="xp-h2">这周末，<br>先给自己 <em>放一个小假</em></h2>
+    <div class="xp-grid-3">
+      <div class="xp-card lemon"><div class="xp-num">☕</div><h4>Saturday morning</h4><p>挑一个你最烦的小事，写 prompt，让它从此不再烦你。</p></div>
+      <div class="xp-card peach"><div class="xp-num">🌸</div><h4>Saturday afternoon</h4><p>去散步。什么都不带。AI 在家帮你看着消息。</p></div>
+      <div class="xp-card sky"><div class="xp-num">🌙</div><h4>Sunday night</h4><p>复盘：哪 4 小时是真的空的？下周继续。</p></div>
+    </div>
+    <div class="xp-footer"><span>cta</span><span>07 · 08</span></div>
+  </section>
+  <!-- 8. THANKS -->
+  <section class="slide">
+    <div class="xp-blob b2"></div>
+    <div style="margin:auto 0;text-align:center">
+      <div class="xp-kicker" style="text-align:center">thanks for reading</div>
+      <h1 class="xp-h1" style="font-size:160px;text-align:center">谢谢 <em>·</em> thanks</h1>
+      <div class="xp-divider" style="margin:24px auto"></div>
+      <p class="xp-sub" style="margin:0 auto">如果你也想过更温柔的一周，评论区跟我说说你打算把哪一件事先交出去 ♡</p>
+    </div>
+    <div class="xp-footer"><span>end</span><span>08 · 08</span></div>
+  </section>
+</div>
+<script src="../../../assets/runtime.js"></script>
+</body>
+</html>

package/skills/design-templates/html-ppt/templates/full-decks/xhs-pastel-card/style.css ADDED Viewed

@@ -0,0 +1,66 @@
+/* xhs-pastel-card — 柔和马卡龙大色块封面风 */
+.tpl-xhs-pastel-card{
+  --xp-bg:#fef8f1;
+  --xp-ink:#2a2340;
+  --xp-ink2:#5b5470;
+  --xp-muted:#9089a8;
+  --xp-peach:#ffd8c2;
+  --xp-peach-d:#f48b5c;
+  --xp-mint:#c8ecd8;
+  --xp-mint-d:#2e9d70;
+  --xp-sky:#c9dcfb;
+  --xp-sky-d:#4e7ed6;
+  --xp-lilac:#ddd0f5;
+  --xp-lilac-d:#7b5dc4;
+  --xp-lemon:#fdf0b2;
+  --xp-lemon-d:#c8910a;
+  --xp-rose:#fcd0dd;
+  --xp-rose-d:#c94673;
+  background:var(--xp-bg);
+  color:var(--xp-ink);
+  font-family:'Playfair Display','Noto Serif SC','Inter','Noto Sans SC',Georgia,serif;
+}
+.tpl-xhs-pastel-card .slide{background:var(--xp-bg);color:var(--xp-ink);padding:76px 90px}
+.tpl-xhs-pastel-card .xp-blob{position:absolute;border-radius:50%;filter:blur(2px);opacity:.85;z-index:0}
+.tpl-xhs-pastel-card .xp-blob.b1{width:420px;height:420px;background:radial-gradient(circle,var(--xp-peach),transparent 70%);top:-8%;right:-6%}
+.tpl-xhs-pastel-card .xp-blob.b2{width:360px;height:360px;background:radial-gradient(circle,var(--xp-lilac),transparent 72%);bottom:-10%;left:-8%}
+.tpl-xhs-pastel-card .xp-blob.b3{width:260px;height:260px;background:radial-gradient(circle,var(--xp-mint),transparent 72%);top:40%;right:20%}
+.tpl-xhs-pastel-card .slide > *{position:relative;z-index:2}
+.tpl-xhs-pastel-card .xp-topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;font-family:'Inter','Noto Sans SC',sans-serif}
+.tpl-xhs-pastel-card .xp-chip{display:inline-flex;align-items:center;gap:10px;padding:8px 18px;border-radius:999px;background:#fff;border:1.5px solid rgba(42,35,64,.1);font-size:13px;font-weight:600;letter-spacing:.08em;color:var(--xp-ink2);text-transform:uppercase}
+.tpl-xhs-pastel-card .xp-chip::before{content:'';width:9px;height:9px;border-radius:50%;background:var(--xp-peach-d)}
+.tpl-xhs-pastel-card .xp-chip.mint::before{background:var(--xp-mint-d)}
+.tpl-xhs-pastel-card .xp-chip.sky::before{background:var(--xp-sky-d)}
+.tpl-xhs-pastel-card .xp-chip.lilac::before{background:var(--xp-lilac-d)}
+.tpl-xhs-pastel-card .xp-chip.rose::before{background:var(--xp-rose-d)}
+.tpl-xhs-pastel-card .xp-page{font-family:'Inter',sans-serif;font-size:13px;color:var(--xp-muted);letter-spacing:.12em;font-weight:600}
+.tpl-xhs-pastel-card .xp-kicker{font-family:'Inter',sans-serif;font-size:14px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--xp-peach-d);margin-bottom:14px}
+.tpl-xhs-pastel-card .xp-h1{font-size:96px;font-weight:900;line-height:1.05;letter-spacing:-2px;margin:0 0 18px;color:var(--xp-ink);font-family:'Playfair Display','Noto Serif SC',serif}
+.tpl-xhs-pastel-card .xp-h1 em{font-style:italic;color:var(--xp-peach-d);font-family:'Playfair Display',serif}
+.tpl-xhs-pastel-card .xp-h1 .rose{color:var(--xp-rose-d);font-style:italic}
+.tpl-xhs-pastel-card .xp-h1 .mint{color:var(--xp-mint-d);font-style:italic}
+.tpl-xhs-pastel-card .xp-h2{font-size:60px;font-weight:800;line-height:1.1;letter-spacing:-1px;margin:0 0 14px;font-family:'Playfair Display','Noto Serif SC',serif}
+.tpl-xhs-pastel-card .xp-sub{font-family:'Inter','Noto Sans SC',sans-serif;font-size:21px;line-height:1.6;color:var(--xp-ink2);max-width:800px;font-weight:400}
+.tpl-xhs-pastel-card .xp-card{border-radius:28px;padding:30px 34px;background:#fff;box-shadow:0 14px 40px rgba(42,35,64,.08);position:relative;overflow:hidden}
+.tpl-xhs-pastel-card .xp-card.peach{background:var(--xp-peach)}
+.tpl-xhs-pastel-card .xp-card.mint{background:var(--xp-mint)}
+.tpl-xhs-pastel-card .xp-card.sky{background:var(--xp-sky)}
+.tpl-xhs-pastel-card .xp-card.lilac{background:var(--xp-lilac)}
+.tpl-xhs-pastel-card .xp-card.lemon{background:var(--xp-lemon)}
+.tpl-xhs-pastel-card .xp-card.rose{background:var(--xp-rose)}
+.tpl-xhs-pastel-card .xp-card .xp-num{font-family:'Playfair Display',serif;font-size:68px;font-weight:900;font-style:italic;line-height:1;opacity:.85}
+.tpl-xhs-pastel-card .xp-card h4{font-size:22px;font-weight:800;margin:8px 0;font-family:'Inter','Noto Sans SC',sans-serif}
+.tpl-xhs-pastel-card .xp-card p{font-family:'Inter','Noto Sans SC',sans-serif;font-size:15px;line-height:1.55;color:var(--xp-ink2)}
+.tpl-xhs-pastel-card .xp-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:26px}
+.tpl-xhs-pastel-card .xp-grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px;margin-top:26px}
+.tpl-xhs-pastel-card .xp-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:24px}
+.tpl-xhs-pastel-card .xp-hero-card{background:#fff;border-radius:36px;padding:40px 46px;margin-top:28px;box-shadow:0 20px 50px rgba(42,35,64,.1)}
+.tpl-xhs-pastel-card .xp-quote{font-family:'Playfair Display','Noto Serif SC',serif;font-size:40px;font-weight:800;font-style:italic;line-height:1.3;color:var(--xp-ink)}
+.tpl-xhs-pastel-card .xp-quote::before{content:'“';font-size:100px;line-height:.8;display:block;color:var(--xp-peach-d);opacity:.7}
+.tpl-xhs-pastel-card .xp-footer{position:absolute;left:90px;right:90px;bottom:40px;display:flex;justify-content:space-between;font-family:'Inter',sans-serif;font-size:12px;color:var(--xp-muted);letter-spacing:.1em}
+.tpl-xhs-pastel-card .xp-divider{width:90px;height:4px;background:linear-gradient(90deg,var(--xp-peach-d),var(--xp-rose-d));border-radius:2px;margin:20px 0}
+.tpl-xhs-pastel-card .xp-codebox{background:#2a2340;color:#fef8f1;border-radius:24px;padding:26px 30px;font-family:'JetBrains Mono',monospace;font-size:14px;line-height:1.85;margin-top:22px}
+.tpl-xhs-pastel-card .xp-codebox .cm{color:#9089a8}
+.tpl-xhs-pastel-card .xp-codebox .kw{color:#ffc6a0}
+.tpl-xhs-pastel-card .xp-codebox .st{color:#c8ecd8}
+.tpl-xhs-pastel-card .xp-codebox .hl{color:#fcd0dd;font-weight:700}

package/skills/design-templates/html-ppt/templates/full-decks/xhs-post/README.md ADDED Viewed

@@ -0,0 +1,9 @@
+# xhs-post · 小红书 9 图
+小红书 3:4 图文格式，9 张图（810 × 1080）。结构：封面 → hook → 痛点 → aha moment → 步骤 1-3 → 效果 → CTA 关注。
+手写便签 + 贴纸 + 圆角硬阴影的 MUJI/风格，暖米色背景 + 粉橘黄柔和渐变。每页右上角有 `N / 9` 页码贴纸，最后一页有话题 tag。
+**适用场景：** 小红书 / 微博九宫格 / 公众号图文首图 / 抖音图文卡片。
+**使用方式：** 每张 `.slide` 直接截图导出即可，保持 810×1080 比例。按 → 依次浏览。
+**Feel:** 手帐、贴纸、闺蜜跟你分享干货的 vibe。

package/skills/design-templates/html-ppt/templates/full-decks/xhs-post/index.html ADDED Viewed

@@ -0,0 +1,133 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
+<title>每天只睡 6h 还精神？· 小红书图文</title>
+<link rel="stylesheet" href="../../../assets/fonts.css">
+<link rel="stylesheet" href="../../../assets/base.css">
+<link rel="stylesheet" href="../../../assets/animations/animations.css">
+<link rel="stylesheet" href="style.css">
+</head>
+<body class="tpl-xhs-post">
+<div class="deck">
+  <!-- 1. Cover -->
+  <section class="slide" data-title="Cover">
+    <div class="page-dot">1 / 9</div>
+    <div class="sticker pink" style="top:120px;left:48px;transform:rotate(-6deg)">💤 救命</div>
+    <div class="sticker yellow" style="top:140px;right:64px;transform:rotate(5deg)">亲测 7 天</div>
+    <div style="margin-top:200px">
+      <p class="lede" style="font-size:24px;color:var(--text-1);font-weight:600">打工人深夜自救手册</p>
+      <h1 class="h1 mt-s">每天只睡 <span class="cover-title">6h</span><br>还能<span class="cover-title">精神一整天</span><br>的 3 个小习惯</h1>
+    </div>
+    <div class="bottom-bar"><div><span class="avatar">小</span> <b style="color:var(--text-1);margin-left:8px">@小熊不困了</b></div><div>← 左滑 查看</div></div>
+  </section>
+  <!-- 2. Hook -->
+  <section class="slide" data-title="Hook">
+    <div class="page-dot">2 / 9</div>
+    <div class="big-emoji" style="margin-top:80px">👀</div>
+    <h2 class="h2 tc mt-l">等等先别划走！</h2>
+    <p class="lede tc mt-m" style="padding:0 20px">我也曾是那个<br>早上起来像被卡车撞过的人。<br><br>直到我发现了<br><b style="color:var(--accent)">1 件事</b>比睡够 8 小时还重要。</p>
+    <div class="sticker blue" style="bottom:160px;left:50%;transform:translateX(-50%) rotate(-2deg)">真 · 转折点 ↓</div>
+  </section>
+  <!-- 3. Pain -->
+  <section class="slide" data-title="Pain">
+    <div class="page-dot">3 / 9</div>
+    <p class="lede" style="font-weight:700;color:var(--accent)">❌ 你是不是也这样</p>
+    <h2 class="h2 mt-s">越睡越累</h2>
+    <div class="stack mt-l">
+      <div class="hand-box"><b style="font-size:22px">😵‍💫 周末补觉到中午</b><p class="dim" style="font-size:16px;margin-top:4px">起来头更晕，一整天废掉</p></div>
+      <div class="hand-box"><b style="font-size:22px">☕️ 咖啡续三杯</b><p class="dim" style="font-size:16px;margin-top:4px">下午 3 点照样困到扶墙</p></div>
+      <div class="hand-box"><b style="font-size:22px">📱 睡前刷到凌晨</b><p class="dim" style="font-size:16px;margin-top:4px">明明很困就是不舍得睡</p></div>
+    </div>
+  </section>
+  <!-- 4. Aha -->
+  <section class="slide" data-title="Aha">
+    <div class="page-dot">4 / 9</div>
+    <div class="sticker green" style="top:100px;right:48px;transform:rotate(4deg)">✨ aha moment</div>
+    <p class="lede mt-l" style="color:var(--accent);font-weight:700">💡 真相是</p>
+    <h2 class="h2 mt-s">不是睡得少，<br>是<span style="background:var(--accent-3);padding:0 8px">醒得不对</span>。</h2>
+    <p class="lede mt-l">身体有 90 分钟一个周期。<br>在"深睡"里被闹钟拽起来，<br>就算睡 9 小时也跟没睡一样。</p>
+    <p class="lede mt-m" style="color:var(--text-1);font-weight:700">关键是：<span style="color:var(--accent)">卡着周期醒</span>。</p>
+  </section>
+  <!-- 5. Step 1 -->
+  <section class="slide" data-title="Step 1">
+    <div class="page-dot">5 / 9</div>
+    <div class="num-circle">1</div>
+    <h2 class="h2 mt-m">倒推睡眠时间</h2>
+    <div class="hand-box mt-l">
+      <p style="font-size:22px;margin:0;color:var(--text-1);font-weight:700">👉 公式</p>
+      <p style="font-size:20px;margin:10px 0 0;color:var(--text-2);line-height:1.7">起床时间 − <b style="color:var(--accent)">90min × N</b> − 15min 入睡<br>= 你今晚该上床的点</p>
+    </div>
+    <div class="hand-box mt-m" style="background:#fff5ef">
+      <p style="font-size:18px;margin:0;color:var(--text-2)">举例：要 7 点起</p>
+      <p style="font-size:24px;margin:8px 0 0;color:var(--text-1);font-weight:800">→ 23:15 上床 (4 个周期)<br>→ 00:45 上床 (3 个周期)</p>
+    </div>
+  </section>
+  <!-- 6. Step 2 -->
+  <section class="slide" data-title="Step 2">
+    <div class="page-dot">6 / 9</div>
+    <div class="num-circle" style="background:var(--accent-2)">2</div>
+    <h2 class="h2 mt-m">早晨 10 分钟光</h2>
+    <div class="hand-box mt-l">
+      <p style="font-size:22px;margin:0;color:var(--text-1);font-weight:700">☀️ 打开窗帘 / 下楼遛弯</p>
+      <p style="font-size:18px;margin:8px 0 0;color:var(--text-2);line-height:1.6">自然光一照，褪黑素立刻被掐停，人就真的醒了。阴天也有效，别偷懒。</p>
+    </div>
+    <div class="sticker yellow" style="bottom:200px;right:60px;transform:rotate(8deg)">⏰ 比咖啡还猛</div>
+    <div class="hand-box mt-m" style="background:#fff5ef">
+      <p style="font-size:18px;margin:0;color:var(--text-2)">懒人方案：</p>
+      <p style="font-size:22px;margin:6px 0 0;color:var(--text-1);font-weight:700">刷牙的时候站在窗边 🪥</p>
+    </div>
+  </section>
+  <!-- 7. Step 3 -->
+  <section class="slide" data-title="Step 3">
+    <div class="page-dot">7 / 9</div>
+    <div class="num-circle" style="background:var(--accent-3);color:var(--text-1)">3</div>
+    <h2 class="h2 mt-m">下午 3 点<br>20 分钟小睡</h2>
+    <div class="hand-box mt-l">
+      <p style="font-size:20px;margin:0;color:var(--text-2);line-height:1.6"><b style="color:var(--text-1)">⏱️ 最多 20 分钟。</b>超过 30 就会进入深睡，醒来会更累。</p>
+    </div>
+    <div class="hand-box mt-m" style="background:#fff5ef">
+      <p style="font-size:20px;margin:0;color:var(--text-2);line-height:1.6"><b style="color:var(--text-1)">💡 小 tip：</b>睡前喝一口咖啡。20 分钟后咖啡因正好起效，和小睡的清醒 buff 叠加。</p>
+    </div>
+    <div class="sticker pink" style="bottom:140px;left:50%;transform:translateX(-50%) rotate(-3deg)">打工人作弊技</div>
+  </section>
+  <!-- 8. Result -->
+  <section class="slide" data-title="Result">
+    <div class="page-dot">8 / 9</div>
+    <p class="lede" style="color:var(--good);font-weight:700">✅ 我坚持 7 天后</p>
+    <h2 class="h2 mt-s">结果是……</h2>
+    <div class="stack mt-l">
+      <div class="hand-box"><b style="font-size:22px">😌 早上闹钟响之前就自然醒</b></div>
+      <div class="hand-box"><b style="font-size:22px">💪 下午不再崩溃</b></div>
+      <div class="hand-box"><b style="font-size:22px">☕️ 咖啡从 3 杯 → 1 杯</b></div>
+      <div class="hand-box" style="background:var(--accent-3);border-color:var(--text-1)"><b style="font-size:24px">✨ 最重要：脾气变好了</b></div>
+    </div>
+  </section>
+  <!-- 9. CTA -->
+  <section class="slide" data-title="CTA">
+    <div class="page-dot">9 / 9</div>
+    <div class="big-emoji" style="margin-top:60px">💌</div>
+    <h2 class="h2 tc mt-l">觉得有用的话</h2>
+    <h1 class="h1 tc mt-s" style="color:var(--accent)">收藏 + 关注 🧡</h1>
+    <p class="lede tc mt-l" style="padding:0 30px">下期讲<br><b style="color:var(--text-1)">「打工人脊椎急救 5 式」</b><br>办公室也能做</p>
+    <div class="tag-row" style="justify-content:center;margin-top:36px">
+      <span class="ht">#睡眠</span>
+      <span class="ht">#打工人日常</span>
+      <span class="ht">#自律</span>
+      <span class="ht">#健康生活</span>
+    </div>
+    <div class="bottom-bar"><div><span class="avatar">小</span> <b style="color:var(--text-1);margin-left:8px">@小熊不困了</b></div><div>❤️ 5.2w</div></div>
+  </section>
+</div>
+<script src="../../../assets/runtime.js"></script>
+</body></html>

package/skills/design-templates/html-ppt/templates/full-decks/xhs-post/style.css ADDED Viewed

@@ -0,0 +1,47 @@
+/* xhs-post — 小红书 3:4 九宫格 */
+.tpl-xhs-post{
+  --bg:#fef7f3;--bg-soft:#fff1ea;--surface:#ffffff;--surface-2:#fff5ef;
+  --border:rgba(90,40,30,.12);--border-strong:rgba(90,40,30,.24);
+  --text-1:#3a1f18;--text-2:#6f4a3e;--text-3:#a68676;
+  --accent:#ff6b8b;--accent-2:#ffa94d;--accent-3:#ffd166;
+  --grad:linear-gradient(135deg,#ffd3e0,#ffe5c7 50%,#d6f0ff);
+  --good:#7bc67b;--warn:#ffb547;--bad:#ff6b6b;
+  --radius:24px;--radius-lg:32px;
+  --shadow:0 14px 36px rgba(90,40,30,.08);
+  font-family:'Inter','Noto Sans SC','PingFang SC',sans-serif;
+}
+.tpl-xhs-post{background:#f0eae2;display:flex;align-items:center;justify-content:center;min-height:100vh}
+.tpl-xhs-post .deck{width:810px;height:1080px;position:relative;background:transparent}
+.tpl-xhs-post .slide{
+  position:absolute;inset:0;width:810px;height:1080px;aspect-ratio:3/4;
+  padding:70px 64px;border-radius:28px;overflow:hidden;
+  background:var(--bg);
+}
+.tpl-xhs-post .slide::before{content:"";position:absolute;inset:0;background:
+  radial-gradient(45% 30% at 80% 10%,rgba(255,209,102,.35),transparent 70%),
+  radial-gradient(50% 35% at 10% 95%,rgba(255,107,139,.22),transparent 70%),
+  radial-gradient(40% 30% at 90% 85%,rgba(122,200,255,.18),transparent 70%);
+  pointer-events:none;z-index:0}
+.tpl-xhs-post .slide > *{position:relative;z-index:1}
+.tpl-xhs-post .h1{font-size:72px;line-height:1.1;font-weight:900;letter-spacing:-.02em;color:var(--text-1)}
+.tpl-xhs-post .h2{font-size:54px;line-height:1.15;font-weight:800;letter-spacing:-.015em;color:var(--text-1)}
+.tpl-xhs-post .h3{font-size:36px;font-weight:800;color:var(--text-1)}
+.tpl-xhs-post .page-dot{position:absolute;top:40px;right:48px;background:var(--text-1);color:#fff;border-radius:999px;padding:6px 14px;font-family:'JetBrains Mono',monospace;font-size:14px;font-weight:700;z-index:2}
+.tpl-xhs-post .sticker{position:absolute;padding:10px 18px;background:#fff;border:2.5px dashed var(--text-1);border-radius:18px;font-weight:800;font-size:18px;color:var(--text-1);transform:rotate(-3deg);box-shadow:4px 4px 0 var(--text-1)}
+.tpl-xhs-post .sticker.pink{background:#ffd3e0}
+.tpl-xhs-post .sticker.yellow{background:#ffe788}
+.tpl-xhs-post .sticker.blue{background:#cfeaff}
+.tpl-xhs-post .sticker.green{background:#d4f2c8}
+.tpl-xhs-post .hand-box{background:#fff;border:2.5px solid var(--text-1);border-radius:22px;padding:24px 28px;box-shadow:5px 5px 0 var(--text-1)}
+.tpl-xhs-post .lede{color:var(--text-2);font-size:26px;line-height:1.55}
+.tpl-xhs-post .big-emoji{font-size:180px;line-height:1;text-align:center}
+.tpl-xhs-post .num-circle{display:inline-flex;align-items:center;justify-content:center;width:72px;height:72px;border-radius:50%;background:var(--accent);color:#fff;font-weight:900;font-size:36px;border:3px solid var(--text-1);box-shadow:4px 4px 0 var(--text-1)}
+.tpl-xhs-post .step-card{background:#fff;border:2.5px solid var(--text-1);border-radius:22px;padding:26px 28px;box-shadow:5px 5px 0 var(--text-1);margin-bottom:24px}
+.tpl-xhs-post .step-card h4{font-size:28px;font-weight:800;margin:0 0 6px}
+.tpl-xhs-post .step-card p{font-size:18px;color:var(--text-2);margin:0}
+.tpl-xhs-post .tag-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
+.tpl-xhs-post .ht{background:#fff;color:var(--accent);border:2px solid var(--text-1);padding:6px 14px;border-radius:999px;font-weight:700;font-size:16px}
+.tpl-xhs-post .cover-title{background:linear-gradient(180deg,transparent 60%,var(--accent-3) 60%,var(--accent-3) 92%,transparent 92%);padding:0 10px}
+.tpl-xhs-post .heart{color:var(--accent);font-size:28px}
+.tpl-xhs-post .bottom-bar{position:absolute;bottom:40px;left:64px;right:64px;display:flex;justify-content:space-between;align-items:center;font-size:15px;color:var(--text-3);font-family:'JetBrains Mono',monospace;z-index:2}
+.tpl-xhs-post .avatar{width:54px;height:54px;border-radius:50%;background:var(--grad);border:2.5px solid var(--text-1);box-shadow:3px 3px 0 var(--text-1);display:inline-flex;align-items:center;justify-content:center;font-weight:900;font-size:20px;color:var(--text-1)}

package/skills/design-templates/html-ppt/templates/full-decks/xhs-white-editorial/README.md ADDED Viewed

@@ -0,0 +1,11 @@
+# xhs-white-editorial
+白底杂志风、强调重点块、macaron soft-card 分组。灵感来自 `20260409 升级版知识库/小红书图文/v2-白底版/slide_01_cover.html` 的顶部彩虹条 + 大字标题，以及 `20260412-AI测试与安全/xhs-ai-testing-safety-v2.html` 的 `.focus` 黑底白字强重点和 macaron 软色卡片系统。
+**Visual traits:** 纯白背景、顶部 10 色彩虹条、巨型 80-110px 标题配轻微负字距、渐变 brand 文字（紫→蓝→绿→橙→粉）、macaron 软色卡（soft-purple / pink / blue / green / orange）、胶囊 tag + dot、黑底 `.focus` 强调框、hero quote box 带淡阴影。
+**Use when:** 你需要一份能当小红书图文、也能当横屏 deck 用的白底内容帖；文字多、重点密集、需要一眼抓住关键词；面向中文读者为主。
+**Source inspiration:** `20260409` xhs v2 白底封面 + `20260412` AI 测试与安全 v2。
+**Path:** `templates/full-decks/xhs-white-editorial/index.html`

package/skills/design-templates/html-ppt/templates/full-decks/xhs-white-editorial/index.html ADDED Viewed

@@ -0,0 +1,187 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>白底杂志风 · XHS Editorial</title>
+<link rel="stylesheet" href="../../../assets/fonts.css">
+<link rel="stylesheet" href="../../../assets/base.css">
+<link rel="stylesheet" href="style.css">
+</head>
+<body class="tpl-xhs-white-editorial">
+<div class="deck">
+  <!-- 1. COVER -->
+  <section class="slide is-active">
+    <div class="xw-topline"></div>
+    <div class="xw-topbar">
+      <div class="xw-tag"><span class="dot"></span>AI 时代 · 职业判断</div>
+      <div class="xw-page">01 / 08</div>
+    </div>
+    <div class="xw-kicker">我越来越确定的一件事</div>
+    <h1 class="xw-title">以后最贵的工作，<br>是 <span class="xw-grad">测试 + 安全</span></h1>
+    <p class="xw-sub">AI 会越来越会做事。但谁来保证它 <span class="xw-focus">做对</span>、<span class="xw-focus">没风险</span>、<span class="xw-focus">不会出事</span>？</p>
+    <div class="xw-hero">
+      <div class="xw-quote">未来最值钱的，<br>不是 <span class="xw-focus-orange">生产</span>，而是 <span class="xw-focus">验收和兜底</span>。</div>
+    </div>
+    <div class="xw-footer"><span>白底｜强重点｜杂志竖排</span><span>Cover · 01</span></div>
+  </section>
+  <!-- 2. SECTION DIVIDER -->
+  <section class="slide">
+    <div class="xw-topline"></div>
+    <div class="xw-topbar">
+      <div class="xw-tag"><span class="dot"></span>Chapter · 01</div>
+      <div class="xw-page">02 / 08</div>
+    </div>
+    <div style="margin-top:120px">
+      <div class="xw-kicker" style="font-size:20px;letter-spacing:.2em;text-transform:uppercase;color:#98a2b3">第一章</div>
+      <h1 class="xw-title" style="font-size:110px;margin-top:20px">先看 <span class="xw-grad">大趋势</span></h1>
+      <p class="xw-sub" style="font-size:28px">当执行越来越便宜，判断就会越来越贵。</p>
+    </div>
+    <div class="xw-footer"><span>Section Divider</span><span>02 / 08</span></div>
+  </section>
+  <!-- 3. CONTENT — 4 card grid -->
+  <section class="slide">
+    <div class="xw-topline"></div>
+    <div class="xw-topbar">
+      <div class="xw-tag"><span class="dot"></span>越来越多的事会交给 AI</div>
+      <div class="xw-page">03 / 08</div>
+    </div>
+    <h2 class="xw-title-md">未来 3 年，这些事都会 <span class="xw-grad">自动跑</span></h2>
+    <div class="xw-grid-2">
+      <div class="xw-card soft-pink"><div class="xw-label">内容</div><div class="main">写文案 · 写方案 · 写脚本</div><div class="desc">创作变成一个 prompt 的距离</div></div>
+      <div class="xw-card soft-blue"><div class="xw-label">生产</div><div class="main">做图 · 搭页面 · 做表格</div><div class="desc">生产力工具集体重写一次</div></div>
+      <div class="xw-card soft-green"><div class="xw-label">执行</div><div class="main">跑流程 · 写代码 · 自动操作</div><div class="desc">Agent 从 demo 走进真实工作流</div></div>
+      <div class="xw-card soft-orange"><div class="xw-label">分析</div><div class="main">读数据 · 做总结 · 给建议</div><div class="desc">决策支持层彻底向下延伸</div></div>
+    </div>
+    <div class="xw-footer"><span>Content · Grid 2x2</span><span>03 / 08</span></div>
+  </section>
+  <!-- 4. STEPS -->
+  <section class="slide">
+    <div class="xw-topline"></div>
+    <div class="xw-topbar">
+      <div class="xw-tag"><span class="dot"></span>为什么会这样</div>
+      <div class="xw-page">04 / 08</div>
+    </div>
+    <h2 class="xw-title-md">AI 越强，<span class="xw-grad">判断对错</span> 越值钱</h2>
+    <div class="xw-steps">
+      <div class="xw-step"><div class="xw-num">1</div><div class="xw-txt">生产会更便宜，边际成本接近零</div></div>
+      <div class="xw-step"><div class="xw-num">2</div><div class="xw-txt">复制会更快，错误也一起被加速</div></div>
+      <div class="xw-step"><div class="xw-num">3</div><div class="xw-txt">AI 一本正经地做错，人类难以察觉</div></div>
+      <div class="xw-step"><div class="xw-num">4</div><div class="xw-txt">所以最贵的能力会变成 <span class="xw-focus">发现问题</span></div></div>
+    </div>
+    <div class="xw-hero"><div class="xw-quote" style="font-size:30px">AI 让「<span class="xw-focus-blue">做出来</span>」变便宜，<br>但让「<span class="xw-focus">做对、做稳、别出事</span>」变更贵。</div></div>
+    <div class="xw-footer"><span>Content · Steps</span><span>04 / 08</span></div>
+  </section>
+  <!-- 5. CODE EXAMPLE -->
+  <section class="slide">
+    <div class="xw-topline"></div>
+    <div class="xw-topbar">
+      <div class="xw-tag"><span class="dot"></span>一段你今晚就能跑的验收 Skill</div>
+      <div class="xw-page">05 / 08</div>
+    </div>
+    <h2 class="xw-title-md">不是写 prompt，<br>是写 <span class="xw-grad">验收清单</span></h2>
+    <pre class="xw-codebox"><span class="cm"># skills/ai-acceptance/SKILL.md</span>
+<span class="kw">name</span>: <span class="st">ai-acceptance</span>
+<span class="kw">description</span>: <span class="st">"Runs AI output through a 4-gate review checklist."</span>
+<span class="kw">gates</span>:
+  - <span class="hl">functional</span>:  <span class="st">"Does it actually do what the user asked?"</span>
+  - <span class="hl">edge_cases</span>: <span class="st">"Empty / long / non-ASCII / concurrent?"</span>
+  - <span class="hl">safety</span>:     <span class="st">"PII, secrets, destructive ops — all red-flagged?"</span>
+  - <span class="hl">rollback</span>:   <span class="st">"If this ships and breaks, can we undo in 60s?"</span></pre>
+    <div class="xw-footer"><span>Content · Code Block</span><span>05 / 08</span></div>
+  </section>
+  <!-- 6. CHART — SVG bar -->
+  <section class="slide">
+    <div class="xw-topline"></div>
+    <div class="xw-topbar">
+      <div class="xw-tag"><span class="dot"></span>岗位相对价值变化</div>
+      <div class="xw-page">06 / 08</div>
+    </div>
+    <h2 class="xw-title-md">越来越 <span class="xw-focus-pink">便宜</span>，越来越 <span class="xw-focus-green">贵</span></h2>
+    <svg viewBox="0 0 960 380" style="width:100%;max-width:1000px;margin-top:30px" xmlns="http://www.w3.org/2000/svg">
+      <g font-family="Inter, sans-serif" font-size="16" fill="#475467">
+        <!-- baseline -->
+        <line x1="180" y1="330" x2="940" y2="330" stroke="#eaecf3" stroke-width="2"/>
+        <!-- rows -->
+        <g transform="translate(0,40)">
+          <text x="170" y="30" text-anchor="end" font-weight="700" fill="#111">纯执行</text>
+          <rect x="180" y="10" width="520" height="28" rx="14" fill="#fff0f6"/>
+          <rect x="180" y="10" width="120" height="28" rx="14" fill="#ff5fa2"/>
+          <text x="710" y="30" fill="#c11574" font-weight="700">-65% 价值</text>
+        </g>
+        <g transform="translate(0,100)">
+          <text x="170" y="30" text-anchor="end" font-weight="700" fill="#111">内容生产</text>
+          <rect x="180" y="10" width="520" height="28" rx="14" fill="#eef4ff"/>
+          <rect x="180" y="10" width="200" height="28" rx="14" fill="#4e8cff"/>
+          <text x="710" y="30" fill="#174ea6" font-weight="700">-40% 价值</text>
+        </g>
+        <g transform="translate(0,160)">
+          <text x="170" y="30" text-anchor="end" font-weight="700" fill="#111">数据分析</text>
+          <rect x="180" y="10" width="520" height="28" rx="14" fill="#fff5ea"/>
+          <rect x="180" y="10" width="320" height="28" rx="14" fill="#ff9d42"/>
+          <text x="710" y="30" fill="#b54708" font-weight="700">持平</text>
+        </g>
+        <g transform="translate(0,220)">
+          <text x="170" y="30" text-anchor="end" font-weight="700" fill="#111">测试 / 验收</text>
+          <rect x="180" y="10" width="520" height="28" rx="14" fill="#edfdf3"/>
+          <rect x="180" y="10" width="440" height="28" rx="14" fill="#17b26a"/>
+          <text x="710" y="30" fill="#067647" font-weight="700">+85% 价值</text>
+        </g>
+        <g transform="translate(0,280)">
+          <text x="170" y="30" text-anchor="end" font-weight="700" fill="#111">安全 / 风控</text>
+          <rect x="180" y="10" width="520" height="28" rx="14" fill="#f4efff"/>
+          <rect x="180" y="10" width="500" height="28" rx="14" fill="#7b61ff"/>
+          <text x="710" y="30" fill="#5b21b6" font-weight="700">+110% 价值</text>
+        </g>
+      </g>
+    </svg>
+    <div class="xw-footer"><span>Chart · Horizontal Bars</span><span>06 / 08</span></div>
+  </section>
+  <!-- 7. CTA -->
+  <section class="slide">
+    <div class="xw-topline"></div>
+    <div class="xw-topbar">
+      <div class="xw-tag"><span class="dot"></span>今晚就可以做的三件事</div>
+      <div class="xw-page">07 / 08</div>
+    </div>
+    <h2 class="xw-title-md">别再追工具，<br>开始练 <span class="xw-grad">判断力</span></h2>
+    <div class="xw-grid-3">
+      <div class="xw-card soft-purple"><div class="xw-label">Tonight</div><div class="main">写一份<br>验收清单</div><div class="desc">哪怕只有 5 条，开始比完美更重要</div></div>
+      <div class="xw-card soft-blue"><div class="xw-label">This week</div><div class="main">跑一遍<br>红队演练</div><div class="desc">对自己的 agent 说：试着让它出事</div></div>
+      <div class="xw-card soft-green"><div class="xw-label">This month</div><div class="main">加一条<br>回滚流程</div><div class="desc">60 秒内能撤销，你就敢把手放开</div></div>
+    </div>
+    <div class="xw-hero"><div class="xw-quote" style="font-size:32px">真正的稀缺，不是「会用 AI」，<br>而是 <span class="xw-focus">「敢为 AI 的结果签字」</span>。</div></div>
+    <div class="xw-footer"><span>CTA</span><span>07 / 08</span></div>
+  </section>
+  <!-- 8. THANKS -->
+  <section class="slide">
+    <div class="xw-topline"></div>
+    <div class="xw-topbar">
+      <div class="xw-tag"><span class="dot"></span>Thanks for reading</div>
+      <div class="xw-page">08 / 08</div>
+    </div>
+    <div style="margin-top:100px">
+      <div class="xw-big-stat xw-grad">谢谢<small> · thanks</small></div>
+      <p class="xw-sub" style="font-size:28px;margin-top:36px">如果你也在想这些问题，欢迎在评论里告诉我——<br>你最想让 AI 帮你做什么？你最不放心它做什么？</p>
+      <div style="margin-top:40px">
+        <span class="xw-pill">@lewis</span>
+        <span class="xw-pill">小红书 · 白底杂志风</span>
+        <span class="xw-pill">html-ppt · full-deck</span>
+      </div>
+    </div>
+    <div class="xw-footer"><span>End</span><span>08 / 08</span></div>
+  </section>
+</div>
+<script src="../../../assets/runtime.js"></script>
+</body>
+</html>