SuperAPI AI 工具集

ui-design-preview

设计与创作

查看项目

更新于 10-15 21:48

技能介绍

用途:为已确认的 HTML 或交互原型建立可点击的本地预览与对照环境,检查多设备布局差异、浅深主题对比,或交付可复制运行的评审附件。页面制作与正式设计审查由其他技能负责,不重新生成已确认页面。

主要能力:顶部页面/主题选择与前后切页可一次切换全部设备;开启同步时单端快捷选择会传播到另一端;点击一端的内部导航、选项卡等已登记场景,另一端进入同一场景并按各自布局适配;可关闭同步做独立对照;刷新或晚加载按 URL 与当前选择恢复。

使用方式:确认页面 ID、设计、视口、主题、源文件与输出位置;将技能内 assets/device-preview 目录整体复制到目标输出目录,保持相对路径;在 review.js 维护页面目录与设备尺寸,默认 Phone 390×884、Pad 768×1024,Desktop 1280×1024 仅在用户要求且有对应页面时添加;在复制目录执行 python3 serve.py --port 8872 并打开回环地址;用 python3 verify_review.py 和 python3 verify_ui.py 验证。

适用场景:交互原型预览、响应式多设备对照、主题比较、本地评审附件交付。

限制:只对照已有可信 HTML 或交互原型,不负责凭空补设计、远程生成、上线发布或真实模型与包安装;输入只有截图时仅能做视觉评审,行为验收需可运行页面;无源文件或来源映射时报告缺失项;同步只覆盖已登记的页面、主题、弹窗与选项卡状态,不转发输入、密钥、保存、导入、网络请求和删除;仅运行可信本地原型,服务器监听 127.0.0.1;验证脚本需已具备 Playwright/Chrome,缺失时报告未验证而非静默安装。