47 Einträge
Schlagwort: cssLink:WorkOS
Radix UI von WorkOS ist eine quelloffene Komponentenbibliothek, die auf zügige Entwicklung, einfache Wartbarkeit und Barrierefreiheit ausgelegt ist. Entwickler können vorkonfigurierte Bausteine wie Radix Themes direkt ohne aufwendige Konfiguration einbinden.
Aus Video: UI Libraries for Claude Code: Avoiding the Default AI Aesthetic
Link:Impeccable
Impeccable dokumentiert und prüft typische Design-Klischees von KI-Modellen (»AI Slop«) sowie Usability-Fehler. Das Werkzeug analysiert Code, gerenderte Websites und Design-System-Abweichungen anhand eines Katalogs von 68 Regeln.
Aus Video: Seven Claude Skills to Eliminate Generic AI Web Design
VideoVideo:CURT
Griffin Wooldridge stellt sieben kuratierte Claude-Skills vor, die typische Schwächen von KI-generierten Benutzeroberflächen beheben und Design-Workflows verbessern.
Repository:juliangarnier/anime
Anime.js ist eine schlanke und vielseitige JavaScript-Animationsbibliothek mit einer zugänglichen API. Sie ermöglicht Entwicklern das flexible Animieren von CSS, SVG, DOM-Attributen und JavaScript-Objekten.
74.136SterneJavaScript
Aus X-Post: 20 Open-Source Skills and Tools for Programmatic Motion Design with Claude
X-Post:jhey ʕ•ᴥ•ʔ
Entwickler Jhey Tompkins hat unter dem Projektnamen Segue eine wachsende Prototypensammlung für Seitenübergänge veröffentlicht. Die Beispiele basieren auf CSS View Transitions und bieten Code zum Kopieren sowie für KI-Agenten.
64Lesezeichen2718Aufrufe
Repository:quanhoangindex/ascii-reveal
ascii-reveal ist eine leichtgewichtige React-Komponente, die Inhalte wie Texte und Bilder über ein ASCII-Zeichenraster einblendet. Die Bibliothek verhindert Layout-Shifts, bleibt barrierefrei und bringt vorgefertigte CSS-Skeletons mit.
422SterneTypeScript
Aus Video: GitHub Trending #56: 35 Trending Open-Source Projects and Agent Skills
Link:Gustavo Fior
Craft von Gustavo Fior ist eine kuratierte Referenzsammlung kurzer Essays und praktischer Tipps zu Design Engineering. Die Themen reichen von Typografie und Farbgestaltung über Layout und Animationen bis hin zu Sound und Datenvisualisierung.
Aus X-Post: Craft: Curated Design Engineering Concepts by Gustavo Fior
X-Post:Adham Dannaway
Adham Dannaway teilt die Ressourcensammlung »Craft« von Gustavo Fior. Die Website bietet kurze, prägnante Essays zu praktischen Konzepten des Design Engineerings – von optischer Ausrichtung und Typografie bis hin zu Animationen, Layout-Regeln und Sound-Design.
568Lesezeichen14.319Aufrufe
X-Post:Shu
Shu (@shuding) hat ein interaktives Frontend-Experiment namens „shaduocn sidebar“ vorgestellt, bei dem sich eine Web-Seitenleiste wie ein Falt-Display umklappen lässt. Der Entwickler stellte klar, dass es sich um ein humorvolles Experiment mit bewusst unpraktischer UX handelt.
372Lesezeichen51.748Aufrufe
X-Post:Emm | scenario.com
Emm von scenario.com hat eine Sammlung von Motion-Graphics-Vorlagen als Open Source bereitgestellt. Die Animationen bestehen aus kompakten HTML-Dateien und sind für die Bearbeitung durch KI-Agenten konzipiert.
2562Lesezeichen68.920Aufrufe
Link:reactbits.dev
React Bits stellt kostenlose, direkt im Browser laufende Kreativtools bereit. Mit ihnen lassen sich animierte Hintergründe, Formen und Texturen anpassen und in verschiedenen Formaten für Webprojekte exportieren.
Aus X-Post: React Bits Launches Free In-Browser Design Suite
Repository:madebymustafa/design-taste
Das Open-Source-Projekt design-taste liefert 24 Agent-Skills für Werkzeuge wie Claude Code oder Cursor, um typische KI-Designmuster durch zielgerichtete Stilrichtungen wie Editorial Minimal oder Dark Tech zu ersetzen.
80SterneJavaScript
Aus X-Post: Open-source repositories to upgrade UI design in AI coding agents
Repository:gr8rstudio/gr8r-studio
Gr8r Studio ist ein reduzierter Projektmanagement-Workspace, der vollständig mit nativen JavaScript ES-Modulen und CSS umgesetzt wurde. Das Projekt verzichtet auf UI-Frameworks wie React oder Vue und nutzt Vite als Build-Tool.
545SterneJavaScript
Aus Video: GitHub Trending: Emerging Open-Source Tools for AI Agents and Developers
X-Post:Tanjim
Tanjim hat Gr8r Studio als Open Source veröffentlicht. Die webbasierte Projektmanagement-App setzt konsequent auf reines JavaScript mit ES-Modulen und CSS, gebündelt über Vite, und verzichtet vollständig auf externe UI-Laufzeitbibliotheken.
773Lesezeichen37.000Aufrufe
Link:good-css.com
good-css ist eine kuratierte Referenz moderner CSS-Techniken, die praxiserprobte Best Practices von Branchenexperten zusammenfasst. Die Sammlung richtet sich sowohl an Entwickler als auch an autonome KI-Coding-Agenten und setzt konsequent auf standardisiertes, framework-unabhängiges CSS ohne unnötige Breakpoints oder JavaScript-Abhängigkeiten.
Aus X-Post: good-css: 47 Modern CSS Techniques for Coding Agents
X-Post:Vojta Holik
Vojta Holik hat good-css vorgestellt, eine kuratierte Sammlung moderner CSS-Techniken, die speziell für KI-gestützte Coding-Agents aufbereitet wurde. Ziel ist es, Agents dazu zu bringen, moderne Standard-CSS-Features wie :has(), Subgrid oder Anchor Positioning anstelle von Workarounds und JavaScript zu verwenden.
374Lesezeichen27.291Aufrufe
X-Post:Houdayfa
Designer Houdayfa teilt eine Auswahl von UI-Komponentenbibliotheken und Motion-Sammlungen für moderne Webanwendungen. Vorgestellt werden unter anderem Arc UI mit KI-kompatiblen Komponenten für Next.js und shadcn sowie Kinetics mit 153 physikbasierten Feder-Animationen.
611Lesezeichen18.912Aufrufe
Link:somonoco.com
Monoco ist eine schlanke JavaScript-Bibliothek, mit der HTML-Elemente mit Squircles (stetigen Kurven) und anderen Eckenstilen gerendert werden können. Sie erzeugt dynamische SVGs und wendet diese als Hintergrundbild oder Clip-Path an.
Aus X-Post: Five Micro-Interaction Libraries for the Web
Link:MengTo
MengTo stellt mit 'beautiful-shadows' ein Set vordefinierter Tailwind-Schattenklassen bereit. Die Vorlage richtet sich an Interfaces, die subtile Tiefe und abgestufte Ebenen ohne matschige Effekte oder bunte Farbstiche benötigen.
Aus X-Post: visualize: Generating On-Brand HTML Artefacts with AI Coding Agents
Link:Emil Kowalski
Emil Kowalski fasst die Designprinzipien von Apple für flüssige, physikalische Interfaces zusammen und überträgt sie auf moderne Webtechnologien wie Pointer Events, CSS und Spring-Animationen.
Aus X-Post: visualize: Generating On-Brand HTML Artefacts with AI Coding Agents
Link:anthropics
Das Skill 'frontend-design' von Anthropic gibt KI-Modellen detaillierte Gestaltungs- und Programmierregeln vor. Ziel ist es, unverwechselbare, produktionsreife Frontend-Oberflächen zu erstellen und typische Erkennungsmerkmale generierter Webseiten zu vermeiden.
Aus X-Post: visualize: Generating On-Brand HTML Artefacts with AI Coding Agents
Link:designminis.com
DesignMinis ist ein Verzeichnis von über 100 kompakten Design-Tools, die jeweils eine spezifische Aufgabe erfüllen.
Aus X-Post: Design Minis: Curated Directory of Single-Purpose Design Tools
Link:designmd.me
DesignMD analysiert beliebige Webseiten und extrahiert deren Design-System automatisch in eine strukturierte DESIGN.md-Datei, eine interaktive HTML-Vorschau und direkt nutzbare Figma-Tokens.
Aus X-Post: Curated Directory of DESIGN.md Resources and AI-Ready Design Systems
X-Post:Dhruv
Dhruv teilt mit „Design Minis“ ein kuratiertes Verzeichnis von Micro-Tools, die von Designern für spezifische Einzelaufgaben entwickelt wurden.
346Lesezeichen11.397Aufrufe
24 von 47 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.
