yuanflow-cli 0.1.43 → 0.1.44

package/README.md

@@ -5,6 +5,7 @@ YuanFlow 的 npm 包，包含两个命令入口：
 - `yuanflow-cli`：社媒 API 转 CLI，覆盖完整 registry、快捷命令、schema、dry-run 和 agent-json 输出。
 - `yuanflow-skill`：把 `YuanFlow-skill` 注入到本机支持的 AI Agent skills 目录。
 - `飞书官方技能`：YuanFlow-main 内置环境通过受控工具托管安装并调用飞书官方 `@larksuite/cli`，npm 包只提供 Skill 说明，不复制官方 CLI 源码。
+- `视觉卡片生成`：作为 Skill、HTML 模板、参考文档和检查脚本随包分发，不新增独立 `yuanflow-cli visual-card` 命令。
 
 ## 安装
 
@@ -19,6 +20,7 @@ npm install -g yuanflow-cli
 ```bash
 yuanflow-cli --help
 yuanflow-skill list-agents
+yuanflow-skill list-skills
 ```
 
 ## API CLI

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yuanflow-cli",
-  "version": "0.1.43",
+  "version": "0.1.44",
   "description": "YuanFlow 自媒体 API CLI 与 Skill 安装器。",
   "type": "module",
   "license": "MIT",

package/skills/yuanflow-skill/README.md

@@ -11,6 +11,7 @@ YuanFlow Skill 是 `yuanflow-cli` 的 Agent Skill 仓库，用于把社媒平台
 - `视频拆解/`：自媒体创作场景的对标视频拆解 Skill，先查自媒体知识库对标拆解规则，再用 `qwen3-vl-plus` 上传视频并按规则拆解。
 - `YuanFlow文件中转工具/`：YuanFlow 文件中转、签名链接、对象复制 Skill，内部兼容命令走 `yuanflow-cli oss`。
 - `生图技能/`：图片生成与编辑 Skill，优先走 YuanFlow-main 内置环境的 `yuanflow_image_request`。
+- `视觉卡片生成/`：小红书图文卡片、公众号封面、文章插图、海报、信息图和商业视觉方案卡生成 Skill，使用 HTML 模板、风格参考和质量检查脚本完成交付。
 - `公众号生成与发布/`：公众号文章创作、主题预览、微信内联 HTML 排版、正文图片上传和草稿箱推送 Skill。
 - `小红书运营/`：小红书选题调研、笔记搜索、账号分析、评论采集、文案创作、发布前检查和互动操作 Skill；不建议浏览器自动发布作品，除非用户明确无视平台识别和限流风险并强制要求。
 - `视频智能剪辑/`：主音频 + B-roll 素材智能剪辑 Skill，先查自媒体知识库的视频剪辑策略，保存 `strategy_snapshot.json`，再通过 ASR/forced alignment 导入 `audio_alignment.json`，按 1 秒 1 帧抽帧并回写视觉理解，由 Agent 生成 `timeline_plan` 和 EDL，交给 `yuanflow-cli video` 校验和渲染。
@@ -39,6 +40,7 @@ YuanFlow Skill 是 `yuanflow-cli` 的 Agent Skill 仓库，用于把社媒平台
 - 对自媒体对标视频、爆款视频、竞品视频做内容结构、开头钩子、脚本节奏、镜头节奏和可复用创作方法拆解；开始前先查自媒体知识库规则，视频 URL 先解析并保存本地。
 - 上传文件到 YuanFlow 文件中转、生成签名链接或复制文件对象。
 - 生成图片、编辑图片，并缓存返回 URL 或 base64 图片。生成图片必填 `prompt`，可选 `size / quality / style / n / response_format`；编辑图片必须通过 multipart 上传本地图片。
+- 生成小红书图文卡片、公众号封面、文章插图、社交媒体配图、海报、信息图和商业视觉方案卡；视觉卡片生成不新增独立 CLI 命令，按 Skill 模板、参考文档和检查脚本完成。
 - 把自媒体分析、数据复盘、文案方案、账号监控、知识梳理和执行计划生成可直接打开的单页 HTML 报告。
 - 生成或改写公众号文章，进入主题选择预览后导出微信公众号编辑器可粘贴 HTML，或推送到公众号草稿箱。
 - 处理小红书单段或全流程任务，例如只写文案、只采集笔记、只分析账号、只采集评论、只做点赞收藏评论回复，或完整执行图文/视频发布流程；每轮开始前必须明确任务边界。写小红书文案前先查自媒体知识库方法论，遇到封面或正文插图生成时先确认 4:3 或 3:4 比例并调用生图技能。
@@ -115,6 +117,11 @@ yuanflow-skill list-skills
 │  └─ SKILL.md
 ├─ 生图技能
 │  └─ SKILL.md
+├─ 视觉卡片生成
+│  ├─ SKILL.md
+│  ├─ assets/
+│  ├─ references/
+│  └─ scripts/
 ├─ 公众号生成与发布
 │  ├─ SKILL.md
 │  ├─ scripts/

package/skills/yuanflow-skill/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: YuanFlow技能总入口
-description: 当用户需要处理自媒体平台接口工作流、平台数据查询、命令发现、生图、YuanFlow 文件中转、知识库查询、HTML 报告生成，或需要在 YuanFlow 子技能之间选择合适能力时使用。
+description: 当用户需要处理自媒体平台接口工作流、平台数据查询、命令发现、生图、视觉卡片生成、YuanFlow 文件中转、知识库查询、HTML 报告生成，或需要在 YuanFlow 子技能之间选择合适能力时使用。
 ---
 
 # YuanFlow Skill
@@ -23,6 +23,7 @@ description: 当用户需要处理自媒体平台接口工作流、平台数据
 - `视频拆解/`
 - `YuanFlow文件中转工具/`
 - `生图技能/`
+- `视觉卡片生成/`
 - `公众号生成与发布/`
 - `小红书运营/`
 - `热门内容整理/`
@@ -228,7 +229,21 @@ description: 当用户需要处理自媒体平台接口工作流、平台数据
 
 - `生图技能`
 
-### 13. 走 `HTML报告生成`
+### 13. 走 `视觉卡片生成`
+
+遇到下面这些需求，优先进入这个子 Skill：
+
+- 生成小红书图文卡片、公众号封面、文章插图、社交媒体配图、海报、信息图或商业视觉方案卡。
+- 用户提供主题、文章、截图、照片、笔记、提纲或脚本，希望转成可复用、可检查、可商业交付的视觉卡片。
+- 用户要求多风格配图、封面设计、卡片排版、视觉风格探索或 HTML 视觉模板输出。
+
+如果用户只要求生成图片素材或编辑图片，先用 `生图技能`；如果用户要求把完整方案整理成长文报告，改用 `HTML报告生成`。
+
+子 Skill 名称：
+
+- `视觉卡片生成`
+
+### 14. 走 `HTML报告生成`
 
 遇到下面这些需求，优先进入这个子 Skill：
 
@@ -240,7 +255,7 @@ description: 当用户需要处理自媒体平台接口工作流、平台数据
 
 - `HTML报告生成`
 
-### 14. 走 `公众号生成与发布`
+### 15. 走 `公众号生成与发布`
 
 遇到下面这些需求，优先进入这个子 Skill：
 
@@ -252,7 +267,7 @@ description: 当用户需要处理自媒体平台接口工作流、平台数据
 
 - `公众号生成与发布`
 
-### 15. 走 `小红书运营`
+### 16. 走 `小红书运营`
 
 遇到下面这些需求，优先进入这个子 Skill：
 
@@ -266,7 +281,7 @@ description: 当用户需要处理自媒体平台接口工作流、平台数据
 
 - `小红书运营`
 
-### 16. 走 `个人创作库`
+### 17. 走 `个人创作库`
 
 遇到下面这些需求，优先进入这个子 Skill：
 
@@ -280,7 +295,7 @@ description: 当用户需要处理自媒体平台接口工作流、平台数据
 
 - `个人创作库`
 
-### 17. 走 `本地音视频转文字`
+### 18. 走 `本地音视频转文字`
 
 只有当用户明确要求使用本地音视频转文字、本地转写、本地 ASR、离线转写或本地模型把音频/视频转成文字时，才进入这个子 Skill。
 
@@ -290,7 +305,7 @@ description: 当用户需要处理自媒体平台接口工作流、平台数据
 
 - `本地音视频转文字`
 
-### 18. 走 `音视频在线转文字`
+### 19. 走 `音视频在线转文字`
 
 遇到下面这些需求，优先进入这个子 Skill：
 
@@ -304,7 +319,7 @@ description: 当用户需要处理自媒体平台接口工作流、平台数据
 
 - `音视频在线转文字`
 
-### 19. 走 `视觉理解`
+### 20. 走 `视觉理解`
 
 遇到下面这些需求，优先进入这个子 Skill：
 
@@ -318,7 +333,7 @@ description: 当用户需要处理自媒体平台接口工作流、平台数据
 
 - `视觉理解`
 
-### 20. 走 `视频拆解`
+### 21. 走 `视频拆解`
 
 遇到下面这些需求，优先进入这个子 Skill：
 

package/skills/yuanflow-skill//350/247/206/350/247/211/345/215/241/347/211/207/347/224/237/346/210/220/SKILL.md

@@ -0,0 +1,77 @@
+---
+name: 视觉卡片生成
+description: 当用户需要生成小红书图文卡片、公众号封面、文章插图、社交媒体配图、海报、信息图、视觉方案卡、商业风格设计图或多风格配图时使用。本 Skill 使用 HTML 模板、风格参考和质量检查脚本生成可复用、可检查、可商业交付的视觉卡片。
+emoji: 🖼️
+---
+
+# 视觉卡片生成
+
+## 外部 CLI 主流程
+
+外部 Agent 或用户直接使用本 Skill 时，优先按本 Skill 的模板和参考文档完成视觉卡片生成；如果任务中需要上传素材、生成图片、理解图片/视频或调用 YuanFlow API，再使用本地 `yuanflow-cli`。
+
+1. 如果本地可执行 `yuanflow-cli --help`，直接使用本地 CLI。
+2. 如果本地没有 `yuanflow-cli`，再提示用户安装 `npm install -g yuanflow-cli`。
+3. 外部 CLI 使用 `YUANCHUANG_API_TOKEN` 或 `yuanflow-cli config set-token <你的令牌>` 完成鉴权。
+
+不要在回复、日志或文件中暴露 token。用户主流程统一称为 YuanFlow API 和 YuanFlow 文件中转，不要求用户配置第三方平台 Key。
+
+本 Skill 本身不新增独立 `yuanflow-cli visual-card` 命令。它通过 Skill 说明、HTML 模板、参考文档和检查脚本完成视觉卡片生产。
+
+## YuanFlow-main 内置环境
+
+只有在 YuanFlow-main 内置环境中，才使用 `yuanflow_cli_call`、`yuanflow_image_request`、`content_workbench_update`、`artifact_files_register` 等受控工具。token、受管包路径、程序数据目录和输出目录由 YuanFlow-main 管理，不写成外部用户必备步骤。
+
+如果用户需要先生成图片素材，可调用 `生图技能` 或 YuanFlow-main 内置图片能力；如果需要理解用户提供的图片/视频素材，可调用 `视觉理解`；如果需要上传本地素材给在线能力使用，可调用 `YuanFlow文件中转工具`。
+
+## 适用输出
+
+- 小红书图文：3:4 封面和 3-9 张正文卡片。
+- 公众号封面：21:9 主封面、1:1 次封面、3:4 竖版封面。
+- 文章插图：16:9、4:3、3:2 的正文配图。
+- 社交媒体视觉：海报、活动图、概念图、产品卖点图、数据图、流程图。
+- 设计方案卡：风格探索板、品牌视觉方向、信息架构卡片、方案对比图。
+
+## 生成流程
+
+1. 识别任务类型：封面、图文卡片、文章插图、社交配图、海报、信息图、风格探索。
+2. 读取 `references/commercial-system.md`，确认比例、尺寸、页面角色、文字限制、证据需求和质量门禁。
+3. 从 `references/style-atlas.md` 选择一个主风格和一个子风格；用户未指定时，按传播目标选择。
+4. 从 `assets/templates/` 复制最接近的 HTML 模板到任务输出目录，命名为 `index.html`。
+5. 在 `.poster` 节点上设置 `data-style`、`data-ratio`，并按页面目标调整布局模块。
+6. 参考 `references/layout-playbook.md` 和 `references/use-case-recipes.md` 组织页面结构，避免每页都变成重复的标题加卡片。
+7. 如果图片或截图是证据，优先使用用户提供的真实素材；如果需要生成图片，只把生成图作为素材，最终文字仍放在 HTML 中排版。
+8. 参考 `references/quality-check.md` 做最终检查；生成 HTML 后尽量运行检查脚本。
+
+检查命令：
+
+```bash
+python scripts/check_visual_card.py <index.html>
+```
+
+## 风格选择规则
+
+- 一组输出默认只使用一个主风格，除非用户明确要求做多风格探索。
+- 通过风格、色板、布局、材质、图片处理和文案节奏制造变化，不靠随机装饰。
+- 不使用无意义气泡、假数据、假 UI、假截图、占位文字或不可读小字。
+- 小红书封面优先保证缩略图可读：主标题清楚，主体视觉明确，正文不拥挤。
+- 文章插图优先服务文章论点，不做成硬广横幅。
+- 不同封面比例要分别设计，不能把 21:9 直接裁成 1:1 或 3:4。
+
+## 资源说明
+
+- `references/style-atlas.md`：风格体系、子风格、识别测试、反模式、HTML 骨架。
+- `references/commercial-system.md`：商业交付骨架、生产标准、复用矩阵。
+- `references/use-case-recipes.md`：封面、文章插图、社交配图、海报和风格探索配方。
+- `references/layout-playbook.md`：按输出类型和内容模式选择布局。
+- `references/quality-check.md`：最终质量检查清单。
+- `assets/templates/`：可复制使用的 HTML 母版。
+- `overview.html`：成熟风格系统和矩阵总览。
+- `scripts/check_visual_card.py`：HTML 静态检查脚本，只依赖 Python 标准库。
+
+## 交付要求
+
+- 给出输出目录路径。
+- 如用户要求渲染图片，给出渲染后的图片文件路径。
+- 简短说明使用的风格、比例和页面数量。
+- 如果使用了网页图片或外部素材，在任务目录中记录来源链接，并在回复中说明。

package/skills/yuanflow-skill//350/247/206/350/247/211/345/215/241/347/211/207/347/224/237/346/210/220/agents/openai.yaml

@@ -0,0 +1,8 @@
+interface:
+  display_name: "视觉卡片生成"
+  short_description: "生成小红书图文、封面、文章插图、海报和商业视觉卡片。"
+  brand_color: "#C8372D"
+  default_prompt: "使用 $视觉卡片生成 将主题、文章、截图、照片、笔记、提纲或脚本转成小红书图文卡片、公众号封面、文章插图、海报或商业视觉设计图。"
+
+policy:
+  allow_implicit_invocation: true

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

@@ -0,0 +1,65 @@
+<!doctype html>
+<html lang="zh-CN" data-parent-style="editorial-publishing">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <title>Editorial Publishing Template</title>
+  <style>
+    :root {
+      --paper: #f3f0e8;
+      --ink: #12100d;
+      --muted: #716a60;
+      --line: rgba(18,16,13,.22);
+      --accent: #9b2f24;
+      --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: #1c1a17; 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; }
+    .paper-grain { position: absolute; inset: 0; opacity: .26; mix-blend-mode: multiply; background-image: radial-gradient(rgba(0,0,0,.06) 1px, transparent 1.5px); background-size: 4px 4px; }
+    .ep-pad { position: relative; z-index: 2; height: 100%; padding: 88px; display: flex; flex-direction: column; }
+    [data-ratio="article"] .ep-pad, [data-ratio="wide"] .ep-pad { padding: 76px 110px; }
+    .ep-issue, .ep-strip, .small-label { font-family: var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
+    .ep-issue { font-size: 20px; margin: 0 0 34px; }
+    .ep-title { font-family: var(--serif); font-weight: 500; font-size: 112px; line-height: 1.08; letter-spacing: .04em; margin: 0; max-width: 880px; }
+    .ep-deck { font-family: var(--serif); font-size: 32px; line-height: 1.55; color: var(--muted); max-width: 640px; }
+    .ep-photo { margin: 44px 0 0; height: 460px; background: #d9d0c2; overflow: hidden; border: 1px solid var(--line); }
+    .ep-photo.small { width: 52%; height: 360px; margin-left: auto; }
+    .ep-photo img, .object-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
+    .ep-strip { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; font-size: 18px; }
+    .book-page { border: 18px solid rgba(155,47,36,.18); }
+    .vertical { writing-mode: vertical-rl; letter-spacing: .18em; }
+    .seal { width: 64px; height: 64px; border: 2px solid var(--accent); color: var(--accent); display: grid; place-items: center; font-family: var(--serif); margin-top: 28px; }
+    .newspaper { display: grid; grid-template-rows: auto auto 1fr; }
+    .masthead { font-family: var(--serif); font-size: 34px; letter-spacing: .18em; border-bottom: 4px double var(--ink); padding-bottom: 16px; margin: 0 0 32px; }
+    .news-grid { display: grid; grid-template-columns: 1fr 1fr .7fr; gap: 26px; margin-top: 40px; }
+    .news-grid article { border-top: 1px solid var(--line); padding-top: 18px; font-family: var(--serif); font-size: 26px; line-height: 1.55; }
+    .mini-chart { display: flex; gap: 18px; align-items: end; border: 1px solid var(--line); padding: 26px; }
+    .mini-chart span { flex: 1; height: var(--h); background: var(--accent); }
+    .gallery { display: grid; grid-template-columns: 1.2fr .8fr; gap: 54px; align-items: end; }
+    .object-frame { margin: 0; height: 620px; background: #dedbd2; }
+    .plaque { border-top: 1px solid var(--line); padding-top: 24px; }
+    .plaque h2 { font-family: var(--serif); font-size: 54px; margin: 0 0 18px; }
+    .plaque p { font-family: var(--serif); color: var(--muted); font-size: 26px; line-height: 1.55; }
+  </style>
+</head>
+<body>
+  <main class="sheet">
+    <section class="poster magazine-paper" data-ratio="xhs" data-style="magazine-paper">
+      <div class="paper-grain"></div>
+      <main class="ep-pad">
+        <p class="ep-issue">VOL. 04 / FIELD NOTE / 2026</p>
+        <h1 class="ep-title">在信息里<br>找到一条路</h1>
+        <figure class="ep-photo"><img src="assets/hero.jpg" alt=""></figure>
+        <div class="ep-strip"><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/lifestyle-collage.html

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

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

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

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