# Commencer

De zéro à une page Feitio en quelques étapes. Choisissez votre chemin ; tous aboutissent au même endroit.

## Deux chemins

[**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)

## Pour concevoir

1.  **Lisez le Concept.**
    
    Les trois valeurs et les trois "nevers" décident de tout ce que ne couvrent pas les règles. Dix minutes, le reste devient logique. [Concepte](/fr/design/conceito/)
    
2.  **Commencez par le mobile et par les mots.**
    
    Avant toute boîte : ce que l'écran doit dire et quelle est l'action principale, sur un écran étroit. Une action principale par écran.
    
3.  **Choisissez la densité.**
    
    Une page pour la lecture respire ; un écran de travail, avec des tableaux et des formulaires, est compacte.
    
4.  **Construisez avec des composants, pas des boîtes.**
    
    Chaque composant indique quand l'utiliser et, avant tout, quand ne pas. Si aucun ne convient, regardez les modèles.
    
5.  **Vérifiez de jour, de nuit, sur mobile et au clavier seul.**
    
    Retirez une chose avant de l'appeler terminée. En cas de doute, retirez-la.
    

## Construire

1.  **Installez.**
    
    Ou copiez le dossier `css/` et le fichier `icons/sprite.svg` dans votre projet : Feitio est du CSS simple.
    
    ```shell
    npm install @feitio/core
    ```
    
    ```shell
    pnpm add @feitio/core
    ```
    
    ```shell
    yarn add @feitio/core
    ```
    
    ```shell
    bun add @feitio/core
    ```
    
2.  **Chargez les polices et le CSS.**
    
    Les polices sont incluses, dans `fonts.css`, sans rien demander à un autre site ; si vous servez déjà les polices à votre façon, ignorez ce fichier.
    
    ```html
    <link rel="stylesheet" href="feitio/css/fonts.css">
    <link rel="stylesheet" href="feitio/css/feitio.css">
    ```
    
3.  **Utilisez les composants.**
    
    Du HTML avec les classes de Feitio, les composants Astro (`@feitio/astro`) ou React (`@feitio/react`). Les trois donnent le même 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.  **Des valeurs issues des tokens, et rien d’autre.**
    
    Aucune couleur, espace ou durée définie à la main.
    
    ```css
    .minha-area {
      padding: var(--feitio-space-5) var(--feitio-space-4);
      background: var(--feitio-color-surface-raised);
    }
    ```
    
5.  **Vérifiez.**
    
    Feitio teste déjà le contraste et les icônes ; sur votre page, exécutez axe-core et naviguez uniquement avec le clavier.
    

## Thème, mode, densité et mouvement

Tout via attribut, sur n'importe quel élément, et tout transitionne lorsqu'il change.

```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 -->
```

### Une façade pour les travaux extérieurs

Créez `tokens/themes/<name>.light.tokens.json` en remplissant les mêmes rôles de couleurs que le thème principal, exécutez `bun run build` et `bun run check` (le contraste doit passer), puis utilisez `data-theme="<name>"`. Seules les couleurs changent ; la nuit arrive lorsque le travail l'exige.

## Pour les agents IA

Si un agent est celui qui construit, il lit ces documents en premier :

-   `AGENTS.md` : les règles pour quiconque travaille sur le dépôt.
-   `skills/feitio/SKILL.md` : comment construire une interface avec Feitio et ce qu'il ne faut jamais faire.
-   Les tokens en JSON (`tokens/`) et, sur le site publié, chaque page également en Markdown plus un `llms.txt`.

Ce que contient chaque fichier, avec son lien : [Pour les agents](/fr/dev/agentes/).