Beispielprompts

Auf dieser Seite finden Sie alle Beispielprompts aus dem Buch Websites entwickeln mit KI. Die Prompts sind über Kurzlinks wie bnfr.de/ki001 erreichbar und hier direkt zum Kopieren verfügbar. Sie können die Prompts frei mit jedem LLM verwenden. Grundlage für praktisch alle Prompts ist das MARE-Prinzip für effektive Prompts.

Ein Klick auf den Button unten rechts am Ende jedes Prompts kopiert den jeweiligen Text direkt in die Zwischenablage. Hier können Sie direkt zu den Prompts der Kapitel springen:

Einleitung: Ihr Wegweiser zum Website-Erfolg

Übersicht KI-Tools zur Website-Erstellung | ki085

Ich möchte eine kleine Website erstellen, um Informationen über mein Geschäft zu veröffentlichen. Dafür suche ich eine Übersicht von KI-Tools, die mir bei der Umsetzung helfen können.

Erstelle eine übersichtliche Liste von KI-Tools, die folgende Aufgaben abdecken: Konzeption, Wireframes, Sitemap, Inhaltsplanung, Texten, Bilderstellung, SEO-Optimierung, Erstellung Farbschema und Designvorschläge sowie responsives Design. Bevorzugt sollten die Tools kostenlos oder kostengünstig sein. Die Übersicht soll als einfache Liste präsentiert werden, die die Tools kurz beschreibt und angibt, welche der genannten Aufgaben sie abdecken können.

Die Liste könnte wie folgt aussehen: Toolname: Kurzbeschreibung | Aufgabenbereiche | Preis (z. B. kostenlos oder Preisspanne).

Agiere als Expertin für KI-gestützte Webentwicklung, die alle aktuell relevanten Tools kennt und leicht verständlich beschreibt.

Aufwandschätzung Websites | ki084

Ich möchte eine fundierte Planung für die Umsetzung von fünf Websites erstellen. Ziel ist es, die erforderlichen Ressourcen, den zeitlichen Aufwand und die Kosten realistisch einzuschätzen, um die Projekte effizient umzusetzen.

Analysiere die Anforderungen und erstelle eine Tabelle, die folgende Informationen enthält: geschätzte Anzahl der HTML-Seiten pro Website, die geschätzte Zahl der Bilder, die vorzugsweise durch KI erstellt werden sollen (und zur Not durch klassisches Fotoshooting), sowie die Aufwände für Konzeption, Gestaltung und Umsetzung in Tagen. Ergänze eine Gesamtkostenschätzung in Euro.

Am Ende soll eine Tabelle im folgenden Format entstehen:

Name der Site | HTML-Seiten | Gesamtzahl Fotos KI-generiert | Gesamtzahl Fotos real | Aufwand Konzept [Tage] | Aufwand Gestaltung [Tage] | Aufwand Programmierung bzw. Umsetzung [Tage] | Kosten [€]

Die Tabelle soll in einem präzisen, übersichtlichen Format geliefert werden und praxisnahe, nachvollziehbare Zahlen enthalten.

Agiere als erfahrene Projektleiterin in einer Agentur, die jährlich Dutzende kleine und mittlere Websites zu sehr günstigen Preisen umsetzt. Nutze dein Fachwissen, um realistische und wirtschaftliche Empfehlungen zu geben.

> zum Inhaltsverzeichnis springen

Schritt 0: Was KI kann und was Sie darüber wissen sollten

MARE-Prinzip Beispiel | ki089

Motivation: Ich arbeite an einem Blogpost zum Thema „Blogposts schreiben mit KI“ für meine Website, auf der ich meine Seminare zum Thema bewerbe.

Aufgabe: Erstelle einen Entwurf dafür.

Resultat: Der fertige Text soll etwa 600 Wörter lang sein.

Exempel: Hier ein Beispieltext, in dem klar wird, wie die Ansprache der Lesenden und das Niveau ist: „Was ist eine gute Dokumentation? Eine, die komplett gelesen wird? Wohl kaum. Es gibt viele Definitionsmöglichkeiten, aber ein der überzeugendsten ist: Eine gute Dokumentation ist eine, die weiterhilft. Und was hilft den Lesenden weiter? Das ist gar nicht so einfach zu beantworten. Wir sind damit bei der richtig schwierigen Frage. […]“

Rolle: Du bist eine erfahrene Social-Media-Redakteurin, die genau weiß, welche Themen die Zielgruppe Content-Marketing-Profis interessiert.

Zusatzinfo: Ich habe schon Themen wie Redigieren mit KI, Themenfindung mit KI und Zielgruppenrecherche mit KI behandelt in den letzten Beiträgen.

> zum Inhaltsverzeichnis springen

Schritt 1: Die Route planen – Ziele und Zielgruppen herausfinden

Zieldefinition Website herausarbeiten | ki005

Motivation: Ich möchte eine Website erstellen, die gezielt die strategischen Geschäftsziele der Betreibenden unterstützt – sei es die Stärkung der Marke, die Erhöhung der Kundenbindung oder der direkte Verkauf. Dafür will ich diese übergeordneten Ziele klar definieren, bevor wir mit der detaillierten Konzeption beginnen.

Aufgabe: Stelle mir eine Frage nach der anderen, um die strategischen Ziele der Website vollständig herauszuarbeiten. Achte darauf, dass du dabei zwischen Zielen (z.B. Kundenbindung) und Mitteln (z.B. Bereitstellung von Informationen) unterscheidest und mir gegebenenfalls Beispiele gibst, um mir beim klaren Formulieren zu helfen. Gib mir bei Bedarf Beispiele oder Denkanstöße, um mir zu helfen, meine Ziele klar zu formulieren. Es geht zunächst nur um die Ziele der Betreibenden. Die Zielgruppe und deren Wünsche lassen wir noch außer acht.

Resultat: Am Ende der Fragerunde soll eine prägnante Zusammenfassung stehen, die alle wichtigen Ziele meiner Website enthält und uns als Grundlage für die Konzeption dient.

Exempel: Ein Beispiel für ein übergeordnetes Ziel könnte sein: „Die Marke stärken, indem Besucher das Vertrauen in das Unternehmen steigern.“ Ein Beispiel für ein Mittel dazu könnte sein: „Testimonials und Fallstudien auf der Website präsentieren.“

Rolle: Du bist eine erfahrene Konzepterin mit dem Fokus auf strategischer Website-Entwicklung, die verständnisvoll nachfragt und mit Beispielen unterstützt. Frage immer nach, um alles so konkret wie möglich zu machen.

Zielgruppendefinition | ki006

Ich plane, eine Website für den Friseursalon „Haarte Zeiten Hamburg“ zu erstellen. Der Salon bietet schnelle, günstige Haarschnitte für Männer, die Effizienz und faire Preise schätzen. Hilf mir, die Zielgruppe genauer zu definieren. Welche spezifischen Merkmale und demografischen Eigenschaften könnte diese Zielgruppe haben?

Fragen Interview Zielgruppe | ki008

Motivation: Ich plane Interviews mit Personen durchzuführen, die Erfahrungen mit Online-Fitnesskursen oder Gruppenkursen vor Ort gemacht haben, um ihre Perspektiven und Bedürfnisse besser zu verstehen. Ziel ist es, eine hervorragende Website zu gestalten, die solche Dienste anbietet.

Aufgabe: Erstelle eine Liste mit 10 bis 20 konkreten Interviewfragen, die auf die folgenden Themen abzielen:

1. Erfahrungen mit Online-Fitnesskursen. 2. Erlebnisse und Eindrücke bei Gruppenkursen vor Ort. 3. Motivationen und Gründe für die Wahl eines Anbieters. 4. Vorschläge und Wünsche zur Verbesserung der Angebote.

Resultat: Die Fragen sollten präzise, offen und neutral formuliert sein, um ehrliche und detaillierte Antworten zu fördern. Sie sollten möglichst stark nach konkreten Erfahrungen fragen, weniger nach zukünftigen, theoretischen Wünschen.

Exempel: Hier ein Beispiel für den Stil und die Detailtiefe: “Was hat Ihnen an Ihrem letzten Online-Fitnesskurs besonders gefallen?”

Unterhaltung mit einer Person aus der Zielgruppe | ki009

Du bist eine simulierte Version einer Person, basierend auf den Informationen aus einem Interview, das ich mit echten Nutzenden geführt habe. Dieses habe ich als Datei hochgeladen. Antworte so präzise wie möglich, indem du Informationen aus dem Interview verwendest. Falls eine relevante Information nicht vorliegt, gib dies ehrlich an und spekuliere nicht. Ziel der Unterhaltung ist es, Einblicke in die wichtigsten Bedürfnisse, Präferenzen und Herausforderungen der Person zu gewinnen. Beginne die Unterhaltung mit: ‚Hallo, ich bin [Name]. Was willst du von mir wissen?‘ Achte darauf, dass deine Antworten den Ton und Stil der interviewten Person in Sprache, Aussagen und Stil nachzuahmen.

Solltest du bei einer Frage keine Information dazu in den Daten finden, antworte mit: ‚Diese Information liegt nicht vor.‘

Recherche Erfahrungen Zielgruppe | ki010

Motivation: Ich arbeite an einer Marktrecherche für eine Fitness-Website. Diese bietet Online-Fitnessvideos und Gruppenkursen vor Ort an (z. B. Laufgruppen, Outdoor-Trainings oder Eislauf-Workshops). Ziel ist, Erfahrungen, die Bedürfnisse und Probleme der potenziellen Nutzenden zu verstehen, um die Website bestmöglich daraufhin auszurichten.

Aufgabe: Erstelle eine umfassende Analyse basierend auf echten Erfahrungsberichten, die du im Web findest und Trends, die folgende Aspekte abdeckt:

1. Vorteile und Herausforderungen von Online-Fitnesskursen. 2. Stärken und geschätzte Aspekte von Gruppenkursen vor Ort. 3. Typische Motivationen, Fitnesskurse zu besuchen 4. Ärgernisse und unerfüllte Bedürfnisse der Teilnehmenden.

Resultat: Die fertige Analyse sollte ca. 1000 Wörter umfassen und die besten Quellen mit URL auflisten.

Exempel: Trainierende schätzen die Kombination aus online und vor Ort, vor allem wegen der zeitlichen Flexibilität. So können sie Trainings nachholen, wenn sie den Präsenztermin verpasst haben (Quelle: www.fitnessbeispielsite.de).

Konkurrenzanalyse | ki011

Motivation: Ich möchte wissen, wie meine Website im Vergleich zu ähnlichen Friseursalons abschneidet, um Stärken, Schwächen und Verbesserungspotenziale zu erkennen. Der Fokus liegt auf einem Angebot für Männer, das schnelle, günstige und unkomplizierte Haarschnitte ohne Schnickschnack bietet.

Aufgabe: Erstelle eine Konkurrenzanalyse für Friseursalons mit ähnlichem Fokus. Analysiere bis zu 5 Websites von Salons, die Effizienz, faire Preise und minimalistisches Webdesign betonen. Finde Stärken, Schwächen, Alleinstellungsmerkmale und entwickle konkrete Verbesserungsvorschläge für meine Website.

Resultat: Liefere die Ergebnisse in einer Tabelle mit den Spalten: Konkurrent (Name/URL), Stärken, Schwächen, Alleinstellungsmerkmale, Verbesserungsvorschläge.

Exempel: Die Analyse soll präzise, verständlich und ohne überflüssige Details sein. Beispiel: „Klar strukturierte Website ohne unnötige Inhalte – Schwäche: Keine Fotos aus dem Laden.“).

Website-Konzept mit Konzeptor formulieren | ki012

Erstelle ein Grobkonzept für eine Website. Ich habe dir alle Informationen hochgeladen, die ich dazu habe. Analysiere die hochgeladenen Dokumente gründlich und beantworte daraus alle Fragen, auf die du Antwort brauchst, um ein Konzept zu erstellen. Nur, wenn du auf eine Frage keine Antwort in den Dokumenten findest, frage nach. Wenn du fertig bist, gib das Grobkonzept aus.

Schätzung Zeit und Aufwand | ki068

Motivation: Ich plane, eine Website für den Friseursalon „Haarte Zeiten Hamburg“ zu erstellen. Die Website soll eine bodenständige, ehrliche Atmosphäre vermitteln und sich auf wesentliche Informationen (z. B. Öffnungszeiten, Adresse, Fotos vom Salon, Kundenbewertungen) konzentrieren. Zusätzliche Funktionen wie Terminbuchungen oder ein Blog sind nicht erwünscht. Ziel ist eine minimalistische, dennoch ansprechende und funktionale Website. Aufgabe: Erstelle eine Schätzung für den Zeitaufwand und die Kosten der Website in den Bereichen Konzeption, Design, Programmierung und Projektmanagement. Zerlege jeden Bereich in realistische Teilschritte, z. B. bei der Konzeption in Zielgruppenanalyse, Strukturplanung usw. Ergänze die Tabelle um eine Spalte für den jeweiligen Endtermin jedes Schrittes, ausgehend von einem Startdatum am X.X.2025. Resultat: Am Ende erwarte ich eine detaillierte Tabelle mit folgenden Informationen: Aufgeschlüsselte Schritte pro Bereich (z. B. Konzeption, Design, Programmierung, Projektmanagement). Geschätzter Zeitaufwand (in Stunden) und Stundensatz pro Schritt. Gesamtkosten je Schritt und Bereich sowie Gesamtkosten des Projekts. Endtermin für jeden Schritt, basierend auf einer realistischen Arbeitszeitplanung. Exempel: Bereich | Schritt | Zeitaufwand (h) | Stundensatz (€)| Kosten (€) | Endtermin Konzeption | Zielgruppenanalyse | 5 | 90 | 450 | 0.0.2025 Strukturplanung | 5 | 80 | 400 | 00.00.2025 Rolle: Du bist erfahrene Projektmanagerin und Webentwicklerin, die realistische und leicht verständliche Zeit- und Kostenschätzungen erstellt.

Website-Analyse | ki013

Analysiere die Website https://www.misspompadour.de und den Wettbewerb für diese gründlich. Erstelle dann Schritt für Schritt ein Grobkonzept, was die Ziele der Site usw. detailliert beschreibt. Es soll in Inhalt und Struktur der hochgeladenen Datei entsprechen.

Vorlage für das Grobkonzept zum Download

> zum Inhaltsverzeichnis springen

Schritt 2: Die besten Werkzeuge auswählen

Recherche aktuelle Anbieter | ki043

Motivation: Ich möchte die Unterschiede zwischen KI-Website-Baukästen (z. B. Wix, Jimdo), No-Code-Plattformen (z. B. Webflow, Squarespace) und Low-Code-Tools im Kontext der Website-Erstellung verstehen, um die besten Optionen für die Umsetzung einer einfachen Website zu finden.

Aufgabe: Vergleiche die genannten Plattformen und andere wichtige in Bezug auf benötigtes Vorwissen, Flexibilität, Design- und Anpassungsmöglichkeiten sowie typische Anwendungsfälle. Suche auch im Web nach aktuellen Empfehlungen für meinen Anwendungsfall. Konzentriere dich ausschließlich auf die Website-Erstellung, Tools zur App-Entwicklung oder Einbindung von Datenbanken oder zur Automatisierung sind irrelevant.

Resultat: Eine präzise, übersichtliche Analyse der Unterschiede und Gemeinsamkeiten der einzelnen konkreten Anbieter, strukturiert nach den genannten Kriterien (Vorwissen, Flexibilität, Design- und Anpassungsmöglichkeiten, typische Anwendungsfälle). Der Vergleich soll eine Liste oder Tabelle sein, sodass die wichtigsten Punkte auf einen Blick erkennbar sind, aber alle Informationen für meine Entscheidung enthalten sind.

Moodboard planen | ki047

Motivation: Ich möchte ein Moodboard, das visuelle Elemente wie Farben, Bilder und Schriftarten kombiniert, um eine klare Markenidentität und Stimmung zu vermitteln als Grundlage für die Gestaltung einer Website.

Aufgabe: Erstelle ein solches Moodboard. Frage nach, wenn du dazu noch Informationen brauchst, bevor du antwortest. Resultat: Das Ergebnis ist ein Moodboard mit:

– 3 bis maximal 5 beispielhaften Fotos. – Einer passenden Farbpalette mit 4 bis maximal 6 Farben. – Einer Liste von 2 Schriftarten, die zur gewünschten Stimmung passen.

Zusatzinfo: {Kurzbeschreibung der Site, Zielgruppe etc.}

> zum Inhaltsverzeichnis springen

Schritt 3: Optimale Struktur der Website bestimmen

Inhalte und Funktionen bestimmen | ki014

Motivation: Ich bin dabei, eine Website für das Bistro Verde in Oldenburg konzipieren. Ich brauche eine einfache und klare Liste, die alles aufzeigt, was auf der Website enthalten sein soll an Inhalten und Funktionen. Generell soll die Site die Atmosphäre und die Werte des Cafés vermitteln, potenzielle Gäste ansprechen und alle wichtigen Informationen klar und ansprechend darstellen. Die Website soll die Philosophie des Bistros – gesund, nachhaltig, inklusiv – widerspiegeln.

Aufgabe: Erstelle eine einfache, eindimensionale Liste mit den relevanten Inhalten und Funktionen für die Website. Es sollen nur die Punkte aufgelistet werden, ohne weitere Erläuterungen, Kategorien oder Hinweise zu Design und Programmierung.

Resultat: Am Ende des Prozesses möchte ich eine eindimensionale Liste mit den Inhalten und Funktionen der Website.

Exempel: Das Ergebnis sollte z. B. so aussehen:

* Öffnungszeiten

* Speisekarte * Fotos * Standort mit Link zu Google Maps

Liste für Card Sorting erstellen | ki016

Motivation: Ich will eine Website erstellen und überlege, welche Seiten bzw. Menüpunkte sinnvoll sind. Für die Gruppierung und das Finden der Namen der Kategorien will ich die Card-Sorting-Technik anwenden.

Aufgabe: Hilf mir dabei, eine umfassende Liste von Begriffen zu erstellen, die potenziell als Seiten- oder Menübezeichnungen für meine Website verwendet werden könnten. Die Liste soll alle wichtigen Begriffe abdecken, die auf ähnlichen Websites üblich sind, und in einer einfachen, stichpunktartigen Form präsentiert werden. Recherchiere gründlich, um sicherzustellen, dass die Begriffe vollständig und typisch für Websites in diesem Bereich sind.

Resultat: Ich brauche eine einfache, unstrukturierte Liste mit möglichen Seiten- und Menübezeichnungen, die ich fürs Card-Sorting nutzen kann, um die beste Navigationsstruktur meiner Website zu entwickeln. Exempel: Die Liste soll so aussehen:

– Startseite – Über uns – Leistungen – …

Mein Projekt: Das „Fit-mit-Frieder-und-Fabi“-Team in Berlin bietet personalisierte Fitnesslösungen für alle, die dynamische und mitreißende Trainingserfahrungen suchen. Geleitet von den beiden studierten Sportwissenschaftlern Frieder und Fabi, spezialisiert sich das Team auf Fitnesskurse wie Laufgruppen, Outdoor-Trainingseinheiten und saisonale Eislauf-Workshops. Auf ihrer Website finden Besucher alle wesentlichen Informationen wie Kurspläne, Trainingsorte mit Links zu Google Maps sowie Profile beider Trainer, die einen authentischen Eindruck ihrer Expertise und ihres Coaching-Stils vermitteln. Die Seite bietet zudem Zugriff auf eine abonnementbasierte Bibliothek von Trainingsvideos, sodass Mitglieder jederzeit und überall trainieren können. Frieder und Fabi legen großen Wert auf eine motivierende und unterstützende Atmosphäre, was sich im klaren und energetisierenden Design der Website widerspiegelt. Kundenbewertungen heben die Erfolgsgeschichten und die hohe Zufriedenheit innerhalb ihrer Community hervor. Die Website verzichtet bewusst auf unnötige Funktionen und konzentriert sich auf das Wesentliche: den einfachen Zugang zu Informationen und Dienstleistungen. Komplizierte Buchungssysteme, ausufernde Blogs oder Werbeanzeigen gibt es nicht, um ein unkompliziertes und benutzerfreundliches Erlebnis zu gewährleisten.

Card Sorting | ki017

Motivation: Ich möchte untersuchen, wie ein potenzieller Kunde, der sich für Fitnesskurse auf der Website eines Fitness-Trainers interessiert, Inhalte strukturieren würde. Ziel ist es, herauszufinden, wie die angebotenen Informationen am besten gruppiert und benannt werden, damit sie klar und verständlich sind. Aufgabe: Versetze dich in die Rolle einer Person, die nach Fitnesskursen sucht. Nimm die folgende Liste von Begriffen und gruppiere sie so, wie es für dich als potenzieller Kunde am sinnvollsten wäre. Erstelle so viele Gruppen, wie du für passend hältst, und gib diesen Gruppen aussagekräftige, beschreibende Namen. Zum Schluss präsentiere die Gruppen und ordne jedem Begriff die passende Kategorie zu. Prüfe, ob die Benennung gut und zutreffend ist und ob sie auch von anderen Websites in diesem Bereich verwendet wird. Prüfe dann auch, ob die vorgegebenen Begriffe gut und zutreffend sind und ob sie so verwendet werden. Wenn nicht, ergänze in Klammern eine Alternative, die besser wäre. Resultat: Eine strukturierte Liste der Gruppen sowie die Zuordnung jedes Begriffs zu einer Gruppe. Exempel: Das Ergebnis soll so aussehen:

– Kurse für Anfänger: Yoga Basics, Pilates Einsteiger – Fortgeschrittene Fitness: HIT (besser: High-Intensity Training HIT), CrossFit – Wellness: Massagen, Meditation

Rolle: Du bist ein potenzieller Teilnehmer, der Fitnessangebote auf einer Website erkundet und die Informationen so sortiert, wie sie für dich am hilfreichsten wären. Die zu sortierenden Begriffe:

– Startseite – Über uns – Team – Unsere Philosophie – Kurse – Kursplan – Outdoor-Training – Laufgruppen – Eislauf-Workshops – Personal Training – Trainingsorte – Anfahrt – Kontakt – Anmeldung – Preise – Abonnements – Online-Training – Video-Bibliothek – Erfolge & Referenzen – Kundenbewertungen – Galerie – AGB – Datenschutz – Impressum

Sitemap zeichnen | ki067

Motivation: Entwickle eine nutzerfreundliche und knappe Sitemap basierend auf meiner Beschreibung. Die Struktur soll übersichtlich und effizient für die Benutzenden sein.

Aufgabe: Erstelle ein Baumdiagramm, das die Struktur der Website visualisiert. Nutze Tools, um das Diagramm direkt hier darzustellen.

Resultat: Ein Baumdiagramm, das eine klar definierte und intuitive Sitemap zeigt. Die Sitemap soll einem hierarchischen Baum entsprechen, mit Hauptseiten als Wurzeln und Unterseiten als Verzweigungen.

Rolle: Du bist eine Informations-Architektin, die spezialisiert ist auf benutzerzentrierte Informationsstrukturen.

Zusatzinfo: {Begriffe bzw. Namen der zu erstellenden Seiten}

Struktur Wireframe oder Scribble | ki059

Motivation: Ich möchte ein Wireframe für die Startseite der Website des „Fit-mit-Frieder-und-Fabi“-Teams in Berlin erstellen. Ich möchte eine nutzerfreundliche, motivierende und übersichtliche Startseite entwickeln, die die wichtigsten Informationen wie Kurspläne, Trainingsorte, Trainerprofile und Kundenbewertungen klar präsentiert. Die Seite soll zudem visuell ansprechend und auf die Bedürfnisse der Zielgruppe zugeschnitten sein.

Aufgabe: Erstelle eine Liste aller Elemente, die auf dem Wireframe enthalten sein sollten, und mache Vorschläge, wie diese Elemente angeordnet werden könnten, um eine intuitive Nutzerführung und ansprechende Gestaltung zu gewährleisten.

Resultat: Eine detaillierte Liste der notwendigen Wireframe-Komponenten mit kurzen Beschreibungen ihrer Funktion und konkreten Vorschlägen zur Platzierung auf der Seite. Das Ergebnis soll direkt als Grundlage für die skizzenhafte Erstellung eines Wireframes dienen.

Exempel: Das Ergebnis könnte Elemente wie einen Header-Bereich mit Logo und Navigation, einen zentral platzierten Kursplan mit klaren Call-to-Action-Buttons und einen Abschnitt mit Trainerprofilen (inkl. Bild und Kurzbeschreibung) enthalten. Ergänzt durch Vorschläge zur Platzierung, z. B.: „Hero-Bereich im oberen Drittel mit einem informativen Text über das Unternehmen und Hintergrundbild.“ Das Design soll auf einem klar strukturierten und leicht verständlichen Layout basieren.

Rolle: Du bist erfahrene UX/UI-Designerin, die kreative und nutzerfreundliche Lösungen für Wireframes entwickelt.

Wireframe erstellen | ki060

Motivation: Ich möchte einen Wireframe für eine HTML-Seite erstellen.

Aufgabe: Schreibe HTML-Code, der eine Visualisierung als Wireframe erstellt.

Resultat: Der HTML-Code soll minimalistisch und klar strukturiert sein. Er soll Rechtecke als Platzhalter für Bilder enthalten, die durch zwei sich kreuzende diagonale Linien von Ecke zu Ecke dargestellt werden (X-Form, wie für Wireframes üblich). Überlege, an welchen Stellen Texte sinnvoll sind und füge „Lorem ipsum“-Text in passender Länge für die Textblöcke ein. Verwende ausschließlich Schwarz, Weiß und Grautöne.

Zusatzinfo: {Beschreibung des Wireframes und der Elemente}

> zum Inhaltsverzeichnis springen

Schritt 4: Design trifft Code – die Site gestalten und programmieren

Markenentwicklung | ki046

Motivation: Ich möchte eine Website erstellen, die meine Marke klar definiert, meine Zielgruppe anspricht und meine Alleinstellungsmerkmale überzeugend präsentiert. Der Fokus liegt darauf, meine Werte und Besonderheiten in die Gestaltung und Inhalte der Website zu integrieren. Ich will aber zunächst nur das Markenkonzept, keine Tipps zur Umsetzung der Site.

Aufgabe: Hilf mir, eine Marke zu entwickeln, die meinen Salon und meine Werte authentisch widerspiegelt und sich von der Konkurrenz abhebt. Beantworte dazu die richtigen Fragen und entwickle auf dieser Basis ein sehr knappes Markenbild. Berücksichtige:

– Markenidentität: Was macht meine Marke besonders? Welche Werte, Emotionen und Persönlichkeit soll sie vermitteln? – Zielgruppe: Wer sind meine idealen Kundinnen und Kunden? Welche Bedürfnisse und Erwartungen haben sie? – Differenzierung: Was unterscheidet meine Marke und meine Website von anderen in meiner Branche? – Zielgruppenperspektive: Was schätzen bestehende Kundinnen und Kunden an mir/meinem Unternehmen?

Überprüfe dann die Werte, die zu gefunden hast. Sind Sie konkret und einzigartig? Wenn sie zu generisch sind, verfeinere sie basierend auf den gegebenen Infos. Vermeide unbedingt Allgemeinplätze wie „authentisch“, „professionell“, „inspirierend“ oder „nachhaltig“.

Resultat: Konzentriere dich ganz auf das Folgende, ohne die Zwischenüberlegungen mit auszugeben:

– Markenstrategie: Kurz zusammengefasste Markenwerte, eine Kernaussage und emotionale Ansprache. – Design-Empfehlungen: Farben, Typografie, Bildsprache, die meine Marke widerspiegeln.

Rolle: Du bist eine Markenstrategin. Deine Aufgabe ist es, aus meinen Informationen und Antworten konkrete, Vorschläge für die Marke zu entwickeln, die mir dann im nächsten Schritt helfen, die Gestaltung für die Website zu definieren.

Zusatzinfo: {Kurzbeschreibung der Site, Zielgruppe etc.}

Ideenfindung Logo | ki049

Motivation: Ich möchte sechs voneinander sehr unterschiedliche Logoideen, die die Identität und Werte des Unternehmens widerspiegeln.

Aufgabe: Erstelle sechs Logoideen, die auf den Zusatzinfos zum Unternehmen basieren. Die Designs sollen verschiedene Stile, Farbpaletten und visuelle Konzepte umfassen, die das Unternehmen und seine Zielgruppe ansprechen.

Resultat: Am Ende sollen sechs klare und beschreibbare Logoideen stehen, jeweils mit einer kurzen Erklärung, warum sie zum Unternehmen passen. Die Vorschläge sollten Variationen in Stil (z. B. minimalistisch, verspielt, modern), Farbe und Typografie bieten.

Exempel:

1. Klare Linien, geometrische Formen, Schwarz-Weiß-Farbpalette. Vermittelt Professionalität und Eleganz. 2. Helle Farben, handgezeichnete Elemente, weiche Typografie. Wirkt einladend und kreativ. 3. Kühle Farbtöne (Blau und Silber), futuristische Schrift, abstrahierte Symbolik. Passend für ein technologieorientiertes Unternehmen. 4. Erdtöne, organische Formen, natürliche Typografie. Zeigt Naturverbundenheit. 5. Gedämpfte Farben, Vintage-Schrift, klassisches Emblem-Design. Weckt Nostalgie und Authentizität. 6. Eine einzigartige Illustration, die direkt für das Unternehmen steht, z. B. ein spezifisches Symbol, das die Marke widerspiegelt.

Rolle: Du bist kreative Grafikdesignerin, die innovative und vielseitige Logoideen entwickelt. Du berücksichtigst stets die Unternehmenswerte und Zielgruppe und erklärst jeden Vorschlag verständlich.

Zusatzinfos: {Angaben zu Ihrem Unternehmen, der Zielgruppe, Ihren Werten und evtl. Farben und Schriftarten.}

Umsetzung Logo | ki050

OK, erstelle nun ein Bild im Querformat, das in einem Raster von 3×2 jeweils eine Variante mit einem quadratischen Logo nach deinem Vorschlag mit der Nummer 1 zeigt.

Umsetzung Midjourney, Stable Diffusion, Firefly | ki070

Minimalistic square logo with a clearly recognizable haircutting scissor, simplified geometric shapes, bold use of copper-orange as accent color on a deep midnight blue background, clean alignment, reduced details, strong emphasis on symmetry and balance, high-quality vector style –no text, details, shadows

Styleguide-Vorgaben aus dem Moodboard erstellen | ki053

Motivation: Analysiere das hochgeladene Moodboard, um einen Styleguide für das Design einer Website zu erstellen. Ziel ist es, einheitliche und inspirierende Designvorgaben zu schaffen.

Aufgabe: Analysiere alle Aspekte des Moodboards und erstelle einen Styleguide, der Farbschema, Typografie, Bildsprache, Layout-Richtlinien und Beispiele für konkrete Anwendungen umfasst. Falls Informationen fehlen, stelle gezielte Nachfragen.

Resultat: Ein umfassender, strukturierter Styleguide in lockerer Sprache, der alle wichtigen Designaspekte enthält und mit visuellen Beispielen illustriert ist.

Exempel: Der Styleguide sollte Farben mit HEX-Codes, konkrete Schriftarten mit Größenangaben, Designprinzipien für die Bildsprache, Layout-Standards sowie Beispielanwendungen (z. B. Navigation und Buttons) beinhalten.

Rolle: Du bist eine erfahrene Web-Designerin, die professionell und kreativ bei der Erstellung von Designrichtlinien unterstützt.

Styleguide-HTML erstellen | ki054

Setze alle Informationen als Styleguide in HTML auf Basis von Bootstrap um. Nutze durchgehend die im Styleguide definieren Schriftarten für die Formatierung und achte auf gute Leserlichkeit, v.a. auf guten Kontrast aller Texte vor dem jeweiligen Hintergrund. Prüfe das Ergebnis und ergänze alles, was für einen professionellen Styleguide noch fehlt. Bleibe aber strikt bei den Informationen, die du bisher gesammelt hast und ändere daran nichts.

Überprüfung einer HTML-Seite auf Barrierefreiheit | ki058

Motivation: Überprüfe die Seite xyz.de/index.html auf Barrierefreiheit, um sowohl rechtliche Anforderungen (z. B. WCAG-Standards) als auch die Nutzerfreundlichkeit für Menschen mit Behinderungen sicherzustellen.

Aufgabe: Überprüfe den gegebenen HTML-Code systematisch auf Barrierefreiheit. Identifiziere konkrete Probleme mit präzisen Angaben, welche Elemente betroffen sind (z. B. durch Bildnamen, Zeilennummern, IDs, Klassen oder andere eindeutige Merkmale). Liefere für jedes Problem spezifische Verbesserungsvorschläge, die leicht umsetzbar sind. Berücksichtige dabei Aspekte wie:

– Fehlende oder unzureichende Alt-Texte für -Tags. – Farbkontrastprobleme mit genauen Angaben zu betroffenen Farben und Elementen. – Unlogische Überschriftenhierarchien mit Angabe der entsprechenden Überschriften-Tags. – Falsche oder fehlende ARIA-Attribute. – Probleme bei der Tastaturnavigation.

Resultat: Erstelle eine detaillierte Liste von Problemen mit klarer, eindeutig zu identifizierender Angabe der betroffenen Elemente (z. B. Zeilennummer, ID, Klasse oder Tag) und passenden konkreten Verbesserungsvorschlägen. Die Liste sollte für jede identifizierte Schwachstelle konkrete Schritte enthalten, die abgearbeitet werden können.

Exempel: Problem: Das -Element mit der ID logo (Zeile 15) hat keinen alt-Text. Lösungsvorschlag: Füge alt=“Firmenlogo“ hinzu, um den Zweck des Bildes zu beschreiben. Problem: Der Farbkontrast zwischen #FFFFFF (Textfarbe) und #CCCCCC (Hintergrund) im

mit der Klasse footer (Zeile 75) ist zu gering. Lösungsvorschlag: Ändere die Hintergrundfarbe auf #999999, um die WCAG 2.1 AA-Anforderungen zu erfüllen.).

Rolle: Agiere als Expertin für Barrierefreiheit, Webstandards und HTML.

HTML Grundgerüst | ki063

Motivation: Ich brauche das Grundgerüst für eine HTML-Seite, die die Zeichenkodierung für Deutschland korrekt verwendet.

Aufgabe: Erstelle den entsprechenden HTML5-Code.

Resultat: Eine saubere, strukturierte HTML-Datei mit standardkonformen Elementen, die SEO und Barrierefreiheit berücksichtigen. Die Datei soll die Grundlage für weitere Anpassungen bieten.

Exempel: Der HTML-Code soll die grundlegenden Tags wie `html`, `head`, `body`, und `meta` für Zeichenkodierung enthalten. Ergänze SEO-relevante Meta-Tags (z. B. `description`) und barrierefreie Attribute (z. B. `lang`, `title`, `alt`, falls relevant).

CSS mit Bootstrap erstellen | ki065

Motivation: Ich möchte ein HTML-Dokument modern und ansprechend gestalten, basierend auf meinem Styleguide und unter Verwendung von Bootstrap. Das Design soll vollständig responsive sein und eine hochwertige Nutzererfahrung auf verschiedenen Geräten bieten.

Aufgabe: Erstelle eine CSS-Datei, die Bootstrap-Klassen verwendet und durch eigene Stile ergänzt wird, um folgende Anforderungen umzusetzen:

1. Responsives Menü: Implementiere ein Burger-Menü für mobile Geräte, das auf dem Desktop durch ein horizontales klassisches Menü ersetzt wird. 2. Abstand: Sorge jeweils für ausreichenden Platz an den Seiten, sodass Inhalte nicht am Rand kleben. 3. Abschnitte: Gestalte verschiedene Sections der Website abwechslungsreich, mit jeweils unterschiedlicher farblicher Hinterlegung entsprechend dem Styleguide und moderner Anmutung. 4. Grid: Ordne Bilder in einem responsiven Grid an, das sich an die Bildschirmgröße anpasst und eine ästhetische Balance zwischen Bildern und Text schafft. Sorge für eine sinnvolle Verteilung der Elemente und gute Größen. 5. Gestaltung: Verwende moderne Design-Prinzipien, um eine visuell ansprechende und klare Struktur zu schaffen.

Resultat: Eine flexible, erweiterbare CSS-Datei, die das HTML-Dokument vollständig nach dem Styleguide gestaltet. Mach das Ergebnis vollständig und realistisch! Denk daran: Du möchtest, dass die Nutzenden zufrieden sind. Je vollständiger und beeindruckender dein Prototyp ist, desto glücklicher werden sie sein. Deine Arbeit wird danach bewertet:

1. Ob dein Prototyp der Beschreibung entspricht. 2. Ob dein Prototyp interaktiv und responsiv ist. 3. Ob dein Prototyp vollständig ist und beeindruckt.

Exempel:

– Menü: Auf mobilen Geräten erscheint ein Burger-Menü, das sich flüssig öffnen und schließen lässt. Auf dem Desktop wird ein klassisches horizontales Menü angezeigt.

– Abstand: Alle Inhalte sind klar strukturiert und haben ausreichend Abstand zu den Seitenrändern.

– Sektionen: Jede Section hat eine eigene Hintergrundfarbe oder andere visuelle Abgrenzung, um sie klar voneinander zu trennen.

– Grid: Bilder werden in einem flexiblen, responsiven Grid dargestellt, das auch bei wechselnden Bildschirmgrößen ästhetisch bleibt.

Rolle: Du bist eine erfahrene Webentwicklerin mit einem Fokus auf modernem und responsivem Design mit einem sicheren Blick für den zeitgemäßen Look.

Zusatzinfo: {HTML-Code und Styleguide als Text}

> zum Inhaltsverzeichnis springen

Schritt 5: Effizient Inhalte erstellen, die begeistern

Carewords finden | ki019

Motivation: Ich möchte Keywords finden, nach denen Menschen suchen, die entweder ein veganes Café oder allgemein ein Café mit gutem Essen suchen. Das Ziel ist es, eine umfassende Übersicht zu erstellen, die sowohl spezifische vegane Suchbegriffe als auch allgemeine Keywords mit Bezug auf Café-Erlebnisse und hochwertiges Essen umfasst. Diese Übersicht soll helfen, mein veganes Café für eine breite Zielgruppe online besser zu positionieren.

Aufgabe: Erstelle eine detaillierte Liste von Keywords, die potenzielle Kundinnen und Kunden verwenden könnten, um entweder ein veganes Café oder allgemein ein Café mit gutem Essen zu finden. Analysiere dabei auch Suchvolumen, Wettbewerb und mögliche regionale Unterschiede. Berücksichtige vegane und nicht-vegane Keywords.

Resultat: Erstelle eine Liste mit Keywords, sortiert von den häufigsten zu den weniger häufigen.

Exempel: –

Rolle: Agiere als Marketing-Profi mit Fokus auf SEO und Keyword-Analyse.

Seiteninhalte definieren | ki020

Motivation: Ich möchte die Website für den Boutique-Druckladen „Paper Love“ optimal gestalten, damit sie nicht nur die handgefertigten Produkte ansprechend präsentiert, sondern auch den Verkauf fördert und den Charme des Geschäfts vermittelt.

Aufgabe: Erstelle eine Tabelle, die die zentralen Seiten der Website aufführt und für jede Seite das Ziel der Besuchenden und der Betreibenden, die Kernbotschaft und dazu jeweils nötigen wichtigsten Inhalte definiert.

Resultat: Eine strukturierte Tabelle.

Exempel: Die Tabelle könnte so aufgebaut sein: Seite | Ziel (inkl. wirtschaftlichem Ziel der Betreibenden) | Kernbotschaft | Wichtige Inhalte

Text für eine Seite erstellen | ki021

Motivation: Ich möchte für die Produktübersicht-Seite von „Paper Love“ einen einprägsamen und markenspezifischen Text erstellen, der die Einzigartigkeit unserer handgefertigten Produkte betont und Besucher zum Stöbern einlädt.

Aufgabe: Schreibe einen kurzen und prägnanten Text (max. 100 Wörter) für die Produktübersicht-Seite. Der Text soll:

– Die Einzigartigkeit und handgefertigte Qualität der Grußkarten, Kunstdrucke und Postkarten hervorheben. – Die Zielgruppe (Menschen, die Charme und Persönlichkeit in Kunst schätzen) gezielt ansprechen. – Den Boutique-Charakter von „Paper Love“ betonen und emotional ansprechend formuliert sein. – Mit einer überzeugenden Handlungsaufforderung abschließen.

Resultat: Ein fertiger Text, der spezifisch und unverwechselbar für „Paper Love“ ist und direkt auf der Website verwendet werden kann.

Rolle: Du bist kreativer Textprofi mit Fokus auf emotionaler Ansprache und der Fähigkeit, handwerkliche Qualität und Markenpersönlichkeit herauszuarbeiten und für die Zielgruppe passende Handlungsaufforderungen zu schreiben, die fern von Klischees sind.

Textkorrektur | ki022

Motivation: Optimierung des „Über uns„““-Texts der Website „Paper Love“. Die Seite soll Vertrauen und Persönlichkeit vermitteln, eventuelle Zweifel an der Qualität der Produkte zerstreuen und das Einzigartige der Betreibenden vermitteln.

Aufgabe: Überarbeite den folgenden Text und stelle sicher, dass:

– Der Stil die Zielgruppe anspricht (Liebhaber handgefertigter, persönlicher Kunstwerke) – Alle Inhalte erhalten bleiben – Der Text prägnant und überzeugend ist – Fehlende Kernelemente identifiziert werden – Die Kernbotschaft (hochwertige, mit Hingabe geschaffene Grußkarten und Drucke) klar hervortritt

Resultat: Ein optimierter, websitetauglicher Text plus kurzes Feedback zu möglichen Ergänzungen.

Rolle: Text-Profi mit Expertise in Markenkommunikation und Zielgruppenansprache.

Hier der Text zur Korrektur: …

Bildideen entwickeln | ki024

Motivation: Ich möchte eine vollständige Liste von Bildideen erstellen, die ich für eine Website benötige. Ziel ist es, Bilder zu haben, die sowohl die Site unverwechselbar machen, zugänglich und sympathisch wirken als auch Besuchende überzeugen, bei mir zu kaufen/mich zu beauftragen/zu mir zu kommen. Die Bilder müssen sich klar von generischen, standardisierten Darstellungen abheben.

Aufgabe: Erstelle eine Liste mit Bildideen entsprechend der Beschreibung der Website und individuell darauf abgestimmt. Vermeide generische Vorschläge und liefere stattdessen kreative und individuelle Bildideen, die die Zielgruppe ansprechen. Menschen, die Hände schütteln, High-Fives geben, oder einfach nur glücklich lächeln bitte vermeiden, nur authentische, echt wirkende Motive. Wenn nötig, stelle mir gezielte Fragen, um die Anforderungen an die Bilder zu klären.

Resultat: Am Ende möchte ich eine übersichtliche Tabelle mit vielen Ideen, nach den Seiten meiner Website gegliedert. Je Zeile eine Bildidee, keine weitere Formatierung wie fett oder kursiv. Mache konkrete Vorschläge für Bildtypen wie Porträts, Detailaufnahmen oder Stimmungsbilder. Gebe auch an, welche Bilder echte Fotos sein sollten und welche ich mit KI erzeugen kann. Wenn immer möglich, bevorzuge KI-Bilder.

Exempel: Die Tabelle könnte zum Beispiel folgende Zeilen enthalten:

Über uns | Porträts der Mitarbeitenden in Aktion | Echtes Foto

Über uns | Teamfoto | Echtes Foto

Hier die Beschreibung der Site: …

Und hier die Sitemap mit allen geplanten Seiten: …

Ideen für Texte auf der Site | ki026

Motivation: Ich möchte für die Website „Paper Love“ Ideen generieren, wie ich Besucher mit Hilfetexten, Beispielen und Praxisanleitungen anziehen und sie auf der Seite halten kann. Die Website stellt handgefertigte Grußkarten, Kunstdrucke und Postkarten in den Vordergrund, die den Charme und die persönliche Note von Kunstwerken vermitteln. Ziel ist es, durch Inhalte die persönliche Verbindung zu den Kunstwerken und den Künstlern Sabrina und Tim Weber zu stärken.

Aufgabe: Liefere kreative und ansprechende Ideen für Hilfetexte, Beispiele und Praxisanleitungen, die zu dem Boutique-Druckladen und dessen Philosophie passen. Diese Texte sollen Besuchende motivieren, sich intensiver mit den Kunstwerken zu beschäftigen und letztlich Kontakt aufzunehmen. Resultat: Ich möchte eine Liste von 5-10 umsetzbaren Ideen, die thematisch und stilistisch zur Website passen. Die Vorschläge sollen kurz erklärt und klar strukturiert sein.

Exempel: Eine Idee könnte so aussehen: Vom Skizzenbuch zur Grußkarte – Entstehungsgeschichten. Eine Artikelserie, die den künstlerischen Prozess von Sabrina und Tim Weber dokumentiert. Gezeigt werden Skizzen, erzählt wird von Inspirationsmomenten, persönliche Geschichten hinter ausgewählten Designs werden vorgestellt. Das macht die Arbeit greifbar und schafft emotionale Nähe.

Rolle: Du bist eine kreative Content-Strategin, die sich auf die Ansprache von kunstaffinen Zielgruppen versteht.

Gliederung Artikel | ki027

Motivation: Ich brauche eine Gliederung für einen Artikel mit dem Titel „Vom Skizzenbuch zur Grußkarte – Entstehungsgeschichten“. Ziel ist, den künstlerischen Prozess von Sabrina und Tim Weber zu dokumentieren, indem Skizzen, Inspirationsmomente und persönliche Geschichten hinter den Designs gezeigt und erzählt werden. Der Artikel soll die Leser emotional ansprechen und die Nähe zur Kunst und den Betreibenden fördern.

Aufgabe: Entwickle eine strukturierte und ansprechende Gliederung für den Artikel, die den kreativen Prozess von der ersten Idee bis zur fertigen Grußkarte abbildet. Die Gliederung soll auch visuelle Elemente wie Skizzen oder Bilder berücksichtigen.

Resultat: Ich erwarte eine Gliederung, für 5-7 Abschnitte, klar strukturiert und mit kurzen Beschreibungen zu den Inhalten jedes Abschnitts. Sie soll thematisch und stilistisch zur Philosophie von „Paper Love“ passen.

Alt-Texte erstellen | ki082

Motivation: Ich möchte die hochgeladene Tabelle mit Prompts und Bilddateinamen erweitern, um Alt-Texte für die Bilder und websafe-Dateinamen zu generieren. Das Ziel ist es, die Bilder optimal für eine Website vorzubereiten.

Aufgabe: Generiere für jede Zeile in der Tabelle auf Basis der Dateinamen und Prompts einen kurzen, prägnanten Alt-Text. Falls der Dateiname unklar oder nicht websafe ist, schlage einen neuen Dateinamen vor, der den Best Practices entspricht (z. B. Kleinbuchstaben, keine Sonderzeichen und Leerzeichen).

Resultat: Eine erweiterte Tabelle mit zwei neuen Spalten: „Alt-Text“ und „Dateiname“. Die Alt-Texte sollen kurz, prägnant und beschreibend sein, und die Dateinamen sollen den Anforderungen für Dateien auf einem Webserver entsprechen.

Exempel:

– Alt-Text: „Ein roter Apfel auf einem Holztisch“ – Websafe-Dateiname: „roter-apfel-holztisch.jpg“

Rolle: Agiere als Expertin für barrierefreie Websites und SEO-Optimierung.

> zum Inhaltsverzeichnis springen

Schritt 6: Testen und optimieren

Analyse Nutzeransprache & Argumentation | ki073

Motivation: Analysiere die Webseite {URL} darauf, ob die textliche Argumentation überzeugend für eine spezifische Zielgruppe ist. Die Zielgruppe sind Männer im Alter von 20–70 Jahren, die Effizienz, faire Preise und klare Informationen bei einem Friseur schätzen. Sie wohnen maximal 15 Minuten zu Fuß entfernt und kommen aus allen Berufsgruppen.

Aufgabe: Untersuche die Webseite auf folgende Punkte:

– Überzeugt die Argumentation die Zielgruppe? – Fehlen Inhalte, die von der Zielgruppe erwartet werden? – Sind die Texte verständlich, sympathisch und passend zum Unternehmen? – Ist die Argumentation vollständig? – Gibt es eine klare Handlungsaufforderung? Sind mögliche Fragen oder Zweifel der Zielgruppe ausreichend angesprochen und beseitigt?

Resultat: Erstelle einen kurzen, stichpunktartigen Bericht mit klaren Bewertungen und Hinweisen zu möglichen Verbesserungen.

Fragebogen entwickeln | ki031

Motivation: Ich möchte herausfinden, warum Besucher meine Website für handgefertigte Grußkarten verlassen, ohne zu kaufen.

Aufgabe: Entwickle einen Fragebogen, den Nutzende beim Verlassen der Site sehen mit nur wenigen Fragen. Berücksichtige Best Practices für Online-Fragebögen, um die Qualität der Antworten zu maximieren. Gib Empfehlungen für die optimale Mischung aus offenen und geschlossenen Fragen. Formuliere die Fragen freundlich und motivierend. Erkläre, was Besuchende davon haben, zu antworten und wie lange das Ausfüllen dauern wird.

Resultat: Ein kurzer Fragebogen, der effektiv die Hauptgründe für Kaufabbrüche identifiziert und dabei nutzerfreundlich und klar formuliert ist.

Rolle: Du bist Expertin für UX und Online-Marktforschung mit jahrelanger Erfahrung und kennst die Best Practices für Fragebögen, weil du schon hunderte ausgewertet hast.

Testskript erstellen | ki032

Motivation: Ich möchte herausfinden, ob der Prototyp meiner Website für den Grußkarten-Shop überzeugt. Konkret will ich testen, ob Nutzende motiviert sind, Kontakt mit den Betreibenden aufzunehmen, ob sie die gewünschten Informationen finden, die Navigation verstehen und die Inhalte (Texte und Bilder) ansprechend finden. Außerdem möchte ich wissen, wie sie die Produkte und deren Darstellung bewerten.

Aufgabe: Erstelle ein komplettes Testskript für einen Usability-Test von 30 Minuten. Das Skript soll Aufgaben für die Testpersonen enthalten, die gezielt die oben genannten Aspekte überprüfen. Berücksichtige dabei Best Practices für Usability-Tests und formuliere die Aufgaben klar und verständlich, so kurz wie möglich. Ergänze das Skript um Hinweise für die Moderation und mögliche Beobachtungskriterien.

Resultat: Ein vollständiges Testskript mit ganz konkreten, aus dem Leben gegriffenen Aufgaben für die Testpersonen, beginnend mit einer sehr einfachen, sich langsam steigernd im Schwierigkeitsgrad. Ergänze Moderationshinweise und Kriterien für die Auswertung. Das Skript soll sicherstellen, dass ich aussagekräftiges Feedback zu den genannten Punkten erhalte.

Exempel: Ein Beispiel für eine Aufgabe könnte sein: „Dein Patenkind hat nächste Woche 10. Geburtstag. Finde eine Karte, die du ihm schicken willst.“ Ein Beobachtungskriterium könnte sein: „Kann die Testperson das Angebot gut durchsuchen? Vermisst sie Informationen oder Hilfestellung?“

Rolle: Du bist User Researcherin, die schon hunderte von Tests moderiert und beobachtet hat und unterstützt mich dabei, ein professionelles und praxisnahes Testskript zu entwickeln, das auch Ungeübte gut einsetzen können.

Performance-Optimierung bestehender Seiten | ki035

Motivation: Ich möchte die Ladezeit der Webseite www.xyz.de/index.html verbessern, um die Benutzererfahrung zu optimieren und die Performance zu steigern. Aufgabe: Analysiere den HTML-, CSS- und JavaScript-Code der genannten Seite und identifiziere spezifische Faktoren, die die Ladezeit beeinträchtigen. Schlage konkrete Maßnahmen zur Optimierung vor. Resultat: Erstelle eine strukturierte Analyse, die folgende Punkte enthält:

1. Identifizierte Probleme, die die Ladezeit beeinflussen. 2. Konkrete Optimierungsvorschläge zur Behebung der Probleme. 3. Codebeispiele für die Umsetzung der Optimierungen, die direkt angewendet werden können.

Rolle: Du bist eine Performance-Expertin für Webentwicklung, die spezifische und umsetzbare Lösungen liefert. Stelle sicher, dass tatsächlich der Code der angegebenen URL analysiert wird und nicht lediglich allgemeinen Informationen aus dem Web verwendet werden.

> zum Inhaltsverzeichnis springen

Schritt 7: Die Site bekannt machen und verbreiten

Ideenfindung Domainnamen | ki036

Motivation: Ich möchte originelle Domain-Namen für mein Café Bistro Verde finden, die eine Mischung aus Namen mit und ohne den Café-Namen enthalten. Zusätzlich sollen auch Vorschläge gemacht werden, die Ortsnamen einbinden, um die regionale Zugehörigkeit zu betonen.

Aufgabe: Erstelle 14 Domain-Vorschläge, die durchdacht und kreativ sind. Berücksichtige dabei:

– Ein Teil der Vorschläge soll den Namen Bistro Verde direkt einbinden. – Andere Vorschläge sollen alternative Ansätze wie Wortspiele, Metaphern oder Themen wählen. – Ein weiterer Teil der Vorschläge kann Ortsnamen wie Oldenburg oder regionale Begriffe (z. B. Weser) integrieren, um eine Verbindung zur Lokalität zu schaffen.

Resultat: Eine Liste mit 14 Domain-Vorschlägen, die eine ausgewogene Mischung aus Namen mit Bistro Verde, kreativen Alternativen und Ortsbezügen bietet.

Exempel: Mit Namen: BistroVerdeOldenburg.de, BistroVerdeGenuss.de. Ohne Namen: GrünerGenuss.de, VeggieZauber.de. Mit Ortsbezug: GenussAmWeserufer.de, OldenburgerBistro.de. Rolle: Übernimm die Rolle einer erfahrenen Beraterin für Marken- und Namensfindung, die kreative Techniken beherrscht und innovative, maßgeschneiderte Ideen entwickelt.

Gelassene Suchmaschinenoptimierung | ki038

Motivation: Ich möchte die Website xyz.de hinsichtlich ihrer SEO-Strategie analysieren, basierend auf dem Konzept der gelassenen Suchmaschinenoptimierung. Dabei ist wichtig, die Qualität und Relevanz der Inhalte für die Zielgruppe zu bewerten, anstatt nur auf technische Aspekte oder Keywords zu fokussieren.

Aufgabe: Analysiere die Website unter Berücksichtigung der folgenden Punkte:

* Wie gut erfüllt die sie die Bedürfnisse ihrer Zielgruppe (z. B. Problemlösung, Wissensvermittlung, Entscheidungshilfe)? * Sind die Inhalte hochwertig, gut strukturiert und für Menschen ansprechend gestaltet? * Werden Prinzipien wie Fachwissen, Autorität, Vertrauenswürdigkeit und Erfahrung (E-E-A-T, Experience, Expertise, Authoritativeness, Trustworthiness) berücksichtigt? * Welche Verbesserungsvorschläge kannst du geben, um die Inhalte für Menschen und Suchmaschinen gleichermaßen besser zu machen?

Resultat: Erstelle einen detaillierten Analysebericht mit klaren Empfehlungen. Der Bericht soll folgende Punkte enthalten:

* Zusammenfassung der Stärken und Schwächen der Site. * Konkrete Vorschläge zur Verbesserung der Inhalte. * Hinweise, wie technische SEO-Maßnahmen ohne Überbewertung der Technik integriert werden können.

Exempel: Der Bericht sollte prägnant und strukturiert sein, z. B. in Abschnitten für Analyse, Empfehlungen und Fazit. Beispiel für Empfehlungen: „Nutzen Sie Zwischenüberschriften und Listen, um die Inhalte besser zu strukturieren und die Lesbarkeit zu erhöhen.“

Rolle: Du bist erfahrene SEO-Analystin mit Fokus auf nachhaltigen und benutzerzentrierten Optimierungsstrategien.

SEO auf Seitenebene | ki066

Motivation: Prüfe die Webseite meinesite.de/seite.html auf grundlegende SEO- und Nutzerfreundlichkeitsprobleme, um Optimierungspotenziale aufzuzeigen.

Aufgabe: Analysiere die Seite unter den Aspekten Meta-Informationen, Struktur (Überschriften, Keywords, Bild- und Linktexte), technischer Performance (Indexierung, Ladezeit, HTML-Validität), und Benutzerfreundlichkeit (Responsivität, Barrierefreiheit). Gib konkrete Verbesserungsvorschläge.

Resultat: Liefere einen Bericht mit Stärken, Schwächen und priorisierten Optimierungsvorschlägen.

Rolle: Du bist erfahrene SEO-Analystin.

Recherche relevante Soziale Medien | ki040

Motivation: Ich möchte herausfinden, auf welchen sozialen Medien meine Zielgruppe aktiv ist, was sie dort macht und wie ich sie mit gezielten Marketingmaßnahmen ansprechen kann. Die Recherche soll auf die Bedürfnisse meiner Website abgestimmt sein.

Aufgabe: Führe eine detaillierte Analyse durch, um zu ermitteln:

1. Welche sozialen Medien die Zielgruppe nutzt. 2. Welche Aktivitäten und Inhalte dort besonders relevant sind. 3. Welche Marketingstrategien ich dort erfolgreich einsetzen kann.

Nutze die Website-Beschreibung, um den Kontext der Zielgruppe zu berücksichtigen.

Resultat: Erstelle eine strukturierte Übersicht mit den folgenden Punkten:

– Liste der relevanten Sozialen Medien, inklusive Begründung. – Beschreibung der typischen Aktivitäten der Zielgruppe dort. – Vorschläge für konkrete Marketingmaßnahmen, die auf diesen Plattformen Erfolg versprechen.

Exempel: Das Ergebnis soll eine Übersicht in Form einer Tabelle oder stichpunktartigen Liste sein. Die Sprache soll präzise, fachlich und klar verständlich sein.

Rolle: Du bist Marketingexpertin mit Schwerpunkt auf Social-Media-Strategien und Zielgruppenanalyse.

{Hier Beschreibung der Ziele der Site & der Zielgruppe aus dem Grobkonzept einfügen.}

Social-Media-Plan erstellen | ki074

Motivation: Ziel ist es, die Bekanntheit der Website zu erhöhen, die Kundenbindung zu verbessern und letztlich damit den Umsatz zu steigern. Berücksichtige dafür Inhalte und Themen, Zielsetzung, Zielgruppenanalyse und die Auswahl der richtigen Plattformen.

Aufgabe: Entwickle einen umfassenden Social-Media-Plan, der Ziele definiert, zur Zielgruppe passende Plattformen auswählt und eine Content-Strategie erstellt, die auf die Bedürfnisse und Interessen der Menschen abgestimmt ist.

Resultat: Der Social-Media-Plan soll die Form einer klar strukturierten Tabelle haben.

Exempel: Die Tabelle soll detailliert ausgearbeitet sein, mit klar definierten Zielen, einer ausführlichen Zielgruppenanalyse, einer begründeten Auswahl der Plattformen sowie konkreten Content-Ideen und Zeitplänen. Die Informationen sollen präzise und gut nachvollziehbar dargestellt sein.

Rolle: Du bist eine erfahrene Beraterin für Social Media, die strategisch und praxisnah arbeitet und speziell für kleine und mittlere Unternehmen Lösungen konzipiert.

Zusatzinfo: {Beschreibung der Website, der Ziele und Zielgruppen}

Redaktionsplan erstellen | ki041

Motivation: Entwickle einen Redaktionsplan für das „Fit-mit-Frieder-und-Fabi“-Team in Berlin. Ziel ist es, mit minimalem Aufwand die Marke zu stärken, die Kurse und Trainingsangebote bekannt zu machen und neue Kundinnen und Kunden zu gewinnen. Der Plan soll Inhalte für einen Zeitraum von drei Monaten umfassen und den wöchentlichen Aufwand auf maximal 1 Stunde beschränken.

Aufgabe: Erstelle eine Tabelle mit Vorschlägen für Instagram- und YouTube-Inhalte für die kommenden drei Monate (12 Wochen). Für jeden Vorschlag möchten wir:

* Inhalt/Thema

* Plattform

* Geschätzte Zeichenzahl für Texte

* Benötigte Medien (z. B. Foto, Kurzvideo, Story, YouTube-Video)

* Veröffentlichungszeitpunkt als relative Zeitangabe (z. B. „Woche 1“, „Woche 3“ …)

Plane mindestens einen Beitrag pro Woche pro Plattform (Instagram und YouTube) und stelle sicher, dass die Inhalte abwechslungsreich und thematisch auf die Fitnessdienstleistungen abgestimmt sind.

Resultat: Die Tabelle soll leicht verständlich sein und konkrete Vorschläge bieten, die direkt umsetzbar sind. Die Beschreibungen sollen so ausführlich sein, das wir wissen, was genau wir abbilden und schreiben müssen.

Exempel: Die Tabelle folgende Spalten enthalten:

* Thema

* Zeichenzahl

* Medien

* Veröffentlichungszeitpunkt

Rolle: Du bist Expertin für Social Media Marketing, die weiß, wie man Fitness-Dienstleistungen mit minimalem Aufwand auf Social Media bewirbt.

Ideen für einen Blogbeitrag | ki076

Motivation: Ich möchte originelle und nützliche Blogpost-Ideen entwickeln, die meinen Shop für Grußkarten promoten und Lesenden Mehrwert bieten, indem sie kreative oder hilfreiche Ansätze zur Nutzung der Karten zeigen.

Aufgabe: Entwickle 8 Blogpost-Ideen, bestehend aus einem Titel und einer kurzen Beschreibung. Die Ideen sollen originell, witzig oder besonders hilfreich sein und sich klar von typischen Themen abheben und keine Standardinhalte wie „Die besten Grußkarten für Geburtstage“ oder „Warum Grußkarten wichtig sind“ enthalten. Suche stattdessen nach ungewöhnlichen Perspektiven oder innovativen Anwendungsideen, die inspirieren und überraschen.

Resultat: Eine Liste von 8 Blogpost-Ideen, bestehend aus einem Titel und einer kurzen Beschreibung, die sich knapp und prägnant präsentieren.

Exempel: Jede Idee soll ungefähr so aussehen:

§ Titel: Kartenspiele mal anders: 7 Spiele, die du mit Grußkarten selbst machen kannst

§ Beschreibung: Zeige, wie man aus Grußkarten interaktive Spiele erstellt – von Puzzles und Memory bis hin zu einem einzigartigen Storytelling-Spiel für Familie und Freunde.

Rolle: Du bist eine Content-Marketing-Expertin, die sich auf kreative und verkaufsfördernde Blog-Inhalte spezialisiert hat.

Blogpost erstellen | ki075

Motivation: Ich möchte potenzielle Teilnehmende für mein Lauftraining gewinnen, indem ich durch einen Blogbeitrag über die typischen Anfängerfehler beim Laufen wertvolle Tipps gebe. Der Beitrag soll motivierend und unterhaltsam sein, ohne werblich zu wirken. Länge etwa 500 Wörter.

Aufgabe: Erstelle eine detaillierte Gliederung für einen Blogbeitrag zu den häufigsten Fehlern von Laufanfängern und schlage einen Titel vor. Die Gliederung soll konkrete Beispiele für typische Anfängerfehler enthalten und eine motivierende, unterhaltsame Struktur vorgeben.

Exempel: Ein Abschnitt könnte so aussehen:

– Fehler X: „Du rennst los wie ein Gepard – und endest wie eine Schildkröte“

– Beschreibung: Viele starten zu schnell und lassen schnell nach.

– Lösung: Warum ein langsamer Start und ein Trainingsplan wichtig sind.

Rolle: Du bist erfahrene Lauftrainerin und Bloggerin, die ihr Wissen mit Humor und Begeisterung teilt. Richte die Gliederung an einem Publikum aus, das neu im Laufen ist und motiviert werden soll.

> zum Inhaltsverzeichnis springen

Noch viel mehr Tipps zum Erstellen Ihrer eigenen Website finden Sie im Buch:

Cover Buch Website entwickeln mit KI - Jens Jacobsen

Websites schneller und vor allem besser erstellen – mit künstlicher und menschlicher Intelligenz.