Pular para o conteúdo

Por... design engineers

Tome as decisões antes do primeiro rascunho.

Uma interface polida começa com escolhas específicas. Defina o layout, linguagem visual e comportamento do estado para que seu construtor tenha algo concreto a seguir.

Veja o fluxo de trabalho.
Exemplo breve.3 decisões

Projeto

Um espaço de trabalho de análise calma.

  • Use uma barra lateral compacta e uma largura de conteúdo legível
  • Mantenha o tipo, o espaçamento e as escolhas de cor consistentes.
  • Desenho vazio, carregamento e erro estados juntos

Um ponto de partida para se adaptar ao seu projeto.

Comece com

Uma direção visual que é difícil de descrever

Vá embora.

Um resumo de design, CSS Tokens, e uma matriz estatal

Um caminho prático.

Três passos · Ferramentas grátis · Sem inscrições

  1. 01

    Transforme a direção em um breve projeto.

    Escolha o layout e detalhes visuais deliberadamente. Exportar uma UI prompt e... CSS que descrevem a interface que você realmente quer.

    Criador de prompts de interface
  2. 02

    Dê às decisões repetidas um valor compartilhado.

    Construir um conjunto de CSS Tokens para a direção do projeto. Revise-os contra o sistema de design existente antes de introduzir novos valores.

    Gerador de tokens de design
  3. 03

    Desenho além da tela povoada

    Especifique como cada parte da UI se comporta enquanto carrega, quando vazia, e quando um pedido falha. Inclua esses estados no relatório de implementação.

    Gerador de matrizes de estados da interface

Alguns detalhes.

Antes de começar.

Posso usar meu sistema de design existente?

Sim. Use seus componentes e fichas atuais como ponto de partida. As ferramentas produzem um resumo editável e CSS; eles não substituem ou instalam uma biblioteca de componentes.

Posso verificar o contraste e o tamanho do tipo também?

Sim. O diretório de ferramentas gratuitas inclui um verificador de contraste de cores, um playground de escala de tipografia, e um construtor de layout sensível.

- A UI? prompt Construtor criar uma imagem?

Não. Ele reúne um resumo de texto e CSS De suas escolhas. Copie a saída para o seu construtor ou compartilhe-a como orientação de implementação.

Mantenha o contexto do projeto próximo.

Usem as ferramentas grátis por conta própria, ou tragam seu resumo para Archly para preparar prompts para o seu construtor de IA.

Explore Archly