Quais dados devo preparar?

Cores hexadecimais com seis dígitos, raios e espaçamentos para fundos, textos e botões.

Funciona sem chave de API?

Sim. Modelo, validação e exportação funcionam localmente sem chave. Apenas a mídia PopNow opcional exige cotação e aprovação explícita de um orçamento API USD.

Como salvo as alterações?

Exporte o JSON atual antes de fechar a página. O arquivo local não é sincronizado automaticamente com um servidor.

Editable design tokens with calculated contrast ratios and CSS export — working example

Edita cores, calcula contrastes reais e exporta tokens consistentes em CSS e JSON. Mídia PopNow opcional, após cotação e aprovação do orçamento API USD. A verificação de contraste não substitui uma auditoria completa de acessibilidade.

Usa o PopNow para: Imagens
Requer: Node.js

A skill é gratuita. Imagens, vídeos ou som de IA opcionais têm o preço informado para sua aprovação antes da geração. Chamadas com chave API usam seu saldo API separado em dólares americanos (USD); a geração pelo ChatGPT ou Claude conectado via OAuth/MCP usa seus créditos do site.

v1.0.1 · Atualizada em 24 de out. de 2026 · 40 KB · Use em trabalhos pessoais e para clientes; não revenda nem compartilhe o pacote.

Skill gratuitaWeb

Mostruário de design system

Edita cores, calcula contrastes reais e exporta tokens consistentes em CSS e JSON.

Você diz

Crie «Mostruário de design system» com meus dados reais e entregue resultados verificáveis e arquivos editáveis.

Use a skill em um app de chat pela PopNow. Não precisa instalar nada.

Em um agente de programação

+21

Instale
Baixar ZIP
Cole o texto no Codex, Claude Code, Cursor ou em outro agente. Ele baixa a skill e a coloca na pasta certa.
Depois, peça para usar a skill
/popnow-design-system-showcase Crie «Mostruário de design system» com meus dados reais e entregue resultados verificáveis e arquivos editáveis.
Ou apenas descreva a tarefa: seu agente escolhe a skill adequada sozinho.

Instalação manual

Instalar em

Pasta de skills: ~/.agents/skillsA maioria dos agentes lê ~/.agents/skills

Instalar manualmente

mkdir -p ~/.agents/skills && cd ~/.agents/skills
curl -fL -H "Authorization: Bearer $POPNOW_API_KEY" \
  https://api.popnow.ai/api/v1/agent-skills/design-system-showcase/download -o popnow-design-system-showcase.zip
unzip -o popnow-design-system-showcase.zip && rm popnow-design-system-showcase.zip

Requer uma chave de API do PopNow em POPNOW_API_KEY · Obter uma chave de API

A skill é gratuita. As imagens, vídeos e sons que ela cria usam seus créditos da PopNow, e você vê o preço antes.

O que você recebe

Edita cores, calcula contrastes reais e exporta tokens consistentes em CSS e JSON.
HTML independente com dados e código-fonte editáveis
Validação local, exemplos representativos e verificações executáveis
Mídia PopNow opcional, após cotação e aprovação do orçamento API USD

Ideal para

Revisão de paletas, componentes e entrega de tokens
Equipes que precisam revisar, exportar e entregar resultados offline

Não é para

A verificação de contraste não substitui uma auditoria completa de acessibilidade.
Serviços com servidor em tempo real, contas ou sincronização compartilhada

Como usar

Você diz

Use a skill da PopNow “Mostruário de design system” (design-system-showcase) para isto: Crie «Mostruário de design system» com meus dados reais e entregue resultados verificáveis e arquivos editáveis.

Depois tente

Verifique os casos-limite e explique os campos rejeitados.
Adapte o layout à nossa marca e faça a cotação da mídia PopNow antes de gerar.

O que ter em mãos

Cores hexadecimais com seis dígitos, raios e espaçamentos para fundos, textos e botões.
Público, rótulos finais e destino da publicação
Materiais próprios e evidências para afirmações públicas