Biblioteca de componentes UI com inventario e priorizacao
Levantamento completo de componentes necessarios, organizacao em categorias e roadmap de construcao priorizado.
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
- 1Cole o prompt diretamente no ChatGPT, Claude, Gemini ou qualquer assistente de IA.
- 2Personalize os campos entre colchetes [assim] com suas informações específicas.
- 3Para melhores resultados, forneça contexto adicional sobre seu caso de uso.
- 4Combine múltiplos prompts em uma conversa para resultados mais completos.
- 5Salve os prompts que mais usa para acesso rápido no futuro.
Prompts relacionados
Ver todosDesign tokens multi-plataforma com sincronizacao Figma-codigo
Arquitetura de design tokens que funciona no Figma, React, React Native e CSS, com pipeline de sincronizacao automatizado.
Documentacao de design system no Storybook com exemplos vivos
Estrutura de documentacao interativa no Storybook que serve como referencia unificada para designers e desenvolvedores.
Estrategia de versionamento e breaking changes para design system
Sistema de versionamento semantico, migration guides e comunicacao de breaking changes para um design system usado por multiplos times.
Estrategia de adocao de design system para organizacoes resistentes
Plano tatico para aumentar a adocao de um design system em uma organizacao onde times preferem solucoes custom.
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.
Cancele quando quiser. Sem multas.
