Comenzar

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

En esta página

Dos caminos

To designYou will think through a screen before it exists: what to read, in what order, and what not to do. To buildYou will build the page: install, load the CSS, pick theme and density, use the components.

Para diseñar

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
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.
Elige la densidad.
Una página para leer respira; una pantalla de trabajo, con tablas y formularios, es compacta.
Construye con componentes, no con cajas.
Cada componente indica cuándo usarlo y, sobre todo, cuándo no. Si ninguno encaja, mira los patrones.
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

Instala.
O copia la carpeta css/ y el archivo icons/sprite.svg en tu proyecto: Feitio es CSS plano.
```
npm install @feitio/core
```
```
pnpm add @feitio/core
```
```
yarn add @feitio/core
```
```
bun add @feitio/core
```
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">
```

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>

React

import { Button } from '@feitio/react';

<Button variant="primary" type="submit">Salvar alterações</Button>

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

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.