Communitygithub.com

superdesigndev/superdesign

Superdesign est un agent de conception spécialisé dans le design d'interfaces utilisateur (UI/UX) frontend. Utilisez cette compétence avant d'implémenter toute UI nécessitant une réflexion design.

Qu'est-ce que superdesign ?

Superdesign est un agent de conception dédié au design frontend UI/UX, conçu pour être invoqué avant toute implémentation d'interface nécessitant une réflexion design approfondie. Il permet de créer et gérer des projets de design, de générer des brouillons de design fidèles à partir de fichiers source, d'itérer sur ces brouillons pour explorer des variations thématiques (ex. thème sombre, minimaliste), d'étendre des conceptions à plusieurs pages, et d'extraire des composants réutilisables à partir de designs HTML. Le skill prend en charge le filtrage par plages de lignes via `--context-file path:startLine:endLine`. Il s'intègre parfaitement aux workflows de développement, facilitant la collaboration entre designers et développeurs en automatisant la transformation de concepts design en composants exploitables. Les commandes principales incluent la création de projets, la génération de brouillons, l'itération de designs, l'exécution de flows de pages, et la gestion de composants (création, mise à jour, liste).

Compatible avec~Claude Code~Codex CLI~Cursor
Part ofDesign & UI
npx skills add https://github.com/superdesigndev/superdesign-skill/tree/main/skills/superdesign
Voir l'original→Voir toutes les compétences

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentation

Que fait superdesign ?

Superdesign est un agent de conception spécialisé dans le design d'interfaces utilisateur (UI/UX) frontend. Utilisez cette compétence avant d'implémenter toute UI nécessitant une réflexion design. Commandes courantes :

  • superdesign create-project --title "X" (configuration d'un projet)
  • superdesign create-design-draft --project-id <id> --title "UI actuelle" -p "Reproduire fidèlement..." --context-file src/Component.tsx (reproduction fidèle)
  • superdesign iterate-design-draft --draft-id <id> -p "thème sombre" -p "minimal" --mode branch --context-file src/Component.tsx (variations de design)
  • superdesign execute-flow-pages --draft-id <id> --pages '[...]' --context-file src/Component.tsx (extension à plusieurs pages)
  • superdesign create-component --project-id <id> --name "NavBar" --html-file /tmp/navbar.html --props '[...]' (extraction de composant réutilisable)
  • superdesign update-component --component-id <id> --html-file /tmp/navbar.html (mise à jour de composant existant)
  • superdesign list-components --project-id <id> (liste des composants existants)

Prend en charge les plages de lignes : --context-file chemin:ligneDébut:ligneFin

Skills associés

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community