28 Einträge
Schlagwort: tailwind-css
X-Post:Kailash
Kailash empfiehlt fünf spezialisierte Agenten- und Prompt-Skills von ui-skills.com, mit denen Entwickler und KI-Assistenten die Qualität von Frontend-Designs, flüssigen Animationen, Schatten und Barrierefreiheit verbessern können.
7289Lesezeichen248.342Aufrufe
Link:scrolltide.co
Scrolltide ist eine kuratierte Plattform für scroll-basierte Vorlagen, UI-Komponenten und Shader, die speziell als Prompts für KI-Codierungs-Tools wie Claude, Cursor und v0 optimiert sind.
Aus X-Post: AI-Driven Workflow for 3D Web Design and Interactive Frontends
X-Post:Arihant Jain
Arihant Jain hat Spectrum UI vorgestellt, eine quelloffene Komponenten- und Block-Bibliothek auf Basis von React, Tailwind CSS und Motion. Die Bibliothek umfasst über 250 Bausteine und integriert einen MCP-Server, damit KI-Assistenten wie Cursor oder Claude Komponenten direkt im Projekt installieren können.
183Lesezeichen6871Aufrufe
X-Post:John Champ
John Champ entwickelt eine Komponentenbibliothek mit animierten Visualisierungen für Landing-Pages, die speziell auf React, shadcn/ui, Motion und Tailwind CSS abgestimmt ist.
442Lesezeichen27.274Aufrufe
X-Post:Chris Tate
Chris Tate verweist auf die Ankündigung von shadcn/lint, einem neuen Linter für Tailwind-Designsysteme, der speziell für die Zusammenarbeit mit KI-Agents konzipiert wurde.
468Lesezeichen121.704Aufrufe
Link:Jakub Krehel
Jakub Krehel stellt mit 'make-interfaces-feel-better' ein Regelwerk und Skill-Paket für Frontend-Entwickler und UI-Reviews vor. Es umfasst konkrete Design-Engineering-Regeln für Typografie, Oberflächen, Animationen, Icons und Performance sowie ein klares Format für Code-Reviews.
Aus X-Post: Top 5 UI Skills for Design Engineers Using AI Agents
Repository:amaancoderx/npxskillui
SkillUI ist ein Node.js-Kommandozeilenwerkzeug, das Design-Systeme aus Webseiten, lokalen Projekten oder Git-Repositories extrahiert. Ohne KI-Modelle oder API-Schlüssel sammelt es Farben, Schriften, Abstände, Komponenten und Screenshots und bereitet diese als Kontextdateien für Claude Code auf.
2020SterneTypeScript
Aus X-Post: SkillUI: Automated Design System Extraction for Claude Code
X-Post:Bidyut
Opensource UI stellt eine quelloffene Sammlung von React- und Next.js-Komponenten bereit, die Entwickler ohne zusätzliche Paketabhängigkeiten direkt in ihre Codebasis kopieren können.
689Lesezeichen85.446Aufrufe
Link:Ajay Patel, Anand Patel
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.
Aus X-Post: Curated Modern UI Component Libraries for Rapid Frontend Development
Link:Beste
Beste UI bietet über 2.000 vorgefertigte Blöcke, Teilstücke und Komponenten für Tailwind CSS und shadcn/ui in React- und Next.js-Projekten. Der Code wird ohne Laufzeitabhängigkeiten direkt ins Projekt kopiert und lässt sich über das Model Context Protocol (MCP) nahtlos von KI-Coding-Agenten integrieren.
Aus X-Post: Curated Modern UI Component Libraries for Rapid Frontend Development
Link:component.gallery
The Component Gallery bietet ein Verzeichnis von 60 Benutzeroberflächen-Komponenten, basierend auf 95 Design-Systemen und 2.671 Beispielen aus der Praxis.
Aus X-Post: Curated UI Components and Transitions for Web Apps and AI-Native Interfaces
Link:Mannupaaji
Aceternity UI von Entwickler Mannupaaji bietet über 200 vorgefertigte React-Komponenten, Blöcke und Vorlagen für Landingpages. Die Bibliothek setzt auf Tailwind CSS sowie Motion und bietet neben einem Copy-and-Paste-Ansatz auch Integrationen über einen MCP-Server für KI-Agenten.
Aus X-Post: Curated UI Components and Transitions for Web Apps and AI-Native Interfaces
Link:21st Labs, Inc.
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.
Aus X-Post: Curated UI Components and Transitions for Web Apps and AI-Native Interfaces
Link:sleek.design
Sleek generiert vollständige Screens für iOS- und Android-Apps auf Basis von Textbeschreibungen oder Referenzbildern. Entwürfe lassen sich direkt als editierbare Ebenen nach Figma oder als Code in HTML und React mit Tailwind CSS exportieren. Zudem unterstützt das Tool Coding-Agenten wie Claude Code oder Cursor über eine API.
Aus X-Post: Mobile App Design Recommendation: Michelangelo
Link:Tailwind Labs
Die Macher von Tailwind CSS und Refactoring UI haben mit ui.sh eine Sammlung aufgabenorientierter Prompts und Workflows für KI-Agenten vorgestellt. Das Toolkit soll Entwicklern helfen, hochwertige Benutzeroberflächen zu erstellen.
Aus X-Post: /variate: Open-Source Design Skill for Generating UI Variations
Link:Relume
Relume bindet seine Komponentenbibliothek über das Model Context Protocol (MCP) direkt in KI-gestützte Editoren ein. Entwickler können Abschnitte per Prompt suchen und echten, editierbaren React-Code samt Design-System-Primitiven in ihr Projekt laden.
Aus Video: Relume MCP Brings 1,000+ Design Components to Claude Code
Link:Wesley (ByteGrad)
Ein On-Demand-Videokurs von Wesley (ByteGrad), der moderne Webentwicklung mit React und Next.js (App Router) anhand von sieben praxisnahen Projekten vermittelt.
Aus Video: Next.js Image Optimisation for Cinematic AI-Generated Websites
Link:Wesley
ByteGrad bietet einen 7,5-stündigen On-Demand-Videokurs für modernes CSS an. Der Kurs richtet sich an Einsteiger und Fortgeschrittene, die anhand zweier konkreter Projekte Flexbox, CSS Grid, Responsive Design und Sass/SCSS lernen wollen.
Aus Video: Next.js Image Optimisation for Cinematic AI-Generated Websites
Repository:ShenSeanChen/launch-mvp-stripe-nextjs-supabase
Ein Open-Source-Template für Next.js 14, das Authentifizierung, Zahlungsabwicklung und Transaktions-E-Mails in einem produktionsfertigen Grundgerüst bündelt.
1089SterneTypeScript
Aus Video: Loop vs Graph Engineering for AI Agents: Concepts and Practice with Waku Agent
Repository:kielchang/dooping-design-book
Dooping Design Book ist eine quelloffene, praxisnahe Designsprache und Komponenten-Referenz für Administrations- und Backend-Systeme. Das Projekt trennt Design-Tokens, kopierbare React-Komponenten und dokumentierte Interaktionsmuster strikt voneinander, um branchenspezifischen Ballast zu vermeiden.
33SterneTypeScript
Aus X-Post: AI Video-Driven Web Animations: oil-oil's Design Engineering Workflow
VideoVideo:Build Great Products
Chris von Build Great Products stellt Eyedropper vor. Das cloudbasierte Tool extrahiert Design-Systeme aus Codebases, URLs oder Bildvorlagen und stellt sie KI-Agenten via Model Context Protocol (MCP) als zentrale Referenz bereit. Über eine automatisierte Prüfschleife korrigieren Coding-Agenten eigenständig abweichende Styles.
X-Post:Imran
Imran (@ImranUxi) teilt eine kuratierte Liste moderner UI-Komponentenbibliotheken mit integrierten Mikro-Interaktionen für die schnelle Frontend-Entwicklung per Copy-and-Paste oder AI-Prompt.
1597Lesezeichen51.655Aufrufe
VideoVideo:Lukas Margerie
Lukas Margerie demonstriert das neue Model Context Protocol (MCP) von Relume. Es integriert die React- und Tailwind-Komponentenbibliothek des Anbieters direkt in Coding-Assistenten wie Claude Code, Cursor oder Codex. Dadurch lassen sich Webseiten ohne ungenaue Text-Designbeschreibungen modular aufbauen, bestehende Layouts per Komponenten-ID austauschen und Websites via URL in mehreren Designvarianten neu gestalten.
Prompt:admin
Der bereitgestellte System-Prompt enthält ein detailliertes Product Requirements Document (PRD) samt Entwicklungsplan für ein browserbasiertes Lernspiel zur Medienkompetenz und digitalen Sicherheit junger Nutzer.
Webentwicklung· Sammlung
24 von 28 angezeigt
Haben Sie einen interessanten Artikel, ein Video oder einen Tweet, der in unsere Wissensbasis gehört? Schreiben Sie uns an office@webconsulting.at.
Dieser Inhalt wurde teilweise mithilfe von KI erstellt.
