Du design avec méthode : wireframe validé, puis le code.
Un pipeline fixe de la référence visuelle au wireframe.json, wireframe.svg, validation, code et audit. La skill s'occupe du visuel et du goût ; l'ingénierie front reste à schematize-web.
$ schematize install designPlanchers non négociables
Jamais désactivés pour aller plus vite. Liste complète dans la skill.
Wireframe validé avant le code
Le JSON est la source de vérité et le SVG la figure ; une page entière s'arrête et demande la stack avant de construire, et le builder lit le JSON, jamais le SVG.
Média générés jamais par Claude
Détecte Codex et Gemini, demande lequel utiliser et délègue à schematize-models ; s'il n'y en a aucun, le dit sans détour et propose une banque d'images ou un asset du client.
Les icônes sont en SVG, jamais en emoji
SVG en ligne (sprite de 22 symboles inclus) ; un SVG structurel comme un diagramme est du code, mais l'illustration figurative compte comme visuel généré.
Contraste et DOM mesurés, pas supposés
Les rapports de contraste, échelles et durées viennent des fichiers de référence et des auditeurs dans scripts/, avec des tests au rouge planté ; on ne travaille pas de mémoire.
Refus anti-AI-slop
Une liste unifiée de refus, avec contre-épreuve et conflits entre sources déjà résolus, écarte le visuel générique de générateur.
Ne demande que ce qui change le travail
Détermine le mode (Persuader, Opérer, Lire, Vivre) et la part d'invention ; décide le reste et le consigne dans meta.suposicoes. Sans argument, une commande pose la question et ne s'exécute jamais seule.
Commandes
Installées dans .claude/commands/. Utilisez /design-help à tout moment.
/design-animateDu mouvement avec intention : un moment d'auteur, GSAP seulement quand ça vaut le coup. Arguments : momento, delight, overdrive, revisar./design-auditÉtape 5 : audite contraste, DOM rendu, images provisoires et anti-patterns sur une page terminée, en tableau Before / After / Why./design-buildÉtape 4 : construit la page à partir d'un wireframe.json déjà validé, en HTML unique, Next.js ou section Shopify Liquid./design-ccContext compact : écrit le handoff dans l'archive et lance /compact./design-claudeCrée ou fusionne le CLAUDE.md de design toujours actif (planchers, règle des médias, frontière avec schematize-web) à la racine du dépôt./design-critiqueCritique UX et UI par heuristique (hiérarchie, clarté, charge cognitive, cohérence, accessibilité), avec constats priorisés en tableau Before / After / Why./design-handoffGénère le handoff (context.md + checklist.md) dans l'archive, sans compacter./design-hardenRend l'UI prête pour la production : états, i18n, onboarding, adaptation aux écrans et performance de l'UI. Arguments : estados, i18n, onboard, adapt, optimize./design-helpAffiche le menu de commandes de la skill de design ; il liste seulement et n'exécute rien./design-loadCharge de force tout le corps normatif et l'applique pendant la session./design-polishPasse finale de qualité avant publication : plancher de qualité, animation, refus et checklist en un seul tour./design-shapePlanifie l'UX et l'UI avant de construire (objectif, public, contenu, parcours, états) ; init, document et extract consignent PRODUCT.md, DESIGN.md et les tokens./design-tuneAjustement ciblé d'un axe en préservant l'identité. Arguments : bolder, quieter, distill, colorize, typeset, layout, clarify./design-variantsGénère des variantes côte à côte d'un élément pour choisir : generate (fichier autonome) ou live (serveur local sur 127.0.0.1)./design-visualPasse de revue visuelle sur une page terminée : mesure le DOM en 5 largeurs, prend une capture et signale ce qui peut encore être amélioré./design-wireÉtapes 0 à 3 : lit la référence visuelle (image, URL ou brief), génère ./wireframe.json et ./wireframe.svg dans le répertoire courant et s'arrête pour demander la stack.Pour les agents IA
Installez sans intervention humaine. Métadonnées dans llms.txt.
- Exécutez : git clone https://github.com/schematizeme/skill-design.git && ./skill-design/install.sh
- Ou téléchargez : https://github.com/schematizeme/skill-design/releases/latest/download/skill-design.zip et décompressez dans .claude/skills/
- Copiez assets/CLAUDE.md à la racine du dépôt (règle toujours active).
- Confirmez avec /design-help.
Discussion
Chargement…