SuperAPI AI 工具集

authoring-hi-fi

前端与建站

查看项目

更新于 10-15 20:07

技能介绍

用途:把上游线框图与设计系统转化为可运行、可渲染的高保真 UI 代码,作为工程师可继续开发的构建种子,并以人工视觉检查作为交付门槛。默认输出独立 HTML+Tailwind,构建栈为 React 时改用 React+shadcn。

主要能力:从线框图推导屏幕清单(含各状态与目标视口),把设计系统/DTCG 令牌映射到代码主题层并全部以令牌绑定;实现视觉语言与打磨;渲染真实内容与空、加载、错误、成功、部分等状态;通过生成→无头渲染→截图→视觉自审→改进的循环迭代;按 WCAG 2.2 AA 做数值化无障碍检查;修订时按增量编辑、重新渲染并更新版本与变更日志。

使用方式:需要模板工具提供章节结构、无头浏览器(agent-browser/Playwright)渲染截图、设计系统与 shadcn 作为令牌与组件来源,以及具备视觉能力的运行时。流程为:取模板结构、从线框图推导屏幕集、建立令牌到代码的映射、实现视觉与打磨、渲染真实内容与状态并跑循环、按验收清单自检、显式列出缺口、修订时只改增量。

适用场景:依据线框图与设计系统新写高保真设计代码;实现线框文档指定的关键屏幕及状态;令牌、屏幕、共享布局或组件变更时修订既有高保真稿;用研究过、已渲染、决策完整的屏幕填充高保真模板。

限制:不用于评审或评分已完成的高保真稿(用 reviewing-hi-fi);不负责产出屏幕结构、令牌系统或组件目录,也不重新决定屏幕与跳转;不写最终生产代码(测试、真实后端、路由属于构建阶段)。它是构建种子,刻意保持轻量,不宣称可上生产。必须渲染并查看结果,纯文本运行属降级,需明确说明,不得伪造截图。缺失的令牌或组件应作为缺口上报,不得内联自造;不得使用 lorem 占位;不得禁用 axe 规则。资料未提供具体安装命令、收费与平台信息。