MindNode UI 是一个用于构建思维导图界面的技能，其设计灵感来自 IdeasOnCanvas GmbH 开发的 Apple 原生视觉思考应用 MindNode。该技能将 MindNode 的设计系统、交互模型和布局算法进行编码，并适配到 React + ReactFlow + Zustand + Tailwind CSS 3 技术栈中。
用途
该技能面向需要实现思维导图界面的开发场景，提供一套可参考的设计与实现规范。它适用于希望复刻或借鉴 MindNode 交互体验的项目，尤其是基于 React 生态构建可视化思考工具的前端开发。
主要能力
设计原则
- 视觉优先思考：提供空间画布用于非线性想法，大纲视图用于线性结构。
- Apple 原生美学：柔和圆角元素、充裕留白、紫色强调色（#6C63FF）。
- 对 ADHD 友好：专注模式可隔离单个子树，快速录入可快速捕捉想法。
- 键盘驱动：Tab 创建子节点、Return 创建同级节点、方向键导航，无需鼠标。
节点形状（8 种）
- 圆角（默认）：通用想法
- 矩形：结构化内容，事实、定义
- 胶囊：标签、标记
- 云朵：有机形状，头脑风暴
- 线条：极简，副标题
- 嵌入：内嵌，引用
- 六边形：流程，决策点
- 八边形：警告，关键事项
键盘快捷键
- 新建子节点：Tab（Mac）
- 新建同级节点：Return
- 新建主分支：Shift+Return
- 编辑标题：Cmd+Return，进入 contentEditable 模式
- 导航：方向键在节点间移动
- 折叠/展开：Option+. 切换子树可见性
- 交叉链接：Cmd+L 连接非相邻节点
- 思维导图视图：Cmd+1 切换到画布视图
- 大纲视图：Cmd+2 切换到列表视图
- 删除：Backspace 移除节点，子节点重新挂载
主题类型
- 动态：自动适配明暗模式，如 Elegant、Fresh
- 静态：固定颜色，如 Rainbow、Goth Pastel、Twilight
- 个人：从当前文档提取，用户自定义
布局方向
- 水平：根节点在左，树向右展开（默认）
- 垂直：根节点在上，树向下展开
- 紧凑：根节点居中，向外密集展开
- 径向：根节点居中，向所有方向极坐标展开
参考文件（按需加载）
- 设计系统：色彩、排版、视觉语言、Apple 美学 → references/design-system.md
- 节点类型：节点形状、SVG 路径、contentEditable、Node Well → references/node-types.md
- 主题：动态/静态主题、逐级颜色、主题库 → references/themes.md
- 布局算法：树布局、D3 径向、自动排列、灵活定位 → references/layout-algorithms.md
- 交互模式：键盘快捷键、专注模式、拖拽、大纲同步 → references/interaction-patterns.md
- 画布与视图：双视图（思维导图+大纲）、画布、连接、导出 → references/canvas-and-views.md
- ReactFlow 集成：自定义节点/边、Zustand store、性能 → references/reactflow-integration.md
- 项目移植：移植到 Project Pilot → references/project-pilot-porting.md
使用方式
该技能以参考文件形式组织，根据当前需要处理的 MindNode UI 方面按需加载对应文件。例如，处理色彩与排版时加载设计系统文件，处理节点形状时加载节点类型文件。技能假设技术栈为 React 18 + TypeScript、@xyflow/react v12、Zustand、Tailwind CSS 3（使用 CSS 自定义属性 var(--color-*)）、D3（d3-hierarchy、d3-shape）。注意：ReactFlow 节点上不使用 Framer Motion，因为 RF 管理变换，FM 会覆盖它们。
关键实现模式
- Node Well（主要创建交互）：悬停/选中时出现的加号按钮，用于创建子节点，是 MindNode 的标志性交互，不是工具栏或菜单，而是每个节点上的上下文可供性。
- D3 径向树布局：使用 d3.tree() 计算树位置，然后转换为极坐标：x = radius × cos(angle − π/2)，y = radius × sin(angle − π/2)。
- 逐级分层主题：每个主题按深度级别定义颜色：根节点（突出）、第 1 级（分支颜色，从调色板循环）、第 2 级及以下（逐渐柔和）。分支子节点继承父节点的颜色家族。
- 双视图同步：思维导图和大纲视图共享单一数据模型，任一视图的更改立即传播，选中状态双向同步。
适用场景
适用于基于 React 技术栈构建思维导图、可视化思考工具、大纲编辑器等界面的开发场景，尤其适合需要借鉴 MindNode 设计语言与交互模式的团队。
限制
该技能假设使用特定的技术栈（React 18、TypeScript、@xyflow/react v12、Zustand、Tailwind CSS 3、D3），不适用于其他框架或版本。技能内容以参考文件形式提供，具体实现细节需查阅对应文件。关于收费、价格、平台支持范围等信息，资料中暂未提供。