SuperAPI AI 工具集

tui-page-composer

设计与创作

查看项目

更新于 10-15 21:48

技能介绍

用途:将产品设计描述转换为整页文本 UI(TUI),同时产出机器可读、可绘制的结构。它假设使用者遵循 tui-front-ui 的共享契约与网格到像素的映射。

主要能力:输出整页 TUI_RENDER;输出逐组件汇总表 PAGE_SUMMARY;输出合并后的 PENCIL_SPEC 与 PENCIL_BATCH_DESIGN 计划(每次调用 ≤25 个操作)。

输入:提供页面请求与组件列表,包含 page(name、widthCols、canvas 宽高像素、grid 单元格像素、paddingPx、gapPx、backgroundColor)与 components(id、type、preferredSizePx、zIndex)。

输出契约:依次给出 TUI_RENDER、PAGE_SUMMARY、PENCIL_SPEC、PENCIL_BATCH_DESIGN 四段。

组合规则:以单一页面 frame 为根,默认在页面内边距中垂直堆叠;按 topPx 升序放置,相同则按 zIndex 排序;绘制顺序为背景块、内容块、覆盖层(modal/toast)。几何计算:leftPx=paddingPx,topPx=paddingPx+前序高度与 gap 之和,宽度默认 canvas 宽减两侧 padding。ASCII 渲染使用一个外层页面框,每个组件为带框块,块间空一行,整页不超过 widthCols。交互上合并并去重热键,页面级默认 <tab> next、<esc> back,禁用组件不显示热键。

Pencil MCP 执行流程:get_editor_state(include_schema=false)、open_document("new") 或已有 .pen 路径、分批应用 PENCIL_BATCH_DESIGN(≤25 ops/call)、snapshot_layout(filePath, maxDepth=2, problemsOnly=true)、对页面 frame 节点执行 get_screenshot(filePath, nodeId);若返回布局问题,则生成后续 batch_design 补丁块。

适用场景:需要把多组件设计描述快速转为整页 TUI 并同步生成可绘制设计计划的流程。

限制:资料未提供收费、价格、平台支持范围与效果保证等信息;使用前需遵循 tui-front-ui 的共享契约与网格映射。