SuperAPI AI 工具集

product-ui-prototyping

设计与创作

查看项目

更新于 10-16 05:00

技能介绍

用途:在编码前把产品界面行为做成可测试的视觉状态原型,用生成和编辑的屏幕图片呈现各状态、点击跳转逻辑,并配可导航的本地查看器。

主要能力:按平台(web、ios、android)与流程组织原型目录 ui-prototypes/<prototype-name>/;创建状态转换表并产出 ui-behavior-test-matrix.md;先用图像工具生成并锁定基线壳图,再用编辑方式派生交互状态(默认、聚焦、按下、禁用、加载、成功、错误、空等);维护 image-prompt-manifest.md 记录图片与提示词对应关系;生成 flow-maps/<platform>/<flow>.json 点击跳转映射,并搭建 viewer 本地查看器进行走查与冒烟测试。

使用方式:为每个原型建独立文件夹,图片按平台分目录存放,流程映射放在 flow-maps/<platform>/<flow>.json,提示词放在 prompts/<platform>/<flow>/<screen>-<state>.md;图像调用须逐个串行执行、使用绝对路径,并在提示词中明确支持的宽高比(如 1:1、16:9、9:16 等),同一平台与流程固定同一比例;本地查看器通过本地服务打开 http://localhost:4173/ui-prototypes/<prototype-name>/viewer/<platform>/<flow>/index.html。

适用场景:产品与设计在开发前评审界面状态变化与关键流程;任务涉及用户操作后界面应如何变化时使用。

限制:资料未提供收费、价格、性能或跨平台兼容性等细节;需依赖可用的图像生成/编辑与 Speak 工具,工具不可用时以文本替代播报;文件命名与目录约定需按要求执行,删除或重命名后须同步更新映射与清单。