Extrae los assets del diseño de Figma

Implementa este componente según el diseño de Figma

@skill:figma - Obtén los estilos y colores desde el archivo de diseño

# Linux/Mac - Agrega a ~/.bashrc o ~/.zshrc
export FIGMA_TOKEN="tu-token-personal-de-figma"

# Windows - PowerShell
$env:FIGMA_TOKEN="tu-token-aqui"

# Windows - Permanente
[Environment]::SetEnvironmentVariable("FIGMA_TOKEN", "tu-token", "User")

Prompt: "Extrae todos los iconos del archivo de Figma"

Prompt: "Dame la estructura del componente Button del design system"

Prompt: "Extrae todos los colores y crea un archivo de tema"

Prompt: "Dame las especificaciones del componente Card"

// NO uses placeholders si Figma proporciona el asset
Icon(Icons.placeholder)

// USA el asset directamente desde Figma
Image.network('http://localhost:8080/asset/icon-home.svg')

Prompt guidelines:
- "Implementa EXACTAMENTE como está en Figma"
- "Usa los valores exactos del diseño, sin aproximaciones"
- "Mantén todos los espaciados y medidas del diseño original"

Prompt: "Usa los componentes de /lib/design_system cuando sea posible.
Si el componente no existe, créalo basándote en el diseño de Figma."

Container(
  color: Color(0xFF2196F3), // Valor hardcodeado
  padding: EdgeInsets.all(16),
)

Container(
  color: AppColors.primary, // Token desde Figma
  padding: AppSpacing.medium, // Token desde Figma
)

---
description: Figma MCP server rules
globs:
alwaysApply: true
---

## Reglas de Figma MCP Server

- El servidor Figma MCP proporciona un endpoint de assets que puede servir imágenes y SVGs
- IMPORTANTE: Si el servidor MCP de Figma retorna una fuente localhost para una imagen o SVG, usa esa fuente directamente
- IMPORTANTE: NO importes/agregues nuevos paquetes de iconos, todos los assets deben venir del payload de Figma
- IMPORTANTE: NO uses o crees placeholders si se proporciona una fuente localhost

## Reglas de Calidad

- IMPORTANTE: Siempre usa componentes de `/lib/design_system` cuando sea posible
- Prioriza la fidelidad a Figma para coincidir exactamente con los diseños
- Evita valores hardcodeados, usa tokens de diseño de Figma donde estén disponibles
- Sigue los requisitos WCAG para accesibilidad
- Agrega documentación a los componentes
- Coloca componentes UI en `/lib/design_system`; evita estilos inline a menos que sea realmente necesario

# Figma Configuration
FIGMA_TOKEN=tu-token-personal-de-figma
FIGMA_FILE_ID=id-del-archivo-de-figma

Prompt: "Del archivo de Figma [URL], extrae todos los iconos y guárdalos en assets/icons/"

Prompt: "Extrae los colores del design system de Figma y crea un AppTheme en lib/config/theme/"

Prompt: "Implementa el componente ProductCard exactamente como está en Figma, usando el design system existente donde sea posible"

Prompt: "Implementa la pantalla Home según el diseño de Figma. Divide en componentes reutilizables."

Prompt: "Extrae los colores, tipografías y espaciados del design system de Figma"

// lib/config/theme/app_colors.dart
class AppColors {
  // Extraído desde Figma
  static const primary = Color(0xFF2196F3);
  static const secondary = Color(0xFFFFC107);
  static const background = Color(0xFFF5F5F5);
  // ...
}

// lib/config/theme/app_spacing.dart
class AppSpacing {
  static const small = 8.0;
  static const medium = 16.0;
  static const large = 24.0;
}

Prompt: "Implementa el componente Button del design system de Figma con todas sus variantes"

// lib/design_system/button.dart
class AppButton extends StatelessWidget {
  final String label;
  final VoidCallback? onPressed;
  final ButtonVariant variant;

  const AppButton({
    Key? key,
    required this.label,
    this.onPressed,
    this.variant = ButtonVariant.primary,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: onPressed,
      style: _getStyle(),
      child: Text(label),
    );
  }

  ButtonStyle _getStyle() {
    switch (variant) {
      case ButtonVariant.primary:
        return ElevatedButton.styleFrom(
          backgroundColor: AppColors.primary,
          padding: const EdgeInsets.symmetric(
            horizontal: AppSpacing.large,
            vertical: AppSpacing.medium,
          ),
        );
      case ButtonVariant.secondary:
        return ElevatedButton.styleFrom(
          backgroundColor: AppColors.secondary,
        );
    }
  }
}

Prompt: "Usando figma, extrae el componente ProductCard e impleméntalo con mvvm para la app de e-commerce"