Blog

Cara Menggunakan Kemampuan Kode Claude untuk Membuat UI

Ashley Goolam

Ashley Goolam

21 January 2026

Cara Menggunakan Kemampuan Kode Claude untuk Membuat UI

Mendeskripsikan komponen UI secara manual kepada Claude Code untuk setiap fitur baru seperti menulis CSS tanpa kelas, berulang, tidak konsisten, dan tidak mungkin diskalakan di seluruh tim. Claude Code Skills untuk membangun UI mengubah sistem desain Anda menjadi alat yang dapat dieksekusi yang menghasilkan komponen, tata letak, dan gaya dengan parameter yang dapat diprediksi dan tanpa boilerplate.

Apa itu Claude Code Skills untuk Membangun UI?

Claude Code Skills mengemas logika pembuatan UI menjadi alat yang dapat digunakan kembali dan diberi versi yang dapat ditemukan dan dipanggil oleh Claude Code melalui Model Context Protocol (MCP). Alih-alih membuat prompt yang bertele-tele seperti “Buat komponen kartu responsif dengan Tailwind, gambar rata kiri, teks rata kanan, dan tombol utama,” Anda mendefinisikan keterampilan building-ui sekali dan memanggilnya dengan parameter ringkas: component: "card", layout: "image-left".

Setiap keterampilan terdiri dari file SKILL.md yang mendefinisikan:

Keterampilan building-ui dari repositori resmi menyediakan pola untuk komponen, tata letak, tema, dan formulir. Ini mengubah pembuatan UI ad-hoc menjadi proses yang sistematis dan dapat diulang.

keterampilan kode claude

Keunggulan Utama Dibandingkan Prompting Mentah

💡
Ingin alat Pengujian API yang hebat yang menghasilkan Dokumentasi API yang indah?

Ingin platform All-in-One terintegrasi agar Tim Developer Anda bekerja bersama dengan produktivitas maksimum?

Apidog memenuhi semua permintaan Anda, dan menggantikan Postman dengan harga yang jauh lebih terjangkau!
button

Menyiapkan Keterampilan building-ui

Langkah 1: Instal Claude Code dan Aktifkan MCP

Jika Anda belum menginstal CLI Claude Code:

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

Buat direktori dan file konfigurasi 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
kode claude

Langkah 2: Kloning dan Bangun Keterampilan building-ui

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

Ini mengkompilasi penangan TypeScript ke dist/index.js.

Langkah 3: Konfigurasi MCP untuk Memuat Keterampilan

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

Penting:

Langkah 4: Verifikasi Instalasi

claude

Setelah dimuat, jalankan:

/list-tools

Anda akan melihat:

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

Jika alat tidak muncul, periksa log:

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

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

Masalah umum:

Pola UI Utama dengan Keterampilan

Keterampilan building-ui mengekspor empat alat utama. Masing-masing menerima parameter terstruktur dan mengembalikan kode yang dihasilkan.

1. Alat Pembuat Komponen

Nama alat: building-ui:generate-component
Kasus penggunaan: Membuat komponen UI yang dapat digunakan kembali

Parameter:

Contoh: Membuat tombol dengan varian

Use the generate-component tool to create a button component with variants primary, secondary, and outline, size medium, and support for disabled state.

Output yang dihasilkan (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>
  );
};

Keterampilan ini menyimpulkan tipe TypeScript, atribut aksesibilitas, dan kelas gaya berdasarkan variabel lingkungan Anda.

2. Alat Pembuat Tata Letak

Nama alat: building-ui:create-layout
Kasus penggunaan: Menghasilkan tata letak halaman responsif

Parameter:

Contoh: Tata letak dasbor dengan bilah sisi responsif

Use create-layout to generate a responsive dashboard layout with a collapsible sidebar, header, main content area, and footer. Use gap-4 and make the sidebar 256px wide on desktop, full width on mobile.

Output yang dihasilkan:

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

Keterampilan ini secara otomatis menambahkan logika menu seluler, kelas yang sadar breakpoint, dan atribut yang mudah diakses.

3. Alat Penerapan Tema

Nama alat: building-ui:apply-theme
Kasus penggunaan: Menerapkan token desain di seluruh komponen

Parameter:

Contoh: Terapkan tema gelap ke komponen kartu

Use apply-theme to configure a Card component for dark mode with slate color palette, spacing scale 4, and Inter font family.

Output yang dihasilkan:

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

Keterampilan ini membaca file THEME_CONFIG Anda dan menghasilkan peta token khusus tema. Jika THEME_CONFIG menunjuk ke file JSON:

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

Kode yang dihasilkan menggunakan nilai-nilai ini persis alih-alih default Tailwind.

4. Alat Pembuat Formulir

Nama alat: building-ui:generate-form
Kasus penggunaan: Membuat formulir tervalidasi dari skema

Parameter:

Contoh: Formulir pendaftaran pengguna dengan validasi

Use generate-form to create a user registration form with fields: name (text, required), email (email, required), password (password, min length 8), and acceptTerms (checkbox). Submit to /api/register with onBlur validation.

Output yang dihasilkan:

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

Keterampilan ini secara otomatis menghubungkan react-hook-form, validasi zod, atribut aksesibilitas, dan status pemuatan.

Pembuatan UI Dinamis Menggunakan Teknik Tingkat Lanjut

Logika Rendering Bersyarat

Beberapa UI membutuhkan bagian bersyarat berdasarkan parameter. Keterampilan ini mendukung conditions dalam definisi bidang:

Generate a user profile form where the "company" field only appears if "accountType" is "business".

Ini menghasilkan formulir dengan rendering bersyarat:

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

Komposisi Komponen

Bangun UI yang kompleks dengan merangkai panggilan keterampilan:

First, generate a DashboardLayout component with sidebar and header. Then, generate a StatCard component for metrics. Finally, apply dark theme to both.

Claude Code mengeksekusi ini secara berurutan, meneruskan konteks antar panggilan. Komponen tata letak tersedia saat menghasilkan kartu, memastikan integrasi yang tepat.

Pengalihan Tema Saat Runtime

Konfigurasi keterampilan untuk menghasilkan kode yang peka tema:

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

Sekarang komponen yang dihasilkan menyertakan wrapper ThemeProvider:

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

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

Mendebug dan Mengulang Keterampilan Membangun UI

Lihat Kode yang Dihasilkan di .claude-cache

Claude Code menyimpan cache output keterampilan. Periksalah:

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

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

Jika kode yang dihasilkan tidak sesuai harapan, perbaiki parameter Anda. Tambahkan lebih banyak kekhususan:

Alih-alih: "Hasilkan kartu"
Gunakan: "Hasilkan kartu dengan padding 16px, radius border 8px, dan bayangan kotak yang lembut"

Mengganti Default Keterampilan Per Proyek

Buat .claude-ui-config.json di root proyek Anda:

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

Ini mengganti pengaturan MCP global hanya untuk proyek tersebut.

Versi Keterampilan

Ketika Anda memperbarui keterampilan building-ui, beri tag versi:

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

Perbarui konfigurasi Claude Code untuk menyematkan versi:

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

Ini mencegah perubahan yang merusak memengaruhi alur kerja produksi.

Kesimpulan

Claude Code Skills untuk membangun UI mengubah bahasa alami menjadi komponen, tata letak, tema, dan formulir siap produksi dengan presisi bedah. Dengan menginvestasikan 15 menit dalam penyiapan, Anda mendapatkan toolkit yang dapat digunakan kembali yang menegakkan konsistensi desain, menghilangkan boilerplate, dan mempercepat pengembangan fitur. Mulailah dengan empat alat inti—generate-component, create-layout, apply-theme, dan generate-form—lalu perluas untuk sistem desain spesifik Anda.

Ketika keterampilan Anda menghasilkan UI yang mengonsumsi API, validasi endpoint tersebut dengan Apidog untuk memastikan antarmuka yang dibuat AI Anda berbicara dengan backend yang andal.

button

Mengembangkan API dengan Apidog

Apidog adalah alat pengembangan API yang membantu Anda mengembangkan API dengan lebih mudah dan efisien.

Daftar gratisUnduh