Aparência
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
- Peça a tela e ela aparece interativa, para você clicar e ajustar.
- Compartilhe um link com o time de produto para validar.
- 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 salvarSkills:
design-mockup(onde você explora e aprova) edesign-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çõesSkill:
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çõesSkill:
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ê quer | Skill |
|---|---|
| Criar uma peça avulsa (botão, campo, card) | design-component |
| Trazer algo do seu Figma | design-from-figma |
| Revisar um componente no Storybook | design-preview-storybook |
| Ver o que já existe e o que falta | design-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.