Design Skills for AI Agents: UX- und UI-Wissen für KI-Coding-Tools

X-PostAdham DannawaySammlung

Adham Dannaway empfiehlt eine von Carlos Cuéllar erstellte Sammlung strukturierter Design-Skills für Coding-Agents wie Claude Code, Cursor und Codex. Das Repository liefert fundierte Heuristiken, Accessibility-Regeln nach WCAG 2.2 und Designsystem-Standards direkt in den Arbeitskontext der KI.

Das Wichtigste

  1. Zehn spezialisierte Skill-Module decken Bereiche wie UX Research, Design Critique, Journey Mapping, Design Systems, Interaktionsdesign und UX Writing ab.
  2. Das Modul für Accessibility Audits prüft Interfaces auf fünf Ebenen anhand von WCAG 2.2 (A, AA, AAA) und liefert konkrete Code-Korrekturen.
  3. Visual Elevation nutzt Tailwind CSS als kanonisches Token-System und bindet Gestaltungsprinzipien von Edward Tufte sowie Alla Kholmatova ein.
  4. Jeder Skill ist modular in SKILL.md-Leitfäden, thematische Referenzen, Vorlagen und Beispiel-Walkthroughs aufgeteilt.
  5. Die Installation erfolgt per CLI über npx skills add oder als direktes Plugin in Claude Code.

Warum das relevant ist

KI-Coding-Agents erzeugen rasch Code, treffen ohne methodische Vorgaben aber oft unzureichende Design- und UX-Entscheidungen. Durch strukturierte Leitfäden und Prüfmechanismen können Entwicklerinnen und Entwickler die visuelle und funktionale Qualität generierter Benutzeroberflächen reproduzierbar absichern.

Einordnung

Das Paket von Carlos Cuéllar begegnet dem verbreiteten Problem generischer KI-Interfaces: Statt vager Anweisungen nutzt es quantifizierbare Heuristiken (wie Nielsen-Prinzipien und UX-Gesetze) und standardisierte Artefakte (etwa W3C-Design-Tokens und Opportunity Solution Trees). Da die Skills als modular referenzierbare Markdown-Dokumente vorliegen, lassen sie sich ohne Token-Overhead bedarfsgerecht in Workflows mit Claude Code oder Cursor integrieren.

Original-Post

Adham Dannaway

@AdhamDannaway · 28. September 2026

🔵 Design Skills for AI Agents Give your AI coding tool real design knowledge. Heuristics, research methods, systems thinking, and real frameworks — for Claude Code, Cursor, Codex, and 40+ other agents. → t.co/OkAwDJiOyR By Carlos Cuéllar t.co/kW6nqbN3Pz

63 Likes2 Antworten100 Lesezeichen5174 Aufrufe

Auf X ansehen
Ausgewählte Antworten (2)
  • @IAmMujtabaZaidi @AdhamDannaway Tried feeding Cursor design heuristics but it still spits out overengineered flows that ignore real build constraints. How do you handle edge cases where agents need to validate against actual user data instead of just frameworks.
  • @An_yhl @AdhamDannaway 给 coding agent 补点设计脑子,挺实用的

Links und Tools aus diesem Beitrag

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

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

  • Link:cuellarfr

    Design Skills: Kuratierte UI- und UX-Skills für KI-Agenten

    cuellarfr/design-skills stellt zehn strukturierte Wissenspakete für Entwicklungsagenten wie Claude Code, Cursor, Codex und OpenCode bereit. Die Sammlung deckt Disziplinen von UX Research über Barrierefreiheit bis hin zu Design Systems und UX Writing ab.

    KI & AI· Sammlung

  • X-Post:Adham Dannaway

    Agent Design Skills: UI-Feinschliff und Barrierefreiheit für KI-Agenten

    Designer Adham Dannaway empfiehlt eine Sammlung spezialisierter Agent-Skills von Jakub Krehel. Das Paket erweitert KI-Agenten um konkretes Fachwissen in den Bereichen UI-Design, Typografie, OKLCH-Farben, Barrierefreiheit, Layout und Product Writing.

    492Lesezeichen28.585Aufrufe

    KI & AI· Sammlung

  • Repository:jakubkrehel/skills

    jakubkrehel/skills: Agent-Skills für UI- und Design-Engineering

    jakubkrehel/skills ist eine kuratierte Sammlung modularer Agent-Skills, die KI-Assistenten wie Claude Code fundiertes Wissen über Interface-Design, Typografie, Barrierefreiheit und UI-Engineering bereitstellen.

    5773SterneMarkdown

    KI & AI· Tool

  • X-Post:Kiyotaka

    Fünf UI-Skills für Design Engineers mit KI-Coding-Agenten

    Kiyotaka (@SubhanHQ) empfiehlt fünf spezialisierte Regelwerke („Skills“) für KI-Agenten, die Frontend-Entwicklern bei UI-Polishing, Animationen, Barrierefreiheit und visueller Präzision helfen.

    986Lesezeichen39.486Aufrufe

    KI & AI· Sammlung

  • X-Post:Adham Dannaway

    UX-Copywriting-Agent-Skill für Claude, Codex und Cursor

    Adham Dannaway empfiehlt einen von Christopher Greer entwickelten Agent-Skill für Claude, Codex und Cursor, der Content-Designer und Produktteams bei der Erstellung barrierefreier und nutzerzentrierter UX-Texte unterstützt.

    225Lesezeichen6957Aufrufe

    KI & AI· Tool

  • Link:Jakub Krehel

    Skills: Agenten-Toolkit zur Optimierung von UI und UX

    Jakub Krehel stellt eine Sammlung spezialisierter Agent Skills vor, die Frontend-Teams bei Interface-Details wie Typografie, OKLCH-Farben, Barrierefreiheit, Layouts und Microcopy unterstützen.

    KI & AI· Tool

Lassen Sie uns über Ihr Projekt sprechen

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.