Communitygithub.com

alty-oss/dev-design

À utiliser pour établir une direction visuelle distinctive pour une nouvelle interface utilisateur ou une refonte intentionnelle.

Qu'est-ce que dev-design ?

Cette compétence permet à un agent IA de guider le processus de conception visuelle d'une interface utilisateur, en commençant par la lecture des directives de design frontend incluses, du brief et des contraintes existantes. Elle exige de proposer deux directions matériellement différentes pour un nouveau produit ou une refonte, en comparant la hiérarchie, la composition, la typographie et l'accentuation, et pas seulement les palettes de couleurs. La direction choisie, sa justification et son statut/source sont enregistrés dans un fichier direction.md. Le processus en deux étapes planifie d'abord les couleurs hexadécimales, les polices, les rôles et un wireframe ASCII, puis compare les choix au brief et à un produit similaire plausible, en révisant si nécessaire. La compétence privilégie les instructions explicites de l'utilisateur, réutilise l'identité existante d'un projet, utilise du contenu réel, et concentre l'expression sur un élément mémorable avec une hiérarchie disciplinée.

Compatible avec✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/alty-oss/dev-design/tree/HEAD/skills/art-direction

Demander à votre IA préférée

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

Documentation

Direction artistique

Português (Brasil) Lisez les directives de conception frontend incluses avant de choisir la direction. Utilisez ses principes visuels spécifiques en parallèle du brief et des contraintes du projet. Lisez brief.md et les contraintes existantes. Pour les nouveaux produits/refontes, proposez deux directions matériellement différentes, chacune fondée sur l'audience, le contenu et la tâche. Comparez la hiérarchie, la composition, la typographie et l'accentuation, et pas seulement les permutations de palettes. Enregistrez la direction choisie, la justification et le statut/source de la décision dans direction.md. Si les choix ont été délégués, sélectionnez la meilleure solution et enregistrez délégué. Sinon, résolvez la décision matérielle avant d'implémenter une nouvelle direction. Suivez le processus original en deux étapes :

  1. Planifiez 4 à 6 couleurs hexadécimales nommées, des polices et leurs rôles, un concept de mise en page et un wireframe ASCII avec alignement, ainsi que des principes distinctifs.
  2. Comparez avec le brief et un produit similaire plausible. Révisez les choix qui sembleraient identiques entre des sujets non liés ; enregistrez le changement et la raison. Les instructions explicites de l'utilisateur l'emportent, y compris les styles mentionnés comme clichés par la source. Un projet avec une identité existante la réutilise normalement. Utilisez du contenu réel. Concentrez l'expression sur un élément mémorable ; soutenez-le avec une hiérarchie disciplinée. Expliquez les polices/ressources manquantes et utilisez une solution de repli intentionnelle plutôt que de supposer qu'un service est disponible.

Individual skills in this repo

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

Skills associés