IntermediárioDesign SystemAberto

Biblioteca de componentes UI com inventario e priorizacao

Levantamento completo de componentes necessarios, organizacao em categorias e roadmap de construcao priorizado.

componentesinventariobibliotecapriorizacaoUI kit

Objetivo do Prompt

Realizar um inventario de interface e definir quais componentes construir primeiro para o design system, maximizando o impacto com o menor esforco inicial.

Exemplo Real de Uso

A DataHub, SaaS de marketing de Florianopolis, decidiu criar seu design system do zero apos anos usando componentes ad hoc. O inventario inicial identificou 340 variacoes de botoes em 12 produtos. Precisam definir a biblioteca core e a ordem de construcao.

Prompt

Planeje a biblioteca de componentes para o design system de [NOME DA EMPRESA/PRODUTO], que possui [NUMERO] produtos/aplicacoes e [NUMERO] designers e desenvolvedores.

Stack de desenvolvimento: [REACT/VUE/ANGULAR] com [CSS FRAMEWORK/ABORDAGEM].
Ferramenta de design: [FIGMA/ADOBE XD].

**1) Inventario de Interface:**
- Auditoria dos produtos existentes:
  - Quantos botoes diferentes existem? (contabilize variacoes)
  - Quantos inputs, cards, modais, tabelas?
- Categorize por frequencia de uso (quantas telas usam cada componente)
- Identifique inconsistencias (mesmo componente, designs diferentes)
- Screenshot de cada variacao encontrada

**2) Taxonomia de Componentes:**
Organize em categorias:
- **Primitivos**: Button, Input, Select, Checkbox, Radio, Toggle, Badge, Avatar, Icon
- **Compostos**: Card, Modal, Drawer, Toast, Dropdown, Tabs, Accordion, Pagination
- **Padroes**: Form, Table, Navigation, Header, Footer, Sidebar, Empty State
- **Layout**: Grid, Stack, Container, Divider, Spacer

Para cada componente:
- Variantes necessarias (size, variant, state)
- Props/properties (texto, icone, disabled, loading)
- Slots/children (o que pode ser inserido dentro)
- Exemplo de uso real do produto

**3) Priorizacao:**
- Matriz de impacto x esforco para cada componente
- Tier 1 (semana 1-2): componentes usados em >80% das telas
- Tier 2 (semana 3-4): componentes usados em >50%
- Tier 3 (mes 2+): componentes especializados
- Dependencias entre componentes (Button antes de Modal)

**4) Padrao de Documentacao:**
Para cada componente na biblioteca:
- Anatomy (partes do componente nomeadas)
- Variantes visuais com quando usar cada uma
- Do's and Don'ts com exemplos visuais
- Specs de acessibilidade (keyboard, screen reader, ARIA)
- Codigo de exemplo

**5) Governanca:**
- Processo de contribuicao (como propor novo componente)
- Criterios de aceitacao (design review + code review + a11y check)
- Versionamento semantico
- Depreciacao de componentes antigos

Meta: entregar Tier 1 em [PRAZO] com [NUMERO] designers/devs dedicados.

Como usar este prompt

  1. 1Cole o prompt diretamente no ChatGPT, Claude, Gemini ou qualquer assistente de IA.
  2. 2Personalize os campos entre colchetes [assim] com suas informações específicas.
  3. 3Para melhores resultados, forneça contexto adicional sobre seu caso de uso.
  4. 4Combine múltiplos prompts em uma conversa para resultados mais completos.
  5. 5Salve os prompts que mais usa para acesso rápido no futuro.

Prompts relacionados

Ver todos

Explore outras categorias de prompts

Assine o AulasDeIA para desbloquear

Acesse 10.000+ prompts prontos para usar em qualquer profissão, além de todos os cursos da plataforma.

Assinar por R$ 49,90/mês

Cancele quando quiser. Sem multas.