SuperAPI AI 工具集

tui-notice-bar

设计与创作

查看项目

更新于 10-16 10:15

技能介绍

用途

tui-notice-bar 用于为 Notice Bar(通知条)组件生成像素级精确的 ASCII TUI(终端文本界面)表示。它服务于 u-notice-bar 组件,并以严格的输出块结构交付结果,适合需要在终端环境或以文本形式预览、规格化 UI 组件的场景。

主要能力

该技能围绕四个强制输出块展开:

  1. TUI_RENDER:纯等宽字体的文本渲染结果。
  2. COMPONENT_SPEC:组件规格,包含 id、name、type、bbox(topPx/leftPx/widthPx/heightPx)、zIndex、layout、style、typography、overflow、state、hotkeys 等字段。
  3. PENCIL_SPEC:铅笔规格,包含 canvas、grid、nodes、components 等。
  4. PENCIL_BATCH_DESIGN:批量设计计划,以 CALL 形式描述创建屏幕、背景矩形与文本等操作。

此外,技能要求始终输出布局属性,包括 top/left/width/height、spacing、colors、typography、zIndex;并输出 Pencil MCP 可用的规格与批量设计计划,每次调用不超过 25 个操作。

使用方式

技能定义了推荐的输入模型,字段包括:

  • widthCols:宽度列数(示例为 70)。
  • grid:网格单元格像素(示例 cellWidthPx 8、cellHeightPx 16)。
  • props、modelValue。
  • state:focused、disabled、loading、error。
  • style:fillColor、textColor、strokeColor、strokeThickness、cornerRadius。
  • typography:fontFamily、fontSize、fontWeight、lineHeight。
  • layout:paddingPx、gapPx。
  • hotkeys。

输出时按 OUTPUT: TUI_RENDER、OUTPUT: COMPONENT_SPEC、OUTPUT: PENCIL_SPEC、OUTPUT: PENCIL_BATCH_DESIGN 的顺序给出对应内容。PENCIL_BATCH_DESIGN 以 CALL 1、CALL 2 的形式书写,使用 root=G()、screen=I(root,{...})、U(screen,{...})、cmpBg=I(...)、cmpText=I(...) 等代码形式创建屏幕与组件节点。

适用场景

  • 需要以纯文本方式呈现 Notice Bar 组件布局与样式规格。
  • 需要将组件输出为 COMPONENT_SPEC、PENCIL_SPEC 与 PENCIL_BATCH_DESIGN,供下游设计或渲染流程使用。
  • 需要为组件聚合提供汇总行(Component Summary Row),包含 id、name、top、left、width、height、z、keyProps、state、hotkeys 等字段。

限制

  • 渲染规则要求:不使用 TAB 字符;不超出 widthCols;提供标题行、正文区域与必要的热键提示。
  • disabled=true 时必须抑制交互提示。
  • loading=true 时必须显示稳定占位符。
  • error!=null 时必须在页脚单行输出(并按宽度截断)。
  • 该技能刻意不嵌入外部文档链接;如需规范参考,应使用团队组件文档或设计系统来源。
  • 关于收费、价格、平台支持范围等具体信息,资料中暂未提供。