UI-Kit auf Basis von shadcn/ui für KI-Prototypen in Claude Code und Cursor

X-PostChris HalaskaTool

Chris Halaska hat ein UI-Kit für Gründer vorgestellt, die KI-Produkte per Vibe-Coding erstellen. Die Vorlage basiert auf shadcn/ui und ergänzt KI-spezifische UX-Patterns sowie eine eigene visuelle Ausrichtung, die sich über einen einzelnen Prompt in Claude Code oder Cursor integrieren lassen.

Das Wichtigste

  1. Basiert auf der Komponentenbibliothek shadcn/ui und erweitert diese um Design- und UX-Patterns für KI-Anwendungen.
  2. Die Anwendung erfolgt durch das Einfügen eines einzigen Prompts in KI-Coding-Werkzeuge wie Claude Code oder Cursor.
  3. Befindet sich derzeit in einer Beta-Phase; weitere Patterns sollen laufend aus praktischer Studioarbeit ergänzt werden.
  4. Der Autor merkt an, dass das Kit Prototypen deutlich weiterbringt als Standardeinstellungen, aber nicht alle Spezialfälle löst.

Warum das relevant ist

Beim softwaregestützten Prototyping mit KI-Werkzeugen (Vibe-Coding) wirken Anwendungen ohne spezifische Anpassung oft generisch. Ein promptbasiertes Design-Kit für weitverbreitete Grundlagen wie shadcn/ui ermöglicht es, visuelle Qualität und AI-spezifische Interaktionsmuster schnell in MVPs zu verankern.

Einordnung

Das Projekt verdeutlicht den Trend, Konfigurations- und Design-Guidelines direkt als System-Prompts für Coding-Agenten zu paketieren. Statt manueller Bibliothekskonfiguration steuern strukturierte Anweisungen den Agenten. Offen bleibt bei solchen Lösungen, wie gut sich Designs konsistent weiterentwickeln lassen, sobald ein Prototyp Muster benötigt, die nicht im Ausgangsprompt enthalten sind.

Original-Post

Chris Halaska

@chalaska · 10. September 2026

We designed a UI kit for founders vibe-coding AI products. It sits on shadcn/ui, a solid foundation most of these tools already reach for. We've added our own visual direction and the UX patterns AI products need. Copy one prompt into Claude Code or Cursor and your prototype t.co/vdYMZhdHqk

328 Likes17 Antworten580 Lesezeichen18.296 Aufrufe

Auf X ansehen
Weitere Posts im Thread (2)
  1. It's in beta. We'll keep adding patterns as studio work surfaces them. If you try it, we'd like to see the result. Send us what it did to your screens, good or bad.
  2. @fhlcreative Thanks Phil! still a wip
Ausgewählte Antworten (5)
  • @fhlcreative @chalaska Love this!
  • @everywhereayush @chalaska Its great A small thing I noticed is that AI chat section where the container width is more than the AI input box which feels a bit off. Why because in most AI apps the messaging container is of the same width as input box. I might be wrong but I think you should look into it.
  • @letdarky @chalaska the demo UI is bad even in the after view.
  • @fhlcreative @chalaska I'm giving it a try right now on one of my projects...
  • @camduncalfe @chalaska Clean!

Erwähnte Links

Zusammenfassung von KI erstellt (Gemini 3.8 Flash, 27. September 2026). Sie kann Fehler enthalten – maßgeblich ist die Originalquelle.

Ähnliche Einträge

Inhaltlich ähnlich, ermittelt über die KI-Suche.

  • Link:Ajay Patel, Anand Patel

    Shadcn Studio: Komponenten, UI-Blöcke und Templates für shadcn/ui

    Shadcn Studio stellt vorgefertigte UI-Komponenten, Blöcke und Vorlagen für shadcn/ui bereit, die sowohl Radix UI als auch Base UI unterstützen. Neben Copy-Paste-Code und CLI-Installation bietet die Plattform KI-Werkzeuge wie einen MCP-Server, Theme-Generierung und ein Figma-Plugin.

    KI & AI· Tool

  • Repository:elayadesign/ai-design-skills

    ai-design-skills: Markdown-Regeln für KI-gestütztes Webdesign

    Das GitHub-Repository elayadesign/ai-design-skills bündelt strukturierte Design-Anleitungen und Regelwerke im Markdown-Format für KI-gestützte Coding-Tools. Entwickler können diese Skills in Assistenten wie Claude Code, Cursor oder Windsurf einbinden, um konsistentere Landingpages und UI-Systeme zu generieren.

    1960Sterne

    KI & AI· Sammlung

  • X-Post:Alok

    Cue: Kuratierte UI-Komponentenbibliothek mit AI-Prompts und MCP-Anbindung

    Entwickler Alok verweist auf das UI-Projekt Cue (cuedesign.space). Cue positioniert sich als handkuratierte Komponentenbibliothek auf Awwwards-Niveau und liefert Prompts für AI-Coding-Tools wie Cursor, Bolt, v0, Claude und Framer sowie bald direkten React-Code und eine MCP-Schnittstelle.

    2Lesezeichen537Aufrufe

    KI & AI· Sammlung

  • Link:ui.spectrumhq.in

    Spectrum UI: Komponentenbibliothek für KI-Coding-Assistenten via MCP

    Spectrum UI ist eine durch Vercel OSS unterstützte Komponentenbibliothek mit über 250 animierten UI-Komponenten. Sie lässt sich über das Model Context Protocol (MCP) direkt in Editoren und Assistenten wie Cursor oder Claude einbinden.

    KI & AI· Tool

  • X-Post:shadcn

    Eigene Komponentenbibliotheken für KI-gestützte Entwicklung

    shadcn empfiehlt Entwicklern, eine eigene, personalisierte Komponentenbibliothek auf Basis von shadcn/ui für Agentic Coding anzulegen und bei neuen Projekten direkt als Standard zu laden.

    1336Lesezeichen132.017Aufrufe

    KI & AI· Meinung

  • Link:21st Labs, Inc.

    21st.dev: Community-Registry für React-Komponenten und shadcn-Themes

    21st.dev ist ein Marktplatz und Verzeichnis mit über 12.000 React-Komponenten, Vorlagen und Themes. Die UI-Elemente basieren auf Tailwind CSS sowie shadcn/ui-Konventionen und lassen sich über vorbereitete Prompts direkt in AI-Tools wie Claude Code, Lovable oder Cursor einbinden.

    KI & AI· Sammlung

Zurück zur Wissensbasis

Lassen Sie uns über Ihr Projekt sprechen

Kontakt aufnehmen

Standorte

  • Mattersburg
    Johann Nepomuk Bergerstraße 7/2/14
    7210 Mattersburg, Austria
  • Wien
    Ungargasse 64-66/3/404
    1030 Wien, Austria

Dieser Inhalt wurde teilweise mithilfe von KI erstellt.