用途 tui-line-progress 用于生成并渲染像素级精确的 ASCII TUI（文本用户界面）Line Progress（行进度条）组件。它的目标是同时给出可直接查看的字符画结果与可继续用于设计系统的结构化规格。
主要能力 该技能会按要求始终输出布局属性（top/left/width/height、spacing、colors、typography、zIndex）；始终输出可供 Pencil MCP 使用的规格以及 batch_design 计划（每次调用不超过 25 个操作）。输出块包括：TUI_RENDER（仅等宽文本的 ASCII 画）、COMPONENT_SPEC（含 bbox、style、typography、state、hotkeys 的 JSON 规格）、PENCIL_SPEC（画布与组件列表）、PENCIL_BATCH_DESIGN（创建设计的批量调用）。
使用方式 工作流为七步：解析输入（读取输入模型 JSON，含 widthCols、grid、props、state、style、typography、layout、hotkeys）；计算布局（依据网格把列/行位置换算为像素坐标，cellWidthPx=8、cellHeightPx=16）；渲染 TUI_RENDER（用制表符字符构建等宽 ASCII 画，并遵守 widthCols）；构建 COMPONENT_SPEC（输出含 bbox、style、typography、state、hotkeys 的 JSON 规格）；构建 PENCIL_SPEC（输出给 Pencil MCP 的画布与组件列表）；规划 PENCIL_BATCH_DESIGN（输出 batch_design 调用，单次不超过 25 个操作）；校验（核对 COMPONENT_SPEC 中的 bbox 尺寸与 TUI_RENDER 网格一致，并确认批量操作仍在 25 个操作上限内）。
渲染规则（组件级） 遵循 tui-front-ui 的共享规则：不使用 TAB 字符；不超过 widthCols；提供表头行、主体区域，若可交互则提供最少热键提示；disabled=true 时必须隐藏交互提示；loading=true 时必须显示稳定的占位内容；error!=null 时必须在单行页脚打印，并按宽度截断。
示例 资料给出了三个必须包含全部输出块的示例。示例 1 为最小/默认形态，进度显示 10%，bbox 为 topPx 24、leftPx 24、widthPx 342、heightPx 96。示例 2 为自定义样式，进度 42%，paddingPx 20、gapPx 10，描边加粗为 2、颜色 #111111，bbox 高度为 104。示例 3 为禁用/错误/边界情形，进度 100%，state 中 disabled 为 true、error 为 "Something went wrong"，文本色 #6b7280，bbox 高度为 112，页脚输出 "Error: Something went wrong…"。每个示例都附带对应的 COMPONENT_SPEC、PENCIL_SPEC 与 PENCIL_BATCH_DESIGN。
输入模型 推荐输入模型包含 widthCols、grid、props、modelValue、state、style、typography、layout、hotkeys 等字段，其中 style 涉及 fillColor、textColor、strokeColor、strokeThickness、cornerRadius，typography 涉及 fontFamily、fontSize、fontWeight、lineHeight，layout 涉及 paddingPx、gapPx。
限制 资料未提供该技能的具体安装命令、运行环境要求、收费方式与价格、支持平台、性能指标及效果保证等信息，这些内容暂未提供。