decivo Accord · Open Source, MIT
Eine Wahrheit für euer Design. In Figma, im Code und für Agenten.
decivo Accord hält Farben, Abstände, Komponenten und die Regeln dazu in einem Register in eurem Repository. Ändert jemand einen Wert in Figma, Pencil, Claude Design oder im Code, entsteht ein Vorschlag. Was sicher ist, geht durch. Den Rest entscheidet der Mensch, dem die Eigenschaft gehört. Coding-Agenten lesen dasselbe Register und prüfen sich vor jedem Commit selbst.
$ accord check src/components/Card.tsx
check_change: 1 Verstoß, 1 Muss – vor dem Commit beheben.
D-001 (must): Keine fest eingetragenen Farben in Komponenten
Why: Nur so greifen Änderungen am Register überall,
und Agenten erfinden keine eigenen Farben.
src/components/Card.tsx:12:31 #3c6681 → color.brand (var(--brand))Synchronisieren oder entscheiden.
Sync-Werkzeuge kopieren Werte hin und her, und wer zuletzt schreibt, gewinnt. Accord behandelt jede Änderung als Entscheidung mit einem Besitzer.
| Übliche Token-Synchronisation | decivo Accord | |
|---|---|---|
| Wahrheit | das Werkzeug, das zuletzt geschrieben hat | ein Register in Git, geprüft wie Code |
| Eine Designerin ändert einen Wert | wird in den Code kopiert oder aus dem Code überschrieben | ein Vorschlag; Sicheres geht durch, der Rest geht an den Besitzer |
| Ein neuer Zwischenton | wird ausgeliefert | verletzt die Regel „jede neue Farbe ist eine Entscheidung“; Design entscheidet |
| Eine in Figma gelöschte Variable | verschwindet aus dem Code | Löschungen und Breaking Changes brauchen immer einen Menschen, fest im Code |
| Beide Seiten haben geändert | wer zuletzt schreibt, gewinnt | Dreiwege-Abgleich gegen den letzten abgestimmten Stand |
| Coding-Agenten | raten aus dem Code | lesen Tokens, Verträge und Entscheidungen samt Begründung über MCP |
So funktioniert es.
Accord startet mit dem, was schon da ist. Nichts wird hochgeladen; das Register liegt neben eurem Code.
Installieren
Ein Befehl: npm install -g @decivo/accord-cli. Oder jeden Befehl mit npx aufrufen.
Register anlegen
accord init übernimmt, was da ist: CSS-Variablen, Tailwind v4, shadcn/ui, Token-Dateien, Figma oder Pencil. Was nicht übernommen werden kann, steht als offener Punkt in der Ausgabe und fällt nie still heraus.
Abweichungen sehen
accord diff vergleicht Register und Code, accord figma status Register und Figma, je Kontext hell und dunkel.
Entscheiden
Aus Änderungen werden Vorschläge: übernehmen, zurücksetzen oder verwerfen, auf der Kommandozeile oder in der Web-App. Register, CSS und Changelog ändern sich gemeinsam.
Dabei bleiben
Agenten prüfen sich mit check_change. Die GitHub Action prüft jeden Pull Request und markiert die Zeile mit der Korrektur.
Vier Arbeitsflächen, ein Register.
Accord liest jede Arbeitsfläche und schreibt nie in ein Design-Werkzeug. Wo ein Werkzeug hinterherhinkt, zeigt status das an, und die Menschen dort ziehen nach.
Figma
.fig-Dateien direkt, ohne Plugin und ohne Enterprise-Plan, dazu Figmas DTCG-Export, Tokens Studio und weitere Exporte. Collections, Modes und Aliase.
Pencil
Variablen, Theme-Achsen und fest eingetragene Farben aus .pen-Dateien.
Claude Design
Handoff-Bundles und das Design-System-Projekt. accord design vergleicht und setzt jeden Kontext zurück.
Code
CSS-Variablen, Tailwind v4 @theme, fest eingetragene Farben und Längen in TS, JS und CSS, Komponentenverträge aus shadcn/ui.
Jede Eigenschaft hat einen Besitzer.
Ändert eine andere Seite sie, bekommt der Besitzer einen Vorschlag, keinen Sync. Der Besitz steht in accord.config.yaml: ein Standard pro Gruppe, Ausnahmen pro Token.
Design
Farb- und Typografiewerte, Abstände, visuelle Varianten.
Code
Prop-API, Verhalten, Zustände, Barrierefreiheit in der Umsetzung.
Register
Namen, Regeln, Deprecations, Löschungen und die Besitzregeln selbst.
$ accord figma propose
Vorschlag aus Figma
Weg: Besitzer entscheidet (entscheidet: design)
Weil: verletzt eine Muss-Regel
blue.600: #3c6681 → #2a5d7c [Besitzer design]
✗ D-002 (must): Farben nur aus dem RegisterAgenten raten nicht mehr aus dem Code.
Der MCP-Server gibt jedem Agenten, der MCP spricht, dasselbe Register, mit dem euer Team arbeitet, samt Begründung jeder Regel. Ein KI-Modell braucht Accord nicht; die Prüfungen sind deterministisch.
$ claude mcp add accord -- npx -y @decivo/accord-mcp --root .accord export schreibt dazu AGENTS.md, einen Block für CLAUDE.md und DESIGN.md, erzeugt aus dem Register.
- get_tokens
- Tokens mit ihren CSS-Variablen, je Kontext.
- get_component_contract
- Varianten, Props, Zustände und Slots einer Komponente.
- get_decisions
- Die Regeln, jede mit Begründung und Korrektur.
- check_change
- Prüft eine Änderung vor dem Commit und liefert Verstöße mit Korrektur.
Im eigenen Repository ausprobieren.
Startet mit einem Probelauf: Er zeigt, was Accord findet und schreiben würde, ohne etwas zu ändern.
npm install -g @decivo/accord-cli
accord init --dry-run
accord init
accord diff- Version
- 0.1.0
- Lizenz
- MIT
- Voraussetzungen
- Node.js 22+, git
Häufige Fragen.
Was kostet Accord?
Nichts. Accord ist Open Source unter der MIT-Lizenz, auch für kommerzielle Projekte. Bezahlt wird nur, wenn ihr uns mit dem Einrichten beauftragt.
Brauche ich einen Figma-Enterprise-Plan?
Nein. Accord liest die Variablen direkt aus einer .fig-Datei (in Figma: Datei, Lokale Kopie speichern) oder aus jedem gängigen Export, ohne Plugin und ohne REST-API.
Schreibt Accord in Figma oder Claude Design zurück?
Nein. Accord schreibt nie in ein Design-Werkzeug. Wo ein Werkzeug hinter dem Register liegt, zeigt status das an, und die Menschen im Werkzeug ziehen nach.
Welche Daten verlassen meinen Rechner?
Keine. Accord läuft lokal und in eurer CI. Nur wenn ihr in der GitHub Action eine eigene Webhook-Adresse setzt, geht nach jedem Lauf ein Bericht dorthin: nur Metadaten, nie Quellcode.
Brauche ich ein KI-Modell?
Nein. Die Prüfungen laufen deterministisch ohne Modell. Agenten nutzen Accord über den MCP-Server; kein Anbieter ist Pflicht.
Gibt es eine gehostete Version?
Noch nicht. Die Web-App für Entscheidungen läuft lokal und arbeitet direkt auf euren Repositories.
Welche Formate liest Accord?
DTCG 2025.10 und die ältere Entwurfsnotation, Tokens Studio, CSS-Variablen, Tailwind v4 @theme, shadcn/ui, Figma-Exporte und .fig-Dateien, Pencil-Dateien und Claude-Design-Handoffs. Hell und Dunkel werden je Kontext geprüft.
Wie reif ist Accord?
Accord ist jung. Getestet ist es gegen echte Design-Systeme aus öffentlichen Repositories: 13 Figma-Exporte, 19 Pencil-Projekte, .fig-Dateien, Tokens-Studio- und DTCG-Sets sowie Claude-Design-Handoffs.
Accord in eurem Team einrichten?
Wir richten Register, Besitzregeln und CI mit euch ein und bringen Figma und Code auf einen Stand. 30 Minuten über euer Design-System, unverbindlich.