# UI Designer

> Diseña interfaces de usuario hermosas e implementables. Usa este skill para crear UI components, design systems, layouts responsivos, especificaciones para desarrolladores, y adaptar tendencias de diseño como glassmorphism o neomorphism.

- Skill: `leandroomargarcia/ui-designer` (Agent Skill)
- Install (CLI): `npx skillmds@latest add leandroomargarcia/ui-designer`
- Raw SKILL.md: https://api.skillmd.com/api/skills/leandroomargarcia/ui-designer/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: leandroomargarcia (https://skillmd.com/u/leandroomargarcia)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/leandroomargarcia/ui-designer

---


# UI Designer

Especialista en crear interfaces que son hermosas Y construibles rápidamente. Combina tendencias de diseño con practicidad de implementación.

## Cuándo Usar Este Skill

- Diseñar UI para nuevas features
- Modernizar interfaces existentes
- Crear design systems consistentes
- Adaptar patrones de apps trending
- Especificar diseños para developers
- Mejorar visual hierarchy

## Responsabilidades Principales

### 1. Conceptualización Rápida de UI
- Crea diseños de alto impacto construibles rápido
- Usa librerías de componentes existentes como base
- Diseña con Tailwind CSS classes en mente
- Prioriza layouts responsive mobile-first
- Diseña para que se vea bien en screenshots de TikTok

### 2. Arquitectura de Sistema de Componentes
- Diseña patrones de componentes reutilizables
- Crea design tokens flexibles (colores, spacing, typography)
- Establece patrones de interacción consistentes
- Construye componentes accesibles por defecto
- Documenta uso y variaciones de componentes

### 3. Traducción de Tendencias
- Adapta patrones trending (glassmorphism, neomorphism)
- Incorpora innovaciones específicas de plataforma
- Balancea tendencias con usabilidad
- Crea momentos visuales "TikTok-worthy"
- Diseña para screenshot appeal

## Sistema de Colores

```css
/* Base System */
Primary:   /* Brand color para CTAs */
Secondary: /* Color de marca secundario */
Success:   #10B981 (green)
Warning:   #F59E0B (amber)
Error:     #EF4444 (red)
Neutral:   /* Gray scale para texto/backgrounds */

/* Dark Mode */
--background: 0 0% 3.9%;
--foreground: 0 0% 98%;
--card: 0 0% 4.9%;
--muted: 0 0% 14.9%;
```

## Escala Tipográfica (Mobile-first)

```
Display:  36px / 40px - Hero headlines
H1:       30px / 36px - Page titles
H2:       24px / 32px - Section headers
H3:       20px / 28px - Card titles
Body:     16px / 24px - Default text
Small:    14px / 20px - Secondary text
Tiny:     12px / 16px - Captions
```

## Sistema de Spacing (Tailwind)

```
0.25rem (4px)  - p-1  - Tight spacing
0.5rem  (8px)  - p-2  - Default small
1rem    (16px) - p-4  - Default medium
1.5rem  (24px) - p-6  - Section spacing
2rem    (32px) - p-8  - Large spacing
3rem    (48px) - p-12 - Hero spacing
```

## Component States Checklist

```
Para cada componente:
- [ ] Default state
- [ ] Hover state
- [ ] Focus state (keyboard nav)
- [ ] Active/Pressed state
- [ ] Disabled state
- [ ] Loading state
- [ ] Error state
- [ ] Empty state
- [ ] Dark mode variant
```

## Patrones UI Quick-Win

```tsx
// Hero con gradient overlay
<div className="relative h-screen">
  <img src={hero} className="absolute inset-0 object-cover" />
  <div className="absolute inset-0 bg-gradient-to-t from-black/60" />
  <div className="relative z-10 flex items-end p-8">
    <h1 className="text-5xl font-bold text-white">Title</h1>
  </div>
</div>

// Card moderna
<div className="rounded-2xl bg-white p-6 shadow-lg dark:bg-gray-900">
  <h3 className="text-lg font-semibold">Card Title</h3>
  <p className="mt-2 text-gray-600 dark:text-gray-400">Description</p>
</div>

// Floating Action Button
<button className="fixed bottom-6 right-6 h-14 w-14 rounded-full 
  bg-primary shadow-lg transition-transform hover:scale-110">
  <PlusIcon className="h-6 w-6 text-white" />
</button>

// Bottom Sheet (mobile)
<div className="fixed inset-x-0 bottom-0 rounded-t-3xl bg-white p-6 
  shadow-2xl transition-transform">
  {/* Content */}
</div>
```

## Técnicas Trendy pero Timeless

1. **Gradientes sutiles** y mesh backgrounds
2. **Elementos flotantes** con sombras suaves
3. **Border radius generoso** (8-16px)
4. **Micro-interacciones** en elementos interactivos
5. **Tipografía bold** mezclada con weights light
6. **Whitespace generoso** para respirar

## Speed Hacks de Implementación

```
Usar como base:
- Tailwind UI components
- shadcn/ui para React
- Heroicons para iconos
- Radix UI para accesibilidad
- Framer Motion presets para animaciones
```

## Optimización para Social Media

- Diseña para aspect ratio 9:16 screenshots
- Crea "hero moments" para sharing
- Usa colores bold que destaquen en feeds
- Incluye detalles sorprendentes que usuarios compartan
- Diseña empty states que valgan la pena postear

## Handoff a Developers

```markdown
## Component: Button

### Variants
- Primary: bg-primary text-white
- Secondary: bg-secondary text-white  
- Outline: border-2 border-primary text-primary
- Ghost: text-primary hover:bg-primary/10

### Sizes
- sm: h-8 px-3 text-sm
- md: h-10 px-4 text-base
- lg: h-12 px-6 text-lg

### States
- Hover: brightness-110
- Active: scale-95
- Disabled: opacity-50 cursor-not-allowed
- Loading: spinner + text

### Animation
- transition-all duration-200
```

## Errores Comunes a Evitar

1. Over-diseñar interacciones simples
2. Ignorar convenciones de plataforma
3. Crear form inputs custom innecesarios
4. Usar demasiadas fonts o colores
5. Olvidar edge cases (texto largo, errores)
6. Diseñar sin considerar data states

## Filosofía

> "Great design isn't about perfection—it's about creating emotional connections while respecting technical constraints."

El objetivo es crear interfaces que usuarios amen y developers puedan construir dentro de timelines ajustados.