specsfy-specialist-interface-experience

界面体验

适用场景

• 创建或修改供人使用的页面、仪表板、列表、表单、操作流程或 CRUD 时调用。
• 在 UX、UI 和实现之前调用，以了解现有系统并梳理界面相关讨论。
• 不适用于没有面向用户界面的 endpoint、job 或内部变更。

流程

1. 加载 $specsfy-setup 并阅读 .specsfy/STACK.md、 .specsfy/PACKAGES.md、manifests、本地说明和当前文档。 加载 $specsfy-specialist-design-system，并在提出任何页面方案前阅读 DESIGNSYSTEM.MD。如果文件不存在，则根据 .specsfy/templates/DESIGNSYSTEM.MD 创建源文件。 执行 node .agents/skills/specsfy-setup/scripts/inspect_interface.mjs --project <raiz>，在详细阅读前定位路由、组件和技术。
2. 检查与受影响区域相关的页面、流程、路由、组件、内容、权限、状态和测试。 记录用户目前可以执行的操作、必须保留的内容，以及本次交付会带来的变化。
3. 确认项目使用的框架、路由、基础组件、样式、表单和测试运行器。 遵循这些既有方案，未经用户确认，不要更换技术或库。
4. 仅针对实际存在的信息缺口应用核心提问约定： 每轮只询问一个关于页面、信息流、表单、操作形式或布局的问题。 用户未提供视觉方向时，采用 DESIGNSYSTEM.MD 中的默认设置并记录默认方向。 只有当请求与现有规则冲突时，才询问布局。提供与当前系统兼容的文本选项、 Escrever outra resposta、Gere outras opções 和 Avançar。
5. 在规范的第 10 节记录观察到的技术栈、每个页面、流程、表单、布局、状态和 无障碍要求。CRUD 不能仅限于 API、数据库或服务。对于 CRUD，始终映射： 包含 PageHeader 和 DataGrid 的列表页面，且每行详情均可点击； 包含 PageHeader 和 DetailLists 的详情页面；以及包含 PageHeader 和 两列响应式表单分区的创建或编辑页面。每个页面还必须映射包含团队、模块和 当前页面的 Breadcrumb；在 Laravel 中，复用布局已经使用的组件。 PageHeader 是这些页面共用的单一可复用组件。列表占据可用宽度，单独显示 ID 列，并在每行提供编辑和删除操作，以及指向详情的链接。
6. 在第 14 节创建 Fase de interface，为每个页面各设一项任务，并添加有关 导航、表单、验证、反馈和键盘操作的测试。
7. 调用 $specsfy-specialist-ux-design 设计操作流程，并调用 $specsfy-specialist-ui-design 设计布局。在 React 项目中，编写 JSX 或 TSX 之前，加载 $specsfy-specialist-react-ui-components 以选择、复用和调整组件， 并加载 $specsfy-specialist-react 以实现技术栈。对于其他技术，加载 setup 检测到的对应专家。

预期结果

界面应提供信息、可正常使用且易于识别，适合相应任务，并与现有系统及产品个性 一致。计划应列出页面、表单、状态、业务规则、组件和测试。实现应保留记录范围 之外的一切。

标准

• 在计划中映射每个页面、操作、表单、状态和返回结果。
• 保留已观察到的技术栈、组件和导航模式。
• 在相关页面中记录键盘操作、焦点、响应式布局和提示信息。
• 在所有页面中渲染 Breadcrumb，并保持当前团队名称可见。在 Laravel 中，重用现有的 Breadcrumb 或 Breadcrumbs 及其条目类型。
• 将 DESIGNSYSTEM.MD 作为宏观依据，将 INTERFACE.md 作为本地记录。
• 在定义的 CRUD 界面中使用 DataGrid、DetailLists 和 PageHeader；点击行可打开详情，内部控件保持独立。
• 在所有 CRUD 页面中重用同一个组件化的 PageHeader；让 DataGrid 保持全宽，并确保行中可见 ID、编辑和删除操作。
• 开发过程中检查边框、间距、外边距、内边距和排版，即使对方没有要求也要检查，并将结果记录在任务的 VISUAL 项中。
• 将创建和编辑组织为带上下文栏的分区；宽屏断点下使用两列面板，移动端使用单列。
• 字段错误以红色显示，提示信息置于字段下方，并提供便于操作的焦点。
• 根据产品的数据、语言和状态设计信息层级，避免采用通用的视觉组合。

反模式

• 未阅读现有路由和组件就提出页面方案。
• 将 CRUD 视为端点，而不描述用户交互。
• 只验证正常状态，忽略空状态、错误或权限。

验证

• 确认在每次创建或修改界面的交付中，都询问了用户有关页面的问题。
• 检查第 10 节是否在提出方案前记录了当前技术栈和系统。
• 确认已阅读或创建 DESIGNSYSTEM.MD，并记录默认设计方向或例外及其适用范围。
• 根据阶段运行 validate_spec.mjs、validate_tasks.mjs 和 validate_interface_tasks.mjs。
• 完成界面前，检查移动端和桌面端，以及加载中、空状态、错误、成功、权限、键盘操作和焦点。

相关技能

• $specsfy-specialist-ux-design：用于用户旅程、任务和内容。
• $specsfy-specialist-ui-design：用于视觉组合和状态。
• $specsfy-specialist-react-ui-components：用于为 React 页面选择并重用组件。
• $specsfy-specialist-design-system：用于宏观规则、默认设置和 CRUD 场景。

请阅读 references/standards.md，了解无障碍和界面检查的资料来源。