SuperAPI AI 工具集

specsfy-specialist-interface-experience

设计与创作

查看项目

更新于 10-16 03:49

技能介绍

用途:在创建或修改界面(页面、仪表盘、列表、表单、旅程、CRUD)前,先理解现有系统并组织界面讨论;不用于无用户界面的接口、作业或内部变更。

主要流程与能力:先加载 $specsfy-setup,读取 .specsfy/STACK.md、.specsfy/PACKAGES.md、manifest、本地说明与现有文档;加载 $specsfy-specialist-design-system 并读取 DESIGNSYSTEM.MD(缺失时用 .specsfy/templates/DESIGNSYSTEM.MD 创建)。运行 node .agents/skills/specsfy-setup/scripts/inspect_interface.mjs --project <raiz> 定位路由、组件与技术;核对受影响区域的屏幕、流程、内容、权限、状态与测试,记录既有能力与需保留内容,并遵循项目已有框架、组件、表单与测试方案,未经确认不更换技术栈。

规划与产出:在规范第 10 节记录观察到的技术栈、各屏幕、流程、表单、构图、状态与可访问性;CRUD 需映射列表(PageHeader 与 DataGrid、行可点击进入详情)、详情(PageHeader 与 DetailLists)、创建/编辑(PageHeader 与两列响应式表单区)。所有屏幕需含面包屑。在第 14 节创建界面阶段,每个屏幕一项任务并附导航、表单、校验、反馈与键盘测试;按需调用 $specsfy-specialist-ux-design、$specsfy-specialist-ui-design,React 项目另加载 $specsfy-specialist-react-ui-components 与 $specsfy-specialist-react,其他技术加载对应专家。

规范与校验:错误信息红色显示于字段下方并聚焦;检查边框、间距、字体;组织创建/编辑的分区与响应式列;保留原有技术栈、组件与导航模式;记录键盘、焦点、响应式与提示。执行 validate_spec.mjs、validate_tasks.mjs、validate_interface_tasks.mjs,并在移动端与桌面端验证加载、空、错误、成功、权限、键盘与焦点状态。反模式包括未读路由与组件即提方案、把 CRUD 当作纯接口、只验证理想状态。可参考 references/standards.md 获取可访问性与界面检查来源。