Vision Node AI 按钮控件生成器

文档来源

fixed 规则文档：/Users/lippsli/Desktop/AI控件文档/AI 按钮制作文字描述模板V2.docx

AI控件结构

每个 VN AI 按钮控件包含两个核心文件：

1. aiui.json - 控件元数据

json
{
info: {
name: 控件名_随机ID,
url: https://www.minimaxi.com/,
version: MiniMax-M2.7,
generator: MiniMax,
time: 2026-03-26
},
description: {
type: button,
remark: ,
editable: 中文描述（根据客户要求）,
fixed: 外观样式：例如制作一个3D效果的工业控制按钮，非激活文本是启动，激活文本是停止，非激活按钮背景是绿色，激活按钮背景是红色。尺寸要求：html和body的宽高与按钮控件的实际宽高一致（不是固定200x200），html和body的大小必须与按钮div大小一致或略大一点（不超过10px差距），禁止html/body远大于按钮导致出现大面积空白。滚动控制：无论浏览器如何放大或缩小，都不能出现滚动条，使用overflow: hidden来禁止滚动。定位要求：控件必须显示在页面的左上角，控件样式需要完整显示，不能被裁剪。布局要求：移除html和body的默认margin和padding，使用Flexbox布局确保内容从左上角开始排列，控件容器占满整个html/body空间，html和body为背景透明色，不要使用外部连接样式。控件居中显示：如果控件容器的尺寸小于html和body的尺寸，控件必须在容器中居中显示，使用Flexbox的justify-content: center实现水平居中，使用Flexbox的align-items: center实现垂直居中。边界控制：所有视觉变化均不得溢出视口，变换效果后的控件边界需在视口内，尺寸变化后的整体尺寸不得超出视口，视觉效果投影范围需在视口内，动态变化任何中间状态及最终状态均不得溢出。JS部分：1.变量初始化：cameraBtn获取页面中的按钮元素，ID初始化为null（数字类型），MPV初始化为空对象。2.空函数定义：fun空函数用于事件绑定占位。3.触摸事件绑定：为document.body添加touchstart/touchmove事件监听器，设置passive: false防止默认行为。4.父窗口消息监听：Digital类型接收ID（event.data.type等于Digital时，event.data.num转数字赋值给ID），Data类型接收MPV（event.data.type等于Data时，event.data.value赋值给MPV）。5.根据MPV更新按钮状态：遍历MPV.Input，判断SignalName第二个字符是否为d且数字ID匹配，如果满足则根据SignalValue设置按钮active状态。6.按下事件处理：调用e.preventDefault()阻止默认行为，添加active类，发送{id:JND+ID, value:true}到父窗口。7.抬起事件处理：检查data-info属性值，data-info为false时移除active类，data-info为true时根据MPV数据决定状态，发送{id:JND+ID, value:false}到父窗口。8.事件监听器绑定：mousedown/touchstart绑定按下处理，mouseup/touchend绑定抬起处理，dragstart阻止拖拽。9.通信协议：接收Digital类型获取ID，接收Data类型获取MPV，发送{id:JND_+ID, value:true/false}。10.按钮状态管理：手动控制模式（data-info为false）和数据驱动模式（data-info为true）。
}
}

info 字段说明：

⚠️ 重要：

1. 1. 如果使用其他大模型（如 GPT、Kimi 等），需将 url、version、generator 更新为实际使用的模型信息。
2. aiui.json 必须是纯 JSON 格式，不能用 JSON.stringify()，不能把对象写成字符串。
3. 生成后必须压缩为单行格式，使用 json.dump(data, f, ensure_ascii=False, separators=(,, :))，避免任何换行符导致解析问题。
4. html/body 大小必须与按钮 div 大小一致或略大一点，禁止 html/body 远大于按钮导致大面积空白（差距不超过 10px）。按钮的 html/body 尺寸应该根据实际按钮宽高设置，不是固定 200x200px。

❌ 错误示例（把 JSON 写成字符串，或有多余换行）：
json
{info:{\name\:\按钮\},description:{\type\:\button\}}

✅ 正确示例（纯 JSON 对象，单行格式）：
json
{info:{name:按钮,url:...},description:{type:button,editable:...}}

⚠️ 生成后必须用 json.dump(..., separators=(,, :)) 压缩为单行，不能有换行符！

description 字段说明：

2. index.html - 控件实现

包含 HTML 结构、CSS 样式和 JavaScript 逻辑的完整页面。

aiui.json fixed 规则内容（完整中文文档）

⚠️ 重要：fixed 规则必须使用以下完整版本，不要简化！

去掉body的背景色；采用flex布局；设置html、body的宽高与按钮控件的实际宽高一致（不是固定200x200），html和body的大小必须与按钮div大小一致或略大一点（不超过10px差距），禁止html/body远大于按钮导致出现大面积空白。设置自定义属性data-info为false;通过class值切换激活和非激活样式；用iframe引用并且可以与父级窗口通讯；父级数据优先于事件；如果是通过父级数据改变的按钮状态则不用再将数据反馈到父级页面；如果收到父级数据event.data.type等于Digital，event.data.num储存到ID中；定义MPV={Input:{}};如果收到父级数据event.data.type等于Data 那么MPV= event.data.value；用for (var posx in MPV.Input) 遍历json获取MPV.Input[posx].SignalName值和MPV.Input[posx].SignalValue的值， 截取MPV.Input[posx].SignalName中的数字并转成数字类型存到变量num中，并判断SignalName值的第二个字符是不是等于d如果等于d，并且num等于ID则通过获取SignalValue的值设置按钮的激活和非激活,并设置自定义属性data-info为true；鼠标按下时激活，如果data-info为false时鼠标抬起后非激活；如果data-info为true并且MPV中Input值不为{}时，ID设置成num变量,鼠标抬起时解析MPV数据:如果MPV.Input[MPV.SignalNameVSPos.Input[[dfb + num + ]]]存在并且MPV.Input[MPV.SignalNameVSPos.Input[[dfb + num + ]] ].SignalValue值为false时设置按钮为非激活样式；如果MPV.Input[MPV.SignalNameVSPos.Input[[dfb + num + ]]]值为true时设置按钮为激活样式；如果data-info为true并且MPV中Input值为{}时鼠标抬起后设置按钮为非激活样式。鼠标按下发送激活数据true到父级{id:JND+ID,value:true},鼠标抬起发送非激活数据false到父级发送数据{id:JND_+ID,value:false},向父级发送数据时不用判断任何条件。阻止默认事件；禁止所有元素选中文本；

生成步骤

1. 1. 分析需求：

1. 2. 生成 aiui.json：