Die besten Codex-Skills für UI-Design.

Ohne Zusatz gestaltet Codex solide, aber vertraute Screens. Design-Skills geben ihm Geschmack: eine Haltung zu Typografie, Abständen und Layout. Das sind die Skills und Plugins, die du kennen solltest, wofür sie jeweils taugen und wie du sie installierst.

Aktualisiert am 6. November 2026 · 7 Min. Lesezeit

Was ein Design-Skill eigentlich macht

Ein Skill ist eine Sammlung von Anweisungen, die Codex lädt, wenn eine Aufgabe sie braucht. Ein Design-Skill sagt Codex typischerweise, welche Schriften und Schriftgrößen-Skalen es verwenden soll, wie viel Weißraum nötig ist, welche Layoutmuster es meiden soll, weil sie nach Template aussehen, und wie es das Ergebnis prüft. Das Modell bleibt dasselbe; das Briefing, mit dem es arbeitet, wird viel besser.

Die meisten Skills unten werden als Codex-Plugins verteilt, sodass eine Installation gleich ein ganzes Set hinzufügt. Starte nach der Installation eine neue Codex-Sitzung, damit die Skills geladen werden. Dann rufst du einen mit $ und seinem Namen auf oder lässt Codex ihn wählen, wenn deine Anfrage passt.

1. Taste Skill (design-taste-frontend)

Ideal für: Landingpages, Marketing-Websites und Redesigns, die nicht KI-generiert aussehen sollen.

Taste Skill ist ein Open-Source-Skill von Leonxlnx unter MIT-Lizenz und einer der beliebtesten Design-Skills auf GitHub. Der Haupt-Skill design-taste-frontend arbeitet mit einem Kunden-Briefing, wählt eine von 20 recherchierten Art Directions, sucht frei lizenzierte Fotos samt Bildnachweis und prüft das Ergebnis im Browser in drei Breiten. Version 2.5 (November 2026) konzentriert sich auf Firmen- und Marketing-Websites und deckt keine App-Screens mehr ab. Er braucht Node.js 22 oder neuer sowie Chrome, Edge oder Chromium.

codex plugin marketplace add Leonxlnx/taste-skill
codex plugin add taste-skill@taste-skill

2. Stil-Skills: weich, minimalistisch und brutalistisch

Ideal für: wenn du schon weißt, welchen Look du willst.

Derselbe Autor pflegt ältere Skills für jeweils einen Stil in einer separaten Sammlung. Jeder läuft nur, wenn du ihn beim Namen aufrufst:

high-end-visual-design: ruhige, polierte UI mit sanftem Kontrast, großzügigen Abständen und federnden Animationen.
minimalist-ui: Produkt-UI im Editorial-Stil mit zurückhaltender Palette und klarer Struktur.
industrial-brutalist-ui: strenge Schweizer Typografie, harter Kontrast und experimentelle Layouts.
gpt-taste: eine strengere Variante, abgestimmt auf GPT-Modelle und Codex, mit mehr Layoutvielfalt und kräftigeren Animationen.

codex plugin marketplace add Leonxlnx/taste-skill-classics
codex plugin add taste-skill-classics@taste-skill-classics

3. Bild-zuerst-Skills

Ideal für: eine visuelle Richtung als Bilder auszuloten, bevor eine Zeile Code entsteht.

Diese Skills lassen den Agenten zuerst Designbilder generieren. imagegen-frontend-web erstellt ein Bild pro Abschnitt einer Landingpage, imagegen-frontend-mobile erstellt einheitliche Sets von App-Screens, und image-to-code generiert die Bilder, analysiert sie und baut dann die passende Seite. Sie brauchen einen Agenten, der Bilder generieren kann.

codex plugin marketplace add Leonxlnx/imagegen-skills
codex plugin add imagegen-skills@imagegen-skills

4. Der frontend-design-Skill von Anthropic

Ideal für: einen kurzen, allgemeinen Schubs in Richtung bewusstes Design.

Anthropic veröffentlicht frontend-design in seinem offenen Repository anthropics/skills unter der Apache-2.0-Lizenz. Er gibt Hinweise zu ästhetischer Ausrichtung und Typografie und zu Entscheidungen, die nicht nach Template-Standard aussehen. Er wurde für Claude geschrieben, nutzt aber dasselbe SKILL.md-Format. Kopiere den Ordner frontend-design nach ~/.agents/skills, um ihn in Codex zu verwenden.

5. Das Figma-Plugin

Ideal für: Teams, deren Designs und Designsystem in Figma liegen.

Der Plugin-Katalog von OpenAI enthält ein Figma-Plugin für Code to Canvas, Code Connect und Designsystem-Regeln. Du findest es im Plugins Directory oder mit /plugins in der Codex CLI.

Wo Codex Design dazupasst

Codex Design, unser Plugin, ist kein Stil-Skill. Es gibt Codex ein Canvas: Screens und Referenzbilder nebeneinander, mit visueller Bearbeitung von Schriften, Farben und Abständen. Es funktioniert zusammen mit jedem der Skills oben. Lass einen Taste-Skill das Design prägen und vergleiche die Richtungen, die er erzeugt, dann auf dem Canvas. Installiere Codex Design mit einem einzigen Prompt.

Einen Skill für dein eigenes Designsystem schreiben

Der beste Design-Skill ist oft dein eigener. Wenn dein Produkt eine Palette, Schriften und Komponenten hat, schreib sie einmal auf, und jeder Screen, den Codex gestaltet, folgt ihnen. Speichere das als .agents/skills/acme-ui/SKILL.md in deinem Repository:

---
name: acme-ui
description: Acme’s visual design rules. Use when designing or reviewing any Acme screen, page, or component.
---

# Acme UI

## Foundations
- Colors: ink #1F2430, accent #3B5BDB, surface #F7F8FA. No other hues.
- Type: Inter. Body 16px/1.5, headings 600 weight, never more than 3 sizes per screen.
- Spacing: multiples of 8px. Cards use 24px padding and 12px radius.

## Components
- Primary buttons are solid accent, one per screen.
- Forms put labels above fields, never placeholders as labels.

## Before you finish
- Check contrast meets WCAG AA.
- Check the layout at 390px and 1440px wide.

Formuliere die Beschreibung konkret. Codex entscheidet anhand der Beschreibung, wann es einen Skill verwendet. „Use when designing or reviewing any Acme screen“ funktioniert deshalb besser als „Design rules“. Den Skill selbst kannst du auch auf Deutsch schreiben.

Tipps

Verwende jeweils nur einen Stil-Skill. Ein minimalistischer und ein brutalistischer Skill geben widersprüchliche Anweisungen.
Ruf den Skill beim Namen auf, wenn es darauf ankommt, zum Beispiel $minimalist-ui, statt dich darauf zu verlassen, dass Codex ihn wählt.
Lies einen Skill, bevor du ihn installierst. Skills sind Anweisungen, die mit den Berechtigungen deines Agenten laufen, und Plugins können Tools und Hooks hinzufügen.