Repolode
Enviar
superdesigndev

superdesigndev/superdesign-skill

Uma skill de agente que dá a agentes de programação, como Claude Code e Cursor, senso de design para criar e iterar em interfaces, apresentações e peças gráficas.

Alternativa open source a:Figma

Ver no GitHubSite
Estrelas
953
Forks
76
Issues abertas
8
Último commit
há 3 meses

O que é?

Superdesign é uma skill de agente que adiciona orientações de design a agentes de programação como Claude Code, Cursor e Codex. Sem ela, os agentes tendem a criar interfaces genéricas com o estilo padrão de bibliotecas de componentes. A skill permite que um agente leia a base de código existente para obter contexto, busque referências de estilo em uma biblioteca de prompts ou em uma URL de site e produza vários rascunhos de design que podem ser ramificados em uma tela infinita.

O fluxo de trabalho inclui criar ou melhorar páginas e fluxos, montar um arquivo de sistema de design em .superdesign/design-system.md, criar apresentações a partir de um roteiro de slides aprovado e produzir pôsteres ou peças gráficas para redes sociais. Os rascunhos podem ser substituídos, ramificados em variações ou expandidos para jornadas de usuário com várias páginas. Cada etapa é conduzida por uma CLI complementar, @superdesign/cli, instalada separadamente e que exige login.

A skill pode ser instalada com npx skills add para mais de 70 agentes ou como um plugin com namespace no Claude Code. Ela é mantida junto com o app web superdesign.dev.

Recursos principais

  • 01Gera vários rascunhos de design de interface, que podem ser ramificados em uma tela infinita.
  • 02Lê a base de código existente para manter os designs consistentes com os componentes atuais.
  • 03Configura e armazena um arquivo de sistema de design para o projeto.
  • 04Cria apresentações a partir de um roteiro aprovado e ordenado de slides.
  • 05Pesquisa em uma biblioteca de prompts e extrai tokens de design de uma URL de site.

Casos de uso

  • Reformular uma página de configurações ou dashboard que parece uma interface padrão gerada por IA.
  • Configurar um sistema de design com base em uma base de código frontend existente.
  • Criar uma apresentação de lançamento de produto com 8 slides a partir de um roteiro aprovado.
  • Criar pôsteres, capas ou peças gráficas para redes sociais de um produto.

Início rápido

  1. 1

    Instale a skill no seu agente de programação

    npx skills add superdesigndev/superdesign-skill
  2. 2

    Instale o Superdesign CLI

    npm install -g @superdesign/cli@latest
  3. 3

    Faça login no Superdesign

    superdesign login
  4. 4

    Peça ao seu agente para criar um design. Por exemplo: /superdesign improve the design of my dashboard

Antes de usar

  • Para usar o fluxo de trabalho completo, é necessário ter uma conta no superdesign.dev e fazer login pela CLI.
  • A skill foi criada para ser usada com agentes de programação, então é preciso ter um instalado para que ela seja útil.
  • O README não informa o custo nem os limites de uso do serviço superdesign.dev.

Em coleções

Skills de design de interface para agentes de programaçãoFerramentas, skills e plugins para Claude CodeAssistentes e agentes de programação com IABibliotecas de skills para agentes de IAFrameworks frontend e componentes de interface

Tópicos

#agent-skills#ai-design#claude-code#ui-design#frontend#coding-agent#design-system#claude-skill#claude-skills#cursor

Perguntas frequentes

O que é superdesign-skill?
Uma skill de agente que dá a agentes de programação, como Claude Code e Cursor, senso de design para criar e iterar em interfaces, apresentações e peças gráficas. Superdesign é uma skill de agente que adiciona orientações de design a agentes de programação como Claude Code, Cursor e Codex. Sem ela, os agentes tendem a criar interfaces genéricas com o estilo padrão de bibliotecas de componentes. A skill permite que um agente leia a base de código existente para obter contexto, busque referências de estilo em uma biblioteca de prompts ou em uma URL de site e produza vários rascunhos de design que podem ser ramificados em uma tela infinita.
superdesign-skill é gratuito? Qual é a licença?
superdesign-skill é open source sob a licença MIT. Confira os termos da licença antes de usá-lo em produtos comerciais.
superdesign-skill ainda é mantido?
Atualizado nos últimos 6 meses. O último commit de superdesign-skill foi em 21 de ago. de 2026.
Para que posso usar superdesign-skill?
Reformular uma página de configurações ou dashboard que parece uma interface padrão gerada por IA. Configurar um sistema de design com base em uma base de código frontend existente. Criar uma apresentação de lançamento de produto com 8 slides a partir de um roteiro aprovado. Criar pôsteres, capas ou peças gráficas para redes sociais de um produto.
Como instalar superdesign-skill?
Instale a skill no seu agente de programação: npx skills add superdesigndev/superdesign-skill Instale o Superdesign CLI: npm install -g @superdesign/cli@latest Faça login no Superdesign: superdesign login Peça ao seu agente para criar um design. Por exemplo: /superdesign improve the design of my dashboard
Onde consigo superdesign-skill?
O código-fonte e as instruções de instalação estão no GitHub: https://github.com/superdesigndev/superdesign-skill

Resumo gerado por IA a partir do README do projeto. As estatísticas do GitHub são atualizadas diariamente.

Projetos relacionados