CommunityImagemgithub.com

icebear-guo/hmi-ui-design

通过弹窗引导新手确认屏幕、行业设备及制作范围,制作可选布局色调的工业HMI预览,再展开页面;支持仅调用技能启动、局部编辑及MCGS原生复制,无需MCP或外部供体。

O que é hmi-ui-design?

hmi-ui-design is a Claude Code agent skill that 通过弹窗引导新手确认屏幕、行业设备及制作范围,制作可选布局色调的工业HMI预览,再展开页面;支持仅调用技能启动、局部编辑及MCGS原生复制,无需MCP或外部供体。.

Funciona com~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/icebear-guo/HMI-UI-Design-Skill/tree/HEAD/hmi-ui-design

Installed? Explore more Imagem skills: steipete/songsee, affaan-m/frontend-design, mattpocock/improve-codebase-architecture · View all 6 →

Perguntar na sua IA favorita

Abre um novo chat com esta habilidade de agente já pré-carregada.

Documentação

HMI UI 设计 · V2.11.0

按本次实际范围交付设计、HTML、通用素材和可选原生复制。新项目直接使用内置12类原生默认结构、窗口结构与序列化代码,不要求MCP完整路径、外部供体、来源快照、窗口模板或另一份工程skill。内置中性化默认结构是有限类型的构造基础,不宣称解析任意版本/未知控件。

只保留两条出口:通用组件素材;HTML中MCGS原生复制粘贴。删除旧的MCGS兼容素材选项、handoff规格包和离线写MCP交接流程,不再询问是否导出MCGS适配包。

无需求调用与全程引导

首轮屏幕问题提供四个常用组合:7英寸/800×480、10.1英寸/1024×600、12.1英寸/1024×768、15.6英寸/1920×1080,同时保留自填尺寸、分辨率或型号的入口。选择组合即同时记录英寸和像素,不重复询问;实际型号参数优先,不能仅凭英寸套预设。提问示例及宿主选项限制见弹窗与全程引导。

本技能被明确调用后,如果只有技能名、“开始”“你好”“我不会”等,没有具体项目需求,直接按弹窗与全程引导启动。首轮调用宿主实际提供的交互提问工具,在一组弹窗中收集三类信息:①触摸屏英寸及分辨率;②行业/设备用途;③先看运行总览的不同布局/色调,还是直接制作5页/6页。不能把普通文字提问当成已弹窗,也不要求用户另写提示词、MCP或变量表。工具不可用时如实说明能力缺口,不假装已有弹窗或擅自继续。

首轮答复后制作实际HTML。先看方案者默认得到同一运行总览内容的左侧导航、底部导航两种布局及四种色调,布局/色调可独立切换或混搭;实际可查看后,再弹窗询问采用哪种组合还是修改。风格确定后弹窗选择5页/6页/自定义,默认五页为运行总览、手动操作、参数设置、报警记录、IO,第六页加设备维护。直接整套者沿用首轮页数并制作,不再插入未要求的风格审批或重复询问页数。用户明确要求其他范围优先;不能擅自用趋势替换IO。

凡弹窗涉及“基础5页/6页”的选择,在用户可见的题干或说明中列明:运行总览、手动操作、参数设置、报警记录、IO监控;6页再加设备维护。首轮制作范围及风格确认后的页数选择均如此,不能只显示页数,或把页名仅放在内部文档/聊天补充中。允许用户增减、改名和自定义。

后续预览、局部修改、复制粘贴、原厂核对与交付仍给清楚操作步骤;关键选择优先弹窗,必要补问集中进行。已有资料和已答内容不重问,熟练用户、明确委托、局部任务及已有项目直接沿用上下文,不机械执行整套问卷。温度、加热方式、设备形式、页数与风格只有真实消息支持才能记为客户已提供/确认;推断、建议及模拟值单列,短答不能被扩写成整套已确认。

“零提示词”指无需附加项目提示词即可进入引导,不表示无需需求即可替用户猜设备、变量或业务。用户正在审查/更新技能或讨论引导本身时,处理该元任务,不把其强行转成新项目向导。

先引导项目,再选择模板

新项目按默认布局规则规划:顶部默认包含logo、公司名称/设备名称、运行状态、通讯状态、用户登录显示、时间;报警条位于状态栏下方,左导航布局的报警条仅占右侧业务区,不覆盖侧导航。先看方案默认比较左侧/底部导航与四种独立色调。主区按实际像素、英寸及任务调整可见内容:大屏适度增加有关设备反馈/趋势/统计/事件,小屏收纳次级内容并保留核心任务,不单纯放大整页控件。用户指定和自定义优先。

新设计或大幅改版,先读 需求引导、内容配方 与 项目流程,再决定是否启动模板/编辑器。即使用户同时要求原生复制,也先确定要做什么设备和内容。局部编辑、复制既有页面或纯结构测试沿用已知上下文,只补影响本次工作的缺项。

新项目默认顺序:起步三类弹窗 → 按行业设备制作实际HTML → 弹窗选布局/色调或修改 → 确定整套页数与页面内容 → 全套页面。直接整套是首轮可选分支;模板复用计划与必要工艺信息由助手整理,不能用长工程问卷拖住风格预览。行业可用设备用途推断并列为待核实,不要求客户懂专业分类;尚无行业设备时不先生成空泛主界面供选色。

设备与任务明确后,由助手提出页面内容和素材建议,说明哪些可复用、哪些需修改或新增。需要设备图时读取 设备图鉴,先整理关系与端口,再做独立母版及实例。通用设备以五个基础页或加设备维护的六页作为整套起点,用户可增减、自定义或仅做单页;模板不适用就扩充,不能删减业务来套模板。

内置12类是原生控件结构库,不是12种固定外观或固定页面。主题、布局、设备图形、图标、组件组合与业务内容独立设计,通用静态图形可由独立图片控件承载;未知动态控件/未实现属性明确列能力缺项,不伪装成已支持。

自主委托只覆盖用户实际授权的范围:可以代拟和选择,但仍要整理行业/设备依据、内容与复用计划。行业/设备均缺少且未授权设定示例项目时先补问;明确允许自选演示行业时可据此推进,注明假设。已有项目不重复问卷,不额外增加固定审批轮次。

用一份项目源制作并检查

MCGS项目的制作主路径为:复用模板资产 → 一份项目源 → 代表页验证 → 展开全套。复用匹配的原生控件结构、独立设备素材和主题,在同一源中修改业务、布局与变量;交付入口直接使用该源生成的可编辑、可复制HTML会话。先验证代表页的实际内容、编辑及原生生成,再在同一源展开其余页面,不另建一份“原生版”。验证不增加固定用户审批轮次。

新项目读同源构建与覆盖检查,使用build_project.py生成会话;已有模板/项目模型可沿用局部入口,以该模型为权威,不强制重建。已有设备素材可复用,不匹配的图形、布局和主题可扩充。模板容量或分辨率不同应在源层重排/扩充,不能转而先独立手写整套业务HTML,再依据截图/文案重建另一套控件。复制功能在MCGS项目预览阶段启用,不等全套完成后再让用户选择是否制作“可粘贴版”。

先从已约定内容独立登记参数、手动对象、动态字段、图标与实时/历史报警,再生成和映射控件。缺类型保留要求并写partial,错类型/错变量不能计为覆盖;检查只能证明声明过的内容,仍须核对清单有没有漏需求。需要自定义预览外观时,扩展读取同一最终模型的渲染器,不复制维护另一份文字、几何、变量及状态定义;不声称可自动转换任意HTML脚本。

预览、局部编辑和复制消费同一当前模型,因此不以两套独立页面的事后对比作为常规交付流程。保留对这一交付入口的字体、内容覆盖、真实浏览器和原生结构检查;原厂运行按实际证据记录。通用素材单独任务和用户明确仅要效果稿时按其范围制作,不强开MCGS复制。

预览使用可复用的瞬时释放、完整数值解析、范围/精度校验和共享变量。声明的网页条件/联动仅是本地模拟,不会生成PLC或MCGS脚本;原生结构、页面覆盖、业务行为和原厂验证分别记录。图标可用独立图片承载;动态读数不能因为未绑定而改成静态label。

文字、数值显示/输入按统一字体测量计算尺寸:构建、局部编辑和复制使用同一工具,不自行重写字宽估算。扩框保留中心和字号,检查新碰撞/越界;空间不足调整布局,不删除内容凑过。默认C余量、保留紧凑B;字体缺失不静默替换。数值测上下界、正负号、小数位及保守数字宽度;固定小数位回读两处原生字段。原厂样本范围与未验字体/DPI分别记录,不能将本轮标定外推为全部控件通过。

用实际客户消息记录确认/委托,不能由“客户没要求评审”推定delegated;流程1.1记录可用prepare_review_record.py生成文件哈希和依赖。模板只是制作起点,布局、主题、设备图形及组合继续自由扩充。

任务入口

任务读取
同源构建、内容覆盖、通用交互项目源与工具
文字尺寸、数值宽度、扩框与碰撞统一字体测量
七种分辨率、布局适配与更换工程规格分辨率适配
顶部状态栏、报警条、两种导航/四色与内容容量默认布局规则
完整项目与需求项目流程、参数引导
业务内容与逐页任务内容配方
布局/色调模板与缓存复用模板库;源在assets/template-library
局部编辑、12类控件及启动自助编辑
MCGS原生复制复制出口
完整窗口/多窗口窗口复制
公共组件、交互与设备图鉴组件先行、交互预览、设备图鉴
通用素材与增量制作交付不变量、增量生产、通用交付
字段研究与历史证据采样记录、能力证据;旧供体要求不作为本版启动前置

HTML阶段即可复制

代表页预览完成后即可点选、修改和复制,无需等流程3或正式切图输出。复制只即时渲染本次选中的图形/专属皮肤;文字、数值、按钮和动态控件保持原生。复制一个控件、当前页或1~6个完整窗口均使用当前实际模型,未应用的修改阻止复制。

完整设计可按参数、代表页、全套交互页面逐步确认;用户明确委托自主完成时按实际范围推进并记delegated,不伪记人工确认。该流程管理设计成果和正式通用素材包,不把预览即时复制挂到最终输出审批后。

绑定与真实行为

默认生成未绑定控件,用户粘贴后在MCGS设置变量。网页同时保留填写变量名的名称模式,输出名称和空缓存,等待MCGS校验/编译。HTML变量只用于设计/模拟,不冒充工程身份;不携带旧工程变量编号,不创造PLC地址。导航采用当前页面目标名和未解析标记,MCGS需要解析与核对实际目标。

当前原生路径限Windows、McgsPro3.5.1.6963及已实现字段,支持480×272、800×480、800×600、1024×600、1024×768、1366×768、1920×1080。使用实际像素宽高贯通项目源、预览、局部编辑、原生控件和完整窗口;不固定16:9,不将整页拉伸作为布局适配。共享素材可复用,尺寸相关素材按目标像素重渲染。分辨率、英寸、Windows缩放和预览倍率分开记录,小屏必要时重排或分页。范围外分辨率保留需求并报告待适配,不擅自改成支持尺寸。

上述尺寸已有有限原厂样例显示证据,不能扩写为全部12类控件/任意字体/实际业务/实体屏幕通过。内存结构、剪贴板回读、原厂显示/保存/组态/编译/运行及新机器检查分别记录。测试中更换工程分辨率会改写既有窗口尺寸和控件坐标,应先另存副本,再按对应屏幕规格复制;最后一份工程不能替代各分辨率原始状态的回读。中性未绑定结构、保护、名称绑定与导航按各自实际证据报告,不从本轮显示测试推定全部已验。

通用设计底线

背景、共享布局、文字、图片、图标、按钮、灯及动态值分层建模,有稳定源ID与归属。按钮保留同锚点s0/s1反馈,caption属于按钮;读数用数值显示、参数用数值输入、位命令用位状态按钮、导航用导航按钮。数值专属皮肤可写入本控件图片槽,共享卡片独立。

从同一组件源直接渲染,不从整页截图反切,不用整页背景掩盖缺型。公共模板和资产按内容/尺寸/样式校验复用,仅重做变更及其依赖;不得缩减组件库存来凑通过。源层、资产、原生对象数量可不同,但逐项归属必须可追溯。

先确定设备关系再制作独立设备母版,实例和端口保持映射;纯IO/参数任务不强制增加设备插画。默认品牌为“工控北极熊(抖音)”,用户指定优先。未知参数/信号标模拟或待核实。请求、设备反馈、报警和失联分开表达。

视觉效果交用户确认;默认只修有证据的越界、截断、空图、字段/身份不一致等问题。同根因集中修复,连续两次仍失败就保留证据并报告。源文件、已有确认、旧批次和失败记录保留;不靠反复全量重建或主观美化拖长任务。

Habilidades Relacionadas