用途:为 Read 生成 ASCII 文本界面(TUI)表示,并同步产出可用于 Pencil MCP 的规格与批量设计计划,不内嵌外部文档链接,需通过仓库索引 full-stack-skills/tui-sources/components.json(按 skill=tui-read 或 slug=read 查找)获取来源文档。
主要能力:始终输出布局属性(top/left/width/height、间距、颜色、字体、zIndex);输出 Pencil MCP 可用的规格以及 batch_design 计划(每次调用不超过 25 个操作)。
工作流程:解析输入模型 JSON(widthCols、grid、props、state、style、typography、layout、hotkeys);按网格换算像素坐标(cellWidthPx=8、cellHeightPx=16);渲染 TUI_RENDER(使用制表符绘制字符、遵守 widthCols);生成 COMPONENT_SPEC(bbox、style、typography、state、hotkeys);生成 PENCIL_SPEC(画布与组件列表);规划 PENCIL_BATCH_DESIGN(每次调用最多 25 个操作);最后校验 COMPONENT_SPEC 的 bbox 与 TUI_RENDER 网格一致,并确认批量操作未超过 25 个上限。
渲染规则:遵循 tui-front-ui 的共享规则,不使用 TAB 字符,不超过 widthCols,提供表头行、主体区域和必要热键;disabled=true 时抑制交互提示;loading=true 时显示稳定占位;error!=null 时输出单行页脚(按宽度截断)。
输出契约:必须输出 TUI_RENDER、COMPONENT_SPEC、PENCIL_SPEC、PENCIL_BATCH_DESIGN 四个区块,示例如最小默认、自定义样式、禁用/错误边界三种情形,其中 PENCIL_BATCH_DESIGN 以 CALL 形式给出 root=G()、screen=I(root,{type:"frame",name:"Screen"})、U(screen,{width:390,height:844,x:0,y:0}) 等操作。
适用场景:需要按列宽生成 Read 组件文本界面、并转换为 Pencil 设计规格与批量操作计划的前端/设计工具链场景。
限制:资料未提供收费、价格、平台或具体使用步骤等信息;输入模型与输出格式以给定契约和仓库索引为准,示例中的尺寸、颜色等仅为演示值。