Blog

Claude Kodlama Yetenekleri ile Arayüz Geliştirme

Ashley Goolam

Ashley Goolam

21 January 2026

Claude Kodlama Yetenekleri ile Arayüz Geliştirme

Claude Code için yeni her özellik için UI bileşenlerini manuel olarak açıklamak, sınıflar olmadan CSS yazmaya benzer; tekrarlayıcı, tutarsız ve ekipler arasında ölçeklendirilmesi imkansızdır. Claude Code'un UI oluşturmaya yönelik Becerileri, tasarım sisteminizi bileşenleri, düzenleri ve stilleri öngörülebilir parametrelerle ve sıfır hazır kodla oluşturan yürütülebilir araçlara dönüştürür.

UI Oluşturmaya Yönelik Claude Code Becerileri Nelerdir?

Claude Code Becerileri, UI oluşturma mantığını, Claude Code'un Model Bağlam Protokolü (MCP) aracılığıyla keşfedip çağırabileceği yeniden kullanılabilir, sürüm kontrollü araçlar halinde paketler. "Tailwind ile duyarlı bir kart bileşeni oluştur, sola hizalı resim, sağa hizalı metin ve birincil düğme ekle" gibi uzun istemler oluşturmak yerine, bir building-ui becerisini bir kez tanımlar ve onu kısa parametrelerle çağırırsınız: component: "card", layout: "image-left".

Her beceri, şunları tanımlayan bir SKILL.md dosyasından oluşur:

Resmi depodaki building-ui becerisi, bileşenler, düzenler, temalar ve formlar için kalıplar sunar. Ad-hoc UI üretimini sistematik, tekrarlanabilir bir sürece dönüştürür.

claude code skills

Ham İstemlere Göre Temel Avantajlar

💡
Harika API Dokümantasyonu oluşturan mükemmel bir API Test aracı mı istiyorsunuz?

Geliştirici Ekibinizin maksimum üretkenlikle birlikte çalışması için entegre, Hepsi Bir Arada bir platform mu istiyorsunuz?

Apidog tüm taleplerinizi karşılar ve Postman'ın yerini çok daha uygun bir fiyata alır!
düğme

building-ui Becerisini Kurma

Adım 1: Claude Code'u Yükleyin ve MCP'yi Etkinleştirin

Claude Code CLI'yı yüklemediyseniz:

npm install -g @anthropic-ai/claude-code
claude --version  # >= 2.0.70 olmalı

MCP yapılandırma dizinini ve dosyasını oluşturun:

# 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 kodu

Adım 2: building-ui Becerisini Klonlayın ve Oluşturun

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

Bu, TypeScript işleyicilerini dist/index.js'e derler.

Adım 3: Beceriyi Yüklemek için MCP'yi Yapılandırın

~/.config/claude-code/config.json dosyasını düzenleyin:

{
  "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"
      }
    }
  }
}

Önemli:

Adım 4: Kurulumu Doğrulayın

claude

Yüklendikten sonra şunu çalıştırın:

/list-tools

Şunları görmelisiniz:

Mevcut araçlar:
- building-ui:generate-component
- building-ui:create-layout
- building-ui:apply-theme
- building-ui:generate-form

Araçlar görünmezse, günlükleri kontrol edin:

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

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

Yaygın sorunlar:

Becerilerle Temel UI Oluşturma Kalıpları

building-ui becerisi dört ana araç dışa aktarır. Her biri yapılandırılmış parametreleri kabul eder ve oluşturulan kodu döndürür.

1. Bileşen Oluşturma Aracı

Araç adı: building-ui:generate-component
Kullanım durumu: Yeniden kullanılabilir UI bileşenleri oluşturma

Parametreler:

Örnek: Varyantlarla bir düğme oluşturun

Varyantları birincil, ikincil ve dış hat, boyutu orta ve devre dışı durumu desteği olan bir düğme bileşeni oluşturmak için generate-component aracını kullanın.

Oluşturulan çıktı (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>
  );
};

Beceri, ortam değişkenlerinize göre TypeScript türlerini, erişilebilirlik özelliklerini ve stil sınıflarını çıkarır.

2. Düzen Oluşturma Aracı

Araç adı: building-ui:create-layout
Kullanım durumu: Duyarlı sayfa düzenleri oluşturma

Parametreler:

Örnek: Duyarlı kenar çubuğuna sahip kontrol paneli düzeni

Daraltılabilir kenar çubuğu, başlık, ana içerik alanı ve altbilgiye sahip duyarlı bir kontrol paneli düzeni oluşturmak için create-layout kullanın. gap-4 kullanın ve kenar çubuğunu masaüstünde 256px genişliğinde, mobilde tam genişlikte yapın.

Oluşturulan çıktı:

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

Beceri otomatik olarak mobil menü mantığı, kesme noktasına duyarlı sınıflar ve erişilebilir özellikler ekler.

3. Tema Uygulama Aracı

Araç adı: building-ui:apply-theme
Kullanım durumu: Bileşenler arasında tasarım belirteçlerini uygulama

Parametreler:

Örnek: Bir kart bileşenine koyu tema uygulama

Bir Kart bileşenini koyu mod için arduvaz renk paleti, 4 boşluk ölçeği ve Inter yazı tipi ailesiyle yapılandırmak için apply-theme kullanın.

Oluşturulan çıktı:

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

// Card.tsx'te kullanım
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>
  );
};

Beceri, THEME_CONFIG dosyanızı okur ve temaya özgü belirteç eşlemeleri oluşturur. Eğer THEME_CONFIG bir JSON dosyasını işaret ediyorsa:

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

Oluşturulan kod, Tailwind varsayılanları yerine bu tam değerleri kullanır.

4. Form Oluşturma Aracı

Araç adı: building-ui:generate-form
Kullanım durumu: Şemalardan doğrulanmış formlar oluşturma

Parametreler:

Örnek: Doğrulamalı kullanıcı kayıt formu

generate-form'u kullanarak ad (metin, gerekli), e-posta (e-posta, gerekli), parola (parola, minimum 8 karakter) ve acceptTerms (onay kutusu) alanlarına sahip bir kullanıcı kayıt formu oluşturun. onBlur doğrulamasıyla /api/register'a gönderin.

Oluşturulan çıktı:

// 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, 'Ad gerekli'),
  email: z.string().email('Geçersiz e-posta adresi'),
  password: z.string().min(8, 'Parola en az 8 karakter olmalı'),
  acceptTerms: z.boolean().refine(val => val === true, {
    message: 'Şartları kabul etmelisiniz'
  })
});

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('Kayıt başarısız oldu');
      
      // Başarıyı yönet
      console.log('Kullanıcı kaydedildi:', await response.json());
    } catch (error) {
      console.error('Kayıt hatası:', 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">
          Ad
        </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">
          E-posta
        </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">
          Parola
        </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">
          Şartları ve koşulları kabul ediyorum
        </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 ? 'Kaydediliyor...' : 'Kaydol'}
      </button>
    </form>
  );
};

Beceri, react-hook-form, zod doğrulamasını, erişilebilirlik özelliklerini ve yükleme durumlarını otomatik olarak ayarlar.

Gelişmiş Teknikler Kullanarak Dinamik UI Oluşturma

Koşullu Render Mantığı

Bazı UI'lar parametrelere bağlı olarak koşullu bölümler gerektirir. Beceri, alan tanımlarında conditions'ı destekler:

"accountType" "business" ise "company" alanının yalnızca göründüğü bir kullanıcı profili formu oluşturun.

Bu, koşullu render özelliğine sahip bir form üretir:

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

Bileşen Kompozisyonu

Beceri çağrılarını zincirleyerek karmaşık UI'lar oluşturun:

İlk olarak, kenar çubuğu ve başlığı olan bir DashboardLayout bileşeni oluşturun. Ardından, metrikler için bir StatCard bileşeni oluşturun. Son olarak, her ikisine de koyu tema uygulayın.

Claude Code bunları sırayla yürütür ve çağrılar arasında bağlam aktarır. Düzen bileşeni, kart oluşturulurken kullanılabilir, bu da doğru entegrasyonu sağlar.

Çalışma Zamanında Tema Değiştirme

Beceriyi, tema farkında kod yaymak üzere yapılandırın:

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

Şimdi oluşturulan bileşenler bir ThemeProvider sarmalayıcısı içerir:

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

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

UI Oluşturma Becerilerinde Hata Ayıklama ve Yineleme

.claude-cache İçindeki Oluşturulan Kodu Görüntüleme

Claude Code, beceri çıktılarını önbelleğe alır. Onları inceleyin:

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

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

Oluşturulan kod beklentilerle eşleşmiyorsa, parametrelerinizi iyileştirin. Daha fazla ayrıntı ekleyin:

Şunun yerine: "Bir kart oluştur"
Şunu kullanın: "16px dolgu, 8px kenarlık yarıçapı ve hafif bir kutu gölgeli bir kart oluştur"

Proje Başına Beceri Varsayılanlarını Geçersiz Kılma

Proje kök dizininizde .claude-ui-config.json oluşturun:

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

Bu, yalnızca o proje için genel MCP ayarlarını geçersiz kılar.

Becerileri Sürümleme

building-ui becerisini güncellediğinizde, sürümleri etiketleyin:

cd skills/building-ui
npm version patch  # Veya minor/major
git tag -a v1.1.0 -m "Vue 3.5 desteği eklendi"

Sürümleri sabitlemek için Claude Code yapılandırmasını güncelleyin:

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

Bu, bozulmaya yol açan değişikliklerin üretim iş akışlarını etkilemesini önler.

Sonuç

UI oluşturmaya yönelik Claude Code Becerileri, doğal dili cerrahi hassasiyetle üretime hazır bileşenlere, düzenlere, temalara ve formlara dönüştürür. Kuruluma 15 dakika ayırarak, tasarım tutarlılığını sağlayan, hazır kodları ortadan kaldıran ve özellik geliştirmeyi hızlandıran yeniden kullanılabilir bir araç seti elde edersiniz. Dört temel araçla başlayın—bileşen oluşturma, düzen oluşturma, tema uygulama ve form oluşturma—ardından belirli tasarım sisteminiz için bunları genişletin.

Becerileriniz API tüketen UI'lar oluşturduğunda, yapay zeka tarafından oluşturulan arayüzlerinizin güvenilir arka uçlarla iletişim kurduğundan emin olmak için bu uç noktaları Apidog ile doğrulayın.

düğme

API Tasarım-Öncelikli Yaklaşımı Apidog'da Uygulayın

API'leri oluşturmanın ve kullanmanın daha kolay yolunu keşfedin

Ücretsiz Kaydolİndir