# Loslegen

Von Null bis zu einer Feitio-Seite in wenigen Schritten. Wählen Sie Ihren Weg; beide führen an den gleichen Ort.

## Zwei Wege

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

## Um zu entwerfen

1.  **Lies das Konzept.**
    
    Die drei Werte und die drei "Niemals"-Regeln entscheiden über alles, was die Regeln nicht abdecken. Zehn Minuten, und der Rest ergibt Sinn. [Konzept](/de/design/conceito/)
    
2.  **Beginne mit dem Handy und mit den Worten.**
    
    Vor jedem Kasten: Was der Bildschirm sagen muss und was die Hauptaktion ist, auf einem schmalen Bildschirm. Eine Hauptaktion pro Bildschirm.
    
3.  **Wähle die Dichte.**
    
    Eine Seite zum Lesen atmet; eine Arbeitsseite mit Tabellen und Formularen ist kompakt.
    
4.  **Baue mit Komponenten, nicht mit Kästen.**
    
    Jede Komponente sagt, wann man sie verwenden soll und vor allem, wann nicht. Wenn nichts passt, schaut euch die Muster an.
    
5.  **Prüfe bei Tag, bei Nacht, auf dem Handy und nur mit der Tastatur.**
    
    Und nehmt eine Sache heraus, bevor ihr es als fertig bezeichnest. Bei Zweifel: Nehm sie raus.
    

## Um zu bauen

1.  **Installiere.**
    
    Oder kopiert den `css/` Ordner und das `icons/sprite.svg` in euer Projekt: Feitio ist plain CSS.
    
    ```shell
    npm install @feitio/core
    ```
    
    ```shell
    pnpm add @feitio/core
    ```
    
    ```shell
    yarn add @feitio/core
    ```
    
    ```shell
    bun add @feitio/core
    ```
    
2.  **Lade die Schriften und das CSS.**
    
    Die Schriften kommen mit, in `fonts.css`, ohne etwas von einer anderen Seite zu laden; wer die Schriften schon selbst ausliefert, lässt diese Datei weg.
    
    ```html
    <link rel="stylesheet" href="feitio/css/fonts.css">
    <link rel="stylesheet" href="feitio/css/feitio.css">
    ```
    
3.  **Nutze die Komponenten.**
    
    HTML mit den Klassen von Feitio, die Astro-Komponenten (`@feitio/astro`) oder die React-Komponenten (`@feitio/react`). Alle drei ergeben dasselbe 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.  **Werte nur aus den Tokens.**
    
    Keine Farbe, kein Abstand oder keine Dauer per Hand geschrieben.
    
    ```css
    .minha-area {
      padding: var(--feitio-space-5) var(--feitio-space-4);
      background: var(--feitio-color-surface-raised);
    }
    ```
    
5.  **Prüfe.**
    
    Feitio testet bereits Kontrast und Icons; auf eurer Seite läuft axe-core durch und man geht alles nur mit der Tastatur durch.
    

## Theme, Mode, Dichte und Motion

Alle über Attribute, auf jedem Element, und alles transitioniert, wenn es sich ändert.

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

### Eine Fassade für externe Arbeit

Erstellt `tokens/themes/<name>.light.tokens.json` füllt die gleichen Farbrollen wie das Home-Theme, läuft `bun run build` und `bun run check` (Kontrast muss bestehen) und nutzt `data-theme="<name>"`. Nur die Farben ändern sich; Nacht kommt, wenn die Arbeit es verlangt.

## Für KI-Agenten

Wenn ein Agent das Baut, liest er diese zuerst:

-   `AGENTS.md`: die Regeln für diejenigen, die am Repository arbeiten.
-   `skills/feitio/SKILL.md`: wie man mit Feitio eine Schnittstelle baut und was man niemals tun sollte.
-   Die Tokens in JSON (`tokens/`) und auf der veröffentlichten Seite jede Seite auch in Markdown plus ein `llms.txt`.

Was jede Datei enthält, mit ihrem Link: [Für Agenten](/de/dev/agentes/).