1. Die Aufgabe beschreiben
Claudes Vision(öffnet in neuem Tab)- und Coding-Fähigkeiten arbeiten zusammen, um deine Beschreibungen und Bilder in funktionierende Weboberflächen zu verwandeln. In Kombination mit deinem Lebenslauf und früheren Projekten kann Claude ein Portfolio erstellen, das sowohl deine berufliche Geschichte als auch deinen bevorzugten Designstil widerspiegelt.
Sag Claude, dass es deine Portfolio-Website anhand deines hochgeladenen Lebenslaufs und deiner Projektdateien erstellen soll. Gib deine Designvorlieben an und erwähne, dass du Anleitung zur späteren Bereitstellung benötigst.
Hilf mir, eine professionelle Portfolio-HTML-Seite zu erstellen, um meine berufliche Laufbahn und meine Erfolge zu präsentieren. Ich habe meinen Lebenslauf, Projektbeschreibungen und einige Design-Inspirationsdateien hochgeladen. Nutze diese, um meinen Hintergrund und meine ästhetischen Vorlieben zu verstehen.
Für die Designrichtung möchte ich etwas Anspruchsvolles und Redaktionelles—denke an eine hochwertige Kreativagentur, nicht an eine Unternehmensvorlage. Vermeide generische Layouts, KI-typisch wirkende Farbverläufe oder zu viel Symmetrie. Die Seiten, die ich bewundere (in den Uploads), haben eine organische, handgefertigte Qualität mit unerwarteten Details.
Nachdem du sie erstellt hast, führe mich durch die Veröffentlichung im Internet. Geh davon aus, dass ich noch nie eine Website bereitgestellt habe—ich brauche genaue Schritte, die keine Programmierkenntnisse erfordern.
2. Claude Kontext geben
Gib Claude Informationen zu deinem beruflichen Hintergrund und deinen Designvorlieben, damit eine Seite entsteht, die deine Arbeit authentisch widerspiegelt.
Erforderlicher Kontext
Lade Dateien hoch, die deine berufliche Geschichte erfassen, wie deinen Lebenslauf, frühere Projekte und andere Erfolge, die du hervorheben möchtest.
Füge außerdem Dateien hinzu, die deine ästhetischen Vorlieben vermitteln. Screenshots von Portfolios, die du bewunderst, oder sogar UI-Code-Schnipsel aus Designs, die dir gefallen, helfen Claude, deine ästhetische Ausrichtung zu verstehen.
3. Was Claude erstellt
Claude erstellt eine vollständige Portfolio-Seite als HTML-Artefakt. Das Artefakt enthält deine beruflichen Informationen, Projektpräsentationen und Designentscheidungen, die zu deinen ästhetischen Vorlieben passen.
Ich habe deine Portfolio-Website erstellt. Das Design greift die redaktionelle, handgefertigte Ästhetik aus deinen Inspirationsdateien auf—ich habe symmetrische Layouts und Unternehmensvorlagen vermieden, zugunsten von etwas, das organischer wirkt. Die Klebeband-Effekte, die du erwähnt hast, erscheinen auf den Projektkarten, und ich habe dezente Scroll-Animationen hinzugefügt, die aktiviert werden, während du dich durch die Seite bewegst.
Deine Lebenslauf-Informationen strukturieren den Über-mich-Bereich, während jede deiner Projektbeschreibungen einen eigenen Präsentationsbereich mit Platz für Bilder und Details erhält. Die Typografie verwendet eine Serif-Sans-Kombination, die zum anspruchsvollen Ton passt, den du wolltest, und die Farbpalette ergibt sich aus der Analyse deiner Design-Referenzen. Sieh dir deine Portfolio-Webseite an(öffnet in neuem Tab)
Du kannst dies in jedem Browser öffnen, um zu sehen, wie es aussieht. Wenn du Farben anpassen, die Projektreihenfolge ändern oder einen der Texte bearbeiten möchtest, sag mir, was du anders haben möchtest.
4. Folgeprompts
Setze das Gespräch mit Claude fort, um weiter zu verfeinern, zu erweitern oder zu erkunden.
Deine Website live bereitstellen
Claude kann sich mit Netlify(öffnet in neuem Tab) verbinden, um den Code deines Artefakts zu übernehmen und als Live-Website bereitzustellen—ohne dass du selbst programmieren musst. Ausgehend vom HTML-Code deines Artefakts kann Claude dir beibringen, wie du den technischen Bereitstellungsprozess durchführst.
Verwende den Code aus meinem Portfolio-Artefakt, ich möchte eine echte Website erstellen. Nutze meinen Netlify-Konnektor, erstelle ein neues Website-Projekt direkt in Netlify und führe mich durch die Live-Bereitstellung. Ich teile den Code aus meinem Portfolio-Artefakt. Nutze meinen Netlify-Konnektor, um ein neues Website-Projekt zu erstellen und dies als Live-Website bereitzustellen. Gib mir die URL, sobald sie live ist, und erkläre mir, wie ich die Website später aktualisieren kann, falls ich Änderungen vornehmen möchte.
Interaktive Effekte erstellen
Füge durch codierte Animationen und Interaktionen den letzten Schliff hinzu. Claude kann HTML, CSS und JavaScript schreiben, um deiner Website funktionales Verhalten hinzuzufügen—Hover-Effekte, Scroll-Animationen oder interaktive Elemente, die auf Benutzeraktionen reagieren.
Füge Hover-Effekte auf den Projektkarten hinzu—vielleicht eine dezente Verschiebung oder Rahmenänderung. Wenn ich zu einem Abschnitt scrolle, soll die Überschrift leicht einblenden. Nichts Auffälliges, nur raffinierte Interaktionen, die Liebe zum Detail zeigen.
Ein Projekt zu einer detaillierten Fallstudie erweitern
Tauche tief in deine wichtigste Arbeit ein, mit dem vollständigen Designprozess.
Nimm das Projekt „Infrastructure Monitoring Dashboard" und erweitere es zu einer vollständigen Fallstudienseite. Füge das Problem, die Recherchephase, den Designprozess, die Iterationen, die Herausforderungen, denen wir begegnet sind, wie wir sie gelöst haben, und die messbare Wirkung hinzu. Füge Abschnitte für Wireframes, Nutzerfeedback und gelernte Lektionen hinzu.
5. Tricks, Tipps und Problembehandlung
Das Design deiner Ergebnisse verbessern
Claude entscheidet sich manchmal für funktionalere Designentscheidungen—Standardschriftarten, Standardfarben, ausreichende Abstände. Für abwechslungsreichere Ergebnisse probiere verschiedene Prompting-Techniken aus. Beziehe dich auf Qualitätsmaßstäbe („erstklassiger Beratungsbericht", „Premium-SaaS-Produkt"), stelle Claude als Fachexperten dar („geh dies an, wie es ein Senior-Designer tun würde"), oder bitte Claude, seine eigene Ausgabe anhand hoher Qualitätsstandards zu bewerten und zu verfeinern. Du kannst Claude auch sagen, was es nicht tun soll („vermeide generisches Unternehmensblau", „verwende keine Standardtypografie"). Bis zum endgültigen Ergebnis kann es Iterationen brauchen—bewerte nach der ersten Ausgabe, was fehlt, und fordere Verbesserungen an.
Skills für konsistente Designstandards verwenden
Erstelle einen Skill(öffnet in neuem Tab), der deine visuellen Referenzen, erfolgreiche Beispiele und spezifische Designvorlieben bündelt, damit Claude deine etablierten Standards anwenden kann, ohne dass du deine Vorlieben jedes Mal neu erklären musst. Bitte Claude, dir zu helfen, einen Content-Design-Skill zu erstellen, der deine Formatierungsvorlieben, ästhetische Ausrichtung und Qualitätsstandards in einen wiederverwendbaren Workflow bündelt. Erfahre mehr über das Erstellen von Skills(öffnet in neuem Tab).
6. Bereit, es selbst auszuprobieren?
Arbeite mit Claude zusammen, um eine Portfolio-Seite zu erstellen, die deine Arbeit repräsentiert, und lerne, sie live bereitzustellen—alles ohne Code zu schreiben.