# Comenzar

De cero a una página Feitio en pocos pasos. Elige tu camino; ambos terminan en el mismo lugar.

## Dos caminos

[**To design**You will think through a screen before it exists: what to read, in what order, and what not to do.](#desenhar) [**To build**You will build the page: install, load the CSS, pick theme and density, use the components.](#programar)

## Para diseñar

1.  **Lee el Concepto.**
    
    Los tres valores y los tres "nunca" deciden todo lo que no cubren las reglas. Diez minutos, y el resto tiene sentido. [Concepto](/es/design/conceito/)
    
2.  **Empieza por el móvil y por las palabras.**
    
    Antes de cualquier caja: lo que debe decir la pantalla y cuál es la acción principal, en una pantalla estrecha. Una sola acción principal por pantalla.
    
3.  **Elige la densidad.**
    
    Una página para leer respira; una pantalla de trabajo, con tablas y formularios, es compacta.
    
4.  **Construye con componentes, no con cajas.**
    
    Cada componente indica cuándo usarlo y, sobre todo, cuándo no. Si ninguno encaja, mira los patrones.
    
5.  **Revisa de día, de noche, en el móvil y solo con el teclado.**
    
    Y saca una cosa antes de llamarlo terminado. Cuando hay duda, sácala.
    

## Para construir

1.  **Instala.**
    
    O copia la carpeta `css/` y el archivo `icons/sprite.svg` en tu proyecto: Feitio es CSS plano.
    
    ```shell
    npm install @feitio/core
    ```
    
    ```shell
    pnpm add @feitio/core
    ```
    
    ```shell
    yarn add @feitio/core
    ```
    
    ```shell
    bun add @feitio/core
    ```
    
2.  **Carga las fuentes y el CSS.**
    
    Las fuentes vienen incluidas, en `fonts.css`, sin pedir nada a otro sitio; si ya sirves las fuentes a tu manera, sáltate ese archivo.
    
    ```html
    <link rel="stylesheet" href="feitio/css/fonts.css">
    <link rel="stylesheet" href="feitio/css/feitio.css">
    ```
    
3.  **Usa los componentes.**
    
    HTML con las clases de Feitio, los componentes de Astro (`@feitio/astro`) o los de React (`@feitio/react`). Los tres dan el mismo HTML.
    
    ```html
    <button type="submit" class="feitio-button" data-variant="primary">Salvar alterações</button>
    ```
    
    ```jsx
    import { Button } from '@feitio/react';
    
    <Button variant="primary" type="submit">Salvar alterações</Button>
    ```
    
4.  **Valores solo de los tokens.**
    
    Sin color, espacio o duración escritos a mano.
    
    ```css
    .minha-area {
      padding: var(--feitio-space-5) var(--feitio-space-4);
      background: var(--feitio-color-surface-raised);
    }
    ```
    
5.  **Revisa.**
    
    Feitio ya prueba contraste e iconos; en tu página, ejecuta axe-core y pasa por todo usando solo el teclado.
    

## Tema, modo, densidad y movimiento

Todo mediante atributo, en cualquier elemento, y todo transiciona cuando cambia.

```html
<html lang="pt-BR" data-theme="casa">          <!-- o tema da casa, seguindo o modo do sistema -->
<html lang="pt-BR" data-mode="dark">           <!-- força a noite -->
<section data-density="compact">…</section>   <!-- tela de trabalho -->
<div data-motion="direct">…</div>              <!-- sem transição: arrastar, desenhar -->
```

### Una fachada para trabajo exterior

Cree `tokens/themes/<name>.light.tokens.json` rellenando los mismos roles de color que el tema principal, ejecute `bun run build` y `bun run check` (el contraste debe pasar) y utilice `data-theme="<name>"`. Solo cambian los colores; la noche llega cuando el trabajo lo pide.

## Para agentes de IA

Si un agente es quien construye, lee esto primero:

-   `AGENTS.md`: las reglas para quien trabaja en el repositorio.
-   `skills/feitio/SKILL.md`: cómo construir una interfaz con Feitio y qué nunca hacer.
-   Los tokens en JSON (`tokens/`) y, en el sitio publicado, cada página también en Markdown más un `llms.txt`.

Lo que contiene cada archivo, con su enlace: [Para agentes](/es/dev/agentes/).