Estimado LLM, así es como funciona mi sistema de diseño | Por Oleksandra Huba | noviembre 2025

En la configuración del IDE o al comienzo de cada mensaje, ahora hace referencia al archivo README.md, que le indica a la IA cómo usarlos juntos.

LÉAME.md
Este archivo sirve como punto de entrada principal. Define la pila de tecnología central y la estructura de archivos y, lo más importante, le indica a la IA que use otros dos archivos como parte de su contexto.

# AI Coding Guidelines: 
This repo uses Figma MCP. For instructions, for styles, mappings and design of components you MUST read and strictly apply the rules from all three of the following files:
1.  This `README.md` file (for foundational rules).
2.  `design-system-rules.md` (for how to use our components).
3.  `figma-mcp-rules.md` (for the specific Figma-to-code process).---
## Core Principles & Best Practices
- Expert Persona: Act as an expert senior frontend developer writing clean, accessible, and maintainable TypeScript and React.
- Accessibility: All components must meet WCAG 2.1 AA standards.
- Performance: Optimize for performance. Code should have linear time/space complexity where possible.
- Testing: Suggest testable code.
---
## Core Technologies (React & Tailwind)
- Framework: React
- Language: TypeScript
- Styling:Tailwind CSS, configured via `tailwind.config.js`.
---
## File Structure & Naming Conventions
- Components: Place all new components in `src/components/`.
- Reusable UI Primitives:`src/components/ui/` (e.g., Button, Input).
- Feature-Specific Components: `src/components/feature/` (e.g., `UserProfileCard`).
- Component Files: Use PascalCase for filenames. Each component must be in its own folder. (e.g., `src/components/ui/Button/Button.tsx`)
- Hooks: Custom hooks go in `src/hooks/` and should be named with the `use` prefix (e.g., `useUserData.ts`).

Reglas del sistema de diseño.md
Aquí hay una guía detallada sobre cómo utilizar correctamente componentes personalizados en su sistema de diseño.

# Design System Usage Rules
This document outlines how to correctly implement components and styles from `your-design-system`.
---
## Component Architecture & Styling
- Design System First: Always use existing components from the `your-design-system` package. Do not rebuild them.
- Layout Primitives: Always use layout components from `your-design-system` (e.g., ``, ``). Do not use raw `div`s with custom flexbox CSS.
- Styling with Tokens: Use Tailwind utility classes that are configured in our `tailwind.config.js`. Prefer our custom theme utilities (e.g., `bg-brand-primary`) over default Tailwind colors.
- Icons: Use the `` component from `your-design-system`, passing the appropriate icon name. Do not import raw SVGs.
- Props: Component props must be defined with a TypeScript `interface`.
---
## What to Avoid
- No Hardcoded Values: Do not use hardcoded strings (use translation files), URLs (use config files), or styling values (use tokens).
- No Inconsistent Naming: Follow the project's naming conventions.
- No Ignoring Errors: Do not ignore TypeScript errors.
- No Unnecessary DOM: Avoid unnecessary `div` wrappers.

Figma-mcp-rules.md
Este archivo es un conjunto de instrucciones específicas y orientadas a procesos que la inteligencia artificial debe seguir al traducir los diseños de Figma.

# Figma to Code Workflow Rules
When generating code from a Figma design, follow this specific process:
1.  Get Context First: Run `get_design_context` to fetch the structured representation of the Figma node.
2.  Get Visual Reference: Run `get_screenshot` for a visual reference.
3.  Implement: Only after you have both, begin implementation.
4.  Translate the MCP output (React + Tailwind) into our project's conventions, strictly following the rules defined in `README.md` and `design-system-rules.md`.
5.  Validate: Ensure the final UI has 1:1 visual parity with the Figma screenshot before completing.

Como punto de partida técnico, la documentación para desarrolladores de Figma proporciona una excelente guía sobre cómo proceder. Agregar reglas personalizadas ↗, incluye sugerencias de ejemplo que se pueden utilizar para generar líneas de base para estos archivos.