diff --git a/.agents/plugins/marketplace.json b/.agents/plugins/marketplace.json index 3c51aa8..1ba98fd 100644 --- a/.agents/plugins/marketplace.json +++ b/.agents/plugins/marketplace.json @@ -39,6 +39,18 @@ "authentication": "ON_INSTALL" }, "category": "Productivity" + }, + { + "name": "youfang", + "source": { + "source": "local", + "path": "./stacks/youfang" + }, + "policy": { + "installation": "AVAILABLE", + "authentication": "ON_INSTALL" + }, + "category": "Productivity" } ] } diff --git a/.claude-plugin/marketplace.json b/.claude-plugin/marketplace.json index 678adae..abd609d 100644 --- a/.claude-plugin/marketplace.json +++ b/.claude-plugin/marketplace.json @@ -36,6 +36,16 @@ "name": "MiniMax Code team" }, "homepage": "https://github.com/MiniMax-AI/mcode-stack/tree/main/stacks/req-tpm" + }, + { + "name": "youfang", + "source": "./stacks/youfang", + "description": "Turn architecture and flow diagrams into Keynote-style Magic Move slide decks: one offline HTML file where the boxes and titles two slides share morph and fly, in one of four visual styles (hand-drawn, minimal, dark neon, neo-brutalist) picked from rendered samples, with optional 4K video export.", + "category": "Productivity", + "author": { + "name": "Youfang (MiniMax Code team)" + }, + "homepage": "https://github.com/MiniMax-AI/mcode-stack/tree/main/stacks/youfang" } ] } diff --git a/README.md b/README.md index 11e004d..9862a2d 100644 --- a/README.md +++ b/README.md @@ -43,9 +43,9 @@ Inside a Claude Code session: /plugin install ronny --marketplace MiniMax-AI/mcode-stack ``` -Use `jiachen` or `req-tpm` in place of `ronny` for those stacks. From a clone of this -repository, `scripts/install.sh` installs `ronny` (`scripts/install.sh jiachen` -or `scripts/install.sh req-tpm` for the others) with `claude` or `codex` when either is on `PATH`, and +Use `jiachen`, `req-tpm` or `youfang` in place of `ronny` for those stacks. From a clone of this +repository, `scripts/install.sh` installs `ronny` (`scripts/install.sh jiachen`, +`scripts/install.sh req-tpm` or `scripts/install.sh youfang` for the others) with `claude` or `codex` when either is on `PATH`, and otherwise copies that stack's skills into `~/.agents/skills/`. Older Claude Code can add the marketplace first, then install: @@ -63,7 +63,7 @@ codex plugin marketplace add MiniMax-AI/mcode-stack codex plugin add ronny@mcode-stack ``` -Substitute `jiachen` or `req-tpm` the same way. To take a single skill instead of the +Substitute `jiachen`, `req-tpm` or `youfang` the same way. To take a single skill instead of the plugin, copy that skill's folder into `~/.agents/skills/`. Codex and MiniMax Code both scan that directory; the copy steps are below. @@ -163,6 +163,14 @@ v0 and needs the `meegle` and `lark-cli` CLIs plus a one-time look-up of your Meegle space's fields and states; see [`stacks/req-tpm/README.md`](stacks/req-tpm/README.md). +[`stacks/youfang`](stacks/youfang/) has +[`magic-move-deck`](stacks/youfang/skills/magic-move-deck/SKILL.md), which +turns an architecture or flow walkthrough into a Keynote-style Magic Move +slide deck: every slide is a diagram seen through a camera, and the boxes and +titles two slides share morph between them. The agent shows one sample slide +in each of four styles (hand-drawn, minimal, dark neon, neo-brutalist) and +builds the deck in the one you pick, as a single offline HTML file. + A stack usually has three kinds of things: | Kind | What it is | How to use it | @@ -205,6 +213,7 @@ change it. To suggest a change here, open an issue; see stacks/ronny/ Ronny's stack (MiniMax Code R&D lead), the first and most complete one stacks/jiachen/ Jiachen's stack: getting out of the agent loop, and turning notes into posts and videos stacks/req-tpm/ Optional: the requester and their agent act as a requirement's TPM (Feishu doc body, Meegle status); v0 +stacks/youfang/ Youfang's stack: architecture walkthroughs as Magic Move slide decks, in four styles stacks// One directory per team member; teammates are welcome to add theirs notes/ Which runnable piece goes with each Engineering Notes article community/ Stacks from outside the team, added by collaborators @@ -212,8 +221,9 @@ templates/stack-template/ Template for a new stack ``` Every stack is also a MiniMax Code plugin package. See -[`stacks/ronny`](stacks/ronny/), [`stacks/jiachen`](stacks/jiachen/) and -[`stacks/req-tpm`](stacks/req-tpm/) for what each one contains. +[`stacks/ronny`](stacks/ronny/), [`stacks/jiachen`](stacks/jiachen/), +[`stacks/req-tpm`](stacks/req-tpm/) and [`stacks/youfang`](stacks/youfang/) for +what each one contains. ## Contributing diff --git a/README_ZH.md b/README_ZH.md index 689e639..79e786e 100644 --- a/README_ZH.md +++ b/README_ZH.md @@ -36,7 +36,7 @@ claude plugin install ronny --marketplace MiniMax-AI/mcode-stack /plugin install ronny --marketplace MiniMax-AI/mcode-stack ``` -装 Jiachen 的 stack 时，把 `ronny` 换成 `jiachen`；装需求管理的 stack 时换成 `req-tpm`。克隆本仓库后可以跑 `scripts/install.sh`（默认 `ronny`，或 `scripts/install.sh jiachen`、`scripts/install.sh req-tpm`）：`PATH` 里有 `claude` 或 `codex` 时，它会执行同样的安装，否则把该 stack 的 Skill 复制到 `~/.agents/skills/`。 +装 Jiachen 的 stack 时，把 `ronny` 换成 `jiachen`；装需求管理的 stack 时换成 `req-tpm`；装 Youfang 的 stack 时换成 `youfang`。克隆本仓库后可以跑 `scripts/install.sh`（默认 `ronny`，或 `scripts/install.sh jiachen`、`scripts/install.sh req-tpm`、`scripts/install.sh youfang`）：`PATH` 里有 `claude` 或 `codex` 时，它会执行同样的安装，否则把该 stack 的 Skill 复制到 `~/.agents/skills/`。 较旧的 Claude Code 可以先加市场，再安装： @@ -52,7 +52,7 @@ codex plugin marketplace add MiniMax-AI/mcode-stack codex plugin add ronny@mcode-stack ``` -把 `ronny` 换成 `jiachen` 即可。如果只要某一个 Skill，把它的目录复制到 `~/.agents/skills/`。Codex 和 MiniMax Code 都会扫描这个目录，复制步骤见下文。 +把 `ronny` 换成 `jiachen`、`req-tpm` 或 `youfang` 即可。如果只要某一个 Skill，把它的目录复制到 `~/.agents/skills/`。Codex 和 MiniMax Code 都会扫描这个目录，复制步骤见下文。 **装一个 Skill，所有项目都能用：** @@ -122,6 +122,8 @@ MiniMax Code 会自动发现这几个目录里的 Skill（每个 Skill 一个子 [`stacks/req-tpm`](stacks/req-tpm/README_ZH.md) 是一份可选的需求管理 stack：谁提的产品或技术需求，谁就和自己的 agent 一起当这条需求的 TPM。受理时先追问该不该做，写死可衡量的预期效果；优先级交给负责人拍板；记下方案决策；按节奏跟进，停滞的显式标出来；上线前过检查项；最后拿证据对照预期效果才关闭。需求正文放飞书文档，状态和流转放飞书项目（Meegle）。目前是 v0，需要 `meegle` 和 `lark-cli`，并先在自己的 Meegle 空间里查一遍字段和状态，见 [`stacks/req-tpm/README_ZH.md`](stacks/req-tpm/README_ZH.md)。 +[`stacks/youfang`](stacks/youfang/) 里有 [`magic-move-deck`](stacks/youfang/skills/magic-move-deck/SKILL.md)：把一次架构或流程讲解做成 Keynote 式「神奇移动」演示，每一页都是某张图加一个镜头取景，前后页共有的框和标题直接变形飞过去。agent 先用四种风格（手绘、简约、暗色科技、新野兽派）各出一张样张，你选定后再按这种风格做完整的单文件离线 HTML。 + 每个 stack 里一般有三类东西： | 类型 | 是什么 | 怎么用 | @@ -156,13 +158,14 @@ AI 写代码越来越快，真正拉开差距的，是围绕 agent 的那一圈 stacks/ronny/ MiniMax Code 研发负责人 Ronny 的日常工作流，第一份，也是目前最完整的一份 stacks/jiachen/ Jiachen 的工作流：把自己从 agent 的循环里解放出来，以及把笔记做成图文和短视频 stacks/req-tpm/ 可选：需求提出人和自己的 agent 一起当这条需求的 TPM（正文在飞书文档，状态在 Meegle），v0 +stacks/youfang/ Youfang 的工作流：把架构讲解做成「神奇移动」演示，四种风格可选 stacks// 每位成员一个目录，欢迎团队同事把自己的也放进来 notes/ 「MCode 工程笔记」每一篇对应哪一份能跑的东西 community/ 团队外的 stack，由协作者加进来 templates/stack-template/ 新增 stack 用的模板 ``` -每份 stack 本身也是一个 MiniMax Code 插件包，具体内容见 [`stacks/ronny`](stacks/ronny/)、[`stacks/jiachen`](stacks/jiachen/) 和 [`stacks/req-tpm`](stacks/req-tpm/README_ZH.md)。 +每份 stack 本身也是一个 MiniMax Code 插件包，具体内容见 [`stacks/ronny`](stacks/ronny/)、[`stacks/jiachen`](stacks/jiachen/)、[`stacks/req-tpm`](stacks/req-tpm/README_ZH.md) 和 [`stacks/youfang`](stacks/youfang/)。 ## 参与贡献 diff --git a/stacks/README.md b/stacks/README.md index 848392c..d10dcd8 100644 --- a/stacks/README.md +++ b/stacks/README.md @@ -9,6 +9,7 @@ MiniMax Code plugin package. | [`ronny`](ronny/) | Ronny, R&D lead | Skills and plain-text checklists | | [`jiachen`](jiachen/) | Jiachen, engineer | Skills and a `WORKFLOW.md` | | [`req-tpm`](req-tpm/) | MiniMax Code team | Optional, v0: the requester and their agent act as a requirement's TPM (Feishu doc body, Meegle status). Skills, templates and a `WORKFLOW.md` | +| [`youfang`](youfang/) | Youfang, engineer | A skill that turns diagram walkthroughs into Magic Move slide decks (four styles, sample first), and a `WORKFLOW.md` | Teammates are welcome to add their own; see below. diff --git a/stacks/youfang/.claude-plugin/plugin.json b/stacks/youfang/.claude-plugin/plugin.json new file mode 100644 index 0000000..6a3ae5a --- /dev/null +++ b/stacks/youfang/.claude-plugin/plugin.json @@ -0,0 +1,11 @@ +{ + "name": "youfang", + "displayName": "Youfang's MCode Stack", + "version": "0.1.0", + "description": "Turn architecture and flow diagrams into Keynote-style Magic Move slide decks: one offline HTML file where the boxes and titles two slides share morph and fly, in one of four visual styles (hand-drawn, minimal, dark neon, neo-brutalist) picked from rendered samples, with optional 4K video export.", + "author": { + "name": "Youfang (MiniMax Code team)" + }, + "homepage": "https://github.com/MiniMax-AI/mcode-stack/tree/main/stacks/youfang", + "repository": "https://github.com/MiniMax-AI/mcode-stack" +} diff --git a/stacks/youfang/.codex-plugin/plugin.json b/stacks/youfang/.codex-plugin/plugin.json new file mode 100644 index 0000000..695f1be --- /dev/null +++ b/stacks/youfang/.codex-plugin/plugin.json @@ -0,0 +1,28 @@ +{ + "name": "youfang", + "version": "0.1.0", + "description": "Turn architecture and flow diagrams into Keynote-style Magic Move slide decks: one offline HTML file where the boxes and titles two slides share morph and fly, in one of four visual styles (hand-drawn, minimal, dark neon, neo-brutalist) picked from rendered samples, with optional 4K video export.", + "author": { + "name": "Youfang (MiniMax Code team)" + }, + "homepage": "https://github.com/MiniMax-AI/mcode-stack/tree/main/stacks/youfang", + "repository": "https://github.com/MiniMax-AI/mcode-stack", + "skills": "./skills/", + "interface": { + "displayName": "Youfang's MCode Stack", + "shortDescription": "Diagram walkthroughs as Magic Move slide decks, in four styles.", + "longDescription": "Turn architecture and flow diagrams into Keynote-style Magic Move slide decks: one offline HTML file where the boxes and titles two slides share morph and fly, in one of four visual styles (hand-drawn, minimal, dark neon, neo-brutalist) picked from rendered samples, with optional 4K video export.", + "developerName": "Youfang (MiniMax Code team)", + "category": "Productivity", + "capabilities": [ + "Read", + "Write" + ], + "websiteURL": "https://github.com/MiniMax-AI/mcode-stack/tree/main/stacks/youfang", + "defaultPrompt": [ + "把这套架构讲解做成 Magic Move 演示，先给我看四种风格的样张", + "Make an animated slide deck that walks through our ingestion pipeline", + "Switch this deck to the dark neon style and export a 1080p video" + ] + } +} diff --git a/stacks/youfang/.minimax-plugin/plugin.json b/stacks/youfang/.minimax-plugin/plugin.json new file mode 100644 index 0000000..f131e99 --- /dev/null +++ b/stacks/youfang/.minimax-plugin/plugin.json @@ -0,0 +1,20 @@ +{ + "schemaVersion": 1, + "name": "youfang", + "version": "0.1.0", + "displayName": "Youfang's MCode Stack", + "description": "Turn architecture and flow diagrams into Keynote-style Magic Move slide decks: one offline HTML file where the boxes and titles two slides share morph and fly, in one of four visual styles (hand-drawn, minimal, dark neon, neo-brutalist) picked from rendered samples, with optional 4K video export.", + "author": "Youfang (MiniMax Code team)", + "icon": "icon.png", + "category": "Productivity", + "exampleQueries": [ + "把这套架构讲解做成 Magic Move 演示，先给我看四种风格的样张", + "Make an animated slide deck that walks through our ingestion pipeline", + "Switch this deck to the dark neon style and export a 1080p video" + ], + "apps": [], + "mcpServers": [], + "skills": [ + "skills/magic-move-deck/SKILL.md" + ] +} diff --git a/stacks/youfang/NOTICE.md b/stacks/youfang/NOTICE.md new file mode 100644 index 0000000..bd0718e --- /dev/null +++ b/stacks/youfang/NOTICE.md @@ -0,0 +1,49 @@ +# Third-party notices + +## handdrawn-diagram + +[`skills/magic-move-deck/styles/handdrawn/diagram.html`](skills/magic-move-deck/styles/handdrawn/diagram.html) +is adapted from the template in +[TrentChou/handdrawn-diagram](https://github.com/TrentChou/handdrawn-diagram): +its palette, typography, shape helpers and `main()` contract. The other three +style templates follow the same helper API. Changes for this stack: a 1920×1080 +default canvas, a card palette (`C.card`) and a `glow` entry used by the deck +engine. + +``` +MIT License + +Copyright (c) 2026 TrentChou + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. +``` + +## Loaded at run time, not bundled + +- [rough.js](https://roughjs.com) 4.6.6 (MIT), loaded from jsDelivr when a + diagram is rendered. Built decks contain the SVG it produced, not the + library. +- [Noto Serif SC](https://fonts.google.com/noto/specimen/Noto+Serif+SC) + (SIL Open Font License 1.1), loaded from Google Fonts by the hand-drawn + template as a fallback when no Songti font is installed. +- [Playwright](https://playwright.dev) (Apache-2.0) and ffmpeg run the build, + screenshot and video scripts; they are installed by the user. + +Everything else in this stack is released under the repository's +[MIT License](../../LICENSE). diff --git a/stacks/youfang/README.md b/stacks/youfang/README.md new file mode 100644 index 0000000..32e3a67 --- /dev/null +++ b/stacks/youfang/README.md @@ -0,0 +1,68 @@ +# youfang + +The stack of Youfang, an engineer on MiniMax Code: one skill that turns an +architecture or flow walkthrough into a Keynote-style **Magic Move** slide +deck. Every slide is a diagram seen through a camera, and the boxes, labels +and titles two slides share morph and fly instead of cross-fading. The agent +first renders one sample slide in each of four styles; you pick one and it +builds the whole deck in that style. + +| A · Hand-drawn | B · Minimal | +| --- | --- | +| ![hand-drawn](skills/magic-move-deck/styles/handdrawn/preview.png) | ![minimal](skills/magic-move-deck/styles/minimal/preview.png) | +| **C · Dark neon** | **D · Neo-brutalist** | +| ![neon](skills/magic-move-deck/styles/neon/preview.png) | ![brutalist](skills/magic-move-deck/styles/brutalist/preview.png) | + +## Install + +In Claude Code, one command installs this stack. In a shell: + +```bash +claude plugin install youfang --marketplace MiniMax-AI/mcode-stack +``` + +Inside a session: + +```bash +/plugin install youfang --marketplace MiniMax-AI/mcode-stack +``` + +Older Claude Code can add the marketplace first, then install: + +```bash +/plugin marketplace add MiniMax-AI/mcode-stack +/plugin install youfang@mcode-stack +``` + +In Codex, add the marketplace, then install from the Plugins Directory or the CLI: + +```bash +codex plugin marketplace add MiniMax-AI/mcode-stack +codex plugin add youfang@mcode-stack +``` + +In MiniMax Code, copy this whole directory into the local plugin directory +shown by `mcode plugin marketplace list`, or copy the skill into +`~/.agents/skills/`. See the [repository README](../../README.md#quick-start). + +| Skill | What it does | +| --- | --- | +| [`magic-move-deck`](skills/magic-move-deck/SKILL.md) | Plan the storyline (cover → overview → per topic: zoom into its region, detail diagram, three spotlights → overview → closing card), draw one detail diagram, render it in four styles for you to choose, then draw the remaining diagrams in that style and build one offline 1920×1080 HTML deck. Shared elements are matched by name across slides. Screenshots every slide and transition to check the result; optional 4K / 1080p video with background music. | + +A complete example deck (a RAG knowledge assistant, 19 slides) with its +sources, configuration and previews is in +[`skills/magic-move-deck/examples/rag-assistant/`](skills/magic-move-deck/examples/rag-assistant/). + +## Requirements + +- Python 3 and Playwright's Chromium: + `pip install playwright && playwright install chromium`. +- `ffmpeg`, only for video export. +- Network access while diagrams are rendered (rough.js from jsDelivr). The + built deck is a single file that works offline. +- Fonts: Times New Roman and a Songti font for the hand-drawn style (shipped + with macOS and Windows); the other styles use the system UI font with + PingFang SC, Microsoft YaHei or Noto Sans SC for Chinese. + +How this fits into a working day: [`WORKFLOW.md`](WORKFLOW.md). Third-party +credits: [`NOTICE.md`](NOTICE.md). diff --git a/stacks/youfang/WORKFLOW.md b/stacks/youfang/WORKFLOW.md new file mode 100644 index 0000000..3eacaca --- /dev/null +++ b/stacks/youfang/WORKFLOW.md @@ -0,0 +1,55 @@ +# Youfang's day with MiniMax Code + +> **Draft.** Written from how the agent and I build talk decks today; I will +> rewrite it in my own words. + +Most of my work with the agent is server-side engineering across several +repositories. Every few weeks part of that work has to be explained to other +people: an architecture review, a design walkthrough, a team share. That is +where `magic-move-deck` comes in. + +## Slides are diagrams seen through a camera + +I don't ask the agent for bullet slides. A deck is one overview diagram plus +one detail diagram per topic, and every slide is a camera framing on one of +them. Moving between slides, the boxes and titles both slides share morph to +their new place, so the audience never loses track of where a detail lives. +The storyline is fixed: cover, overview, then for each topic "zoom into its +region, show its detail diagram, spotlight three things", back to the +overview, closing card. Each spotlight carries one sentence it has to prove; +a spotlight without a conclusion gets cut. + +## Plan in text first + +Before anything is drawn, the agent writes the storyline as a list: the deck +title, each topic's one-line principle, the three conclusions per topic, which +concepts appear on the overview and which only in a detail diagram. I correct +that list, not the drawings. The agent also locks each concept to a colour +role in a binding table, so the same concept looks the same on every slide. + +## Pick the look from real samples + +The agent draws one representative detail diagram with the real content, +then renders it in all four styles (hand-drawn, minimal, dark neon, +neo-brutalist) and shows me the four images. I pick one; nothing else is +drawn until I do. Because every style template exposes the same helpers, the +choice costs nothing to change later. + +## Review screenshots, not claims + +"The deck builds" is not done. The agent screenshots every slide and freezes +the overview ↔ detail transitions at several points in both directions, then +looks for text running into text, boxes that should have flown but faded +(names that did not match), and spotlights that crop their conclusion. It +fixes the diagram, never the engine, to make one slide look right. I review +those screenshots before I open the deck myself. + +## What stays with me + +Which story to tell, the final wording of every conclusion, and anything +that names an internal system. Decks are written with generic names so they +can be shared outside the team; publishing or hosting a deck is my call. + +| Moment | Skill | +| --- | --- | +| A design or architecture needs to be presented | `magic-move-deck` | diff --git a/stacks/youfang/icon.png b/stacks/youfang/icon.png new file mode 100644 index 0000000..132ee10 Binary files /dev/null and b/stacks/youfang/icon.png differ diff --git a/stacks/youfang/plugin.json b/stacks/youfang/plugin.json new file mode 100644 index 0000000..d6a713c --- /dev/null +++ b/stacks/youfang/plugin.json @@ -0,0 +1,11 @@ +{ + "$schema": "https://agent-plugins.org/schemas/1.0.0/plugin.schema.json", + "name": "youfang", + "version": "0.1.0", + "description": "Turn architecture and flow diagrams into Keynote-style Magic Move slide decks: one offline HTML file where the boxes and titles two slides share morph and fly, in one of four visual styles (hand-drawn, minimal, dark neon, neo-brutalist) picked from rendered samples, with optional 4K video export.", + "author": { + "name": "Youfang (MiniMax Code team)" + }, + "homepage": "https://github.com/MiniMax-AI/mcode-stack/tree/main/stacks/youfang", + "repository": "https://github.com/MiniMax-AI/mcode-stack" +} diff --git a/stacks/youfang/skills/magic-move-deck/SKILL.md b/stacks/youfang/skills/magic-move-deck/SKILL.md new file mode 100644 index 0000000..78674fc --- /dev/null +++ b/stacks/youfang/skills/magic-move-deck/SKILL.md @@ -0,0 +1,159 @@ +--- +name: magic-move-deck +description: "Build Keynote-style Magic Move slide decks as one offline 1920×1080 HTML file: every slide is an architecture / flow diagram seen through a camera, and the elements two slides share morph and fly instead of cross-fading. Four visual styles (hand-drawn, minimal, dark neon, neo-brutalist): the agent first renders one sample slide in each style, the user picks one, then the whole deck is built in that style. Also exports 4K / 1080p video. Use for 做演示 / 做 slides / 做 PPT / Magic Move / 神奇移动 / 架构图演示 / 技术分享 deck / 动画 slides / animated architecture walkthrough. Not for bullet-point decks or a single static diagram." +license: MIT +compatibility: Python 3 + Playwright Chromium (pip install playwright && playwright install chromium); ffmpeg for video. Rendering diagrams loads rough.js from jsDelivr; the built deck is fully offline. +--- + +# Magic Move Deck + +成品：一个 1920×1080 的单文件 HTML。每一页都是某张图 + 一个相机取景；前后页共享的元素变形、移动过去。图有四种风格，同一套代码（`main()`）可以在任一风格下渲染，所以先出四张样张让用户挑，再按选中的风格做完整 deck。 + +```mermaid +flowchart LR + A[故事线与色槽锁定] --> B[画一张代表性细节图] + B --> C[styles.py samples
4 种风格各一张] + C --> D{用户选风格} + D --> E[styles.py apply
其余图用该风格模板] + E --> F[build_deck.py
导出每个形状/文字] + F --> G[keynote.html
SECTIONS 取景 + match 配对] + G --> H[单文件 deck] + G --> I[render_video.py
4K/1080p] +``` + +## 风格 + +| id | 名称 | 观感 | +|---|---|---| +| `handdrawn` | 手绘 Hand-drawn | rough.js 手绘线条 + 宋体 / Times 印刷字 + 暖米白纸面 | +| `minimal` | 简约 Minimal | 精确几何 + 圆角卡片 + 无衬线 + 近白底 | +| `neon` | 暗色科技 Neon | 深蓝底 + 霓虹描边柔光 + 切角面板 | +| `brutalist` | 新野兽派 Brutalist | 奶油底 + 粗黑描边 + 高饱和平涂 + 硬投影 | + +每个风格在 `styles//`：`diagram.html`（模板）、`STYLE.md`（字体、9 色槽、额外规则）、`preview.png`。`python3 scripts/styles.py list` 列出全部。新增风格见 `references/styles.md`。 + +## 先读 + +1. `references/diagram-rules.md` — 与风格无关的画图规则：只画 brief 里的东西、9 个色槽的抽象语义、形状语义、自检清单。 +2. `references/magic-move-contract.md` — deck 原则、三类转场、**命名契约**（决定元素能否变过去）、build 挂钩。**画图前必读。** +3. `references/styles.md` — 风格系统：样张、切换、模板接口。 +4. `references/bilingual-layout.md`（双语 deck 必读）、`references/cards.md`（封面 / 结束页）、`references/verification.md`（构建输出、截图、视频、分享）。 +5. 完整范例 `examples/rag-assistant/`：图源文件 + CONFIG + `previews/`。动手前看 `previews/overview.jpg`、`previews/01_ingestion.jpg`、`previews/00_cover.jpg`，照抄其 `main()` 写法。 +6. 用户选定风格后读 `styles/ + + + + +
+ +
+
+ + + diff --git a/stacks/youfang/skills/magic-move-deck/examples/rag-assistant/details/01_ingestion.html b/stacks/youfang/skills/magic-move-deck/examples/rag-assistant/details/01_ingestion.html new file mode 100644 index 0000000..828061e --- /dev/null +++ b/stacks/youfang/skills/magic-move-deck/examples/rag-assistant/details/01_ingestion.html @@ -0,0 +1,387 @@ + + + + + + + + + + + + + + +
+ +
+
+ + + diff --git a/stacks/youfang/skills/magic-move-deck/examples/rag-assistant/details/02_retrieval.html b/stacks/youfang/skills/magic-move-deck/examples/rag-assistant/details/02_retrieval.html new file mode 100644 index 0000000..90df8ef --- /dev/null +++ b/stacks/youfang/skills/magic-move-deck/examples/rag-assistant/details/02_retrieval.html @@ -0,0 +1,384 @@ + + + + + + + + + + + + + + +
+ +
+
+ + + diff --git a/stacks/youfang/skills/magic-move-deck/examples/rag-assistant/details/03_generation.html b/stacks/youfang/skills/magic-move-deck/examples/rag-assistant/details/03_generation.html new file mode 100644 index 0000000..a6a7de1 --- /dev/null +++ b/stacks/youfang/skills/magic-move-deck/examples/rag-assistant/details/03_generation.html @@ -0,0 +1,399 @@ + + + + + + + + + + + + + + +
+ +
+
+ + + diff --git a/stacks/youfang/skills/magic-move-deck/examples/rag-assistant/details/99_end.html b/stacks/youfang/skills/magic-move-deck/examples/rag-assistant/details/99_end.html new file mode 100644 index 0000000..7ccd4f2 --- /dev/null +++ b/stacks/youfang/skills/magic-move-deck/examples/rag-assistant/details/99_end.html @@ -0,0 +1,299 @@ + + + + + + + + + + + + + + +
+ +
+
+ + + diff --git a/stacks/youfang/skills/magic-move-deck/examples/rag-assistant/diagram-binding.md b/stacks/youfang/skills/magic-move-deck/examples/rag-assistant/diagram-binding.md new file mode 100644 index 0000000..a97a63d --- /dev/null +++ b/stacks/youfang/skills/magic-move-deck/examples/rag-assistant/diagram-binding.md @@ -0,0 +1,35 @@ +# 检索增强问答助手 · 概念配色绑定 + +整套 deck（封面、总览、3 张细节图、结束页）共用这张表；每张图 `main()` 顶部的 "Concept color binding" 注释与本表一致。新概念只追加新行，不改已有行。 + +## 概念 → 颜色 → 形状 + +| 概念类别 | 包含组件 | 颜色 slot | 形状 | +|---|---|---|---| +| 用户 | 用户（提问、读回答、点引用） | `C.user` 钢蓝 | Box | +| 知识数据 | 文档 · 向量索引 · 关键词索引 · Top-k 片段 | `C.memory` 栗棕 | Box；文档、Top-k 片段为堆叠框 `stack()`（多份） | +| 入库处理步骤 | 解析清洗 · 切块（细节图里的片段卡片） | `C.tools` 苔绿 | Box；片段卡片为 `taskCard()` | +| 辅助模型 | 向量模型 · 重排序 | `C.subagent` 焦糖 | Box | +| 检索编排（主角） | 查询改写 · 混合检索 · 合并去重 · 权限过滤 · 向量召回 · 关键词召回 · 提示词组装 · 证据检查 | `C.agent` 砖橙 | Box；混合检索、提示词组装加粗（`strokeWidth: 3.2`）；提示词的三段为 `taskCard()` | +| 大模型 | 大模型 | `C.llm` 靛紫 | Box | +| 回答 | 带引用的回答 | `C.im` 墨青 | Box | +| 拒答 | 证据不足时拒答 · 说「不知道」 | `C.error` 砖红 | Hexagon + 红色虚线箭头 | +| 分区 | 离线入库 ① / 在线检索 ② / 回答生成 ③ | `C.tools` / `C.agent` / `C.llm` | `frame()` 虚线框 + `fl()` 标签 | +| 流向 | 所有正常箭头 | `C.flow` 暖墨 | `arrow()` / 折线 `route()` | +| 封面 / 结束卡片 | 卡片边框、标题、下划线 | `C.card`（风格自带） | `box()` | + +## 歧义概念的裁决 + +- 向量模型、重排序 → 辅助模型（`C.subagent`），不是大模型（`C.llm`）。理由：它们只打分 / 编码，不生成回答；`C.llm` 只留给生成回答的那个模型。 +- 提示词组装 → 检索编排（`C.agent`），不是大模型。理由：它是编排代码拼出来的输入，大模型只负责读它。 +- Top-k 片段 → 知识数据（`C.memory`），不是检索编排。理由：它是检索的结果数据，和索引里的片段是同一种东西。 +- 证据检查 → 检索编排（`C.agent`），不是拒答（`C.error`）。理由：检查本身是正常流程；只有「检查不通过 → 拒答」这条路径用红色。 + +## 每张图使用的颜色 + +| 图 | user | memory | tools | subagent | agent | llm | im | error | 图例 | +|---|---|---|---|---|---|---|---|---|---| +| 总览 `overview.html` | ● | ● | ● | ● | ● | ● | ● | ● | 有（8 色） | +| ① 离线入库 `01_ingestion.html` | | ● | ● | ● | | | | | 无 | +| ② 在线检索 `02_retrieval.html` | ● | ● | ●（分区） | ● | ● | | | | 无 | +| ③ 回答生成 `03_generation.html` | ● | ● | | | ● | ● | ● | ● | 有（6 色） | diff --git a/stacks/youfang/skills/magic-move-deck/examples/rag-assistant/overview.html b/stacks/youfang/skills/magic-move-deck/examples/rag-assistant/overview.html new file mode 100644 index 0000000..bc30a1b --- /dev/null +++ b/stacks/youfang/skills/magic-move-deck/examples/rag-assistant/overview.html @@ -0,0 +1,415 @@ + + + + + + + + + + + + + + +
+ +
+
+ + + diff --git a/stacks/youfang/skills/magic-move-deck/examples/rag-assistant/previews/00_cover.jpg b/stacks/youfang/skills/magic-move-deck/examples/rag-assistant/previews/00_cover.jpg new file mode 100644 index 0000000..1318179 Binary files /dev/null and b/stacks/youfang/skills/magic-move-deck/examples/rag-assistant/previews/00_cover.jpg differ diff --git a/stacks/youfang/skills/magic-move-deck/examples/rag-assistant/previews/01_ingestion.jpg b/stacks/youfang/skills/magic-move-deck/examples/rag-assistant/previews/01_ingestion.jpg new file mode 100644 index 0000000..63a5c44 Binary files /dev/null and b/stacks/youfang/skills/magic-move-deck/examples/rag-assistant/previews/01_ingestion.jpg differ diff --git a/stacks/youfang/skills/magic-move-deck/examples/rag-assistant/previews/02_retrieval.jpg b/stacks/youfang/skills/magic-move-deck/examples/rag-assistant/previews/02_retrieval.jpg new file mode 100644 index 0000000..b0bd812 Binary files /dev/null and b/stacks/youfang/skills/magic-move-deck/examples/rag-assistant/previews/02_retrieval.jpg differ diff --git a/stacks/youfang/skills/magic-move-deck/examples/rag-assistant/previews/03_generation.jpg b/stacks/youfang/skills/magic-move-deck/examples/rag-assistant/previews/03_generation.jpg new file mode 100644 index 0000000..276c0d7 Binary files /dev/null and b/stacks/youfang/skills/magic-move-deck/examples/rag-assistant/previews/03_generation.jpg differ diff --git a/stacks/youfang/skills/magic-move-deck/examples/rag-assistant/previews/99_end.jpg b/stacks/youfang/skills/magic-move-deck/examples/rag-assistant/previews/99_end.jpg new file mode 100644 index 0000000..04cc83b Binary files /dev/null and b/stacks/youfang/skills/magic-move-deck/examples/rag-assistant/previews/99_end.jpg differ diff --git a/stacks/youfang/skills/magic-move-deck/examples/rag-assistant/previews/overview.jpg b/stacks/youfang/skills/magic-move-deck/examples/rag-assistant/previews/overview.jpg new file mode 100644 index 0000000..ab567e1 Binary files /dev/null and b/stacks/youfang/skills/magic-move-deck/examples/rag-assistant/previews/overview.jpg differ diff --git a/stacks/youfang/skills/magic-move-deck/examples/rag-assistant/previews/trans_d1_to_spot.jpg b/stacks/youfang/skills/magic-move-deck/examples/rag-assistant/previews/trans_d1_to_spot.jpg new file mode 100644 index 0000000..b37a510 Binary files /dev/null and b/stacks/youfang/skills/magic-move-deck/examples/rag-assistant/previews/trans_d1_to_spot.jpg differ diff --git a/stacks/youfang/skills/magic-move-deck/examples/rag-assistant/previews/trans_overview_to_d1.jpg b/stacks/youfang/skills/magic-move-deck/examples/rag-assistant/previews/trans_overview_to_d1.jpg new file mode 100644 index 0000000..cbdf33e Binary files /dev/null and b/stacks/youfang/skills/magic-move-deck/examples/rag-assistant/previews/trans_overview_to_d1.jpg differ diff --git a/stacks/youfang/skills/magic-move-deck/references/bilingual-layout.md b/stacks/youfang/skills/magic-move-deck/references/bilingual-layout.md new file mode 100644 index 0000000..045ae93 --- /dev/null +++ b/stacks/youfang/skills/magic-move-deck/references/bilingual-layout.md @@ -0,0 +1,38 @@ +# 双语排版约定（中英双语 deck） + +全程中英双语、英文为主的 deck：所有图（封面、总览、细节图、结束页）英文在上、字号大，中文在下、字号小，两种语言的文案各自完整。纯中文或纯英文 deck 跳过本文件，只需保证节点名与分区名两页一致。 + +## 本地函数（定义在 `main()` 开头，见 `templates/detail-main.js`） + +参数一律按 `(中文, English)` 传，显示顺序由函数决定： + +| 函数 | 输出 | 用在 | +|---|---|---| +| `bl(zh, en, zhSize = 13)` | 两行：英文在上，中文在下、字号 `zhSize` | 箭头说明、小标签 | +| `fl(zh, en)` | 单行 `English 中文`，中间是全角空格（em space），中文 14px | **所有分区框标签**（`build_deck.py` 按 em space 拆出中文分区名） | +| `btext(x, y, w, h, color, [zh, en], subs, o)` | 框内标题 + 细项：标题英文 `size`、中文 `zhSize`；每个细项英文在上、中文在下（`subSize` / `zhSubSize`）；`'gap'` 插空；整块按实际高度垂直居中 | 节点正文 | +| `bnode(...)` | `box()` + `btext()` | 大多数节点 | + +`btext` 的中文标题行用 `.ti`（加粗），所以它就是节点的配对名。 + +## 标题与字号 + +| 图 | 英文 | 中文 | 排法 | +|---|---|---|---| +| 细节图标题 | 40px | 28px | 同一基线，先 `title()` 英文，再 `title()` 中文，中文 x = 英文宽度 + 24 | +| 细节图副标题 | 21px | 18px | 各占一行（y=104 / 134） | +| 总览标题 | 42px | 30px | 同基线，间隔 +26 | +| 封面标题 | 72px | 44px | 居中两行 | +| 结束页标题 | 64px | 38px | 居中两行 | + +## 圈号（①–⑳） + +- 总览上每个原则 / 主题有一个以圈号开头的英文小标题，正下方一行中文；细节图英文标题以同一个圈号开头，这样标题从小标题放大而来。细节图的中文标题与小标题下方那行中文用同一段文字。小标题放在该主题区域之外（标题带），见 `examples/rag-assistant/overview.html`。 +- 圈号放在英文行。实在放不下时可以放中文行，但要在代码里注释原因。 +- 步骤序号（「1 · xxx」）可以放中文行，不影响配对。 + +## 文案 + +- 不写内部服务名、厂商产品名或代号，用通用名（如不写某云厂商的存储产品名，写「对象存储」「云盘 · NAS」；不写内部服务代号，写「出口代理」「模型网关」）。对外分享的 deck 尤其要守。 +- 英文文案以官网 / 产品原文为准，不自造 slogan。 +- 「图例 · Legend」是 helper `legend()` 里写死的，不改。 diff --git a/stacks/youfang/skills/magic-move-deck/references/cards.md b/stacks/youfang/skills/magic-move-deck/references/cards.md new file mode 100644 index 0000000..dc9bdb0 --- /dev/null +++ b/stacks/youfang/skills/magic-move-deck/references/cards.md @@ -0,0 +1,65 @@ +# 封面与结束页卡片 + +可选。`build_deck.py` 的 `SOURCES` 里有 `cv` 就有封面，有 `end` 就有结束页；起点模板 `templates/card-main.js`。 + +## 画面 + +- 封面：总览图推近 6%、蒙一层毛玻璃（`keynote.html` 的 `#glass`），卡片浮在上面（`#card` 是更密的一层毛玻璃，按卡片里**面积最大的形状**定位）。总览自己的 `title()` 在封面上隐藏，因为卡片标题就是它。 +- 结束页同样是毛玻璃上的卡片，**标题和封面相同**；另外可以放截图、二维码、slogan、致谢。 + +## 转场 `coverTrans` + +封面 → 总览：卡片标题的字词用神奇效果飞到总览左上角标题的位置，颜色从卡片标题色（`C.card.title`）渐变到总览标题色；卡片和其余元素在 `[0, .14]` 淡出；随后毛玻璃从标题处向外径向擦开（`[.42, 1]`），其余全局细节显现。总览 → 结束页是它的倒放：毛玻璃合上，总览标题的字词飞回卡片标题；只在卡片上出现的元素（截图、二维码）淡入。 + +改卡片或时间参数时守住这几条： + +- **标题行按文字种类配对，不按行号。** `cjk()` 判断一行是不是中文：中文行配中文行、英文行配英文行。哪一边的行序变了都不会配错，所以不要改成按行号。推论：卡片上每种文字最多一行 `title()`；单语 deck 的卡片只用一行 `title()`，否则两行都会去配总览的同一行，多出重复淡入的词。 +- **词的单位**：拉丁单词、单个 CJK 字。两边相同的词飞行；卡片独有的词淡出，总览独有的词在 `[.42, .7]` 淡入。卡片标题尽量用总览标题里的词。 +- **超车词。** 同一行里横向要越过同行其他词的词（「云端 Agent」→「Agent 云端」里的「Agent」）。有超车词的那一行保持平，超车词朝远离另一行的方向跳开；没有超车词的那一行朝远离另一行的方向弧起。 +- **超车词的纵向位置跟着整行走（行进度 `q` 插值），跳开量是叠加的纯偏移。** 用自己的进度插值会在跳开中途压到另一行的字。跳开量不小于字高。 +- **卡片和其余元素的淡出窗口 `[0, .14]` 不要放慢。** 向下跳开的词在 p≈0.10–0.22 会扫过卡片标题的下划线，下划线必须在那之前淡完；不要靠缩小跳开量或下移下划线来避让。 + +## 配色 + +卡片是 9 色槽的唯一例外，用所选风格模板里的 `C.card`（`templates/card-main.js` 开头 `const K = C.card; C.title = K.title;`，`title()` 调用时读取 `C.title`）。卡片框用风格自己的 `box()` 画，所以手绘风是手绘框、简约风是圆角框、暗色科技是切角发光框、新野兽派带硬投影。 + +| 字段 | 用途 | +|---|---| +| `stroke` / `fill` | 卡片边框 / 填充（填充半透明，透出后面的毛玻璃） | +| `accent` | 标题下划线、分隔线、二维码说明文字 | +| `title` | 卡片大标题；飞到总览时渐变为总览标题色 `C.title` | +| `text` / `muted` | 正文 / 次要文字（团队、分享人） | +| `glass` | `#glass` 毛玻璃的 CSS `background`（通常是渐变） | +| `pane` / `shadow` | `#card` 卡片底板的半透明背景 / `box-shadow` | + +`build_deck.py` 导出 `C.card`，`keynote.html` 自动用 `glass` / `pane` / `shadow` 设置毛玻璃，不需要改 deck 的 CSS。要套用品牌色时，在卡片 `main()` 开头覆盖 `C.card` 的字段（如 `Object.assign(C.card, { stroke: '#…', accent: '#…', glass: '…' })`），封面和结束页写同样的覆盖。 + +## 字号 + +封面标题英文 72px、中文 44px；结束页标题英文 64px、中文 38px；英文在上。卡片上的英文文案以官网 / 产品原文为准，不自造 slogan。 + +## 图片 + +在 `main()` 里定义局部 `pic(src, x, y, w, h)`（模板已有）：往 `#labels` 加 ``。图片放在图旁的 `assets/`，路径相对于图的 HTML；`build_deck.py` 内联成 data URI（支持 webp / png / jpg / svg）。产品截图先缩到约 480px 宽再放，控制单文件体积。 + +## 二维码 + +33×33 模块、纠错等级 Q、`#171717` 印白底，生成为 SVG（需要 `pip install qrcode`，可在 venv 里装）： + +```python +import qrcode +URL, OUT = 'https://example.com/download', 'details/assets/qr.svg' +qr = qrcode.QRCode(error_correction=qrcode.constants.ERROR_CORRECT_Q, border=2) +qr.add_data(URL); qr.make(fit=True) +n, b, d = qr.modules_count + 4, 2, '' +for y, row in enumerate(qr.modules): + x = 0 + while x < len(row): + if not row[x]: x += 1; continue + s = x + while x < len(row) and row[x]: x += 1 + d += f'M{s+b} {y+b}h{x-s}v1h-{x-s}z' +open(OUT, 'w').write(f'') +``` + +放在白色方块里（模板注释里的 QR tile；暗色风格也必须是白底）。生成后用手机扫 deck 第一页和最后一页确认。 diff --git a/stacks/youfang/skills/magic-move-deck/references/diagram-rules.md b/stacks/youfang/skills/magic-move-deck/references/diagram-rules.md new file mode 100644 index 0000000..6756dbb --- /dev/null +++ b/stacks/youfang/skills/magic-move-deck/references/diagram-rules.md @@ -0,0 +1,62 @@ +# 画图规则（所有风格通用） + +每张图都是某个风格模板 `styles/' + f'
{cells}
') + rows = (len(shots) + 1) // 2 + page.set_viewport_size({'width': 2 * cw + 3 * 28 + 4, 'height': rows * (ch + 60) + (rows + 1) * 28}) + page.goto('file://' + sheet) + page.wait_for_function('[...document.images].every(i => i.complete)') + page.screenshot(path=os.path.join(out, 'contact-sheet.png'), full_page=True) + print('wrote', os.path.join(out, 'contact-sheet.png')) + browser.close() + if errors: + sys.exit('page errors:\n' + '\n'.join(errors)) + + +def cmd_apply(a): + ids = [s[0] for s in styles()] + if a.style not in ids: + sys.exit(f'unknown style {a.style!r}; choose one of {", ".join(ids)}') + for f in a.files: + path = os.path.abspath(f) + _, main_src, w, h = split(open(path, encoding='utf-8').read(), path) + open(path, 'w', encoding='utf-8').write(restyle(a.style, main_src, w, h)) + print(f'{f}: {a.style} ({w}x{h})') + + +def main(): + ap = argparse.ArgumentParser(description=__doc__, formatter_class=argparse.RawDescriptionHelpFormatter) + sub = ap.add_subparsers(dest='cmd', required=True) + sub.add_parser('list', help='available styles') + s = sub.add_parser('samples', help='render one diagram in every style + a 2x2 contact sheet') + s.add_argument('diagram') + s.add_argument('--out', default='style-samples') + s.add_argument('--styles', default='', help='comma-separated subset (default: all)') + p = sub.add_parser('apply', help='switch diagrams to a style in place (keeps each main() and canvas size)') + p.add_argument('style') + p.add_argument('files', nargs='+') + a = ap.parse_args() + if a.cmd == 'list': + for sid, name, blurb in styles(): + print(f'{sid:10s} {name} — {blurb}') + elif a.cmd == 'samples': + cmd_samples(a) + else: + cmd_apply(a) + + +if __name__ == '__main__': + main() diff --git a/stacks/youfang/skills/magic-move-deck/styles/brutalist/STYLE.md b/stacks/youfang/skills/magic-move-deck/styles/brutalist/STYLE.md new file mode 100644 index 0000000..0a9a239 --- /dev/null +++ b/stacks/youfang/skills/magic-move-deck/styles/brutalist/STYLE.md @@ -0,0 +1,43 @@ +# 新野兽派 Brutalist + +> 奶油底 + 粗黑描边 + 高饱和平涂 + 硬投影 + 粗体无衬线，像独立杂志或潮流海报 + +![preview](preview.png) + +适合：创意提案、产品故事、社区分享、年轻受众；需要「一眼记住」的场合。 + +## 视觉要素 + +| 要素 | 取值 | +|---|---| +| 背景 | 奶油色 `#f4efe4` | +| 形状 | `roughness 0`、直角、粗黑描边（约为手绘风的 1.15 倍）、高饱和平涂；框右下 7px 黑色硬投影 | +| 字体 | Helvetica Neue / Arial 粗体，中文 PingFang SC / 微软雅黑 / Noto Sans SC | +| 箭头 | 黑色粗线 + 大号实心三角 | +| 分区框 | 黑色长虚线；标签是填该分区颜色的色块 | +| 文字色 | 框内文字 = 描边 = 黑色（`C.error` 例外：红描边红字） | +| 卡片 | 黑框奶白卡 + 黑色硬投影；毛玻璃为橙 → 黄 → 奶油渐变 | + +## 9 个色槽 + +本风格所有槽描边都是 `#111111`，靠填充色区分概念；`C.error` 用红色描边。 + +| 槽 | 描边 = 框内文字 | 填充 | 对比度 | +|---|---|---|---| +| `C.user` | `#111111` | `#8ecbff` 天蓝 | 10.9 | +| `C.im` | `#111111` | `#6fe3c8` 薄荷 | 12.1 | +| `C.agent` | `#111111` | `#ff9248` 橙 | 8.5 | +| `C.subagent` | `#111111` | `#ffd84d` 黄 | 13.7 | +| `C.llm` | `#111111` | `#bda6ff` 薰衣草 | 9.0 | +| `C.tools` | `#111111` | `#9be870` 草绿 | 12.7 | +| `C.memory` | `#111111` | `#ffa8d5` 粉 | 10.6 | +| `C.external` | `#111111` | `#ddd6c6` 石色 | 13.0 | +| `C.error` | `#c8102e` 红 | `#ffe0e0` | 4.8 | + +通用色：箭头 `#111111`，标题 `#111111`，副标题 `#3d3a35`，注释 `#5b574f`。 + +## 本风格的额外规则 + +- `box()` 先画投影（同描边色、黑色填充、偏移 7px）再画框：两者是连续绘制、同描边、高度重叠的闭合形状，`build_deck.py` 按「堆叠框」把它们当同一个节点，转场时一起移动。不要在投影和框之间插入别的绘制。 +- 所有槽描边相同，颜色是概念的唯一视觉线索之一：每个框都必须有文字；分区标签色块帮读者对应分区颜色。 +- 粗体无衬线比 Times 宽：框内英文留 10–15% 余量。 diff --git a/stacks/youfang/skills/magic-move-deck/styles/brutalist/diagram.html b/stacks/youfang/skills/magic-move-deck/styles/brutalist/diagram.html new file mode 100644 index 0000000..8be0cde --- /dev/null +++ b/stacks/youfang/skills/magic-move-deck/styles/brutalist/diagram.html @@ -0,0 +1,256 @@ + + + + + + + + + + +
+ +
+
+ + + diff --git a/stacks/youfang/skills/magic-move-deck/styles/brutalist/preview.png b/stacks/youfang/skills/magic-move-deck/styles/brutalist/preview.png new file mode 100644 index 0000000..68e3a6a Binary files /dev/null and b/stacks/youfang/skills/magic-move-deck/styles/brutalist/preview.png differ diff --git a/stacks/youfang/skills/magic-move-deck/styles/handdrawn/STYLE.md b/stacks/youfang/skills/magic-move-deck/styles/handdrawn/STYLE.md new file mode 100644 index 0000000..ab09923 --- /dev/null +++ b/stacks/youfang/skills/magic-move-deck/styles/handdrawn/STYLE.md @@ -0,0 +1,43 @@ +# 手绘 Hand-drawn + +> rough.js 手绘线条 + 宋体 / Times 印刷字 + 暖米白纸面，像教科书插图或白板草图 + +![preview](preview.png) + +适合：技术分享、架构讲解、内部培训、公众号配图风格的 deck。观感亲和、不像「PPT」。 + +模板改编自 [handdrawn-diagram](https://github.com/TrentChou/handdrawn-diagram)（MIT）。 + +## 视觉要素 + +| 要素 | 取值 | +|---|---| +| 背景 | 暖米白 `#fdfdfa`（不用纯白） | +| 形状 | rough.js 手绘：`roughness 1.6`、`bowing 1.4`、描边 2.4px、`solid` 浅色填充 | +| 字体 | 中文宋体 / 中宋（Songti SC · STZhongsong · SimSun · Noto Serif SC），拉丁 Times New Roman | +| 箭头 | 暖墨色 `#3a3530` 手绘线 + 两笔箭头 | +| 分区框 | 4 条手绘虚线，标签压在上边线、带纸色底 | +| 强调 | 主角框加大 1.3–1.5 倍、描边 3–3.2px，不靠更亮的颜色 | +| 卡片 | 钢蓝描边、半透明纸色填充；毛玻璃为钢蓝 → 纸色渐变 | + +## 9 个色槽 + +| 槽 | 描边 = 框内文字 | 填充 | 对比度 | +|---|---|---|---| +| `C.user` | `#1f5582` 钢蓝 | `#e3ebf2` | 6.5 | +| `C.im` | `#106668` 墨青 | `#dde8e7` | 5.4 | +| `C.agent` | `#a04a1f` 砖橙 | `#f3e2cf` | 4.7 | +| `C.subagent` | `#7d4f0a` 焦糖 | `#f4eacd` | 5.8 | +| `C.llm` | `#4a3f8c` 靛紫 | `#e6e2ef` | 6.9 | +| `C.tools` | `#2f6b3c` 苔绿 | `#dfead9` | 5.1 | +| `C.memory` | `#6e554a` 栗棕 | `#ede2d5` | 5.4 | +| `C.external` | `#4f5359` 墨灰 | `#e9e7e3` | 6.3 | +| `C.error` | `#a52928` 砖红 | `#f0d8d2` | 5.2 | + +通用色：箭头 `#3a3530`，标题 `#2a2520`，副标题 `#5a544f`，注释 `#7a746e`（对底色 4.5:1，不要再调浅）。 + +## 本风格的额外规则 + +- 字体只用宋体 / 中宋 + Times New Roman。不用黑体 / 无衬线，也不用手写体、楷书、Caveat 之类：手绘形状 + 印刷字的反差就是这套风格。 +- 有文字的形状不用 `hachure`（斜线填充）；斜线只给没有文字的装饰块。 +- 这套色饱和度低、明度接近，9 色同屏也不打架；但红绿色盲下 Agent / Sub-Agent、User / LLM、IM / External 三对难分，所以每个框都要有文字。 diff --git a/stacks/youfang/skills/magic-move-deck/styles/handdrawn/diagram.html b/stacks/youfang/skills/magic-move-deck/styles/handdrawn/diagram.html new file mode 100644 index 0000000..10b08dc --- /dev/null +++ b/stacks/youfang/skills/magic-move-deck/styles/handdrawn/diagram.html @@ -0,0 +1,289 @@ + + + + + + + + + + + + + + +
+ +
+
+ + + diff --git a/stacks/youfang/skills/magic-move-deck/styles/handdrawn/preview.png b/stacks/youfang/skills/magic-move-deck/styles/handdrawn/preview.png new file mode 100644 index 0000000..e5bbe9a Binary files /dev/null and b/stacks/youfang/skills/magic-move-deck/styles/handdrawn/preview.png differ diff --git a/stacks/youfang/skills/magic-move-deck/styles/minimal/STYLE.md b/stacks/youfang/skills/magic-move-deck/styles/minimal/STYLE.md new file mode 100644 index 0000000..eda890f --- /dev/null +++ b/stacks/youfang/skills/magic-move-deck/styles/minimal/STYLE.md @@ -0,0 +1,42 @@ +# 简约 Minimal + +> 干净几何线条 + 圆角卡片 + 无衬线 UI 字体 + 近白底，像产品发布会或设计系统文档 + +![preview](preview.png) + +适合：产品介绍、对外发布、方案评审、客户演示。信息密度高时依然清爽。 + +## 视觉要素 + +| 要素 | 取值 | +|---|---| +| 背景 | 近白 `#fafafa` | +| 形状 | 精确几何：`roughness 0`、单笔描边（约为手绘风的 0.72 倍粗）、14px 圆角矩形、极浅色填充 | +| 字体 | 系统 UI 无衬线（system-ui / Segoe UI / Helvetica Neue），中文 PingFang SC / 微软雅黑 / Noto Sans SC | +| 箭头 | 石板灰 `#334155` 细线 + 实心三角箭头 | +| 分区框 | 18px 圆角虚线框，无填充 | +| 通道 / 气泡 | 胶囊形长条、圆角气泡 | +| 强调 | 主角框加大、描边加粗（`strokeWidth: 3` → 实际约 2.2px） | +| 卡片 | 浅灰描边白卡；毛玻璃为蓝 → 白渐变 | + +## 9 个色槽 + +| 槽 | 描边 = 框内文字 | 填充 | 对比度 | +|---|---|---|---| +| `C.user` | `#1d4ed8` 蓝 | `#eff6ff` | 6.2 | +| `C.im` | `#0f766e` 青 | `#effcf9` | 5.2 | +| `C.agent` | `#c2410c` 橙 | `#fff4ea` | 4.8 | +| `C.subagent` | `#a16207` 琥珀 | `#fefbe8` | 4.7 | +| `C.llm` | `#6d28d9` 紫 | `#f5f3ff` | 6.5 | +| `C.tools` | `#15803d` 绿 | `#effbf2` | 4.7 | +| `C.memory` | `#be185d` 玫红 | `#fdf2f8` | 5.5 | +| `C.external` | `#475569` 石板灰 | `#f1f5f9` | 6.9 | +| `C.error` | `#b91c1c` 红 | `#fef2f2` | 5.9 | + +通用色：箭头 `#334155`，标题 `#0f172a`，副标题 `#475569`，注释 `#64748b`。 + +## 本风格的额外规则 + +- `restyle()` 把所有 rough.js 调用（包括 `main()` 里直接写的 `rc.line(..., { roughness: 1.4 })`）强制为 `roughness 0`、单笔、`solid` 填充，所以从别的风格搬来的 `main()` 也是干净线条。 +- 圆角框是以 `Z` 结尾的 `rc.path`，`build_deck.py` 把它当闭合形状（节点）处理。 +- 无衬线拉丁字母比 Times 宽约 10–15%：框内英文要留余量，长副标题控制在一行内。 diff --git a/stacks/youfang/skills/magic-move-deck/styles/minimal/diagram.html b/stacks/youfang/skills/magic-move-deck/styles/minimal/diagram.html new file mode 100644 index 0000000..6a145fb --- /dev/null +++ b/stacks/youfang/skills/magic-move-deck/styles/minimal/diagram.html @@ -0,0 +1,257 @@ + + + + + + + + + + +
+ +
+
+ + + diff --git a/stacks/youfang/skills/magic-move-deck/styles/minimal/preview.png b/stacks/youfang/skills/magic-move-deck/styles/minimal/preview.png new file mode 100644 index 0000000..328c109 Binary files /dev/null and b/stacks/youfang/skills/magic-move-deck/styles/minimal/preview.png differ diff --git a/stacks/youfang/skills/magic-move-deck/styles/neon/STYLE.md b/stacks/youfang/skills/magic-move-deck/styles/neon/STYLE.md new file mode 100644 index 0000000..1ba818d --- /dev/null +++ b/stacks/youfang/skills/magic-move-deck/styles/neon/STYLE.md @@ -0,0 +1,42 @@ +# 暗色科技 Neon + +> 深海军蓝底 + 霓虹描边与柔光 + 切角面板 + 无衬线字体，像监控大屏或科技发布会 + +![preview](preview.png) + +适合：AI / 基础设施 / 安全 / 数据平台主题，暗场投影，录屏视频。 + +## 视觉要素 + +| 要素 | 取值 | +|---|---| +| 背景 | 深海军蓝 `#0b1020` | +| 形状 | `roughness 0`、单笔描边、12px 切角（HUD 面板）、同色相深色填充 | +| 发光 | 每个形状按自己的描边色发光：图里是 canvas `shadowBlur 9`，deck 里是 `C.glow` = `drop-shadow(0 0 5px …)` | +| 字体 | 系统 UI 无衬线，中文 PingFang SC / 微软雅黑 / Noto Sans SC | +| 箭头 | 冷灰蓝 `#9fb3c8` 细线 + 实心三角 | +| 分区框 | 细点虚线 + 四角加粗括角 | +| 卡片 | 青色描边深色半透明卡；毛玻璃为青 → 靛 → 深蓝渐变 | + +## 9 个色槽 + +| 槽 | 描边 = 框内文字 | 填充 | 对比度 | +|---|---|---|---| +| `C.user` | `#60a5fa` 电光蓝 | `#0f1d3a` | 6.6 | +| `C.im` | `#2dd4bf` 青 | `#0a2629` | 8.5 | +| `C.agent` | `#fb923c` 霓虹橙 | `#2a170c` | 7.6 | +| `C.subagent` | `#facc15` 黄 | `#262109` | 10.5 | +| `C.llm` | `#a78bfa` 紫 | `#1c1736` | 6.3 | +| `C.tools` | `#4ade80` 绿 | `#0c2617` | 9.2 | +| `C.memory` | `#f472b6` 品红 | `#2b1024` | 6.6 | +| `C.external` | `#94a3b8` 钢灰 | `#151c2b` | 6.6 | +| `C.error` | `#f87171` 红 | `#2d1114` | 6.3 | + +通用色：箭头 `#9fb3c8`，标题 `#e6edf7`，副标题 `#9aa8bd`，注释 `#8393ab`。 + +## 本风格的额外规则 + +- 暗底：`main()` 里不要写死白色或黑色文字 / 填充，一律用 `C.title`、`C.caption`、`C.`、`LABEL_BG`。 +- 发光会让很近的两个框糊在一起：框与框之间留 ≥ 24px。 +- 二维码等图片放在白色方块里（`fill: '#ffffff'`），否则手机扫不出。 +- 每个形状一层 `drop-shadow` 滤镜：deck 的形状数超过约 400 时，转场在低配机器上可能掉帧；录视频不受影响（逐帧截图）。 diff --git a/stacks/youfang/skills/magic-move-deck/styles/neon/diagram.html b/stacks/youfang/skills/magic-move-deck/styles/neon/diagram.html new file mode 100644 index 0000000..f2e27ae --- /dev/null +++ b/stacks/youfang/skills/magic-move-deck/styles/neon/diagram.html @@ -0,0 +1,273 @@ + + + + + + + + + + +
+ +
+
+ + + diff --git a/stacks/youfang/skills/magic-move-deck/styles/neon/preview.png b/stacks/youfang/skills/magic-move-deck/styles/neon/preview.png new file mode 100644 index 0000000..34b4bc0 Binary files /dev/null and b/stacks/youfang/skills/magic-move-deck/styles/neon/preview.png differ diff --git a/stacks/youfang/skills/magic-move-deck/templates/card-main.js b/stacks/youfang/skills/magic-move-deck/templates/card-main.js new file mode 100644 index 0000000..61bed5e --- /dev/null +++ b/stacks/youfang/skills/magic-move-deck/templates/card-main.js @@ -0,0 +1,43 @@ +function main() { + // Starter main() for the opening card (key 'cv') or closing card (key 'end'), 1920×1080. + // Use: copy the chosen styles/ + + + +
+ + +