Claude Design: Website-Prompts und Code-Übergabe

Design-Ergebnis festlegen

Fordern Sie ein Weblayout, einen Prototyp oder eine Überarbeitung an und nennen Sie das Gerät. Prüfen Sie aktuelle Claude-Design-Abläufe und Kontofunktionen in Anthropic-Dokumenten. Ein gestalteter Button bedeutet keine angeschlossene Route oder Dienstleistung.

Inhalte und Designsystem bereitstellen

Liefern Sie Zielgruppe, Ziel, Abschnitte, Aktionsziele und faktengerechte Texte. Fügen Sie verfügbare Designsysteme und Ressourcen hinzu. Verlangen Sie Desktop und Mobilansicht, lesbare Hierarchie und markierte Platzhalter, keine erfundenen Kundenlogos oder Kennzahlen.

Jeweils einen Abschnitt verfeinern

Benennen Sie Abschnitt, Breite und Problem sowie Inhalte und Regeln, die bleiben müssen. Unterscheiden Sie tatsächlich testbare Prototyp-Interaktionen von nur beschriebenem Verhalten. Prüfen Sie die neue Ausgabe vor dem nächsten Schritt.

Übergabe zur Umsetzung vorbereiten

Übergeben Sie Design-Dateien, Ressourcen, Briefing und offene Zustände. Lassen Sie das bestehende Projekt prüfen und fehlende Abhängigkeiten melden. Bewahren Sie Fakten und Backend-Verträge; prüfen Sie reale Routen, Aktionen, Tastatur und mobile Layouts.

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.

Create a website design for Fieldnote, a fictional research-notes app.
Audience: small product teams. Goal: explain collect → compare → decide.
Use a warm-paper and ink direction; show one clearly fictional note specimen.
Include an introduction, specimen, three-step workflow and closing action.
The action is “Explore the workflow”; the intended destination is #workflow.
Show desktop and 390 px layouts. Keep note details readable on mobile.
Distinguish a designed control from an implemented interaction.
Do not invent signup, prices, testimonials, customer logos or product metrics.
If using a supplied design system, preserve its typography and component rules.
List open interaction and content decisions before handing the design to code.

Implement the approved Fieldnote design in the current project.
First inspect its framework, routes, components and assets.
Use the actual available design files plus this brief, not only a screenshot.
Keep the supplied copy, semantic hierarchy and #workflow destination.
Preserve backend contracts and authentication; add no signup or payment service.
Record which design elements are implemented and which remain visual placeholders.
Check desktop, 390 and 320 px layouts, the workflow link and keyboard navigation.
Return changed files and actual check results. If design import or assets are
unavailable, name that dependency rather than claiming a completed handoff.

Ein echter Versuch: Fieldnote mit Codex

Fieldnote enthält das originale Briefing, unverändertes Codex-HTML sowie Desktop- und Mobilprüfungen. Es wurde kein frontend-design Skill bereitgestellt; dies ist kein Test von ChatGPT oder Claude Design.

Häufige Fragen

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.

• Bibliothek entdecken
• HTML-Landingpages für SaaS und Prompts
• Portfolio-Website-Vorlagen und Design-Prompts

Offizielle Quellen

• Anthropic · Claude Design
• Anthropic · Prototypes and UX

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