用途:为 Modal(对话框)组件生成像素级 ASCII 文本界面(TUI)表示,并输出可被 Pencil MCP 使用的规格与批量设计计划。
主要能力:始终输出布局属性(top/left/width/height、spacing、colors、typography、zIndex);输出 Pencil MCP 就绪的 specs;输出 batch_design 计划,每次调用不超过 25 个操作。必须输出四个区块:TUI_RENDER、COMPONENT_SPEC、PENCIL_SPEC、PENCIL_BATCH_DESIGN。
输入模型(推荐)包含 widthCols、grid(cellWidthPx、cellHeightPx)、props、modelValue、state(focused、disabled、loading、error)、style(fillColor、textColor、strokeColor、strokeThickness、cornerRadius)、typography(fontFamily、fontSize、fontWeight、lineHeight)、layout(paddingPx、gapPx)、hotkeys。
组件属性:title、body、primaryAction、secondaryAction(可选)、variant(default 或 danger)、closeOnEsc(默认 true)、maskClosable(默认 false)。
渲染规则:遵循 tui-front-ui 共享规则;不使用 TAB 字符;不超过 widthCols;提供标题行、主体区,交互时提供最少热键提示;disabled=true 时抑制交互提示;loading=true 时显示稳定占位符;error!=null 时在页脚单行打印(超过宽度需截断)。
布局与交互:Modal 是浮层,zIndex 应高于页面内容(如 100);在屏幕框架内居中;<enter> 触发主操作(除非 disabled/loading);closeOnEsc=true 时 <esc> 关闭。
示例覆盖:最小/默认、自定义样式、禁用/错误/边缘情况,以及带两个操作的确认对话框。
限制:该技能刻意不嵌入外部文档链接;如需权威参考,应使用团队组件文档或设计系统来源。其余收费、价格、平台等事实暂未提供。