DAYONE UI hilft Product Designer:innen und Buildern, interne Anwendungen schneller im DAYONE Look umzusetzen.

Statt Farben, Buttons und Formulare jedes Mal neu zu bauen, kannst du die DAYONE Bausteine direkt in dein Projekt holen. Die Komponenten zeigen, was verfügbar ist. Die Anwendung zeigt, wie sich daraus eine typische interne Anwendung zusammensetzt.

Bestehende Anwendung

Installiere DAYONE UI in einer bestehenden Anwendung. Wenn shadcn noch nicht eingerichtet ist, initialisiere es zuerst mit den DAYONE Vorgaben Radix und Nova:

npx shadcn@latest init --base radix --preset nova

npx shadcn@latest add dayone-org/ui/all

Einzelne Komponenten

Einzelne Komponenten installierst du erst, nachdem shadcn im Projekt eingerichtet ist:

npx shadcn@latest add dayone-org/ui/button
npx shadcn@latest add dayone-org/ui/input
npx shadcn@latest add dayone-org/ui/dialog

Wenn ein Agent für dich baut

Du kannst die Installation auch direkt in deinen Prompt aufnehmen. Das ist meist der einfachste Weg, wenn Codex, Cursor oder ein anderer Agent die Anwendung für dich anlegt.

Baue eine interne DAYONE Anwendung in diesem Projekt.

Falls shadcn noch nicht eingerichtet ist:
npx shadcn@latest init --base radix --preset nova

Installiere danach DAYONE UI:
npx shadcn@latest add dayone-org/ui/all

Nutze die vorhandenen DAYONE Komponenten und Styles.

Bestehende Anwendung angleichen

Passe diese Anwendung an DAYONE UI an.

Falls DAYONE UI noch nicht installiert ist:
npx shadcn@latest init --base radix --preset nova
npx shadcn@latest add dayone-org/ui/all

Nutze danach die installierten DAYONE Komponenten und Styles.
Ersetze eigene Farben und Sonder-Buttons, wo es sinnvoll ist.
Lass Logik, Datenverhalten und bestehende Abläufe unverändert.

Der DAYONE UI Skill erklärt Coding-Agenten (Claude Code, Cursor, Codex …) knapp, wie DAYONE Anwendungen gebaut werden: installieren, vorhandene Bausteine nutzen, nicht frei stylen und am Ende gegen Komponenten und Anwendung prüfen.

So baut ein Agent dein internes Tool von sich aus im DAYONE-Look – ohne dass du die Regeln in jeden Prompt schreiben musst.

Was er abdeckt

• Wann DAYONE UI genutzt werden soll
• Installation für neue und bestehende Projekte
• Überblick über verfügbare Bausteine und ihre Einsatzbereiche
• Regeln für Farben, Typografie, Abstände und Controls
• Kurze Checkliste vor der Übergabe

Laden

Den Skill einmal global installieren – dann ist er in allen deinen Projekten aktiv, nicht nur in diesem Repository. Füge dazu den DAYONE-UI-Kanal in Claude Code hinzu und installiere den Skill:

/plugin marketplace add dayone-org/ui
/plugin install dayone-ui

Das war es. Claude Code erkennt ab jetzt automatisch, wenn du eine interne DAYONE Anwendung baust – kein weiterer Prompt nötig.

Wenn etwas fehlt, nicht funktioniert oder in einer Anwendung anders aussieht als erwartet, erstelle ein GitHub Issue.

Beschreibe kurz, was du bauen wolltest, was passiert ist und welche Komponente oder Anwendung betroffen ist. Screenshots helfen, wenn es um visuelle Details geht.

Neues Issue erstellen