Neruve
Startseite

Frontend Design Skills: Claude Code und Codex einrichten

Wähle einen Skill für deine Aufgabe, installiere seinen vollständigen Ordner und gib dem Agent einen konkreten Auftrag. Hier findest du die lokale Einrichtung, ein im Browser geprüftes Beispiel und sechs frei zugängliche Ressourcen.

Von Neruve · Aktualisiert am

Mit einer funktionierenden Seite starten

Sieh dir eine funktionierende HTML-Seite an und übe diese Techniken mit dem Quellcode und dem zugehörigen Prompt in deinem Coding-Agenten.

Framewise — HTML-Landingpage-Vorlage für KI-Produkte

Übe eine klare Produktgeschichte, visuelle Hierarchie und einen responsiven Einstieg.

Vorlage ansehen

Aster Hale — HTML-Portfolio-Vorlage für Produktdesigner

Passe Leistungen, Projektgeschichten und Kontaktablauf an deine Arbeit an.

Vorlage ansehen

Skills bleiben ohne Anmeldung kostenlos lesbar und kopierbar. Vorlagenvorschauen sind öffentlich; Quellcode und zugehörige Prompts erfordern ein Konto und den entsprechenden Kauf oder Tarif. Quellcodezugriff und Preise ansehen

Vor der Installation den passenden Skill wählen

Anthropics frontend-design bietet Hinweise zur visuellen Gestaltung. Taste ist ein eigenständiges Community-Projekt; Framer- und Motion-Skills lösen andere Aufgaben. Eine README ist keine installierbare SKILL.md. Prüfe Quelle, Lizenz und Abhängigkeiten. Die Anleitung nutzt Anthropics Skill als Beispiel, nicht als universelles Installationsverfahren.

In Claude Code installieren

Eine lokale Installation im Projekt begrenzt den Geltungsbereich auf dieses Repository. Behalte Ordnerstruktur, Lizenz und Hilfsdateien bei. Beim Kopieren an den Agent wird ein Installationsauftrag kopiert; die Website installiert nichts auf deinem Rechner.

  1. Öffne die unten verlinkte frontend-design-Quelle und prüfe SKILL.md, Lizenz und referenzierte Dateien.
  2. Kopiere den vollständigen Skill-Ordner nach .claude/skills/frontend-design/ im Projektstamm. Vergleiche vorhandene Dateien vor einem Ersetzen.
  3. Öffne Claude Code in diesem Projekt. Tippe / und prüfe, ob frontend-design erscheint. Wähle den Skill und ergänze deinen Auftrag.
.claude/skills/frontend-design/SKILL.md

Für dieses Beispiel verwendest du /frontend-design mit deinem Auftrag. Fehlt der Eintrag, prüfe Pfad, SKILL.md-Dateinamen, Repository und Workspace-Richtlinien. Plugin-Skills können einen Namensraum im Befehl verwenden.

Offizielle Einrichtungsanleitung

In Codex installieren

Codex verwendet ein anderes Projektverzeichnis. Kompatible Anweisungen lassen sich wiederverwenden; prüfe spezielle Befehle und Abhängigkeiten vor dem Ausführen. Ein Skill stellt weder ein Backend noch Konten für andere Dienste bereit.

  1. Kopiere den geprüften Skill samt Lizenz und Hilfsdateien nach .agents/skills/frontend-design/ im Projektstamm.
  2. Prüfe den YAML-Kopf von SKILL.md: Er enthält name und description, danach folgen die Anweisungen. Der Name in diesem Beispiel lautet frontend-design.
  3. Wähle den Skill in Codex CLI oder der IDE-Erweiterung mit /skills oder $. Nutze in der App die Skill-Auswahl. Starte Codex neu, falls Änderungen nicht erkannt werden.
.agents/skills/frontend-design/SKILL.md

Wähle in CLI/IDE $frontend-design und ergänze den Auftrag. Prüfe, ob der Agent die Datei tatsächlich liest; der Ordnername allein belegt keine Nutzung.

Offizielle Einrichtungsanleitung

Einen Auftrag ausführen und die echte Seite prüfen

Benenne Seite, Zielgruppe, Hauptaktion und unveränderliche Fakten. Nutze einen Auftrag oder das Beispiel unten. Prüfe 1280, 390 und 320 px, den Hauptlink und die Tastaturbedienung. Bewahre Quellcode, Screenshots und festgestellte Fehler auf.

Frontend Design Skill fehlt oder wird nicht ausgelöst?

Prüfe zuerst die Installationsart. Ein Projektordner und ein Claude-Code-Plugin verwenden unterschiedliche Orte und Befehlsnamen.

Ein Skill-Ordner im Projekt
Das manuelle Claude-Code-Beispiel legt SKILL.md und Begleitdateien in .claude/skills/frontend-design/ ab. Codex nutzt das obige .agents/skills/-Beispiel. Die README ist nicht die installierbare Datei.
Ein Skill aus einem Plugin
Öffne in Claude Code /plugin und prüfe Installation, Aktivierung und den richtigen Projekt- oder Nutzerbereich. Verwende den angezeigten Menübefehl; er kann einen Namensraum haben. Folge der Anleitung des Plugins.

In dieser Reihenfolge prüfen

  1. Prüfe das aktuelle Projekt, die Skill-Quelle und den Installationsbereich. Behalte nötige Begleitdateien und vergleiche gleichnamige Ordner vor dem Ersetzen.
  2. Prüfe den Namen SKILL.md und YAML ab der ersten Zeile. In Claude Code prüfst du name, description und Aufrufsteuerung. Ungültiges YAML kann die automatische Zuordnung verhindern, obwohl der manuelle Aufruf funktioniert.
  3. Prüfe, ob der Skill gelistet ist. Frage Claude Code nach verfügbaren Skills und prüfe das /-Menü. Ist er gelistet, aber ungenutzt, rufe den angezeigten Befehl mit einer passenden Aufgabe auf und prüfe disable-model-invocation sowie user-invocable.
  4. Prüfe, ob der Agent den gewünschten Skill wirklich liest und die Aufgabe ausführt. Bewahre Dateipfad oder Werkzeugprotokoll mit dem Ergebnis auf und prüfe die Seite im Browser. Ordnername oder hübscher Screenshot belegen keine Skill-Nutzung.

Das Codex-Beispiel unten liest eine feste Dateiversion manuell. Automatische Erkennung und Claude-Code-Plugin-Installation wurden damit nicht geprüft. Nutze die offizielle Dokumentation deiner Version.

Offizielle Einrichtungsanleitung

Einen passenden Skill auswählen

Alle sechs Seiten lassen sich ohne Anmeldung lesen und kopieren. Beachte die jeweiligen Voraussetzungen: Framer-Integrationen, Videowerkzeuge und Hilfsmodule sind keine austauschbaren allgemeinen Frontend-Skills.

Eigene Übungen zum Anpassen

Diese eigenen Neruve-Beispiele bleiben auf Englisch. Sie sind vorgeschlagene Eingaben, keine geprüften Tool-Ergebnisse oder kostenpflichtigen Template-Prompts. Ersetzen Sie die fiktiven Angaben vor der Verwendung.

Ein Projektbrief für einen Frontend-Design-Skill

Work in this project's current stack. Read the existing routes, shared components,
styles and the selected frontend-design skill before proposing changes.
Use only the project files and assets I have permission to use.

Task: improve a fictional research-notes landing page for small product teams.
Page goal: explain collect → compare → decide; the primary link targets #workflow.
Design direction: warm paper, ink text, a clear research-note specimen and generous spacing.
Keep the existing API contracts, authentication, prices and route paths unchanged.
Use the skill for the design procedure; use my brief for product facts.

First propose the section order and the shared typography/spacing decisions.
Then implement one coherent pass. Check 1280, 390 and 320 px widths, keyboard focus,
the workflow anchor and reduced motion. Report the checks actually run and defects
still open. Do not invent testimonials, customer logos, metrics or a signup backend.

Eine gezielte Designprüfung

Review this existing page using the selected design skill.
Before editing, list the three highest-impact defects with a selector or section
name, viewport width and screenshot evidence. Separate styling defects from
broken behavior. Choose one defect, explain the smallest change that addresses it,
and preserve the current copy, prices, forms and navigation contracts.
After the repair, repeat the same browser check and report any regression.
Do not replace the whole page or add another component library for this repair.

Dokumentiertes Beispiel: Fieldnote mit frontend-design

Eine fiktive Forschungsnotiz-Seite mit Notizbeispiel, Sammeln–Vergleichen–Entscheiden und einem funktionierenden Abschnittslink. Öffne das Beispiel oder lade Auftrag und HTML herunter. Das Beispiel bleibt auf Englisch.

Am 13. Oktober 2026 in Codex nach manuellem Lesen einer festgelegten Anthropic-Skill-Version umgesetzt und im Browser geprüft. Verwendete Quelle: Anthropic frontend-design · dbd4588

Vollständige Eingabe herunterladen (Englisch)Unveränderten HTML-Quelltext herunterladen (Englisch)Generierten Versuch öffnen (Englisch)
Fieldnote-Desktopbeispiel mit Überschrift neben einer fiktiven Forschungsnotiz
1280 × 900: Überschrift und Forschungsnotiz nebeneinander.
Fieldnote-Mobilbeispiel mit Forschungsnotiz unter der Einführung
390 × 844: Die Notiz folgt der Einführung, die Hauptaktion bleibt zugänglich.

Zum Wiederholen installierst du den geprüften Skill wie oben beschrieben und übergibst den heruntergeladenen Auftrag. Vergleiche 1280, 390 und 320 px; prüfe Abschnittslink und Tastaturfokus. Halte Unterschiede fest.

Ein einzelnes, manuell angeleitetes Beispiel. Keine Prüfung der automatischen Skill-Erkennung, von Claude Code, Taste oder eines Neruve-Generators. Kein Modellvergleich, Registrierungsablauf oder Nachweis höherer Konversion.

Häufige Fragen

Garantiert ein Design-Skill eine bessere Website?

Nein. Das Beispiel zeigt eine Codex-Umsetzung nach manuellem Lesen einer festgelegten Anthropic-Skill-Version. Es gibt keinen Vergleich ohne Skill und keinen allgemeinen Verbesserungsnachweis. Das ältere Fieldnote-Beispiel entstand ohne Design-Skill.

Designs und zugehörige Prompts entdecken

Neruves öffentlicher Katalog bietet Webdesigns, verfügbare zugehörige Prompts und ein Skills-Verzeichnis. Interaktive Vorschauen sind ohne Anmeldung verfügbar; Prompts unterliegen den Zugriffsrechten des Eintrags und Tarifs. Dieser Workflow nutzt dein eigenes Entwicklungstool und benötigt keinen öffentlichen Neruve-Website-Generator.

Offizielle Quellen

Externe Tools und Skills gehören ihren jeweiligen Autoren. Die Links dienen als Quellen und bedeuten weder eine Partnerschaft noch enthaltene Zugangsrechte.