Blog

Comment utiliser les compétences de code de Claude pour créer une interface utilisateur

Ashley Goolam

Ashley Goolam

21 January 2026

Comment utiliser les compétences de code de Claude pour créer une interface utilisateur

Décrire manuellement les composants d'interface utilisateur à Claude Code pour chaque nouvelle fonctionnalité est comme écrire du CSS sans classes : répétitif, incohérent et impossible à adapter à travers les équipes. Les compétences Claude Code pour la construction d'interfaces utilisateur transforment votre système de conception en outils exécutables qui génèrent des composants, des mises en page et des styles avec des paramètres prévisibles et sans code répétitif.

Que Sont les Compétences Claude Code pour la Construction d'Interfaces Utilisateur ?

Les Compétences Claude Code regroupent la logique de génération d'interface utilisateur en outils réutilisables et versionnés que Claude Code peut découvrir et invoquer via le Protocole de Contexte de Modèle (MCP). Au lieu de créer des invites verbeuses comme "Créez un composant de carte réactif avec Tailwind, une image alignée à gauche, du texte aligné à droite et un bouton principal," vous définissez une compétence building-ui une seule fois et l'appelez avec des paramètres concis : component: "card", layout: "image-left".

Chaque compétence est constituée d'un fichier SKILL.md qui définit :

La compétence building-ui du dépôt officiel fournit des modèles pour les composants, les mises en page, les thèmes et les formulaires. Elle transforme la génération d'interface utilisateur ad hoc en un processus systématique et reproductible.

compétences claude code

Principaux Avantages Par Rapport aux Prompts Bruts

💡
Vous voulez un excellent outil de test d'API qui génère une belle documentation API ?

Vous voulez une plateforme intégrée et tout-en-un pour que votre équipe de développeurs puisse travailler ensemble avec une productivité maximale ?

Apidog répond à toutes vos exigences, et remplace Postman à un prix bien plus abordable !
bouton

Mise en Place de la Compétence building-ui

Étape 1 : Installer Claude Code et Activer le MCP

Si vous n'avez pas installé l'interface en ligne de commande de Claude Code :

npm install -g @anthropic-ai/claude-code
claude --version  # Devrait être >= 2.0.70

Créez le répertoire et le fichier de configuration MCP :

# macOS/Linux
mkdir -p ~/.config/claude-code
touch ~/.config/claude-code/config.json

# Windows
mkdir %APPDATA%\claude-code
echo {} > %APPDATA%\claude-code\config.json
claude code

Étape 2 : Cloner et Compiler la Compétence building-ui

git clone https://github.com/anthropics/skills.git
cd skills/skills/building-ui
npm install
npm run build

Ceci compile les gestionnaires TypeScript vers dist/index.js.

Étape 3 : Configurer le MCP pour Charger la Compétence

Modifiez ~/.config/claude-code/config.json :

{
  "mcpServers": {
    "building-ui": {
      "command": "node",
      "args": ["/absolute/path/to/skills/building-ui/dist/index.js"],
      "env": {
        "UI_LIBRARY": "react",
        "STYLE_SYSTEM": "tailwind",
        "THEME_CONFIG": "~/project/design-tokens.json"
      }
    }
  }
}

Critique :

Étape 4 : Vérifier l'Installation

claude

Une fois chargé, exécutez :

/list-tools

Vous devriez voir :

Available tools:
- building-ui:generate-component
- building-ui:create-layout
- building-ui:apply-theme
- building-ui:generate-form

Si les outils n'apparaissent pas, vérifiez les journaux :

# macOS/Linux
tail -f ~/.cache/claude-code/logs/mcp.log

# Windows
type %APPDATA%\claude-code\logs\mcp.log

Problèmes courants :

Modèles Clés de Construction d'Interfaces Utilisateur avec les Compétences

La compétence building-ui exporte quatre outils principaux. Chacun accepte des paramètres structurés et renvoie du code généré.

1. Outil de Génération de Composant

Nom de l'outil : building-ui:generate-component
Cas d'utilisation : Créer des composants d'interface utilisateur réutilisables

Paramètres :

Exemple : Créer un bouton avec des variantes

Utilisez l'outil generate-component pour créer un composant bouton avec les variantes primaire, secondaire et contour, de taille moyenne, et prenant en charge l'état désactivé.

Sortie générée (React + Tailwind) :

// Button.tsx
import React from 'react';
import clsx from 'clsx';

interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: 'primary' | 'secondary' | 'outline';
  size?: 'small' | 'medium' | 'large';
}

export const Button: React.FC<ButtonProps> = ({ 
  variant = 'primary', 
  size = 'medium',
  disabled,
  children,
  className,
  ...props 
}) => {
  const baseClasses = 'font-semibold rounded-lg transition-colors';
  const variantClasses = {
    primary: 'bg-blue-600 text-white hover:bg-blue-700',
    secondary: 'bg-gray-200 text-gray-900 hover:bg-gray-300',
    outline: 'border-2 border-blue-600 text-blue-600 hover:bg-blue-50'
  };
  const sizeClasses = {
    small: 'px-3 py-1.5 text-sm',
    medium: 'px-4 py-2 text-base',
    large: 'px-6 py-3 text-lg'
  };
  
  return (
    <button
      disabled={disabled}
      className={clsx(
        baseClasses,
        variantClasses[variant],
        sizeClasses[size],
        disabled && 'opacity-50 cursor-not-allowed',
        className
      )}
      {...props}
    >
      {children}
    </button>
  );
};

La compétence infère les types TypeScript, les attributs d'accessibilité et les classes de style en fonction de vos variables d'environnement.

2. Outil de Création de Mise en Page

Nom de l'outil : building-ui:create-layout
Cas d'utilisation : Générer des mises en page réactives

Paramètres :

Exemple : Mise en page de tableau de bord avec barre latérale réactive

Utilisez create-layout pour générer une mise en page de tableau de bord réactive avec une barre latérale escamotable, un en-tête, une zone de contenu principal et un pied de page. Utilisez un espacement de 4 et faites en sorte que la barre latérale ait une largeur de 256px sur le bureau, et pleine largeur sur mobile.

Sortie générée :

// DashboardLayout.tsx
import React, { useState } from 'react';
import clsx from 'clsx';

interface DashboardLayoutProps {
  header?: React.ReactNode;
  sidebar?: React.ReactNode;
  main: React.ReactNode;
  footer?: React.ReactNode;
}

export const DashboardLayout: React.FC<DashboardLayoutProps> = ({ 
  header, 
  sidebar, 
  main, 
  footer 
}) => {
  const [sidebarOpen, setSidebarOpen] = useState(false);

  return (
    <div className="min-h-screen flex flex-col">
      {/* Header */}
      <header className="bg-white shadow-sm border-b border-gray-200 z-10">
        <div className="px-4 sm:px-6 lg:px-8 py-4">
          {header}
        </div>
      </header>

      <div className="flex flex-1">
        {/* Mobile menu button */}
        <button
          className="lg:hidden fixed bottom-4 right-4 bg-blue-600 text-white p-3 rounded-full shadow-lg z-20"
          onClick={() => setSidebarOpen(!sidebarOpen)}
        >
          ☰
        </button>

        {/* Sidebar */}
        <aside className={clsx(
          'bg-gray-50 border-r border-gray-200',
          'fixed lg:relative inset-y-0 left-0 z-30',
          'w-64 transform transition-transform lg:translate-x-0',
          sidebarOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'
        )}>
          <div className="p-4">
            {sidebar}
          </div>
        </aside>

        {/* Main content */}
        <main className="flex-1 p-4 sm:p-6 lg:p-8">
          {main}
        </main>
      </div>

      {/* Footer */}
      {footer && (
        <footer className="bg-gray-50 border-t border-gray-200 mt-auto">
          <div className="px-4 sm:px-6 lg:px-8 py-4">
            {footer}
          </div>
        </footer>
      )}
    </div>
  );
};

La compétence ajoute automatiquement la logique du menu mobile, les classes adaptées aux points d'arrêt et les attributs d'accessibilité.

3. Outil d'Application de Thème

Nom de l'outil : building-ui:apply-theme
Cas d'utilisation : Appliquer des jetons de conception à travers les composants

Paramètres :

Exemple : Appliquer un thème sombre à un composant de carte

Utilisez apply-theme pour configurer un composant Card pour le mode sombre avec une palette de couleurs ardoise, une échelle d'espacement de 4 et la famille de polices Inter.

Sortie générée :

// card-theme.ts
export const cardTheme = {
  light: {
    background: 'bg-white',
    border: 'border-gray-200',
    text: 'text-gray-900',
    subText: 'text-gray-600'
  },
  dark: {
    background: 'bg-slate-800',
    border: 'border-slate-700',
    text: 'text-slate-100',
    subText: 'text-slate-400'
  }
};

// Utilisation dans Card.tsx
import { cardTheme } from './card-theme';

interface CardProps {
  variant?: 'light' | 'dark';
  children: React.ReactNode;
}

export const Card: React.FC<CardProps> = ({ variant = 'light', children }) => {
  const theme = cardTheme[variant];
  
  return (
    <div className={clsx(
      'rounded-lg p-4 border',
      theme.background,
      theme.border
    )}>
      {children}
    </div>
  );
};

La compétence lit votre fichier THEME_CONFIG et génère des cartes de jetons spécifiques au thème. Si THEME_CONFIG pointe vers un fichier JSON :

{
  "colors": {
    "primary": "#3B82F6",
    "secondary": "#6B7280"
  },
  "fonts": {
    "sans": "Inter",
    "mono": "JetBrains Mono"
  }
}

Le code généré utilise ces valeurs exactes au lieu des valeurs par défaut de Tailwind.

4. Outil de Génération de Formulaire

Nom de l'outil : building-ui:generate-form
Cas d'utilisation : Créer des formulaires validés à partir de schémas

Paramètres :

Exemple : Formulaire d'inscription utilisateur avec validation

Utilisez generate-form pour créer un formulaire d'inscription utilisateur avec les champs : nom (texte, requis), email (email, requis), mot de passe (mot de passe, longueur minimale 8), et acceptTerms (case à cocher). Soumettre à /api/register avec validation au flou.

Sortie générée :

// UserRegistrationForm.tsx
import React, { useState } from 'react';
import { z } from 'zod';
import { zodResolver } from '@hookform/resolvers/zod';
import { useForm, SubmitHandler } from 'react-hook-form';

const schema = z.object({
  name: z.string().min(1, 'Name is required'),
  email: z.string().email('Invalid email address'),
  password: z.string().min(8, 'Password must be at least 8 characters'),
  acceptTerms: z.boolean().refine(val => val === true, {
    message: 'You must accept the terms'
  })
});

type FormData = z.infer<typeof schema>;

export const UserRegistrationForm: React.FC = () => {
  const [isSubmitting, setIsSubmitting] = useState(false);
  
  const {
    register,
    handleSubmit,
    formState: { errors },
    trigger
  } = useForm<FormData>({
    resolver: zodResolver(schema),
    mode: 'onBlur'
  });

  const onSubmit: SubmitHandler<FormData> = async (data) => {
    setIsSubmitting(true);
    try {
      const response = await fetch('/api/register', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(data)
      });
      
      if (!response.ok) throw new Error('Registration failed');
      
      // Gérer le succès
      console.log('User registered:', await response.json());
    } catch (error) {
      console.error('Registration error:', error);
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)} className="space-y-4 max-w-md">
      <div>
        <label htmlFor="name" className="block text-sm font-medium text-gray-700">
          Nom
        </label>
        <input
          id="name"
          {...register('name')}
          className={clsx(
            'mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500',
            errors.name && 'border-red-500'
          )}
        />
        {errors.name && (
          <p className="mt-1 text-sm text-red-600">{errors.name.message}</p>
        )}
      </div>

      <div>
        <label htmlFor="email" className="block text-sm font-medium text-gray-700">
          Email
        </label>
        <input
          id="email"
          type="email"
          {...register('email')}
          className={clsx(
            'mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500',
            errors.email && 'border-red-500'
          )}
        />
        {errors.email && (
          <p className="mt-1 text-sm text-red-600">{errors.email.message}</p>
        )}
      </div>

      <div>
        <label htmlFor="password" className="block text-sm font-medium text-gray-700">
          Mot de passe
        </label>
        <input
          id="password"
          type="password"
          {...register('password')}
          className={clsx(
            'mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500',
            errors.password && 'border-red-500'
          )}
        />
        {errors.password && (
          <p className="mt-1 text-sm text-red-600">{errors.password.message}</p>
        )}
      </div>

      <div className="flex items-center">
        <input
          id="acceptTerms"
          type="checkbox"
          {...register('acceptTerms')}
          className="h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
        />
        <label htmlFor="acceptTerms" className="ml-2 block text-sm text-gray-900">
          J'accepte les termes et conditions
        </label>
      </div>
      {errors.acceptTerms && (
        <p className="text-sm text-red-600">{errors.acceptTerms.message}</p>
      )}

      <button
        type="submit"
        disabled={isSubmitting}
        className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50"
      >
        {isSubmitting ? 'Inscription...' : 'S'inscrire'}
      </button>
    </form>
  );
};

La compétence connecte automatiquement react-hook-form, la validation zod, les attributs d'accessibilité et les états de chargement.

Génération Dynamique d'Interfaces Utilisateur à l'aide de Techniques Avancées

Logique de Rendu Conditionnel

Certaines interfaces utilisateur nécessitent des sections conditionnelles basées sur des paramètres. La compétence prend en charge les conditions dans les définitions de champs :

Générez un formulaire de profil utilisateur où le champ "company" n'apparaît que si "accountType" est "business".

Ceci produit un formulaire avec rendu conditionnel :

{accountType === 'business' && (
  <div>
    <label htmlFor="company">Entreprise</label>
    <input id="company" {...register('company')} />
  </div>
)}

Composition de Composants

Construisez des interfaces utilisateur complexes en chaînant les appels de compétences :

D'abord, générez un composant DashboardLayout avec une barre latérale et un en-tête. Ensuite, générez un composant StatCard pour les métriques. Enfin, appliquez le thème sombre aux deux.

Claude Code les exécute séquentiellement, en passant le contexte entre les appels. Le composant de mise en page est disponible lors de la génération de la carte, assurant une intégration appropriée.

Changement de Thème à l'Exécution

Configurez la compétence pour qu'elle génère du code sensible au thème :

{
  "building-ui": {
    "command": "node",
    "args": ["dist/index.js"],
    "env": {
      "UI_LIBRARY": "react",
      "STYLE_SYSTEM": "tailwind",
      "THEME_CONFIG": "~/project/themes.json",
      "SUPPORT_THEME_TOGGLE": "true"
    }
  }
}

Les composants générés incluent désormais un wrapper ThemeProvider :

// App.tsx
import { ThemeProvider } from './ThemeProvider';
import { DashboardLayout } from './DashboardLayout';

function App() {
  return (
    <ThemeProvider defaultTheme="light" enableSystem>
      <DashboardLayout />
    </ThemeProvider>
  );
}

Débogage et Itération des Compétences de Construction d'Interfaces Utilisateur

Afficher le Code Généré dans .claude-cache

Claude Code met en cache les sorties des compétences. Inspectez-les :

# macOS/Linux
cat ~/.cache/claude-code/last-skill-output.tsx

# Windows
type %APPDATA%\claude-code\last-skill-output.tsx

Si le code généré ne correspond pas aux attentes, affinez vos paramètres. Ajoutez plus de spécificité :

Au lieu de : "Générer une carte"
Utilisez : "Générer une carte avec un remplissage de 16px, un rayon de bordure de 8px et une ombre subtile"

Outrepasser les Valeurs par Défaut des Compétences par Projet

Créez .claude-ui-config.json à la racine de votre projet :

{
  "uiLibrary": "vue",
  "styleSystem": "css-modules",
  "themeConfig": "./design-tokens.json"
}

Ceci remplace les paramètres MCP globaux pour ce projet uniquement.

Gestion des Versions des Compétences

Lorsque vous mettez à jour la compétence building-ui, étiquetez les versions :

cd skills/building-ui
npm version patch  # Ou minor/major
git tag -a v1.1.0 -m "Added support for Vue 3.5"

Mettez à jour la configuration de Claude Code pour épingler les versions :

{
  "mcpServers": {
    "building-ui": {
      "command": "node",
      "args": ["/path/to/skills/building-ui-v1.1.0/dist/index.js"]
    }
  }
}

Ceci empêche les changements disruptifs d'affecter les flux de travail de production.

Conclusion

Les compétences Claude Code pour la construction d'interfaces utilisateur convertissent le langage naturel en composants, mises en page, thèmes et formulaires prêts pour la production avec une précision chirurgicale. En investissant 15 minutes dans la configuration, vous obtenez une boîte à outils réutilisable qui assure la cohérence du design, élimine le code répétitif et accélère le développement de fonctionnalités. Commencez avec les quatre outils principaux – générer un composant, créer une mise en page, appliquer un thème et générer un formulaire – puis étendez-les pour votre système de conception spécifique.

Lorsque vos compétences génèrent des interfaces utilisateur consommant des API, validez ces points de terminaison avec Apidog pour vous assurer que vos interfaces construites par l'IA communiquent avec des backends fiables.

bouton

Pratiquez le Design-first d'API dans Apidog

Découvrez une manière plus simple de créer et utiliser des API

S'inscrire gratuitementTélécharger