SuperAPI AI 工具集

specsfy-specialist-ui-design

设计与创作

查看项目

更新于 10-16 08:07

技能介绍

用途:定义或评审界面的层级、网格、外壳、密度、tokens、视觉状态、表格、表单与导航。适用于界面功能可用但组合方式妨碍扫读、比较、优先级判断或错误恢复的情况。若需判断流程是否满足用户需求,应改用 specsfy-specialist-ux-design。React 实现可参考 specsfy-specialist-react-ui-components 获取可复制的 TSX 参考。

主要能力与流程:先加载 specsfy-specialist-design-system 并阅读 DESIGNSYSTEM.MD;确认信息流程已定义。新界面需记录主任务、页面、字段、校验和打开方式。读取现有技术栈、tokens、组件、断点与截图后再提出新语言,并保留框架、primitive、样式与本地约定;只有确认变更或栈无可用基础时才建议新库。识别用户、主任务、频率、设备、密度与错误后果,据此排列内容与操作。CRUD 采用列表加 PageHeader 与 DataGrid、详情加 DetailLists、创建编辑采用两栏响应式表单。布局前映射数据、单位、权限及名义、加载、空、部分、错误、离线、权限拒绝等状态。用分组、对比、比例与空间定义层级,并映射到语义 tokens。

关键约定:仪表盘回答具体问题,不是装饰卡片集合;总览先于细节,操作贴近对象;密集比较用表格、阅读用列表、独立实体用卡片;导航列表与详情时保留位置、筛选与上下文;数据需展示单位、期间、来源、更新时间与空状态;破坏性操作应区分、可解释且尽量可逆。DataGrid 全宽、始终显示 ID 列、整行链接到详情,行内编辑与删除按钮独立;Breadcrumb 在所有页面显示团队、模块与当前页。字段标签在输入框上方,错误在下方红色显示。

验证与限制:需在名义、加载、空、部分、错误、离线、权限拒绝等状态比较同一组合,检查短长内容、极端数字、翻译扩展、日期/货币/时区偏好、最小视口、200% 缩放、重排、对比度、键盘、焦点与减少动效。未在关键状态与视口下截图或等效检查,不得宣称界面一致或响应式。具体安装命令、价格与平台信息暂未提供。