Índice de Links Externos para Sistemas de Design
Navegação por links externos de sistemas de design públicos de empresas/ comunidades, para consulta de design tokens, componentes e padrões de DS prontos.
⚠️ Este skill é camada de índice de recursos: apenas coleta links e uma breve descrição, sem aprofundar metodologia. A arquitetura de tokens, nomenclatura em camadas e metodologia de implementação cross-platform estão no skill local
design-system— cada skill tem sua função, sem duplicação.
Como usar (divulgação progressiva)
Este SKILL.md é a camada de índice de despacho: 5 categorias com 2-3 itens clássicos cada, acompanhados de "o que é / quando ler". Para listas mais longas, siga as instruções para ler o arquivo references/<category>.md (um nível de profundidade, sem aninhamento adicional).
Primeiro identifique qual categoria atende sua necessidade, depois leia a referência correspondente, evitando carregar tudo de uma vez.
Fontes de dados: klaufel/awesome-design-systems + jbranchaud/awesome-react-design-systems.
Exemplo de ativação: Consulte os sistemas de design das principais empresas / Encontre uma biblioteca de componentes React para seleção / Ferramentas e padrões de design tokens / Escolha uma ferramenta de pattern library.
Consulta rápida por categoria (localize antes de aprofundar)
Se não tiver certeza, consulte esta tabela primeiro e depois vá ao arquivo correspondente, evitando ler todos os 5 de uma vez:
| Sua necessidade | Leia |
|---|---|
| Referência de um DS maduro de grande empresa | references/major-company-systems.md |
| Escolher cadeia de ferramentas de design tokens / alinhar com padrão W3C | references/design-tokens.md |
| Montar ambiente de desenvolvimento de componentes, site de documentação, pattern library | references/pattern-libraries.md |
| Escolher biblioteca de componentes adotável para projeto React Web | references/react-ds-libraries.md |
| Escolher kit de UI para projeto React Native | references/react-native-ds-libraries.md |
Aviso de limite: Para "como projetar arquitetura de tokens" não está neste índice, vá ao skill local
design-system; para "como escrever componentes em React" vá areact-best-practices; este índice responde apenas "quais DS/bibliotecas prontas posso consultar ou adotar".
Exemplo de roteiro (como funciona a divulgação progressiva)
Usuário: "Ajude-me a escolher uma biblioteca de componentes React para um painel administrativo empresarial"
- Localize a categoria → é da classe "Bibliotecas de Sistemas de Design React", não tokens / pattern library.
- Primeiro veja os selecionados abaixo (Ant Design / MUI / Blueprint), na maioria dos casos já é suficiente.
- Para mais candidatos → leia
references/react-ds-libraries.md; ainda insuficiente → vá ao diretório original awesome.- Após a escolha, os detalhes de implementação ficam com
react-best-practices/frontend-design, não neste índice.
Sistemas de Design de Principais Empresas
O que é: Sistemas de design completos de grandes empresas (tokens + componentes + padrões + documentação). Quando ler: Ao consultar o DS de uma empresa, selecionar sistemas maduros como referência, ou fazer pesquisa de concorrência de linguagem de design.
Seleção (mais clássicos):
- Google Material Design - Sistema de design do Google para produtos intuitivos e bonitos.
- Microsoft Fluent UI - Sistema de design open-source cross-platform da Microsoft (web/Apple/Android).
- IBM Carbon - Sistema de design open-source da IBM para produtos e experiências.
→ Lista completa em references/major-company-systems.md (Polaris, Atlassian, Lightning, Primer, Pajamas, Photon, Atlaskit + recursos gerais de DS).
Recursos de Design Tokens
O que é: Ferramentas para especificação, geração, transformação e sincronização cross-platform de design tokens. Quando ler: Ao selecionar cadeia de ferramentas de tokens, alinhar com padrão W3C, extrair tokens do Figma ou distribuir tokens em múltiplas plataformas.
Seleção:
- Design Tokens W3C Community Group - Grupo comunitário W3C definindo uma especificação de formato para design tokens.
- Style Dictionary - Sistema de build da Amazon para definir estilos uma vez e usá-los em qualquer plataforma.
- Theo - Abstração da Salesforce para transformar e formatar design tokens.
→ Lista completa em references/design-tokens.md (DesignTokens.dev, Diez, Figmagic, Superposition, Validator, Awesome Design Tokens, Abstract Connect, exportação Zeplin etc.).
Recursos de Pattern Library
O que é: Ferramentas de ambiente de desenvolvimento isolado de componentes e orquestração de bibliotecas de padrões (tipo Storybook). Quando ler: Ao montar ambiente de desenvolvimento de componentes / site de documentação / fluxo de trabalho de design atômico, ou escolher plataforma de colaboração de documentação.
Seleção:
- Storybook - Crie componentes de UI isoladamente para React, Vue, Angular e mais.
- Pattern Lab - Crie UIs orientadas por padrões usando princípios de design atômico.
- React Styleguidist - Ambiente de desenvolvimento isolado para componentes React com guia de estilo vivo.
→ Lista completa em references/pattern-libraries.md (Styled System, Stencil, Zeroheight, Backlight, Storybook DS, lista de addons etc.).
Bibliotecas de Sistema de Design para React
O que é: Bibliotecas de componentes React / sistemas de design empresariais prontos para uso. Quando ler: Ao selecionar biblioteca de componentes React para SaaS / painel administrativo / dashboard, ou avaliar adoção de DS empresarial.
Seleção:
- Ant Design - Ant Financial - Sistema de design para aplicações empresariais (Natureza e Determinismo).
- Material UI - Componentes React que implementam o Material Design do Google.
- Blueprint - Palantir - Kit de ferramentas UI baseado em React para a web.
→ Lista completa em references/react-ds-libraries.md (Grommet, Garden, Backpack, Ring UI, Canvas, Atlaskit, cf-ui, Mineral UI, Spark, Swarm, Uniform, Lightning React e mais de 20).
Bibliotecas de Sistema de Design para React Native
O que é: Kits de UI prontos para uso cross-platform com React Native. Quando ler: Ao selecionar bibliotecas de componentes maduras para App RN, evitando construir UI do zero.
Seleção:
- React Native Elements - Kit de UI React Native cross-platform.
- React Native Paper - Componentes React Native compatíveis com Material Design.
- NativeBase - GeekyAnts - Componentes UI cross-platform essenciais para React Native & Vue Native.
→ Lista completa em references/react-native-ds-libraries.md (Shoutem UI, Teaset etc.).
Ponteiro para diretório awesome geral
Diretórios awesome mais completos relacionados a design estão em sindresorhus/awesome. Este skill se baseia principalmente nos dois seguintes:
- klaufel/awesome-design-systems — Diretório principal de DS / tokens / pattern library de grandes empresas.
- jbranchaud/awesome-react-design-systems — Diretório principal de bibliotecas DS para React / RN.
Skills locais relacionados
Este índice apenas responde "quais DS prontos posso consultar / adotar". Metodologia e detalhes de implementação ficam com os seguintes skills locais:
design-system— Arquitetura de tokens, nomenclatura em camadas, metodologia de implementação cross-platform (backend metodológico deste índice).react-native-skills— Padrões de componentes e estilo para React Native.react-best-practices/frontend-design— Implementação React e frontend, detalhes de design.design-assets-index— Índice de recursos de design (ícones, fontes, ilustrações etc.).