Benutzerdefinierte Webseite erstellen
Erstellen Sie eine Portfolio-Website, um Ihre Arbeit zu präsentieren, und erfahren Sie, wie Sie sie live bereitstellen, ohne eine Codezeile schreiben zu müssen.
- AutorAnthropic
- KategoriePersönlich
- ModellSonnet 4.5
- Funktionen
- TeilenLink kopieren
1
Beschreibung der Aufgabe
Die Vision und Programmierfähigkeiten von Claude arbeiten zusammen, um Ihre Beschreibungen und Bilder in funktionierende Weboberflächen zu verwandeln. In Verbindung mit Ihrem Lebenslauf und früheren Projekten kann Claude ein Portfolio erstellen, das sowohl Ihre berufliche Beschreibung als auch Ihren bevorzugten Designstil widerspiegelt.
Lassen Sie Claude Ihre Portfolio-Website mit Ihrem hochgeladenen Lebenslauf und Projektdateien erstellen. Geben Sie Ihre Designpräferenzen an und dass Sie eine Anleitung benötigen, wie es letztendlich bereitgestellt wird.
Hilf mir, eine professionelle Portfolio-HTML-Seite zu erstellen, um meine berufliche Karriere und meine Leistungen zu präsentieren. Ich habe meinen Lebenslauf, Projektbeschreibungen und einige Design-Inspirationsdateien hochgeladen. Verwende diese, um meinen Hintergrund und meine ästhetischen Präferenzen zu verstehen.
Für die Designrichtung möchte ich etwas Raffiniertes und Redaktionelles – eine High-End-Kreativagentur, keine Unternehmensvorlage. Vermeide generische Layouts, KI-typische Farbverläufe oder zu viel Symmetrie. Die Websites, die ich bewundere (in den Uploads), haben eine organische, handgefertigte Qualität mit unerwarteten Details.
Erkläre mir nach der Erstellung, wie ich es live im Internet veröffentliche. Nimm an, ich hätte noch nie eine Website bereitgestellt – ich benötige genaue Schritte, die keine Programmierkenntnisse erfordern.
2
Claude Kontext geben
Stellen Sie Claude Informationen zu Ihrem beruflichen Hintergrund und Ihren Designpräferenzen zur Verfügung, um eine Website zu erstellen, die Ihre Arbeit repräsentiert.
Erforderlicher Kontext
Laden Sie Dateien hoch, die Ihren beruflichen Werdegang enthalten, wie Ihren Lebenslauf, vergangene Projekte und andere Leistungen, die Sie hervorheben möchten.
Fügen Sie auch alle Dateien hinzu, die Ihre ästhetischen Präferenzen vermitteln. Screenshots von Portfolios, die Sie bewundern, oder sogar UI-Code-Schnippets von Designs, die Ihnen gefallen, helfen Claude dabei, Ihre ästhetische Richtung zu verstehen.
No items found.
Lebenslauf
Projektbeschreibungen (3–5 detaillierte Beispiele Ihrer besten Arbeiten)
Lebenslauf
Optionaler Kontext
Aktivieren Sie Erweitertes Denken, damit Claude mehr Zeit für die Erstellung hochwertiger Ergebnisse hat.
Erweitertes Denken
3
Was Claude generiert
Claude erstellt eine komplette Portfolio-Seite als HTML-Artefakt. Das Artefakt enthält Ihre professionellen Informationen, Projektfälle und Designentscheidungen, die Ihren ästhetischen Präferenzen entsprechen.
Von Claude
Ich habe Ihre Portfolio-Website erstellt. Das Design bezieht die redaktionelle, handgefertigte Ästhetik in Ihren Inspirationsdateien ein – ich habe symmetrische Layouts und Unternehmensvorlagen vermieden, damit es sich organischer anfühlt. Die von Ihnen erwähnten Bandeffekte erscheinen auf Projektkarten, und ich habe subtile Scrollanimationen hinzugefügt, die aktiviert werden, wenn Sie sich durch die Seite bewegen.
Ihre Lebenslaufinformationen strukturieren den Abschnitt "Über", während Ihre Projektbeschreibungen jeweils einen eigenen Präsentationsbereich mit Platz für Bilder und Details erhalten. Die Typografie verwendet eine Serifen-sans-Paarung, die dem gewünschten Farbton entspricht, und die Farbpalette stammt aus der Analyse Ihrer Designreferenzen.
Portfolio-Webseite anzeigen
Sie können dies in jedem Browser öffnen, um zu sehen, wie es aussieht. Wenn Sie Farben anpassen, die Projektreihenfolge ändern oder den Text ändern möchten, teilen Sie mir mit, was ich anders machen soll.
4
Nachfolgende Prompts
Führen Sie das Gespräch mit Claude fort, um die Ergebnisse zu verfeinern und zu verbessern.
Stellen Sie Ihre Website live bereit
Claude kann eine Verbindung zu Netlify herstellen, um den Code Ihres Artefakts zu übernehmen und als Live-Website bereitzustellen – ohne Programmieraufwand. Claude kann Ihnen aus dem HTML-Code Ihres Artefakts beibringen, wie der technische Bereitstellungsprozess zu handhaben ist.
Mit dem Code aus meinem Portfolio-Artefakt möchte ich eine echte Website erstellen. Verwende 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. Verwende meinen Netlify-Konnektor, um ein neues Website-Projekt zu erstellen und dieses als Live-Website bereitzustellen. Gib mir die URL, sobald sie live ist, und erkläre mir, wie ich die Website später aktualisieren kann, wenn ich Änderungen vornehmen möchte.
Erstellen Sie interaktive Effekte
Fügen Sie codierte Animationen und Interaktionen hinzu. Claude kann HTML, CSS und JavaScript schreiben, um Ihrer Website funktionales Verhalten hinzuzufügen – Hebeeffekte, Scrollanimationen oder interaktive Elemente, die auf Benutzeraktionen reagieren.
Füge den Projektkarten Effekte für Mausbewegungen hinzu – vielleicht eine subtile Verschiebung oder Veränderung der Ränder. Wenn ich zu einem Abschnitt scrolle, soll die Überschrift ein wenig darin übergehen. Nichts Auffälliges, nur raffinierte Interaktionen, die Liebe zum Detail zeigen.
Erweitern Sie ein Projekt in eine detaillierte Fallstudie
Tauchen Sie ein in Ihre wichtigsten Arbeiten mit dem vollständigen Designprozess.
Nimm das Dashboard-Projekt für die Infrastrukturüberwachung und erweitere es zu einer vollständigen Fallstudie. Gib das Problem, die Forschungsphase, den Designprozess, Iterationen, die Herausforderungen, wie wir sie gelöst haben, und die messbaren Auswirkungen an. Füge Abschnitte für Wireframes, Benutzerfeedback und Lektionen hinzu.
5
Tricks, Tipps und Problemlösung
Verbessere das Design deiner Ergebnisse
Claude kann sich manchmal für funktionalere Designoptionen entscheiden: Standardschriften, Standardfarben, angemessenen Abstand. Für vielfältigere Ergebnisse sollten Sie verschiedene Prompting-Techniken verwenden. Sie können Qualitätsbenchmarks verwenden ("erstklassiger Beratungsbericht", "Premium-SaaS-Produkt"), Claude als Experte darstellen ("Gehe dies wie ein leitender Designer an") oder Claude bitten, seine eigenen Ergebnisse anhand hoher Qualitätsstandards zu bewerten und zu verfeinern. Sie können Claude auch sagen, was er nicht tun soll ("generisches Unternehmensblau vermeiden", "keine Standardtypografie verwenden"). Um zum Endergebnis zu gelangen, kann es Iterationen erfordern. Nach dem ersten Ergebnis eruieren Sie, was fehlt, und geben Prompts für Verbesserungen.
Skills für konsistente Designstandards verwenden
Erstellen Sie einen Skill, der Ihre visuellen Referenzen, erfolgreichen Beispiele und spezifischen Designpräferenzen zusammenfasst, damit Claude Ihre etablierten Standards anwenden kann, ohne Ihre Präferenzen jedes Mal neu erklären zu müssen. Bitten Sie Claude nach einem Content-Design-Skill, der Ihre Formatierungspräferenzen, ästhetischen Ausrichtungen und Qualitätsstandards in einem wiederverwendbaren Workflow bündelt. Erfahren Sie mehr über die Erstellung von Skills.
Möchten Sie es mal ausprobieren?
Arbeiten Sie mit Claude zusammen, um eine Portfolioseite zu erstellen, die Ihre Arbeit darstellt, und zu lernen, wie sie live bereitgestellt wird – ohne Code schreiben zu müssen.
