mindmap-ppt-builder

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Mindmap PPT Builder

Mindmap PPT 构建工具

Goal

目标

Turn a user-provided source document into a presentation-ready

project/source.js

for this repo. The source document may be pasted text in the conversation or a local text/Markdown file path supplied by the user. The output is a preorder mind-map: concise two-line nodes, optional node images, and local assets that match the current light PPT style.

Read

references/project-format.md

when you need exact project file conventions or visual constraints.

将用户提供的源文档转换为此仓库中可直接用于演示的

project/source.js

文件。源文档可以是对话中粘贴的文本，也可以是用户提供的本地文本/Markdown文件路径。输出结果为前序遍历的思维导图：简洁的两行节点、可选的节点图片，以及符合当前浅色PPT风格的本地资源。

当需要明确项目文件规范或视觉约束时，请阅读

references/project-format.md

。

Workspace Requirement

工作区要求

Use this skill inside the

agegr/mindmap-ppt

repository root.

If the current directory already contains
```
package.json
```
,
```
index.html
```
,
```
src/
```
, and
```
project/
```
, treat it as the repo root.
If the repo is not present, clone
```
https://github.com/agegr/mindmap-ppt
```
into the current working directory as a folder named
```
mindmap-ppt
```
, then enter that folder.
If a
```
mindmap-ppt
```
path already exists but is not this repo, stop and ask the user where to place the clone.
Keep the application repository outside the skill folder. Do not copy or clone
```
index.html
```
,
```
src/
```
, or
```
project/
```
into
```
.agents/skills/mindmap-ppt-builder/
```
.
Normal skill output should modify only
```
project/source.js
```
and local asset files under
```
project/
```
.
Do not delete existing project assets unless the user explicitly asks for cleanup.
Do not edit
```
src/
```
,
```
index.html
```
, or application behavior unless the user explicitly asks for implementation changes.

请在

agegr/mindmap-ppt

仓库根目录内使用此技能。

如果当前目录已包含
```
package.json
```
、
```
index.html
```
、
```
src/
```
和
```
project/
```
，则将其视为仓库根目录。
如果仓库不存在，请将
```
https://github.com/agegr/mindmap-ppt
```
克隆到当前工作目录，命名为
```
mindmap-ppt
```
文件夹，然后进入该文件夹。
如果
```
mindmap-ppt
```
路径已存在但并非此仓库，请停止操作并询问用户应将克隆放置在何处。
请将应用仓库放在技能文件夹之外。不要将
```
index.html
```
、
```
src/
```
或
```
project/
```
复制或克隆到
```
.agents/skills/mindmap-ppt-builder/
```
中。
常规技能输出应仅修改
```
project/source.js
```
和
```
project/
```
下的本地资源文件。
除非用户明确要求清理，否则请勿删除现有项目资源。
除非用户明确要求修改实现，否则请勿编辑
```
src/
```
、
```
index.html
```
或应用行为。

Workflow

工作流程

Get the user's source document:
- Use pasted text from the conversation when provided.
- If the user gives a local file path, read only that explicitly provided document file and use its contents.
- If neither pasted text nor a readable local file is available, ask the user for the document before generating
```
project/source.js
```
  .
Read the document and identify the presentation thesis.
- Follow the source language by default: Chinese input -> Chinese output; English input -> English output.
- For English output, still use an eyebrow/headline structure for two-line nodes when natural.
- Do not silently correct facts. If the source has obvious contradictions or questionable claims, preserve the claim carefully or mention the conflict to the user.
- For very long documents, preserve the original chapter structure first. If the material is too broad to reduce confidently, draft a high-level outline and ask the user to confirm priorities before finalizing.
Build a clear logic tree:
- root: document/source name or presentation topic
- major branches: usually 2-4 sections, but follow the source logic when another structure is clearer
- child nodes: use them for causes, consequences, evidence, examples, process steps, contrasts, or supplements
- depth: add levels only when nesting makes the author's logic easier to understand
Write each node as one unordered-list item plus an optional continuation line:

- 副标题
  主标题

Use the first line as a short category label and the second line as the main message. Keep each line under about 30 Chinese characters or 8 English words. Prefer two-line labels for all visible nodes; use a single-line node only when the label is already extremely short and clear.

Choose image nodes sparingly:
- Node images are optional.
- A mind-map necessarily omits a lot of source detail; use images to preserve or explain the omitted detail on high-information nodes.
- Pick 3-8 high-information nodes for a typical deck; short drafts may use 0-2 images.
- Prefer nodes that summarize a process, architecture, comparison, timeline, metric, or conceptual model.
Generate illustrations for chosen nodes with GPT Image 2 or the available image generation tool. Save them under
```
project/
```
or a subfolder of
```
project/
```
.
- Prefer PNG for generated raster illustrations, SVG for simple diagram placeholders, and JPG only for photo-like assets.
- If image generation is unavailable, either omit images or create simple SVG placeholder diagrams under
```
project/
```
  using the same restrained palette. Use 16:10 composition, no text inside images, and descriptive kebab-case filenames such as
```
project/demo-flow.svg
```
  .
Reference images in Markdown metadata lines:

  @image process-overview.png

Replace
```
project/source.js
```
with:

export const sourceMarkdown = `
- ...
`;

Escape backticks and

${...}

sequences before writing user-derived text inside the JavaScript template string.

Run
```
npm run check
```
.
Optional visual validation: run
```
npm run dev
```
and inspect
```
http://127.0.0.1:5173/
```
when browser inspection is available.

获取用户的源文档：
- 如果对话中提供了粘贴的文本，则使用该文本。
- 如果用户提供了本地文件路径，则仅读取该明确指定的文档文件并使用其内容。
- 如果既没有粘贴文本也没有可读的本地文件，请在生成
```
project/source.js
```
  前询问用户提供文档。
阅读文档并确定演示文稿的核心论点：
- 默认遵循源语言：中文输入→中文输出；英文输入→英文输出。
- 对于英文输出，在自然的情况下仍使用“副标题/主标题”的两行节点结构。
- 请勿擅自修正事实。如果源文档存在明显矛盾或可疑主张，请谨慎保留该主张或向用户提及冲突点。
- 对于篇幅极长的文档，首先保留原章节结构。如果内容过于宽泛而无法自信地精简，请草拟一份高层级大纲，并在定稿前请用户确认优先级。
构建清晰的逻辑树：
- 根节点：文档/源名称或演示主题
- 主要分支：通常为2-4个章节，但如果其他结构更清晰，则遵循源文档的逻辑
- 子节点：用于表示原因、结果、证据、示例、流程步骤、对比或补充内容
- 层级：仅当嵌套能更清晰地表达作者逻辑时才添加层级
将每个节点写为一个无序列表项加可选的续行：

- 副标题
  主标题

将第一行用作简短的类别标签，第二行用作核心信息。每行内容控制在约30个中文字符或8个英文单词以内。所有可见节点优先使用两行标签；仅当标签本身已极短且清晰时才使用单行节点。

谨慎选择需要添加图片的节点：
- 节点图片为可选内容。
- 思维导图必然会省略大量源文档细节；请在高信息量节点上使用图片来保留或解释这些被省略的细节。
- 对于典型演示文稿，选择3-8个高信息量节点；短草稿可使用0-2张图片。
- 优先选择总结流程、架构、对比、时间线、指标或概念模型的节点。
使用GPT Image 2或可用的图像生成工具为选中的节点生成插图。将图片保存到
```
project/
```
或
```
project/
```
的子文件夹中。
- 生成的栅格插图优先使用PNG格式，简单图表占位符优先使用SVG格式，仅在需要类照片资源时使用JPG格式。
- 如果无法使用图像生成工具，则要么省略图片，要么使用相同的简约调色板在
```
project/
```
  下创建简单的SVG占位图表。使用16:10的构图比例，图片内不包含文字，使用短横线分隔的描述性文件名，例如
```
project/demo-flow.svg
```
  。
在Markdown元数据行中引用图片：

  @image process-overview.png

将
```
project/source.js
```
替换为以下内容：

export const sourceMarkdown = `
- ...
`;

在JavaScript模板字符串中写入用户提供的文本前，请转义反引号和

${...}

序列。

运行
```
npm run check
```
。
可选的视觉验证：当可以进行浏览器检查时，运行
```
npm run dev
```
并查看
```
http://127.0.0.1:5173/
```
。

Mindmap Authoring Rules

思维导图创作规则

Do not force every deck into a strict
```
root -> level 1 -> level 2 -> level 3
```
taxonomy. That shape is only a useful default, not a rule.
Let the hierarchy express the author's logic structure. If cause A leads to result B, B can be a child node of A; if B further leads to result C, form an
```
A -> B -> C
```
subtree.
The only hard principle is clarity: a reader should understand why each child node belongs under its parent and what relationship is being expressed.
Follow the source order. This app reveals nodes in preorder: parent first, then all children. Do not move conclusions from later text into earlier parent labels.
Do not repeat the root topic in child nodes. If the root already states the problem or theme, children should advance the story.
Group nearby meanings under one parent. Keep backgrounds, criteria, risks, product/tool inventories, recommendations, and conclusions in their own coherent branches.
Main nodes carry judgments; child nodes carry evidence, reasons, examples, or supplements. If a node explains another node, make it a child, not a sibling.
Keep each parent to at most 5 children. If there are more, add grouping nodes.
Split tools/products only when the source analyzes them one by one. Merge them when the source merely lists options in passing.
Do not split sentence by sentence. One node should carry one complete small point.
Each node should correspond to about 10-80 Chinese characters of source material. Less than 10 is usually too fragmented; more than 80 usually needs splitting.
Node text may be slightly longer than a normal title, but one node should not contain multiple independent ideas.
Parent labels should summarize and navigate; child labels should reveal specifics. Avoid parent labels that spoil later details.
Put images on high-information nodes, such as framework, comparison, inventory, recommendation, or risk-model nodes. Avoid images on very small detail nodes.

不要强行将所有演示文稿纳入严格的
```
根节点→一级节点→二级节点→三级节点
```
分类体系。这种结构只是有用的默认方式，而非规则。
让层级结构表达作者的逻辑。如果原因A导致结果B，则B可以作为A的子节点；如果B进一步导致结果C，则形成
```
A→B→C
```
的子树。
唯一的硬性原则是清晰：读者应能理解每个子节点为何属于其父节点，以及两者之间的关系。
遵循源文档的顺序。此应用会以前序遍历的方式展示节点：先父节点，再所有子节点。请勿将后续文本中的结论移至前面的父节点标签中。
子节点中不要重复根节点的主题。如果根节点已经说明了问题或主题，子节点应推进内容的讲述。
将含义相近的内容归到同一个父节点下。将背景信息、标准、风险、产品/工具清单、建议和结论放在各自连贯的分支中。
主节点承载判断；子节点承载证据、理由、示例或补充内容。如果一个节点是对另一个节点的解释，则将其设为子节点，而非同级节点。
每个父节点最多包含5个子节点。如果超过5个，请添加分组节点。
仅当源文档逐一分析工具/产品时才拆分它们；如果源文档只是顺带列出选项，则将它们合并。
不要逐句拆分内容。一个节点应承载一个完整的小观点。
每个节点应对应源文档中约10-80个中文字符的内容。少于10个字符通常过于零散；超过80个字符通常需要拆分。
节点文本可以比普通标题稍长，但一个节点不应包含多个独立观点。
父节点标签应起到总结和导航作用；子节点标签应展示具体细节。避免父节点标签提前透露后续细节。
在高信息量节点上添加图片，例如框架、对比、清单、建议或风险模型节点。避免在非常细节的小节点上添加图片。

Markdown And Image Example

Markdown 与图片示例

Use

@image

as a metadata continuation line after the node's visible two-line label. The

@image

line is not displayed as node text.

export const sourceMarkdown = `
- 产品发布
  三分钟讲清楚新功能
  @image overview.png
    - 用户痛点
      当前流程成本很高
      @image image-asset-1/pain-points.jpg
    - 解决方案
      自动整理文稿和插图
    - 演示效果
      像 PPT 一样逐步展开
      @image diagrams/demo-flow.svg
`;

Image paths are relative to

project/

by default:

@image overview.png

./project/overview.png

@image image-asset-1/pain-points.jpg

./project/image-asset-1/pain-points.jpg

@image diagrams/demo-flow.svg

./project/diagrams/demo-flow.svg

在节点的可见两行标签之后，使用

@image

作为元数据续行。

@image

行不会作为节点文本显示。

export const sourceMarkdown = `
- 产品发布
  三分钟讲清楚新功能
  @image overview.png
    - 用户痛点
      当前流程成本很高
      @image image-asset-1/pain-points.jpg
    - 解决方案
      自动整理文稿和插图
    - 演示效果
      像 PPT 一样逐步展开
      @image diagrams/demo-flow.svg
`;

图片路径默认相对于

project/

：

@image overview.png

→

./project/overview.png

@image image-asset-1/pain-points.jpg

→

./project/image-asset-1/pain-points.jpg

@image diagrams/demo-flow.svg

→

./project/diagrams/demo-flow.svg

Image Prompt Pattern

图片提示词模板

Use this style prompt for GPT Image 2:

text

Create a clean presentation illustration for a light PPT mind-map node.
Subject: <node main idea>.
Include: <2-4 concrete visual elements from the source text>.
Style: restrained vector-like editorial illustration, warm off-white background, dark teal #183a4a, muted green #eef7f3, orange accent #d8894f, simple geometric shapes, thin shadows, small 8px-radius card-like forms, no photorealism, no text, no logos, no busy decorations.
Composition: centered, generous whitespace, readable at thumbnail size, aspect ratio 16:10.

If the source needs a real chart, diagram, or screenshot, create a simple diagrammatic illustration instead of inventing precise numbers. Do not put text in images; labels belong in nodes.

为GPT Image 2使用以下风格的提示词：

text

Create a clean presentation illustration for a light PPT mind-map node.
Subject: <node main idea>.
Include: <2-4 concrete visual elements from the source text>.
Style: restrained vector-like editorial illustration, warm off-white background, dark teal #183a4a, muted green #eef7f3, orange accent #d8894f, simple geometric shapes, thin shadows, small 8px-radius card-like forms, no photorealism, no text, no logos, no busy decorations.
Composition: centered, generous whitespace, readable at thumbnail size, aspect ratio 16:10.

如果源文档需要真实的图表、示意图或截图，请创建简单的示意性插图，而非编造精确数据。请勿在图片中添加文字；标签应放在节点中。

SVG Placeholder Pattern

SVG 占位图模板

When no image-generation tool is available but an illustration is still useful, a simple SVG placeholder is acceptable:

Size:
```
1280x800
```
.
Style: warm off-white background, dark teal
```
#183a4a
```
, muted green
```
#eef7f3
```
, orange accent
```
#d8894f
```
.
Content: abstract process blocks, arrows, cards, or timeline shapes based on the node idea.
No readable text, logos, dense decoration, or photorealism.

当无法使用图像生成工具但仍需要插图时，可使用简单的SVG占位图：

尺寸：
```
1280x800
```
。
风格：暖灰白色背景，深青色
```
#183a4a
```
，柔和绿色
```
#eef7f3
```
，橙色强调色
```
#d8894f
```
。
内容：基于节点主题的抽象流程块、箭头、卡片或时间线形状。
不包含可读文字、标志、密集装饰或写实风格元素。

Authoring Rules

创作规则

Preserve the user's argument. Do not flatten important causal relationships into generic slogans.
Keep the preorder reveal useful: each next node should add a clear idea.
Use
```
@image
```
only after the node's title line, before its children.
Use PNG, JPG/JPEG, or SVG assets.
Save image files under
```
project/
```
or a subfolder of
```
project/
```
.

Prefer short

@image

values relative to

project/

, e.g.

@image user-journey.png

@image diagrams/user-journey.png

, or

@image image-asset-1/a.jpg

保留用户的论证逻辑。请勿将重要的因果关系简化为通用口号。
确保前序遍历的展示效果有用：每个后续节点都应添加明确的观点。
仅在节点的标题行之后、子节点之前使用
```
@image
```
。
使用PNG、JPG/JPEG或SVG格式的资源。
将图片文件保存到
```
project/
```
或
```
project/
```
的子文件夹中。

优先使用相对于

project/

的短

@image

路径，例如

@image user-journey.png

、

@image diagrams/user-journey.png

或

@image image-asset-1/a.jpg

。

Validation Checklist

验证清单

```
project/source.js
```
exports
```
sourceMarkdown
```
.
Asset files exist for every
```
@image
```
.
```
npm run check
```
passes.

```
project/source.js
```
导出
```
sourceMarkdown
```
。
每个
```
@image
```
对应的资源文件均存在。
```
npm run check
```
执行通过。