Web- & UI-Design
Skills in der Kategorie Web- & UI-Design.
Theme-Fabrik Theme Factory
Wenden Sie eines von 10 fertigen Farb- und Schriftthemen auf Folien, Dokumente, Berichte oder Landingpages an, oder lassen Sie ein neues Thema erzeugen.
Empfehlung der RedaktionFrontend-Design Frontend Design
Anleitung für eigenständige, bewusst gestaltete Oberflächen statt Standardvorlagen: erst den Entwurf planen, dann bauen.
UI Styling (shadcn/ui + Tailwind)
Anleitung für barrierefreie, responsive Oberflächen mit shadcn/ui und Tailwind CSS, inklusive Dark Mode, Theming und einem canvasbasierten Ansatz für visuelles Design.
UI/UX Pro Max (Design-Wissensbasis)
Durchsuchbare Wissensbasis für Oberflächen: Stile, Farbpaletten, Schriftpaarungen, UX-Richtlinien, Diagramme und Tipps je Tech-Stack, um vor dem Bauen eine visuelle Richtung festzulegen.
Web-Design-Review (Web Design Reviewer)
Eine laufende Website auf Layout-, Responsive-, Barrierefreiheits- und Konsistenzprobleme prüfen, dann mit minimalen Änderungen im Quellcode beheben und erneut kontrollieren.
Web-Barrierefreiheitsprüfung (WCAG 2.2 AA)
Eine Seite oder Komponente gegen WCAG 2.2 Stufe AA prüfen: Tastatur, Fokus, Kontrast, Namen und Labels, Struktur, Formulare, Dialoge, dynamische Updates, Zoom und Zielgröße, jeder Befund mit Erfolgskriterium.
Algorithmic Art
Verwandelt ein Thema in ein kurzes Manifest für generative Kunst und baut daraus ein interaktives p5.js-Werk mit Seed-Navigation, Reglern und PNG-Export.
Penpot UI/UX-Design (über Penpot MCP)
Web-, Mobile- und Desktop-Oberflächen über den MCP-Server von Penpot direkt in Penpot gestalten, mit Designsystem-Prüfung, Komponenten- und Barrierefreiheitsregeln und Plattformgrößen.
UI-Zustände-Checkliste (UI States Checklist)
Jeden Zustand erfassen, den ein Bildschirm oder eine Komponente braucht: Laden, leer, Fehler, teilweise, deaktiviert, offline, fehlende Berechtigung und Extremfälle, und festlegen, was Nutzer jeweils sehen und tun können.
UI-Internationalisierung (UI Internationalization)
Eine Oberfläche so bauen, dass sie jede Sprache ohne Neugestaltung trägt: Nachrichtenkataloge, ortsgerechte Formate, Layouts, die unterschiedliche Textlängen aushalten, CJK- und Rechts-nach-links-Unterstützung und Sprachwechsel mit sauberen URLs.
Responsives Layout debuggen (Responsive Layout Debugging)
Die wahre Ursache von Layoutfehlern bei bestimmten Bildschirmbreiten finden: seitliches Scrollen, Überlauf, Flex-Elemente, die nicht schrumpfen, Sticky, das nicht haftet, 100vh auf Smartphones und feste Leisten unter der Browseroberfläche.
Heller und dunkler Modus (Light and Dark Theme)
Hell- und Dunkelmodus bauen, die in beiden Themes stimmen: semantische Farb-Tokens, Systemeinstellung plus manueller Schalter, kein Aufblitzen des falschen Themes beim Laden und Kontrastprüfung in beiden Themes.
Design System (Tokens und Folien)
Dreischichtiges Design-Token-System (primitiv, semantisch, Komponente) aufbauen, Komponentenspezifikationen schreiben und tokenkonforme HTML-Foliensätze mit Chart.js erzeugen.
Web Artifacts Builder
Erstellt komplexe, eigenständige React-Webartefakte mit TypeScript, Tailwind CSS und shadcn/ui.