DESIGN.md vs SKILL.md: visueller Kontext und Ablauf
Beschreiben Sie das Erscheinungsbild im visuellen Kontext, das wiederkehrende Vorgehen im Skill und die aktuelle Änderung im Briefing. So bleibt die Richtung über Seiten hinweg konsistent, ohne überall dasselbe Layout zu erzwingen.
Geprüft am 8. Oktober 2026. Beachten Sie die offizielle Dokumentation für Ihre verwendete Tool-Version.
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 ansehenAster Hale — HTML-Portfolio-Vorlage für Produktdesigner
Passe Leistungen, Projektgeschichten und Kontaktablauf an deine Arbeit an.
Vorlage ansehenSkills 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
Was gehört in DESIGN.md?
Googles DESIGN.md beschreibt die visuelle Identität; die Spezifikation ist alpha. Erklären Sie Farbrollen, Typografie, Abstände, Bedienelemente und responsive Regeln samt Gründen. Das Beispiel ist einfaches Markdown und keine nach Googles Token-Schema validierte Datei.
Was gehört in SKILL.md?
Beschreiben Sie den wiederholbaren Ablauf: wann prüfen, was ansehen, welches Verhalten erhalten und wie Fehler berichten. Projektfakten und aktuelle Wünsche bleiben getrennt. Unser Beispiel zeigt reine Anweisungen und ist kein fertig verpackter Drittanbieter-Skill.
Beides mit einem konkreten Website-Briefing verbinden
Nennen Sie Seite, Besucher, Hauptaktion, echte Inhalte und geschütztes Verhalten. Lassen Sie Kontext und Vorgehen ausdrücklich lesen und die Grenzen vor Änderungen zusammenfassen. Ein Dateiname beweist weder automatische Erkennung noch Durchsetzung.
Kontext bei Website-Änderungen pflegen
Aktualisieren Sie nach angenommenen Änderungen die Erklärung und dokumentieren Sie tatsächliche Prüfungen. Halten Sie gemeinsame Bedienelemente konsistent und erlauben Sie unterschiedliche Abschnittslayouts. Verhalten und Barrierefreiheit müssen auch in Code und Browser überprüft werden; eine Notiz erzwingt sie nicht.
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.
Eine Notiz zur visuellen Identität
# Fieldnote visual context — original exercise
Audience: small product teams comparing research notes.
Primary action: Explore the workflow → #workflow.
Background: warm paper; primary text: ink; muted text must remain readable.
Typography: a strong but compact heading, readable body text, short line lengths.
Spacing: use a consistent scale; the research-note specimen has more breathing room.
Links and buttons: clear intent, visible keyboard focus, readable hover states.
Motion: brief and optional; respect reduced-motion preferences.
Mobile: stack the specimen below the introduction; avoid horizontal scrolling.
Protected facts: no invented customers, testimonials, prices or signup behavior.
This is plain Markdown context, not a validated DESIGN.md token-schema file.
If converting it to Google's format, check the current alpha specification.Ein rein anweisungsbasierter Prüf-Skill
---
name: review-website-layout
description: Review a website layout and propose one evidence-backed repair.
---
1. Read the project's supplied visual context and protected behavior.
2. Open the actual page at desktop and mobile widths.
3. Record a concrete layout defect and its viewport; do not infer a pass from code.
4. Propose one scoped repair before changing source.
5. Repeat the same check after the repair; retain unresolved defects.
This is an original instruction-only exercise, not Anthropic's frontend-design
skill, a packaged plugin, or a compatibility-tested installation.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.
Ein echter Versuch: Fieldnote mit CodexHäufige Fragen
Funktioniert das mit Claude Code, Codex oder Stitch?
Nutzen Sie Format und Lademechanismus der jeweiligen Dokumentation. Einfacher Kontext lässt sich als Text übergeben; Umwandlung, Erkennung und Erweiterungen benötigen eigene Prüfungen. Diese Anleitung verspricht weder einen Neruve-DESIGN.md-Export noch automatische Integration.
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.