Communitygithub.com

superdesigndev/superdesign

Superdesign é um agente de design especializado em UI/UX de frontend. Use esta skill antes de implementar qualquer interface que exija pensamento de design.

O que é superdesign?

Superdesign é um agente de design especializado em UI/UX frontend, projetado para ajudar desenvolvedores a criar e iterar designs de interface antes da implementação. Ele oferece comandos intuitivos para configurar projetos, criar rascunhos de design fiéis a componentes existentes, gerar variações de design (como temas escuros ou minimalistas) e estender páginas a partir de rascunhos. A skill também suporta extração e atualização de componentes reutilizáveis, facilitando a manutenção de uma biblioteca de componentes. Plataformas como Claude Code, Cursor e Codex são compatíveis, e o uso de `--context-file` com intervalos de linhas permite uma edição precisa. A abordagem principal é reproduzir fielmente o código existente e depois iterar com prompts criativos, tornando o design mais sistemático e integrado ao fluxo de desenvolvimento.

Funciona com~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/superdesigndev/superdesign-skill/tree/main/skills/superdesign

Perguntar na sua IA favorita

Abre um novo chat com esta habilidade de agente já pré-carregada.

Documentação

O que superdesign faz?

Superdesign é um agente de design especializado em UI/UX de frontend. Use esta skill antes de implementar qualquer interface que exija pensamento de design. Comandos comuns: superdesign create-project --title "X" (configurar projeto), superdesign create-design-draft --project-id <id> --title "UI Atual" -p "Reproduzir fielmente..." --context-file src/Component.tsx (reprodução fiel), superdesign iterate-design-draft --draft-id <id> -p "tema escuro" -p "minimalista" --mode branch --context-file src/Component.tsx (variações de design), superdesign execute-flow-pages --draft-id <id> --pages '[...]' --context-file src/Component.tsx (ampliar para mais páginas), superdesign create-component --project-id <id> --name "NavBar" --html-file /tmp/navbar.html --props '[...]' (extrair componente reutilizável), superdesign update-component --component-id <id> --html-file /tmp/navbar.html (atualizar componente existente), superdesign list-components --project-id <id> (listar componentes existentes). Suporta intervalos de linhas: --context-file caminho:linhaInicio:linhaFim

Habilidades Relacionadas