specsfy-specialist-interface-experience

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Experiência de interface

界面体验

Quando usar

适用场景

Acionar ao criar ou alterar tela, dashboard, lista, formulário, jornada ou CRUD usado por pessoas.
Acionar antes de UX, UI e implementação para entender o sistema existente e organizar a conversa sobre a interface.
Não usar para endpoint, job ou mudança interna sem superfície para pessoas.

当创建或修改供用户使用的页面、仪表盘、列表、表单、流程或CRUD时触发。
在UX、UI设计及开发前触发，以了解现有系统并梳理界面相关讨论。
不适用于无用户交互界面的接口、任务或内部变更。

Fluxo

流程

Carregar
```
$specsfy-setup
```
e ler
```
.specsfy/STACK.md
```
,
```
.specsfy/PACKAGES.md
```
, manifests, instruções locais e documentação atual. Carregar
```
$specsfy-specialist-design-system
```
e ler
```
DESIGNSYSTEM.MD
```
antes de propor qualquer tela. Se o arquivo não existir, criar a fonte a partir de
```
.specsfy/templates/DESIGNSYSTEM.MD
```
. Executar
```
node .agents/skills/specsfy-setup/scripts/inspect_interface.mjs --project <raiz>
```
para localizar rotas, componentes e tecnologias antes da leitura detalhada.
Examinar as telas, fluxos, rotas, componentes, conteúdo, permissões, estados e testes ligados à área afetada. Registrar o que a pessoa já consegue fazer, o que deve permanecer e o que a entrega muda.
Identificar framework, roteamento, primitives, estilos, formulários e runner de testes usados pelo projeto. Seguir essas fontes e não trocar tecnologia ou biblioteca sem confirmação da pessoa.
Aplicar o contrato central de perguntas somente para lacunas reais: perguntar uma lacuna por rodada sobre telas, fluxo de informação, formulário, formato de ação e composição. Quando a pessoa não informa direção visual, aplicar os defaults de
```
DESIGNSYSTEM.MD
```
e registrar a direção padrão. Só perguntar sobre composição quando o pedido contrariar uma regra existente. Oferecer opções textuais compatíveis com o sistema atual,
```
Escrever outra resposta
```
,
```
Gere outras opções
```
e
```
Avançar
```
.
Registrar na seção 10 da spec a stack observada, cada tela, o fluxo, os formulários, a composição, os estados e a acessibilidade. Um CRUD não pode ficar restrito a API, banco ou serviço. Para CRUD, mapear sempre lista com
```
PageHeader
```
e
```
DataGrid
```
com detalhe clicável por linha, detalhe com
```
PageHeader
```
e
```
DetailLists
```
, e criar ou editar com
```
PageHeader
```
e seções de formulário em duas colunas responsivas. Toda tela também deve mapear
```
Breadcrumb
```
com equipe, módulo e tela atual; em Laravel, reaproveitar o componente já usado pelo layout. O
```
PageHeader
```
é um único componente reutilizável entre essas telas. A listagem ocupa a largura disponível, mostra o
```
ID
```
em coluna própria e oferece editar e apagar na linha, além do link para o detalhe.
Criar na seção 14 a
```
Fase de interface
```
, com uma tarefa por tela e testes para navegação, formulário, validações, feedback e teclado.
Chamar
```
$specsfy-specialist-ux-design
```
para jornada e
```
$specsfy-specialist-ui-design
```
para composição. Em projetos React, carregar
```
$specsfy-specialist-react-ui-components
```
para selecionar, reaproveitar e adaptar componentes antes de escrever JSX ou TSX, além de
```
$specsfy-specialist-react
```
para a implementação da stack. Para outra tecnologia, carregar o especialista equivalente detectado pelo setup.

加载
```
$specsfy-setup
```
并读取
```
.specsfy/STACK.md
```
、
```
.specsfy/PACKAGES.md
```
、清单、本地说明及现有文档。在提出任何页面方案前，加载
```
$specsfy-specialist-design-system
```
并读取
```
DESIGNSYSTEM.MD
```
。若该文件不存在，从
```
.specsfy/templates/DESIGNSYSTEM.MD
```
创建模板。执行
```
node .agents/skills/specsfy-setup/scripts/inspect_interface.mjs --project <根目录>
```
以定位路由、组件及技术栈，再进行详细阅读。
检查受影响区域相关的页面、流程、路由、组件、内容、权限、状态及测试。记录用户当前可执行的操作、需保留的内容以及本次交付带来的变更。
识别项目所使用的框架、路由、基础组件、样式、表单及测试运行器。遵循现有技术栈，未经用户确认不得更换技术或库。
仅针对实际存在的信息缺口应用核心问题清单：每次仅询问一个关于页面、信息流、表单、操作格式及组件组合的问题。若用户未指定视觉方向，应用
```
DESIGNSYSTEM.MD
```
中的默认设置并记录该默认方向。仅当需求与现有规则冲突时才询问组件组合相关问题。提供与当前系统兼容的文本选项，包括“输入其他回答”、“生成更多选项”及“继续”。
在规格文档的第10节记录所观察到的技术栈、每个页面、流程、表单、组件组合、状态及可访问性。CRUD不能仅局限于API、数据库或服务。对于CRUD，需始终映射以下内容：包含
```
PageHeader
```
和
```
DataGrid
```
的列表（每行可点击查看详情）、包含
```
PageHeader
```
和
```
DetailLists
```
的详情页，以及包含
```
PageHeader
```
和响应式双列表单区域的创建/编辑页。所有页面还需映射包含团队、模块及当前页面的
```
Breadcrumb
```
；在Laravel中，复用布局中已使用的组件。
```
PageHeader
```
是这些页面间可复用的单一组件。列表需占满可用宽度，单独列显示
```
ID
```
，每行提供编辑和删除按钮，以及详情链接。
在第14节创建“界面阶段”，为每个页面创建任务，并包含导航、表单、验证、反馈及键盘操作相关测试。
调用
```
$specsfy-specialist-ux-design
```
处理流程，调用
```
$specsfy-specialist-ui-design
```
处理组件组合。在React项目中，加载
```
$specsfy-specialist-react-ui-components
```
以选择、复用及适配组件，再编写JSX或TSX，同时加载
```
$specsfy-specialist-react
```
进行技术栈开发。对于其他技术，加载由setup检测到的对应专家技能。

Resultado esperado

预期结果

Uma interface informativa, funcional e reconhecível para a tarefa, coerente com o sistema existente e com a personalidade do produto. O plano mostra telas, formulários, estados, regras de negócio, componentes e testes. A implementação preserva tudo fora do alcance registrado.

一个针对任务而言信息完善、功能可用且辨识度高的界面，与现有系统及产品风格保持一致。规划文档需包含页面、表单、状态、业务规则、组件及测试内容。开发过程需保留所有未在影响范围内的内容。

Padrões

规范

Mapear cada tela, ação, formulário, estado e retorno no plano.
Preservar a stack, os componentes e os padrões de navegação já observados.
Registrar teclado, foco, responsividade e mensagens junto da tela afetada.
Renderizar
```
Breadcrumb
```
em todas as telas, mantendo o nome da equipe ativa visível. Em Laravel, reutilizar
```
Breadcrumb
```
ou
```
Breadcrumbs
```
existente e sua tipagem de itens.
Aplicar
```
DESIGNSYSTEM.MD
```
como fonte macro e
```
INTERFACE.md
```
como registro local.
Usar
```
DataGrid
```
,
```
DetailLists
```
e
```
PageHeader
```
nas superfícies CRUD definidas; a linha abre o detalhe e controles internos permanecem independentes.
Reutilizar o mesmo
```
PageHeader
```
componentizado em todas as telas CRUD; manter
```
DataGrid
```
em largura total com
```
ID
```
, editar e apagar visíveis na linha.
Conferir bordas, espaçamentos, margens, padding e tipografia durante o desenvolvimento, mesmo sem pedido da pessoa, e registrar o resultado no item
```
VISUAL
```
da tarefa.
Organizar criar e editar em seções com coluna de contexto, painel em duas colunas nos breakpoints largos e uma coluna no mobile.
Mostrar erro de campo em vermelho, com mensagem abaixo do campo e foco útil.
Projetar a hierarquia pelos dados, linguagem e estados do produto, sem cair em uma composição visual genérica.

在规划中映射每个页面、操作、表单、状态及返回结果。
保留已观察到的技术栈、组件及导航规范。
记录键盘操作、焦点、响应式及消息提示，并关联至受影响的页面。
在所有页面中渲染
```
Breadcrumb
```
，保持活跃团队名称可见。在Laravel中，复用现有的
```
Breadcrumb
```
或
```
Breadcrumbs
```
组件及其项的类型定义。
将
```
DESIGNSYSTEM.MD
```
作为全局规范来源，
```
INTERFACE.md
```
作为本地记录。
在指定的CRUD界面中使用
```
DataGrid
```
、
```
DetailLists
```
及
```
PageHeader
```
；点击行可查看详情，内部控件保持独立。
在所有CRUD页面中复用同一个组件化的
```
PageHeader
```
；保持
```
DataGrid
```
占满宽度，
```
ID
```
、编辑及删除按钮在每行可见。
在开发过程中检查边框、间距、边距、内边距及排版，即使用户未提出要求，并将结果记录在任务的
```
VISUAL
```
项中。
将创建和编辑页面组织为带上下文列的区域，在宽断点下为双列面板，在移动端为单列。
字段错误以红色显示，消息位于字段下方，并设置有效的焦点。
根据产品的数据、语言及状态设计层级结构，避免使用通用的视觉组合。

Antipadrões

反模式

Propor uma tela sem ler as rotas e os componentes atuais.
Tratar CRUD como endpoint sem descrever a interação da pessoa.
Validar somente o estado feliz e ignorar vazio, erro ou permissão.

未读取当前路由和组件就提出页面方案。
将CRUD仅视为接口，而不描述用户交互。
仅验证正常状态，忽略空值、错误或权限场景。

Validação

验证

Confirmar que a pessoa recebeu pergunta sobre as telas em toda entrega que cria ou altera uma interface.
Conferir que a seção 10 registra a stack e o sistema atual antes da proposta.
Confirmar que
```
DESIGNSYSTEM.MD
```
foi lido ou criado e que a direção padrão ou exceção está registrada com alcance.

Executar

validate_spec.mjs

validate_tasks.mjs

validate_interface_tasks.mjs

conforme a etapa.

Verificar mobile e desktop, loading, vazio, erro, sucesso, permissão, teclado e foco antes de concluir a interface.

确认在所有创建或修改界面的交付中，用户都收到了关于页面的问题。
检查第10节是否在提出方案前记录了技术栈及现有系统。
确认已读取或创建
```
DESIGNSYSTEM.MD
```
，且已记录默认方向或例外情况及其影响范围。

根据阶段执行

validate_spec.mjs

、

validate_tasks.mjs

及

validate_interface_tasks.mjs

。

在完成界面前检查移动端和桌面端、加载状态、空状态、错误状态、成功状态、权限、键盘操作及焦点。