Claude Code Skills nutzen: UI erstellen

UI-Komponenten für jede neue Funktion Claude Code manuell zu beschreiben, ist wie CSS ohne Klassen zu schreiben: repetitiv, inkonsistent und unmöglich teamübergreifend zu skalieren. Claude Code Skills für den Aufbau von UI verwandeln Ihr Designsystem in ausführbare Tools, die Komponenten, Layouts und Stile mit vorhersehbaren Parametern und ohne Boilerplate generieren.

Was sind Claude Code Skills für den Aufbau von UI?

Claude Code Skills verpacken UI-Generierungslogik in wiederverwendbare, versionierte Tools, die Claude Code über das Model Context Protocol (MCP) entdecken und aufrufen kann. Anstatt umständliche Prompts zu erstellen wie „Erstelle eine responsive Kartenkomponente mit Tailwind, einem linksbündigen Bild, rechtsbündigem Text und einem primären Button“, definieren Sie einmal einen building-ui-Skill und rufen ihn mit prägnanten Parametern auf: component: "card", layout: "image-left".

Jeder Skill besteht aus einer SKILL.md-Datei, die Folgendes definiert:

• Tool-Name und -Beschreibung: Was der Skill tut und wann Claude ihn verwenden sollte
• Parameterschema: Typensichere Eingaben mit Validierung
• Beispiele: Konkrete Anwendungsmuster zum Trainieren von Claude
• Implementierung: Der eigentliche Handler, der Code generiert

Der building-ui-Skill aus dem offiziellen Repository bietet Muster für Komponenten, Layouts, Themes und Formulare. Er verwandelt die Ad-hoc-UI-Generierung in einen systematischen, wiederholbaren Prozess.

Wesentliche Vorteile gegenüber rohem Prompting

• Konsistenz: Jedes Mal dieselbe Komponentenstruktur
• Typensicherheit: Claude validiert Parameter vor der Generierung
• Versionskontrolle: Skills leben in Git, nachverfolgbar und überprüfbar
• Team-Sharing: Ein Skill dient einer gesamten Engineering-Organisation
• Performance: Keine Notwendigkeit, Designtokens oder Abstands-Skalen neu zu erklären

Einrichtung des building-ui Skills

Schritt 1: Claude Code installieren und MCP aktivieren

Falls Sie die Claude Code CLI noch nicht installiert haben:

npm install -g @anthropic-ai/claude-code
claude --version  # Should be >= 2.0.70

Erstellen Sie das MCP-Konfigurationsverzeichnis und die Datei:

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

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

Schritt 2: Den building-ui Skill klonen und bauen

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

Dadurch werden die TypeScript-Handler in dist/index.js kompiliert.

Schritt 3: MCP konfigurieren, um den Skill zu laden

Bearbeiten Sie ~/.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"
      }
    }
  }
}

Wichtig:

• Verwenden Sie absolute Pfade für args. Relative Pfade schlagen fehl, wenn Claude den Prozess startet.
• Legen Sie Umgebungsvariablen fest, um den Skill global zu konfigurieren:
• UI_LIBRARY: react, vue, svelte
• STYLE_SYSTEM: tailwind, styled-components, css-modules
• THEME_CONFIG: Pfad zu Ihrer Design-Token-Datei

Schritt 4: Installation überprüfen

claude

Nach dem Laden ausführen:

/list-tools

Sie sollten Folgendes sehen:

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

Falls die Tools nicht erscheinen, überprüfen Sie die Logs:

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

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

Häufige Probleme:

• ENOENT: Falscher Pfad zu dist/index.js
• Fehlende Umgebungsvariablen: Skill kann Theme-Konfiguration nicht laden
• Versionskonflikt: Claude Code-Version unterstützt MCP-Funktionen nicht

Kernmuster für den Aufbau von UI mit Skills

Der building-ui-Skill exportiert vier primäre Tools. Jedes akzeptiert strukturierte Parameter und gibt generierten Code zurück.

1. Tool zur Komponenten-Generierung

Tool-Name: building-ui:generate-component
Anwendungsfall: Wiederverwendbare UI-Komponenten erstellen

Parameter:

• component: Komponentenname (Button, Karte, Modal, Input, Select)
• variants: Array von Stilvarianten (primary, secondary, outline)
• size: small | medium | large
• customProps: Datensatz zusätzlicher Eigenschaften
• children: Boolean (ob die Komponente Kinder akzeptiert)

Beispiel: Einen Button mit Varianten erstellen

Verwenden Sie das generate-component-Tool, um eine Button-Komponente mit den Varianten primary, secondary und outline, der Größe medium und Unterstützung für den disabled-Zustand zu erstellen.

Generierte Ausgabe (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>
  );
};

Der Skill leitet TypeScript-Typen, Barrierefreiheitsattribute und Styling-Klassen basierend auf Ihren Umgebungsvariablen ab.

2. Tool zur Layout-Erstellung

Tool-Name: building-ui:create-layout
Anwendungsfall: Responsive Seitenlayouts generieren

Parameter:

• type: grid | flex | stack | sidebar
• columns: Anzahl der Spalten (für Grid)
• gap: Abstands-Skala (0, 1, 2, 3, 4, 5, 6, 8, 10, 12)
• responsive: Objekt mit Breakpoint-Konfigurationen
• areas: Benannte Grid-Bereiche (z.B. „header header“, „sidebar main“)

Beispiel: Dashboard-Layout mit responsiver Seitenleiste

Verwenden Sie create-layout, um ein responsives Dashboard-Layout mit einer einklappbaren Seitenleiste, Header, Hauptinhaltsbereich und Footer zu generieren. Verwenden Sie gap-4 und machen Sie die Seitenleiste auf dem Desktop 256px breit, auf Mobilgeräten die volle Breite.

Generierte Ausgabe:

// 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>
  );
};

Der Skill fügt automatisch Logik für mobile Menüs, Breakpoint-sensitive Klassen und barrierefreie Attribute hinzu.

3. Tool zum Anwenden von Themes

Tool-Name: building-ui:apply-theme
Anwendungsfall: Designtokens komponentenübergreifend durchsetzen

Parameter:

• component: Zielkomponentenname
• colorScheme: light | dark | system
• spacingScale: 0-12 (Tailwind-Abstandsskala)
• typography: Objekt mit Schriftgrößen, -stärken, -familien
• customTokens: Datensatz von benutzerdefinierten CSS-Eigenschaften

Beispiel: Dunkles Theme auf eine Kartenkomponente anwenden

Verwenden Sie apply-theme, um eine Kartenkomponente für den Dunkelmodus mit einer Schieferfarbpalette, Abstands-Skala 4 und der Schriftfamilie Inter zu konfigurieren.

Generierte Ausgabe:

// 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'
  }
};

// Usage in 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>
  );
};

Der Skill liest Ihre THEME_CONFIG-Datei und generiert themenspezifische Token-Maps. Wenn THEME_CONFIG auf eine JSON-Datei verweist:

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

Der generierte Code verwendet genau diese Werte anstelle der Tailwind-Standardwerte.

4. Tool zur Formular-Generierung

Tool-Name: building-ui:generate-form
Anwendungsfall: Validierte Formulare aus Schemata erstellen

Parameter:

• fields: Array von Felddefinitionen (Name, Typ, Label, Validierung)
• submitAction: Funktionsname oder API-Endpunkt
• validationMode: onBlur | onChange | onSubmit
• layout: vertical | horizontal | grid

Beispiel: Benutzerregistrierungsformular mit Validierung

Verwenden Sie generate-form, um ein Benutzerregistrierungsformular mit den Feldern zu erstellen: Name (Text, erforderlich), E-Mail (E-Mail, erforderlich), Passwort (Passwort, Mindestlänge 8) und acceptTerms (Checkbox). Senden Sie an /api/register mit onBlur-Validierung.

Generierte Ausgabe:

// 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');

      // Handle success
      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">
          Name
        </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">
          Password
        </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">
          I accept the terms and 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 ? 'Registering...' : 'Register'}
      </button>
    </form>
  );
};

Der Skill verbindet automatisch react-hook-form, zod-Validierung, Barrierefreiheitsattribute und Ladezustände.

Dynamische UI-Generierung mittels fortgeschrittener Techniken

Bedingte Rendering-Logik

Einige UIs benötigen bedingte Abschnitte basierend auf Parametern. Der Skill unterstützt conditions in Felddefinitionen:

Generieren Sie ein Benutzerprofilformular, bei dem das Feld „Unternehmen“ nur erscheint, wenn „Kontotyp“ „Geschäftlich“ ist.

Dies erzeugt ein Formular mit bedingtem Rendering:

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

Komponenten-Komposition

Erstellen Sie komplexe UIs durch Verketten von Skill-Aufrufen:

Generieren Sie zuerst eine DashboardLayout-Komponente mit Seitenleiste und Header. Generieren Sie dann eine StatCard-Komponente für Metriken. Wenden Sie schließlich das dunkle Theme auf beide an.

Claude Code führt diese sequenziell aus und übergibt Kontext zwischen den Aufrufen. Die Layout-Komponente ist bei der Generierung der Karte verfügbar, um eine korrekte Integration sicherzustellen.

Theme-Wechsel zur Laufzeit

Konfigurieren Sie den Skill, um Theme-fähigen Code auszugeben:

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

Generierte Komponenten enthalten nun einen ThemeProvider-Wrapper:

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

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

Debugging und Iteration von Building UI Skills

Generierten Code in .claude-cache anzeigen

Claude Code speichert Skill-Ausgaben im Cache. Überprüfen Sie diese:

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

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

Wenn der generierte Code nicht den Erwartungen entspricht, verfeinern Sie Ihre Parameter. Fügen Sie mehr Spezifität hinzu:

Stattdessen: „Generiere eine Karte“
Verwenden Sie: „Generiere eine Karte mit 16px Padding, 8px Border-Radius und einem subtilen Box-Shadow“

Skill-Standardwerte pro Projekt überschreiben

Erstellen Sie .claude-ui-config.json in Ihrem Projekt-Root-Verzeichnis:

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

Dies überschreibt die globalen MCP-Einstellungen nur für dieses Projekt.

Skills versionieren

Wenn Sie den building-ui-Skill aktualisieren, versehen Sie Versionen mit Tags:

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

Aktualisieren Sie die Claude Code-Konfiguration, um Versionen festzulegen:

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

Dies verhindert, dass Breaking Changes die Produktionsabläufe beeinträchtigen.

Fazit

Claude Code Skills für den Aufbau von UI wandeln natürliche Sprache mit chirurgischer Präzision in produktionsreife Komponenten, Layouts, Themes und Formulare um. Mit einer 15-minütigen Einrichtung erhalten Sie ein wiederverwendbares Toolkit, das Designkonsistenz erzwingt, Boilerplate eliminiert und die Funktionsentwicklung beschleunigt. Beginnen Sie mit den vier Kern-Tools – generate-component, create-layout, apply-theme und generate-form – und erweitern Sie diese dann für Ihr spezifisches Designsystem.

Wenn Ihre Skills API-konsumierende UIs generieren, validieren Sie diese Endpunkte mit Apidog, um sicherzustellen, dass Ihre KI-erstellten Schnittstellen mit zuverlässigen Backends kommunizieren.