كيفية استخدام مهارات Claude البرمجية لبناء واجهات المستخدم

وصف مكونات واجهة المستخدم يدويًا لـ Claude Code لكل ميزة جديدة يشبه كتابة CSS بدون فئات، فهو متكرر وغير متناسق ويستحيل توسيعه عبر الفرق. تحوّل "مهارات Claude Code لبناء واجهة المستخدم" نظام التصميم الخاص بك إلى أدوات قابلة للتنفيذ تولّد المكونات والتخطيطات والأنماط بمعاملات يمكن التنبؤ بها ودون الحاجة إلى كتابة تعليمات برمجية متكررة.

ما هي مهارات Claude Code لبناء واجهة المستخدم؟

مهارات Claude Code تقوم بتجميع منطق إنشاء واجهة المستخدم في أدوات قابلة لإعادة الاستخدام وذات إصدارات يمكن لـ Claude Code اكتشافها واستدعائها عبر بروتوكول سياق النموذج (MCP). بدلاً من صياغة أوامر مطولة مثل "أنشئ مكون بطاقة متجاوب باستخدام Tailwind، وصورة محاذاة لليسار، ونص محاذاة لليمين، وزر أساسي،" يمكنك تعريف مهارة building-ui مرة واحدة واستدعائها بمعاملات موجزة: component: "card", layout: "image-left".

تتكون كل مهارة من ملف SKILL.md يحدد:

اسم الأداة ووصفها: ماذا تفعل المهارة ومتى يجب على Claude استخدامها
مخطط المعلمات: مدخلات آمنة من حيث النوع مع التحقق
أمثلة: أنماط استخدام عملية لتدريب Claude
التنفيذ: المعالج الفعلي الذي يولد الكود

توفر مهارة building-ui من المستودع الرسمي أنماطًا للمكونات والتخطيطات والمظاهر والنماذج. إنها تحول إنشاء واجهة المستخدم العشوائي إلى عملية منهجية وقابلة للتكرار.

المزايا الرئيسية مقارنة بالاستدعاء الأولي

الاتساق: نفس هيكل المكون في كل مرة
سلامة النوع: يتحقق Claude من المعلمات قبل الإنشاء
التحكم في الإصدار: تعيش المهارات في Git، قابلة للتتبع والمراجعة
المشاركة بين الفرق: مهارة واحدة تخدم مؤسسة هندسية بأكملها
الأداء: لا حاجة لإعادة شرح رموز التصميم أو مقاييس التباعد

💡

ترغب في أداة رائعة لاختبار واجهة برمجة التطبيقات (API) تولد توثيق API جميل؟

ترغب في منصة متكاملة وشاملة لفريق المطورين الخاص بك للعمل معًا بأقصى قدر من الإنتاجية؟

Apidog يلبي جميع متطلباتك، و يحل محل Postman بسعر أكثر اقتصادية!

button

إعداد مهارة building-ui

الخطوة 1: تثبيت Claude Code وتمكين MCP

إذا لم تكن قد قمت بتثبيت واجهة سطر الأوامر (CLI) لـ Claude Code:

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

قم بإنشاء دليل وملف تكوين 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

الخطوة 2: استنساخ وبناء مهارة building-ui

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

يقوم هذا بتجميع معالجات TypeScript إلى dist/index.js.

الخطوة 3: تكوين MCP لتحميل المهارة

قم بتعديل ~/.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"
      }
    }
  }
}

هام:

استخدم مسارات مطلقة لـ args. تفشل المسارات النسبية عندما يُطلق Claude العملية
عيّن متغيرات البيئة لتكوين المهارة عالميًا:
UI_LIBRARY: react، vue، svelte
STYLE_SYSTEM: tailwind، styled-components، css-modules
THEME_CONFIG: مسار ملف رموز التصميم الخاص بك

الخطوة 4: التحقق من التثبيت

claude

بمجرد التحميل، قم بتشغيل:

/list-tools

يجب أن ترى:

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

إذا لم تظهر الأدوات، تحقق من السجلات:

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

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

المشكلات الشائعة:

ENOENT: مسار خاطئ إلى dist/index.js
Missing env vars: فشل المهارة في تحميل تكوين السمة
Version mismatch: إصدار Claude Code لا يدعم ميزات MCP

أنماط بناء واجهة المستخدم الأساسية باستخدام المهارات

تقوم مهارة building-ui بتصدير أربع أدوات رئيسية. تقبل كل أداة معلمات منظمة وتُرجع كودًا مُنشأ.

1. أداة توليد المكونات

اسم الأداة: building-ui:generate-component
حالة الاستخدام: إنشاء مكونات واجهة مستخدم قابلة لإعادة الاستخدام

المعلمات:

component: اسم المكون (زر، بطاقة، نافذة منبثقة، إدخال، اختيار)
variants: مصفوفة من متغيرات النمط (أساسي، ثانوي، مخطط)
size: صغير | متوسط | كبير
customProps: سجل بالخصائص الإضافية
children: منطقي (ما إذا كان المكون يقبل عناصر فرعية)

مثال: إنشاء زر بمتغيرات

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

الإخراج المُنشأ (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>
  );
};

تستنتج المهارة أنواع TypeScript وسمات سهولة الوصول وفئات الأنماط بناءً على متغيرات البيئة الخاصة بك.

2. أداة إنشاء التخطيط

اسم الأداة: building-ui:create-layout
حالة الاستخدام: توليد تخطيطات صفحة متجاوبة

المعلمات:

type: شبكة | مرن | مكدس | شريط جانبي
columns: عدد الأعمدة (للشبكة)
gap: مقياس التباعد (0, 1, 2, 3, 4, 5, 6, 8, 10, 12)
responsive: كائن يحتوي على تكوينات نقطة التوقف
areas: مناطق شبكية مُسماة (على سبيل المثال، "header header", "sidebar main")

مثال: تخطيط لوحة القيادة مع شريط جانبي متجاوب

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.

الإخراج المُنشأ:

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

تضيف المهارة تلقائيًا منطق قائمة الجوال، وفئات واعية بنقاط التوقف، وسمات سهولة الوصول.

3. أداة تطبيق المظهر

اسم الأداة: building-ui:apply-theme
حالة الاستخدام: فرض رموز التصميم عبر المكونات

المعلمات:

component: اسم المكون الهدف
colorScheme: فاتح | داكن | نظام
spacingScale: 0-12 (مقياس تباعد Tailwind)
typography: كائن يحتوي على أحجام الخطوط وأوزانها وعائلاتها
customTokens: سجل لخصائص CSS المخصصة

مثال: تطبيق مظهر داكن على مكون بطاقة

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

الإخراج المُنشأ:

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

تقرأ المهارة ملف THEME_CONFIG الخاص بك وتنشئ خرائط رموز خاصة بالمظهر. إذا كان THEME_CONFIG يشير إلى ملف JSON:

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

يستخدم الكود المُنشأ هذه القيم المحددة بدلاً من الإعدادات الافتراضية لـ Tailwind.

4. أداة توليد النماذج

اسم الأداة: building-ui:generate-form
حالة الاستخدام: إنشاء نماذج تم التحقق منها من المخططات

المعلمات:

fields: مصفوفة من تعريفات الحقول (الاسم، النوع، التسمية، التحقق)
submitAction: اسم الدالة أو نقطة نهاية API
validationMode: عند فقدان التركيز | عند التغيير | عند الإرسال
layout: عمودي | أفقي | شبكي

مثال: نموذج تسجيل المستخدم مع التحقق

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.

الإخراج المُنشأ:

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

تقوم المهارة تلقائيًا بربط react-hook-form، والتحقق من zod، وسمات سهولة الوصول، وحالات التحميل.

توليد واجهة المستخدم الديناميكية باستخدام تقنيات متقدمة

منطق العرض الشرطي

تحتاج بعض واجهات المستخدم إلى أقسام شرطية بناءً على المعلمات. تدعم المهارة conditions في تعريفات الحقول:

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

ينتج عن هذا نموذج بعرض شرطي:

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

تركيب المكونات

قم ببناء واجهات مستخدم معقدة عن طريق تسلسل استدعاءات المهارات:

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

يقوم Claude Code بتنفيذ هذه بشكل تسلسلي، ويمرر السياق بين الاستدعاءات. يكون مكون التخطيط متاحًا عند إنشاء البطاقة، مما يضمن التكامل الصحيح.

تبديل المظهر في وقت التشغيل

قم بتكوين المهارة لإصدار كود واعٍ بالمظهر:

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

الآن تتضمن المكونات المُنشأة غلاف ThemeProvider:

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

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

تصحيح الأخطاء وتكرار مهارات بناء واجهة المستخدم

عرض الكود المُنشأ في `.claude-cache`

يقوم Claude Code بتخزين مخرجات المهارات مؤقتًا. افحصها:

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

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

إذا لم يتطابق الكود المُنشأ مع التوقعات، قم بتحسين معلماتك. أضف المزيد من التحديد:

بدلاً من: "أنشئ بطاقة"
استخدم: "أنشئ بطاقة بحشو 16 بكسل، ونصف قطر حدود 8 بكسل، وظل مربع خفيف"

تجاوز الإعدادات الافتراضية للمهارة لكل مشروع

أنشئ ملف .claude-ui-config.json في جذر مشروعك:

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

يتجاوز هذا إعدادات MCP العامة لهذا المشروع فقط.

تحديد إصدارات المهارات

عند تحديث مهارة building-ui، ضع علامات للإصدارات:

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

حدّث تكوين Claude Code لتثبيت الإصدارات:

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

يمنع هذا التغييرات التي قد تؤدي إلى تعطل النظام من التأثير على سير العمل في بيئة الإنتاج.

الخاتمة

مهارات Claude Code لبناء واجهة المستخدم تحوّل اللغة الطبيعية إلى مكونات وتخطيطات ومظاهر ونماذج جاهزة للإنتاج بدقة جراحية. من خلال استثمار 15 دقيقة في الإعداد، تحصل على مجموعة أدوات قابلة لإعادة الاستخدام تفرض اتساق التصميم، وتلغي الكود المتكرر، وتسرّع تطوير الميزات. ابدأ بالأدوات الأساسية الأربع — generate-component و create-layout و apply-theme و generate-form — ثم قم بتوسيعها لتناسب نظام التصميم الخاص بك.

عندما تولد مهاراتك واجهات مستخدم تستهلك واجهات برمجة التطبيقات (APIs)، تحقق من صحة نقاط النهاية هذه باستخدام Apidog لضمان أن الواجهات المبنية بواسطة الذكاء الاصطناعي تتصل بخلفيات موثوقة.

button

ما هي مهارات Claude Code لبناء واجهة المستخدم؟

المزايا الرئيسية مقارنة بالاستدعاء الأولي

إعداد مهارة building-ui

الخطوة 1: تثبيت Claude Code وتمكين MCP

الخطوة 2: استنساخ وبناء مهارة building-ui

الخطوة 3: تكوين MCP لتحميل المهارة

الخطوة 4: التحقق من التثبيت

أنماط بناء واجهة المستخدم الأساسية باستخدام المهارات

1. أداة توليد المكونات

2. أداة إنشاء التخطيط

3. أداة تطبيق المظهر

4. أداة توليد النماذج

توليد واجهة المستخدم الديناميكية باستخدام تقنيات متقدمة

منطق العرض الشرطي

تركيب المكونات

تبديل المظهر في وقت التشغيل

تصحيح الأخطاء وتكرار مهارات بناء واجهة المستخدم

عرض الكود المُنشأ في .claude-cache

تجاوز الإعدادات الافتراضية للمهارة لكل مشروع

تحديد إصدارات المهارات

الخاتمة

عرض الكود المُنشأ في `.claude-cache`