Cách Sử Dụng Kỹ Năng Lập Trình Claude Để Xây Dựng UI

Việc mô tả thủ công các thành phần UI cho Claude Code cho mỗi tính năng mới giống như viết CSS mà không có các lớp: lặp đi lặp lại, không nhất quán và không thể mở rộng quy mô giữa các nhóm. Claude Code Skills để xây dựng UI biến hệ thống thiết kế của bạn thành các công cụ có thể thực thi, tạo ra các thành phần, bố cục và kiểu dáng với các tham số dự đoán được và không có mã mẫu (boilerplate) dư thừa.

Claude Code Skills để xây dựng UI là gì?

Claude Code Skills đóng gói logic tạo UI thành các công cụ có thể tái sử dụng, được kiểm soát phiên bản mà Claude Code có thể phát hiện và gọi thông qua Giao thức Ngữ cảnh Mô hình (Model Context Protocol - MCP). Thay vì tạo các lời nhắc dài dòng như “Tạo một thành phần thẻ phản hồi với Tailwind, hình ảnh căn trái, văn bản căn phải và một nút chính,” bạn chỉ cần định nghĩa một kỹ năng building-ui một lần và gọi nó với các tham số ngắn gọn: component: "card", layout: "image-left".

Mỗi kỹ năng bao gồm một tệp SKILL.md định nghĩa:

• Tên và mô tả công cụ: Kỹ năng làm gì và khi nào Claude nên sử dụng nó
• Lược đồ tham số: Đầu vào an toàn kiểu với xác thực
• Ví dụ: Các mẫu sử dụng cụ thể để huấn luyện Claude
• Triển khai: Trình xử lý thực tế tạo mã

Kỹ năng building-ui từ kho lưu trữ chính thức cung cấp các mẫu cho các thành phần, bố cục, giao diện và biểu mẫu. Nó biến việc tạo UI ngẫu hứng thành một quy trình có hệ thống, có thể lặp lại.

Lợi ích chính so với việc nhắc lệnh thô

• Tính nhất quán: Cấu trúc thành phần giống nhau mọi lúc
• An toàn kiểu: Claude xác thực các tham số trước khi tạo
• Kiểm soát phiên bản: Các kỹ năng nằm trong Git, có thể theo dõi và xem xét
• Chia sẻ trong nhóm: Một kỹ năng phục vụ toàn bộ tổ chức kỹ thuật
• Hiệu suất: Không cần giải thích lại các design token hoặc thang đo khoảng cách

Thiết lập kỹ năng building-ui

Bước 1: Cài đặt Claude Code và Bật MCP

Nếu bạn chưa cài đặt Claude Code CLI:

npm install -g @anthropic-ai/claude-code
claude --version  # Nên lớn hơn hoặc bằng 2.0.70

Tạo thư mục và tệp cấu hình 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

Bước 2: Clone và Build kỹ năng building-ui

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

Thao tác này biên dịch các trình xử lý TypeScript thành dist/index.js.

Bước 3: Cấu hình MCP để tải kỹ năng

Chỉnh sửa ~/.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"
      }
    }
  }
}

Quan trọng:

• Sử dụng đường dẫn tuyệt đối cho args. Đường dẫn tương đối sẽ không hoạt động khi Claude khởi chạy tiến trình.
• Đặt các biến môi trường để cấu hình kỹ năng trên toàn cầu:
• UI_LIBRARY: react, vue, svelte
• STYLE_SYSTEM: tailwind, styled-components, css-modules
• THEME_CONFIG: Đường dẫn đến tệp design token của bạn

Bước 4: Xác minh cài đặt

claude

Sau khi tải, chạy:

/list-tools

Bạn sẽ thấy:

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

Nếu các công cụ không xuất hiện, hãy kiểm tra nhật ký:

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

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

Các vấn đề thường gặp:

• ENOENT: Sai đường dẫn đến dist/index.js
• Thiếu biến môi trường: Kỹ năng không tải được cấu hình giao diện (theme)
• Không khớp phiên bản: Phiên bản Claude Code không hỗ trợ các tính năng MCP

Các mẫu xây dựng UI cốt lõi với kỹ năng

Kỹ năng building-ui xuất ra bốn công cụ chính. Mỗi công cụ chấp nhận các tham số có cấu trúc và trả về mã được tạo.

1. Công cụ tạo thành phần (Generate Component Tool)

Tên công cụ: building-ui:generate-component
Trường hợp sử dụng: Tạo các thành phần UI có thể tái sử dụng

Tham số:

• component: Tên thành phần (button, card, modal, input, select)
• variants: Mảng các biến thể kiểu (primary, secondary, outline)
• size: small | medium | large
• customProps: Bản ghi các thuộc tính bổ sung
• children: Boolean (liệu thành phần có chấp nhận các phần tử con hay không)

Ví dụ: Tạo một nút với các biến thể

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

Đầu ra được tạo (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>
  );
};

Kỹ năng suy ra các kiểu TypeScript, thuộc tính truy cập (accessibility attributes) và các lớp kiểu dáng dựa trên các biến môi trường của bạn.

2. Công cụ tạo bố cục (Create Layout Tool)

Tên công cụ: building-ui:create-layout
Trường hợp sử dụng: Tạo các bố cục trang phản hồi

Tham số:

• type: grid | flex | stack | sidebar
• columns: Số cột (cho grid)
• gap: Thang đo khoảng cách (0, 1, 2, 3, 4, 5, 6, 8, 10, 12)
• responsive: Đối tượng với các cấu hình điểm ngắt (breakpoint configs)
• areas: Các vùng grid được đặt tên (ví dụ: "header header", "sidebar main")

Ví dụ: Bố cục bảng điều khiển (dashboard) với thanh bên phản hồi

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.

Đầu ra được tạo:

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

Kỹ năng tự động thêm logic menu di động, các lớp nhận biết điểm ngắt (breakpoint-aware classes) và các thuộc tính truy cập (accessible attributes).

3. Công cụ áp dụng giao diện (Apply Theme Tool)

Tên công cụ: building-ui:apply-theme
Trường hợp sử dụng: Áp dụng các design token cho các thành phần

Tham số:

• component: Tên thành phần mục tiêu
• colorScheme: light | dark | system
• spacingScale: 0-12 (thang đo khoảng cách của Tailwind)
• typography: Đối tượng với cỡ chữ, độ đậm, họ phông chữ
• customTokens: Bản ghi các thuộc tính CSS tùy chỉnh

Ví dụ: Áp dụng giao diện tối cho một thành phần thẻ

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

Đầu ra được tạo:

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

Kỹ năng đọc tệp THEME_CONFIG của bạn và tạo bản đồ token cụ thể theo giao diện. Nếu THEME_CONFIG trỏ đến một tệp JSON:

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

Mã được tạo sẽ sử dụng các giá trị chính xác này thay vì các giá trị mặc định của Tailwind.

4. Công cụ tạo biểu mẫu (Generate Form Tool)

Tên công cụ: building-ui:generate-form
Trường hợp sử dụng: Tạo các biểu mẫu được xác thực từ các lược đồ

Tham số:

• fields: Mảng định nghĩa trường (tên, kiểu, nhãn, xác thực)
• submitAction: Tên hàm hoặc điểm cuối API
• validationMode: onBlur | onChange | onSubmit
• layout: vertical | horizontal | grid

Ví dụ: Biểu mẫu đăng ký người dùng với xác thực

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.

Đầu ra được tạo:

// 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">
          Tên
        </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">
          Mật khẩu
        </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">
          Tôi chấp nhận các điều khoản và điều kiện
        </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 ? 'Đang đăng ký...' : 'Đăng ký'}
      </button>
    </form>
  );
};

Kỹ năng tự động kết nối react-hook-form, xác thực zod, thuộc tính truy cập (accessibility attributes) và trạng thái tải.

Tạo UI động bằng các kỹ thuật nâng cao

Logic hiển thị có điều kiện

Một số UI cần các phần có điều kiện dựa trên các tham số. Kỹ năng hỗ trợ conditions trong định nghĩa trường:

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

Điều này tạo ra một biểu mẫu với hiển thị có điều kiện:

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

Sáng tác thành phần (Component Composition)

Xây dựng các UI phức tạp bằng cách nối chuỗi các lệnh gọi kỹ năng:

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

Claude Code thực thi các lệnh này theo trình tự, truyền ngữ cảnh giữa các lệnh gọi. Thành phần bố cục có sẵn khi tạo thẻ, đảm bảo tích hợp phù hợp.

Chuyển đổi giao diện (theme) trong thời gian chạy

Cấu hình kỹ năng để phát ra mã nhận biết giao diệ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"
    }
  }
}

Giờ đây, các thành phần được tạo bao gồm một trình bao bọc ThemeProvider:

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

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

Gỡ lỗi và lặp lại các kỹ năng xây dựng UI

Xem mã được tạo trong .claude-cache

Claude Code lưu trữ kết quả đầu ra của kỹ năng. Kiểm tra chúng:

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

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

Nếu mã được tạo không khớp với mong đợi, hãy tinh chỉnh các tham số của bạn. Thêm tính cụ thể hơn:

Thay vì: "Tạo một thẻ"
Sử dụng: "Tạo một thẻ với lề 16px, bán kính bo góc 8px và đổ bóng nhẹ"

Ghi đè mặc định của kỹ năng cho mỗi dự án

Tạo .claude-ui-config.json trong thư mục gốc dự án của bạn:

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

Điều này ghi đè cài đặt MCP toàn cầu chỉ cho dự án đó.

Quản lý phiên bản kỹ năng

Khi bạn cập nhật kỹ năng building-ui, hãy gắn thẻ phiên bản:

cd skills/building-ui
npm version patch  # Hoặc minor/major
git tag -a v1.1.0 -m "Đã thêm hỗ trợ cho Vue 3.5"

Cập nhật cấu hình Claude Code để ghim phiên bản:

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

Điều này ngăn chặn các thay đổi gây lỗi ảnh hưởng đến quy trình làm việc sản xuất.

Kết luận

Claude Code Skills để xây dựng UI chuyển đổi ngôn ngữ tự nhiên thành các thành phần, bố cục, giao diện và biểu mẫu sẵn sàng cho sản xuất với độ chính xác cao. Bằng cách dành 15 phút để thiết lập, bạn có được một bộ công cụ có thể tái sử dụng giúp đảm bảo tính nhất quán trong thiết kế, loại bỏ mã mẫu (boilerplate) và đẩy nhanh quá trình phát triển tính năng. Bắt đầu với bốn công cụ cốt lõi – generate-component, create-layout, apply-theme và generate-form – sau đó mở rộng chúng cho hệ thống thiết kế cụ thể của bạn.

Khi các kỹ năng của bạn tạo ra các UI sử dụng API, hãy xác thực các điểm cuối đó bằng Apidog để đảm bảo các giao diện do AI xây dựng của bạn giao tiếp với các backend đáng tin cậy.