Communitygithub.com

alty-oss/dev-design

Utilisez cette compétence pour inventorier les composants d'interface et tokens existants, ou pour définir un contrat cohérent entre tokens et composants en vue de l'implémentation.

Qu'est-ce que dev-design ?

Cette compétence guide l'IA agent dans la gestion ou la création d'un système de design unifié. Elle est utile pour inventorier les composants, tokens, typographie, espacements et interactions existants avant d'introduire de nouveaux éléments, garantissant ainsi cohérence et réutilisation. Supportée par les workflows (SKILL.md) de la plateforme, elle s'applique à la fois à l'audit de systèmes existants et à la définition de nouveaux contrats (design tokens / API composants). Son fonctionnement suit un processus structuré : inventaire, mapping sémantique des tokens (couleur, typo, espacement, rayon, mouvement), définition des états (focus, désactivé), spécification des rôles (surface, texte, action, statut) et documentation du comportement accessible et responsive. Elle évite l'introduction de dépendances superflues (UI librairies, polices) sans vérification préalable du stack et des contraintes utilisateur.

Compatible avec~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/alty-oss/dev-design/tree/HEAD/skills/design-system
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

Système de design

Português (Brasil)

Inventoriez d'abord les composants, tokens, type, espacements et conventions d'interaction existants. Réutilisez avant d'ajouter un système parallèle.

Écrivez tokens.json et les décisions relatives aux composants en utilisant le contrat artefact. Associez les rôles sémantiques aux références de tokens existantes lorsque disponibles ; sinon définissez des valeurs compactes alignées avec direction.md.

Couvrez les rôles de couleur, la typographie, l'espacement, le rayon et le mouvement. Définissez les traitements pour les états focus et désactivé. Distinguez les rôles surface / texte / action / statut.

Pour chaque composant concerné, enregistrez l'objectif, l'API / les variantes, les états, les règles responsives et le comportement accessible dans flows.md ou direction.md.

N'introduisez pas de bibliothèque UI ou de dépendance de police sans vérifier la pile actuelle et les contraintes de l'utilisateur. Préservez les choix explicites de marque.

Individual skills in this repo

This repo contains 4 individual skills — each has its own dedicated page.

alty-oss/dev-design

Use when reviewing UI keyboard access, focus, accessible names, structure, contrast and motion behavior.

alty-oss/dev-design

Use when establishing a distinctive visual direction for a new UI or an intentional redesign.

alty-oss/dev-design

Use when a UI task needs its audience, primary job, content, constraints and success criteria clarified before design.

alty-oss/dev-design

Use when delivering a UI change with its decisions, verification evidence and remaining limitations.

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