Receber por email
← Voltar para o catálogo

design-system-generator

Create design systems with tokens, components, and documentation. Use when building design systems, creating component libraries, or establishing design tokens.

2estrelas
Atualizado há 4 meses

Ver no GitHub ↗

Como adicionar

/plugin marketplace add bg-szy/TOP-SKILLS

O comando exato pode variar conforme o repositório. Confira o README no GitHub.

Para o autor da skill

Cole no README do seu repo

Mostra que sua skill está catalogada na Skillteca, gera backlink e tráfego rastreável.

[![Skillteca](https://www.skillteca.com.br/api/badge/design-system-generator-bg-szy/svg)](https://www.skillteca.com.br/skills/design-system-generator-bg-szy)

Alerta por categoria

Receba novas skills de Design e Frontend toda segunda

1 email curto, só com as skills novas de Design e Frontend. 4 minutos de leitura, sem spam, cancela com 1 clique.

Você confirma o email no primeiro envio. Sem spam. Cancela com 1 clique.

Ler descrição completa

Design System Generator

Instructions

When creating a design system:

  1. Define design tokens (colors, typography, spacing)
  2. Create base components (Button, Input, Card, etc.)
  3. Establish patterns (forms, navigation, layouts)
  4. Document usage and variants

Design Tokens

Colors

// tokens/colors.ts
export const colors = {
  // Brand
  primary: {
    50: '#eff6ff',
    100: '#dbeafe',
    200: '#bfdbfe',
    300: '#93c5fd',
    400: '#60a5fa',
    50

[Description truncada. Veja o README completo no GitHub.]
Compartilhar X LinkedIn