Agents Skills design

ckm:design est une skill de design structurée pour orienter et produire logos, maquettes CIP, bannières, slides et icônes SVG. Elle inclut des références concrètes, des options basées sur CSV et des scripts Python pour des workflows reproductibles, au-delà de simples prompts génériques.

La skill design-md analyse les projets Stitch et transforme leurs écrans en une source de vérité sémantique DESIGN.md pour garantir la cohérence de la mise en page, du ton, des couleurs et du langage des composants. Utilisez design-md pour les Design Systems quand vous avez besoin d’indications exploitables pour de futures générations Stitch, et pas seulement d’un aperçu visuel.

design-consultation est un skill de design-consultation qui transforme une idée produit encore approximative en direction design complète. Il crée une source de vérité DESIGN.md, des aperçus et des recommandations à l’échelle du système pour la typographie, les couleurs, l’espacement, la mise en page et les animations. Idéal pour les nouveaux produits et les interfaces qui ont besoin d’un point de départ cohérent.

figma-generate-design aide à transformer des pages codées, des modales, des panneaux coulissants, des barres latérales, des panneaux et d’autres vues à sections multiples en Figma à partir du système de design publié. Il repère les composants, variables, styles et ressources de bibliothèque via Code Connect et des sources associées, puis assemble l’écran section par section pour la Design Implementation au lieu de tout redessiner manuellement. Utilisez le guide figma-generate-design lorsque vous avez besoin d’une fidélité élevée au code et aux tokens.

Utilisez le skill design-system pour générer ou auditer un système UI, extraire des tokens depuis du code existant et vérifier la cohérence du style dans de vrais dépôts.

Utilisez frontend-design pour créer des interfaces frontend distinctives, prêtes pour la production, avec une vraie intention visuelle. Ce skill frontend-design est pensé pour les landing pages, les dashboards, les shells d’app et les composants où la hiérarchie, la typographie, le mouvement et la finition comptent autant que l’implémentation. Il inclut des নির্দেশications d’installation et d’utilisation pour un travail UI centré sur le design.

frontend-design est une skill orientée design pour créer des interfaces frontend soignées, avec un meilleur sens du contexte, de la hiérarchie, de l’accessibilité et du responsive. Utilisez-la pour installer la skill, consulter les références essentielles et appliquer des conseils concrets afin d’améliorer vos composants, pages et écrans d’application.

frontend-design-review est un skill GitHub pour relire des interfaces frontend et créer, à partir de zéro, des interfaces distinctives et prêtes pour la production. Il aide à évaluer la conformité au design system, l’accessibilité, la qualité visuelle et le caractère plus ou moins générique ou intentionnel d’une UI. Utilisez-le pour les revues de PR, les revues de composants et frontend-design-review pour le design UI.

La compétence design aide à transformer des demandes d’interface vagues en rendu visuel prêt pour la production, pour des pages, des composants, des tableaux de bord et des finitions guidées par capture d’écran. Utilisez-la lorsque l’interface est moche, floue, incohérente ou visuellement incorrecte, et lorsque vous avez besoin de design pour la conception UI plutôt que de logique backend ou de pipelines de données. Elle inclut des consignes pour l’installation, l’utilisation, les garde-fous et de meilleures décisions esthétiques.

figma-generate-design aide à transformer un écran réel, une page ou une mise en page multi-sections en Figma en réutilisant le système de design publié plutôt que des formes génériques. C’est idéal pour reproduire fidèlement des pages produit ou du code, avec une structure modifiable et une cohérence basée sur les tokens. À utiliser pour des mises à jour de UI complètes, pas pour de simples maquettes rapides.

figma-implement-design transforme des écrans Figma en code prêt pour la production dans votre dépôt, avec pour objectif une forte fidélité visuelle du layout, des états, des tokens et du comportement responsive. Utilisez-le pour l’implémentation Figma vers code, pas pour l’édition Figma, le mapping code connect ou la génération de nouveaux designs. Il inclut des consignes d’installation, des notes d’utilisation et des règles de périmètre pour les workflows d’implémentation de design.

ui-design-system est un skill Claude pour les Design Systems qui aide à générer des design tokens, des palettes de couleurs, des règles typographiques, des espacements, des règles responsive, de la documentation de composants et des livrables de handoff développeur, avec des références et un générateur Python de tokens pour des sorties JSON, CSS, SCSS ou récapitulatives.