Website-Design-Prompts für Claude Code: Praxisleitfaden

Ein kleiner, überprüfbarer Ablauf

1. Öffne Claude Code im Zielprojekt und lasse Stack, Routen und Komponenten vor Änderungen prüfen. Halte Backend-Verträge und bestehendes Verhalten fest.
2. Gib Referenz-Prompt und separates Briefing mit Zielgruppe, Zweck, Texten, Assets, Hauptaktion und Grenzen. Fordere vor dem Editieren einen Vorschlag an.
3. Prüfe das erste Ergebnis im Browser. Melde einen konkreten Fehler mit Viewport und Abschnitt, fordere eine gezielte Korrektur und wiederhole die Prüfung.

Eigene SaaS- und Portfolio-Briefings

Dieses fiktive Briefing stammt von Neruve und ist unabhängig von bezahlten Prompts. Der englische Text bleibt zur Reproduzierbarkeit erhalten.

Fieldnote is a fictional shared research-notes workspace for small product teams.
Create a calm cream-and-ink landing page. Explain collect → compare → decide.
Show a realistic sample research note, then a three-step workflow.
The primary link is “Explore the workflow” and targets #workflow.
Do not invent logos, testimonials, user counts, security guarantees, pricing,
forms or a working signup flow.
Use semantic HTML, one clear h1, readable contrast and visible keyboard focus.
Support a 390 px mobile view without horizontal overflow and reduced motion.

Mira Chen is a fictional independent product designer.
Create a warm-neutral portfolio with three clearly labelled fictional projects.
For each project explain the role, constraint and illustrative outcome.
The primary link is “View selected work” and targets #projects.
Do not invent awards, employer logos, real contact addresses or business metrics.
Use semantic HTML, one clear h1, readable contrast and visible keyboard focus.
Support a 390 px mobile view without horizontal overflow and reduced motion.

Was du am Ergebnis prüfen solltest

Prüfe 390-px-Mobilansicht und Desktop: klare Hauptüberschrift, lesbaren Text, funktionierende Links, sichtbaren Tastaturfokus und keinen horizontalen Überlauf. Ersetze Demo-Aussagen durch belegte Fakten.

Ein Claude-Prompt für die Überarbeitung bestehender Websites

Beginne mit einem Hero, der vorhandenen Komponentenbibliothek und dem ursprünglichen Aktionsziel. Der vollständige Auftrag schützt Produktfakten und Verhalten und gibt Claude Code eine konkrete Gestaltungsaufgabe.

Dieses fiktive Briefing stammt von Neruve und ist unabhängig von bezahlten Prompts. Der englische Text bleibt zur Reproduzierbarkeit erhalten.

Improve the hero of this existing website in Claude Code.
Read the current framework, routes, shared components, design tokens and hero source.
Use the project's installed component library; do not add another UI framework.
Goal: make the existing offer and primary action easier to understand.

Before editing, record the hero at 1280, 390 and 320 px. Name the affected files,
the primary action's exact destination and one concrete presentation defect.
Preserve all copy, product facts, prices, route paths, API calls, forms,
authentication, checkout, analytics events, metadata, canonical and hreflang.
Use only supplied or authorized assets. Do not invent social proof or offers.

Propose one scoped change to hierarchy, spacing, typography or image placement.
After the plan is accepted, implement only the hero using existing components.
If a selected frontend design skill is available, read it for design guidance;
the existing project's behavior and this brief remain the protected contract.

Deliver the changed files and before/after screenshots at the same three widths.
Test the original primary link, visible keyboard focus and reduced motion.
Confirm that unchanged URLs, product facts and event names stayed unchanged.
Separate checks actually run from pending checks; report any regression.
Do not publish the site or describe this input as a verified Claude output.

Review the hero change against the original website and brief.
Compare the same 1280, 390 and 320 px views. Follow the original primary action.
Check for horizontal overflow, unreadable text, hidden content and lost focus.
Compare the protected routes, copy, facts, prices, form/API contracts and SEO tags.
If a defect remains, give its selector, viewport, expected behavior and evidence.
Repair only that defect, then repeat the same checks and list the actual results.
If you cannot run the browser or inspect a contract, mark it as pending.

Belege zum Ergebnis aufbewahren

Bewahre geänderte Dateien, Screenshots gleicher Breite, das ursprüngliche Aktionsziel sowie Prüfungen von Tastatur, Mobilansicht und geschützten Verträgen auf. Kennzeichne nicht durchführbare Prüfungen als offen.

Dies sind eigene vorgeschlagene Claude-Code-Eingaben, keine gemessenen Claude-Ausgaben. Wähle Skills nach Aufgabe, prüfe Abhängigkeiten und bewahre Projektfakten. Taste ist ein unabhängiges Community-Projekt.

• Frontend Design Skill fehlt oder wird nicht ausgelöst?
• Taste Skill — Frontend-Design (v2 experimentell)
• Website Redesign Prompts für bestehende Projekte

Ein echter Versuch: Fieldnote mit Codex

Wir haben den ursprünglichen Fieldnote-Brief mit Codex ausgeführt und die gesamte Ausgabe gespeichert. Die fiktive Forschungsnotizen-Seite zeigt die Prüfung desselben Briefs mit einem anderen Coding-Agenten. Der Claude-Code-Versuch endete mit einem Anmeldefehler ohne Seite.

Aufgezeichnet am 4. Oktober 2026 mit Codex CLI 0.145.0: eine erfolgreiche Generierung, 35,92 Sekunden, ohne Datei- oder Shell-Werkzeuge. Die CLI meldete keine Modellkennung. Eingabe, Ausgabe und Screenshots bleiben auf Englisch.

Browserprüfungen umfassten Layouts bei 1280, 390 und 320 Pixeln, den Workflow-Anker und den Tastatur-Sprunglink. Die Seite hat ein h1 und kennzeichnet die Notiz als fiktiv. Anmeldung, Preise und Testimonials fehlen. Textkontrast und Regeln für reduzierte Bewegung wurden ebenfalls geprüft; dies ist kein vollständiges Barrierefreiheitsaudit.

Lade die vollständige englische Eingabe herunter und führe sie in einem angemeldeten Coding-Agenten aus. Öffne das HTML im Browser, prüfe dieselben Breiten und Links und dokumentiere Fehler vor einer gezielten Korrektur. Der Quelltext bewahrt unser tatsächliches Ergebnis; ein neuer Lauf kann anders aussehen.

Dies ist ein eigenständiger HTML/CSS-Versuch, kein Claude-Code-Erfolgsfall und kein Test von Neruves Generierungsdienst. DESIGN.md oder der frontend-design Skill wurden nicht mitgegeben. Das Ergebnis belegt weder Überlegenheit, Registrierungsconversion, SEO-Wachstum noch KI-Zitate.

DESIGN.md und SKILL.md erfüllen verschiedene Aufgaben

Googles DESIGN.md verbindet YAML-Designtokens und Markdown zur Verwendung und beschreibt die visuelle Identität. Fordere Claude Code ausdrücklich zum Lesen auf; automatische Erkennung oder Neruve-Export werden nicht zugesagt. Format und CLI befinden sich derzeit in der Alpha-Phase und können sich ändern.

Ein Claude-Code-Skill liefert wiederverwendbare Aufgabenanweisungen in SKILL.md mit Frontmatter. Prüfe Quelle, Lizenz und Rechte vor Installation. Die Designdatei liefert Kontext, der Skill Vorgehen oder Fähigkeiten.

Was Neruve heute bietet

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.

Eine Referenz ist ein Ausgangspunkt. Ergebnisse variieren nach Modell, Tool und Version; Dateien und Zugang richten sich nach Artikel und Tarif.

Offizielle Quellen

• Claude Code
• SKILL.md
• DESIGN.md