Skip to content

Fluxo de Design ​

O fluxo tem 3 passos. Você pede a tela e ela aparece interativa; você compartilha para o time validar; e você oficializa. Tudo conversando, sem nada técnico.

Em resumo

  1. Peça a tela e ela aparece interativa, para você clicar e ajustar.
  2. Compartilhe um link com o time de produto para validar.
  3. Oficialize quando estiver aprovada.

Você não decora nada: digite /design no chat e a IA completa o nome do que você quer.

Passo 1: Peça a tela ​

Você descreve a tela e a IA planeja com os componentes que você já tem. Ela te mostra o que vai reaproveitar e o que precisa criar, e pede sua aprovação.

Os componentes novos ela cria e abre no Storybook para você revisar cada um, a vitrine viva do seu design system. Só depois que você aprova todos ela monta a tela.

Em seguida, abre um mockup interativo: você clica, testa, seleciona um componente, desenha por cima e vai ajustando conversando até ficar do jeito certo.

/bertrand-design:design-mockup uma tela de configurações com menu lateral,
campos de perfil e um botão salvar

Skills: design-mockup (onde você explora e aprova) e design-preview-storybook (para revisar os componentes novos no Storybook antes do mockup).

Passo 2: Compartilhe ​

Quando a tela está do jeito que você quer, você guarda essa versão e manda o time de produto validar. O link para eles abrirem é o do próprio Nimbalyst (Share), ponta a ponta.

/bertrand-design:design-share salva a prévia das configurações

Skill: design-share. Guarda a versão do seu lado, sem mexer no que é oficial.

Passo 3: Oficialize ​

Com a tela validada, a IA oficializa: completa os estados que faltam (vazio, carregando, erro), roda sozinha uma checagem de consistência, publica os componentes novos na vitrine do sistema e leva o fluxo para o Figma, a sua documentação oficial.

No fim, uma pessoa do time aprova.

/bertrand-design:design-release oficializa a tela de configurações

Skill: design-release. Ela não refaz nada, só finaliza e oficializa o que você aprovou.

E quando precisar ​

Fora do caminho principal, você também pode pedir a qualquer momento:

Você querSkill
Criar uma peça avulsa (botão, campo, card)design-component
Trazer algo do seu Figmadesign-from-figma
Revisar um componente no Storybookdesign-preview-storybook
Ver o que já existe e o que faltadesign-overview

Antes de começar

Faça o Como começar uma vez. Depois conheça o mockup ou veja tudo que dá para pedir.