VULK Design Skills: Wie KI professionellen Code generiert

Das Problem mit der rohen KI-Codegenerierung

KI-Modelle werden mit riesigen Mengen an Code trainiert, aber die Qualität dieses Codes variiert stark. Wenn du ein Modell bittest, „eine Landingpage zu erstellen“, bekommst du möglicherweise Inline-Styles gemischt mit Tailwind-Klassen, uneinheitliche Abstände, fest codierte Farben, fehlende responsive Breakpoints und Verstöße gegen die Barrierefreiheit. Das Modell weiß, wie man Code schreibt – es weiß jedoch nicht automatisch, wie man guten Code schreibt.

Die Lösung ist kein besseres Modell. Es sind bessere Anweisungen.

Was sind Design Skills?

Die Design Skills von VULK sind modulare Anweisungssätze, die vor Beginn der Generierung in den System-Prompt der KI eingefügt werden. Jeder Skill ist ein fokussiertes Dokument zu einem bestimmten Bereich – etwa Designsystemen, React-Komponentenmuster, Tailwind CSS-Konventionen, Animationstechniken und mehr.

Stell dir Skills als spezialisierte Trainingshandbücher vor. Statt darauf zu hoffen, dass sich die KI an Best Practices aus ihren Trainingsdaten erinnert, teilt VULK ihr ausdrücklich mit, welche Standards sie bei jedem Projekt befolgen soll.

Das System umfasst derzeit 9 Skills:

Wie Skills geladen werden

Skills werden nicht alle gleichzeitig geladen. Würden bei jeder Generierung alle 9 Skills geladen, würde das Token-Budget für irrelevante Anweisungen verbraucht. Stattdessen verwendet VULK ein Bewertungssystem, das Skills dem Prompt des Nutzers zuordnet.

Der Prozess funktioniert so:

User prompt: "Build a restaurant website with a photo gallery,
              animated menu sections, and a reservation form"

Skill scoring:
  design-system    → always loaded (core)
  react-patterns   → always loaded (core)
  tailwind         → always loaded (core)
  animations       → 0.8 score (matched: "animated")
  gsap             → 0.6 score (matched: "animated", "sections")
  layouts          → 0.4 score (matched: "gallery", "sections")
  accessibility    → 0.3 score (matched: "form", "reservation")
  typography       → 0.0 (no triggers matched)
  backend          → 0.0 (no triggers matched)

Loaded: design-system, react-patterns, tailwind,
        animations, gsap, layouts, accessibility

Drei Skills – Design System, React Patterns und Tailwind – werden als Kern-Skills immer geladen. Sie legen den grundlegenden Qualitätsstandard für jedes Projekt fest. Die übrigen sechs werden anhand von Trigger-Keywords geladen und nach Relevanz sortiert, wobei pro Generierung maximal vier optionale Skills verwendet werden, um den Token-Verbrauch zu kontrollieren.

Bei Webprojekten wird der Animation-Skill ebenfalls immer eingebunden, da Motion Design bei modernen Webanwendungen erwartet wird.

Was die einzelnen Skills enthalten

Jeder Skill ist ein strukturiertes Anweisungsdokument. In der Praxis decken sie Folgendes ab:

Design System definiert das visuelle Vokabular. Es legt fest, wie Farb-Token statt roher Hex-Werte verwendet werden, wie konsistente Abstände angewendet werden (4px-Basisraster), wie Erhebungen mit Box-Shadows umgesetzt werden und wie die visuelle Hierarchie über Komponenten hinweg erhalten bleibt. Der Skill enthält konkrete Regeln wie „Verwende niemals Opazität für deaktivierte Zustände – nutze stattdessen ein eigenes Disabled-Farb-Token“ und „Halte für sämtlichen Text ein Kontrastverhältnis von mindestens 4:1 ein“.

React Patterns behandelt die Komponentenarchitektur. Der Skill weist die KI an, Komposition statt Prop-Drilling zu verwenden, wiederverwendbare Hooks für gemeinsam genutzte Logik auszulagern, alle Props mit TypeScript-Interfaces (nicht mit Inline-Typen) zu typisieren, beim Erstellen von Basiskomponenten forwardRef zu verwenden und Dateien mit Exporten am Ende zu strukturieren. Muster wie das Unterbringen von Geschäftslogik in Komponenten oder die Verwendung von any-Typen werden ausdrücklich untersagt.

Tailwind sorgt für eine konsistente Nutzung des Utility-Frameworks. Der Skill behandelt die Reihenfolge beim Responsive Design (Mobile-First mit den Präfixen sm:, md:, lg:), den Dark Mode mit der Variante dark:, die Vermeidung widersprüchlicher Utilities am selben Element, den sparsamen Einsatz der @apply-Direktive und das Auslagern von Komponentenklassen für wiederkehrende Muster.

Animations vermittelt Prinzipien des Motion Designs. Der Skill behandelt Eingangsanimationen (Fade, Slide, Scale), durch Scrollen ausgelöste Einblendungen, gestaffelte Sequenzen für Listen, Hover-Mikrointeraktionen und Ausgangsanimationen. Die Performance-Regeln sind eindeutig: Animiert werden nur transform und opacity, will-change wird sparsam eingesetzt und prefers-reduced-motion wird berücksichtigt.

Backend liefert Konventionen für serverseitigen Code. Dazu gehören die Benennung von Datenbanktabellen (Singular, snake_case), die Struktur von REST-Endpunkten, Muster für Authentifizierungs-Middleware, Eingabevalidierung, das Format von Fehlerantworten und Konventionen für Prisma-Schemas. So folgen generierte Backends einer konsistenten, vorhersehbaren Architektur.

Layouts behandelt Muster für die Seitenstruktur. Dazu gehören responsive Rastersysteme, Kombinationen aus Sidebar und Header, Sticky-Navigation, Inhaltscontainer mit Einschränkungen durch maximale Breiten und Mobile-First-Breakpoints. Der Skill enthält spezifische Muster für gängige Layouts: Dashboard (Sidebar + Inhalt), Marketing (Bereiche in voller Breite) und formularlastige Seiten (zentrierte Karte).

Typography legt die Texthierarchie fest. Der Skill definiert einen typografischen Maßstab (von Überschrift 1 bis Fließtext), Zeilenhöhenverhältnisse, den Einsatz von Schriftstärken (Regular für Fließtext, Medium für Labels, Semibold für Überschriften, Bold sparsam), die maximale Zeilenbreite für bessere Lesbarkeit und responsive Schriftgrößen.

Accessibility behandelt Standards für inklusives Design. Jedes interaktive Element erhält ein ARIA-Label. Fokuszustände sind sichtbar und gestaltet. Die Tastaturnavigation funktioniert über alle interaktiven Abläufe hinweg. Farbe ist niemals der einzige Hinweis auf einen Zustand. Formulareingaben haben zugehörige Labels. Bilder verfügen über beschreibende Alt-Texte.

GSAP stellt fortgeschrittene Animationsmuster für Projekte bereit, die sie benötigen. Dazu gehören die Integration von ScrollTrigger, die Komposition von Timelines, SplitText-Zeichenanimationen, Pin- und Parallax-Effekte sowie eine ordnungsgemäße Bereinigung in React (mit dem useGSAP-Hook und context.revert()).

Der Bewertungsalgorithmus

Die Bewertungsfunktion ist unkompliziert. Jeder Skill verfügt über eine Liste von Trigger-Keywords – Begriffen, die auf Relevanz hinweisen. Der Scorer prüft, wie viele Trigger eines Skills im Prompt des Nutzers vorkommen:

function scoreSkill(skill: Skill, prompt: string): number {
  const lower = prompt.toLowerCase();
  let hits = 0;
  for (const trigger of skill.triggers) {
    if (lower.includes(trigger.toLowerCase())) hits++;
  }
  return Math.min(hits / Math.max(skill.triggers.length * 0.3, 1), 1);
}

Skills mit einem Score über 0 sind Kandidaten. Die 4 besten optionalen Skills (nach Score) werden zusammen mit den 3 Kern-Skills geladen. So bleibt die gesamte Skill-Payload überschaubar – normalerweise maximal 7 Skills pro Generierung.

Vorher und nachher

Der Unterschied zwischen einer Generierung mit und ohne Skills lässt sich messen. Hier sind konkrete Beispiele:

Farbverwendung:

• Ohne Skills: bg-[#6366f1], text-[#1f2937], border-[#e5e7eb] – rohe Hex-Werte, die überall verteilt sind
• Mit Skills: bg-primary, text-foreground, border-muted – semantische Token, die sich an das Theme anpassen

Komponentenstruktur:

• Ohne Skills: Monolithische Komponente mit 300 Zeilen sowie integriertem State, Effects und Rendering
• Mit Skills: Aufgeteilt in einen benutzerdefinierten Hook für die Logik, einen Container für das Layout und präsentierende Unterkomponenten

Responsive Design:

• Ohne Skills: Nur Desktop-Layout oder uneinheitliche Verwendung von Breakpoints
• Mit Skills: Mobile-First mit schrittweiser Erweiterung an den sm:, md:, lg:-Breakpoints

Barrierefreiheit:

• Ohne Skills: Click-Handler auf <div>-Elementen, keine Fokusverwaltung, fehlende Labels
• Mit Skills: Semantisches HTML (<button>, <nav>, <main>), ARIA-Labels, per Tastatur navigierbar

Animationen:

• Ohne Skills: CSS-Transitions auf zufälligen Eigenschaften, kein Bewusstsein für Scrollpositionen, ruckelige Transforms
• Mit Skills: Nur GPU-beschleunigte Transforms, durch Scrollen ausgelöste Einblendungen mit Intersection Observer, Berücksichtigung der Präferenz für reduzierte Bewegung

Warum das Modell nicht feinabstimmen?

Das Feinabstimmen eines Modells mit hochwertigem Code ist ein alternativer Ansatz. VULK hat sich aus drei Gründen für die Injektion von Skills zur Laufzeit entschieden:

1. Flexibilität. Skills lassen sich sofort aktualisieren, ohne das Modell neu zu trainieren. Wenn Tailwind eine neue Version veröffentlicht oder React ein neues Muster einführt, werden die Skill-Dokumente aktualisiert und jede Generierung profitiert sofort davon.

2. Kombinierbarkeit. Verschiedene Projekte benötigen unterschiedliche Skill-Kombinationen. Eine statische Website braucht Skills für Typografie und Layout, aber kein Backend. Ein API-Service braucht Backend-Skills, aber keine Animationen. Durch das dynamische Laden wird kein Kontext verschwendet.

3. Modellunabhängigkeit. Skills funktionieren mit jedem KI-Modell – Claude, GPT-4o, Gemini, DeepSeek oder Modellen, die über BYOM verbunden sind. Die gleichen Qualitätsstandards gelten unabhängig davon, welches Modell den Code generiert.

Das System erweitern

Die Skill-Architektur ist auf Wachstum ausgelegt. Das Hinzufügen eines neuen Skills erfordert drei Dinge:

1. Einen Namen und eine Beschreibung
2. Eine Liste von Trigger-Keywords
3. Den Inhalt der Anweisungen

Zu den zukünftigen Skills auf der Roadmap gehören: E-Commerce (Produktlisten, Warenkorbmuster, Checkout-Abläufe), Datenvisualisierung (Diagrammbibliotheken, Dashboard-Layouts, Echtzeitaktualisierungen), Formulare (mehrstufige Assistenten, Validierungsmuster, Datei-Uploads) und SEO (Meta-Tags, strukturierte Daten, Sitemap-Generierung).

Das Skill-System steht auch für Beiträge offen. Wenn du Fachwissen in einem bestimmten Bereich hast und den von VULK generierten Code dort verbessern möchtest, ist das Skill-Format unkompliziert und leicht zu nutzen.

Das Ergebnis

Design Skills sind für den Nutzer nicht sichtbar – du interagierst nicht direkt mit ihnen. Sie arbeiten im Hintergrund und prägen jede Datei, die die KI schreibt. Die Wirkung ist kumulativ: konsistente Farbverwendung, eine saubere Komponentenarchitektur, responsive Layouts, barrierefreie Interfaces und flüssige Animationen – alles aus demselben Prompt in natürlicher Sprache.

Das Ziel ist einfach: Jedes mit VULK generierte Projekt soll aussehen und sich so anfühlen, als hätte es jemand erstellt, der weiß, was er tut.

Dokumentation: support.vulk.dev/skills