SuperAPI AI 工具集

uiux

设计与创作

查看项目

更新于 10-15 20:34

技能介绍

用途:对项目中的所有界面进行 UI/UX 审计、优先级排序并逐个重设计,直至像素级精细。它依据实际渲染出的界面效果判断,而非仅看代码。

主要能力:读取设计原则文件与项目根的 DESIGN-BRIEF.md(如存在,其决策覆盖默认值);检查并启动开发服务器;用 Playwright 截图(支持桌面、移动 375px、需登录页面);按界面列出路由、文件、是否需登录并评级;按入口、转化、流量、质量等打分排序;对每个界面执行截图、分析、列问题、修复、复检的递归循环;统一处理跨界面共享组件;最后输出进度报告。

使用方式:先确认本地服务返回 200,否则后台启动并等待;验证 @playwright/test,缺失则安装(含 chromium);在项目根写入 _uiux_screenshot.mjs 截图脚本并调用,如:node _uiux_screenshot.mjs --url http://localhost:3000<ROUTE> --output /tmp/uiux-<name>-desktop.png;移动端加 --width 375 --height 812;需登录时用 _uiux_auth.mjs 结合环境变量生成存储状态,再用 --auth 传入。每张截图都需实际读取查看。最后删除临时脚本。

适用场景:Next.js(App/Pages Router)、React + Vite、SvelteKit、Nuxt、Astro 及纯 HTML/CSS 项目。

限制:每个界面最多迭代 3 次,未通过则标记后继续;需登录页面若无测试凭据则先标记为 auth-blocked;不得改变逻辑、路由、数据获取与无障碍语义;先改设计令牌再改组件;所有修复需在 375px 通过。缺失事实:具体价格、平台支持清单与效果保证暂未提供。