Blog

Cómo Usar Claude para Crear Interfaces de Usuario (UI)

Ashley Goolam

Ashley Goolam

21 January 2026

Cómo Usar Claude para Crear Interfaces de Usuario (UI)

Describir manualmente los componentes de la interfaz de usuario a Claude Code para cada nueva característica es como escribir CSS sin clases: repetitivo, inconsistente e imposible de escalar entre equipos. Las Habilidades de Claude Code para la construcción de UI transforman su sistema de diseño en herramientas ejecutables que generan componentes, diseños y estilos con parámetros predecibles y sin código repetitivo.

¿Qué son las Habilidades de Claude Code para la construcción de UI?

Las Habilidades de Claude Code empaquetan la lógica de generación de UI en herramientas reutilizables y versionadas que Claude Code puede descubrir e invocar a través del Protocolo de Contexto del Modelo (MCP). En lugar de elaborar instrucciones detalladas como "Crea un componente de tarjeta responsivo con Tailwind, una imagen alineada a la izquierda, texto alineado a la derecha y un botón primario," usted define una habilidad building-ui una sola vez y la invoca con parámetros concisos: component: "card", layout: "image-left".

Cada habilidad consiste en un archivo SKILL.md que define:

La habilidad building-ui del repositorio oficial proporciona patrones para componentes, diseños, temas y formularios. Transforma la generación ad-hoc de UI en un proceso sistemático y repetible.

habilidades de claude code

Ventajas clave sobre el prompting directo

💡
¿Quiere una excelente herramienta de prueba de API que genere hermosa documentación de API?

¿Quiere una plataforma integrada y todo en uno para que su equipo de desarrolladores trabaje junto con la máxima productividad?

¡Apidog satisface todas sus demandas y reemplaza a Postman a un precio mucho más asequible!
botón

Configuración de la habilidad building-ui

Paso 1: Instalar Claude Code y habilitar MCP

Si no ha instalado Claude Code CLI:

npm install -g @anthropic-ai/claude-code
claude --version  # Debe ser >= 2.0.70

Cree el directorio y el archivo de configuración de 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
código de claude

Paso 2: Clonar y construir la habilidad building-ui

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

Esto compila los manejadores de TypeScript a dist/index.js.

Paso 3: Configurar MCP para cargar la habilidad

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

Crítico:

Paso 4: Verificar la instalación

claude

Una vez cargado, ejecute:

/list-tools

Debería ver:

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

Si las herramientas no aparecen, revise los registros:

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

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

Problemas comunes:

Patrones centrales de construcción de UI con habilidades

La habilidad building-ui exporta cuatro herramientas principales. Cada una acepta parámetros estructurados y devuelve código generado.

1. Herramienta de generación de componentes

Nombre de la herramienta: building-ui:generate-component
Caso de uso: Crear componentes de UI reutilizables

Parámetros:

Ejemplo: Crear un botón con variantes

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

Salida generada (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>
  );
};

La habilidad infiere tipos de TypeScript, atributos de accesibilidad y clases de estilo basadas en sus variables de entorno.

2. Herramienta de creación de diseño (Layout)

Nombre de la herramienta: building-ui:create-layout
Caso de uso: Generar diseños de página responsivos

Parámetros:

Ejemplo: Diseño de panel de control con barra lateral responsiva

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.

Salida generada:

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

La habilidad añade automáticamente lógica de menú móvil, clases sensibles a puntos de interrupción y atributos accesibles.

3. Herramienta de aplicación de tema

Nombre de la herramienta: building-ui:apply-theme
Caso de uso: Forzar tokens de diseño en los componentes

Parámetros:

Ejemplo: Aplicar tema oscuro a un componente de tarjeta

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

Salida generada:

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

La habilidad lee su archivo THEME_CONFIG y genera mapas de tokens específicos del tema. Si THEME_CONFIG apunta a un archivo JSON:

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

El código generado utiliza estos valores exactos en lugar de los predeterminados de Tailwind.

4. Herramienta de generación de formularios

Nombre de la herramienta: building-ui:generate-form
Caso de uso: Crear formularios validados a partir de esquemas

Parámetros:

Ejemplo: Formulario de registro de usuario con validación

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.

Salida generada:

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

La habilidad conecta automáticamente react-hook-form, la validación zod, los atributos de accesibilidad y los estados de carga.

Generación dinámica de UI utilizando técnicas avanzadas

Lógica de renderizado condicional

Algunas UI necesitan secciones condicionales basadas en parámetros. La habilidad soporta conditions en las definiciones de campo:

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

Esto produce un formulario con renderizado condicional:

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

Composición de componentes

Construya UIs complejas encadenando llamadas a habilidades:

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

Claude Code las ejecuta secuencialmente, pasando el contexto entre llamadas. El componente de diseño está disponible al generar la tarjeta, asegurando una integración adecuada.

Cambio de tema en tiempo de ejecución

Configure la habilidad para emitir código consciente del 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"
    }
  }
}

Ahora, los componentes generados incluyen un envoltorio ThemeProvider:

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

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

Depuración e iteración de habilidades de construcción de UI

Ver el código generado en .claude-cache

Claude Code almacena en caché las salidas de las habilidades. Inspéccionelas:

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

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

Si el código generado no coincide con las expectativas, refine sus parámetros. Añada más especificidad:

En lugar de: "Generate a card" (Generar una tarjeta)
Use: "Generate a card with 16px padding, 8px border radius, and a subtle box shadow" (Generar una tarjeta con relleno de 16px, radio de borde de 8px y una sutil sombra de caja)

Anular los valores predeterminados de las habilidades por proyecto

Cree .claude-ui-config.json en la raíz de su proyecto:

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

Esto anula la configuración global de MCP solo para ese proyecto.

Control de versiones de habilidades

Cuando actualice la habilidad building-ui, etiquete las versiones:

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

Actualice la configuración de Claude Code para fijar las versiones:

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

Esto evita que los cambios importantes afecten los flujos de trabajo de producción.

Conclusión

Las Habilidades de Claude Code para la construcción de UI convierten el lenguaje natural en componentes, diseños, temas y formularios listos para producción con precisión quirúrgica. Al invertir 15 minutos en la configuración, obtiene un kit de herramientas reutilizable que impone la consistencia del diseño, elimina el código repetitivo y acelera el desarrollo de características. Comience con las cuatro herramientas principales —generate-component, create-layout, apply-theme y generate-form— y luego extiéndalas para su sistema de diseño específico.

Cuando sus habilidades generen UIs que consumen API, valide esos endpoints con Apidog para asegurar que sus interfaces construidas con IA se comuniquen con backends confiables.

botón

Practica el diseño de API en Apidog

Descubre una forma más fácil de construir y usar APIs

Registrarse gratisDescargar