用途
tui-intro 用于生成并渲染像素精确的 ASCII TUI（文本用户界面）Intro 组件。它面向需要以文本形式呈现界面布局、并同步产出设计规格的场景，输出内容包含完整的输出块：TUI_RENDER、COMPONENT_SPEC、PENCIL_SPEC 与 PENCIL_BATCH_DESIGN。
主要能力
- 生成 ASCII 文本界面表示，使用制表符绘制字符，并遵守 widthCols 限制。
- 始终输出布局属性，包括 top/left/width/height、spacing、colors、typography、zIndex。
- 始终输出可供 Pencil MCP 使用的规格，以及 batch_design 计划（每次调用不超过 25 个操作）。
- 输出 COMPONENT_SPEC，包含 bbox、style、typography、state 与 hotkeys。
- 输出 PENCIL_SPEC，包含画布与组件列表。
- 输出 PENCIL_BATCH_DESIGN，以 batch_design 调用在 Pencil 中创建设计。
使用方式
工作流程如下：
- 解析输入——读取输入模型 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 个操作）以在 Pencil 中创建设计。
- 校验——验证 COMPONENT_SPEC 中的 bbox 尺寸与 TUI_RENDER 网格匹配；确认批量操作保持在 25 个操作限制内。
推荐的输入模型包含 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。
输出契约要求依次输出 TUI_RENDER、COMPONENT_SPEC、PENCIL_SPEC、PENCIL_BATCH_DESIGN 四个块。
渲染规则
遵循 tui-front-ui 的共享规则：不使用 TAB 字符；不超过 widthCols；提供标题行、主体区域，若可交互则提供最小 hotkeys；disabled=true 时必须抑制交互提示；loading=true 时必须显示稳定占位符；error!=null 时必须打印在单行页脚中（截断至宽度）。
适用场景
适用于需要以 ASCII 文本形式呈现 Intro 组件布局、并同步生成 Pencil 设计规格与批量设计操作的场景。资料中提供了最小/默认、样式化/自定义、禁用/错误/边界情况三个示例，均包含全部输出块。
限制
该技能有意不内嵌外部文档 URL，需使用仓库索引 full-stack-skills/tui-sources/components.json（按 skill=tui-intro 或 slug=intro 查找）。batch_design 每次调用最多 25 个操作。其他关于收费、价格、平台或效果的信息暂未提供。