StyleSeed – Open Source, das AI-Coding-Tools Designgespür verleiht (2.200 Zeilen Designregeln)

 (github.com/bitjaru)
26 Punkte von bitjaru0402 2026-04-07 | 4 Kommentare | Auf WhatsApp teilen

Wenn man mit Vibe Coding UIs erstellt, gibt es das Problem: „Die Funktion ist da, aber das Design ist mies.“

StyleSeed ist ein Open-Source-Projekt, das AI-Coding-Tools (wie Claude Code) Designregeln vermittelt. Kopiert man die Dateien in ein Projekt, erzeugt die AI ein UI auf dem Niveau der Toss-App.

Enthalten sind:

  • 60 visuelle Designregeln auf 2.200 Zeilen (Farbphilosophie, Typografie-Hierarchie, Kartenstruktur, verbotene Muster usw.)
  • 47 React-Komponenten (31 auf Basis von shadcn/ui + 16 Dashboard-Muster)
  • 10 Claude-Code-Skills (UI-Erzeugung, UX-Audit, Microcopy-Erstellung usw.)
  • Tailwind CSS v4-Theme (Light-/Dark-Mode)

Wenn DESIGN.md von awesome-design-md (23K Stars) Brand-Token bereitstellt, ist StyleSeed ein „Design-Gehirn“, das auch Layoutregeln, UX-Guides und Komponenten umfasst.

Der erste Seed ist im Toss-Stil. Seeds für Apple, Linear und Stripe sind geplant. MIT-Lizenz.

Verwandte Beiträge

4 Kommentare

 
bitjaru0402 2026-04-13

▎ Update — ich habe eine anklickbare Live-Demo hochgeladen.
▎
▎ 🎬 https://styleseed-demo.vercel.app
▎
▎ Auf dem Bildschirm wird dieselbe Chat-UI auf einmal zwischen den drei Marken Toss → Raycast → Arc gemorpht. Farbe, Rundungen, Motion, Schatten und Verläufe ändern sich alle über nur ein einziges data-skin-Attribut. Nur mit Tokens, ohne Code-Verzweigungen.
▎
▎ Oben in der README habe ich eine GIF-Vorschau eingefügt: https://github.com/bitjaru/styleseed
▎
▎ Danke an alle, die beim ersten Post Feedback gegeben haben 🙏
 
kurthong 2026-04-08

Es wirkt fast ironisch, dass die Ausweitung von Domain-Wissen durch Open Source gerade im Zeitalter der KI besonders zur Geltung kommt. Vielen Dank für diesen großartigen Wissensaustausch!
 
aldlfkahs 2026-04-08

Danke fürs Teilen. Das kann ich bei privaten Projekten sicher gut gebrauchen.
 
kaydash 2026-04-07

Sieht toll aus!