docs: stage-1 i18n coverage + news
This commit is contained in:
sanbuphy
@@ -0,0 +1,82 @@
|
||||
# Projektvorstellung
|
||||
|
||||
2025 wird von vielen als das erste Jahr der KI-Programmierung angesehen. Immer mehr Menschen beginnen, KI zum Schreiben von Code einzusetzen, aber die Ergebnisse bleiben oft auf Spielzeugebene -- man weiß nicht, wie man den Vibe Coding-Entwicklungsprozess organisiert, welche Tools man wählen soll und welche wichtigen Schritte vom Prototyp bis zum Go-Live noch fehlen.
|
||||
|
||||
Wir verwenden einen schrittweisen **dreistufigen Praxis-Pfad**: In der Anfängerphase steigen die Teilnehmer durch kleine Spiele schnell in die KI-Programmierung ein, in der ersten Phase erlernen sie die Vibe Coding-Arbeitsweise und erstellen Web-Anwendungsprototypen, in der zweiten Phase lernen sie die Full-Stack-Entwicklung und das Deployment, in der dritten Phase bauen sie komplexe, plattformübergreifende Anwendungen.
|
||||
|
||||
Jede Phase ist mit vollständigen Projektpraktika ausgestattet, damit Sie in echten Herausforderungen vom Spielzeug zum Produkt reifen und schließlich die Fähigkeit erwerben, **jede Idee als nutzbare Anwendung zu realisieren**.
|
||||
|
||||
Wir glauben, dass Sie mit der Beherrschung von Vibe Coding und systematischem Training ein **Allround-Entwickler** werden können, der Frontend- und Backend-Entwicklung, KI-Fähigkeitsintegration und Produktdesign in sich vereint.
|
||||
|
||||
Dieses Projekt richtet sich hauptsächlich an drei Arten von Lernenden:
|
||||
|
||||
- **Anfänger (Allrounder / Produkt- und Betriebsseite)**: Hilft Nicht-Technik-Background-Rollen und Einsteigern, Schlüsselkonzepte zu verstehen und das erste KI-Kleintool oder den ersten Produktprototyp abzuschließen.
|
||||
- **Mittelstufe-Entwickler (Studierende und Entwickler mit gewissen Grundlagen)**: Systematische Beherrschung von Vibe Coding und nativer KI-Anwendungsentwicklung.
|
||||
- **Fortgeschrittene Entwickler (Unternehmen & Startups, Open-Source- und Indie-Entwickler)**: Unterstützt Teams und Einzelpersonen beim schnellen Aufbau, der Validierung und Iteration nativer KI-Anwendungen.
|
||||
|
||||
## Inhaltliche Navigation
|
||||
|
||||
### Gesamtanhang
|
||||
|
||||
[KI-Fähigkeitswörterbuch: Gängige KI-Kernkonzepte, Begriffe und Szenario-Erklärungen](/de-de/appendix/8-artificial-intelligence/ai-capability-dictionary)
|
||||
|
||||
### Null, Kindergarten
|
||||
|
||||
| Kapitel | Wichtige Inhalte | Status |
|
||||
| :--- | :--- | :--- |
|
||||
| [Anfänger: Lernkarte](/de-de/stage-1/learning-map/) | Gesamtübersicht des Lernpfads | ✅ |
|
||||
| [Anfänger: Im KI-Zeitalter genügt Sprechen zum Programmieren](/de-de/stage-1/ai-capabilities-through-games/) | Erste Erfahrungen mit KI-Programmierung am Beispiel von Snake | ✅ |
|
||||
|
||||
### Eins, KI-Produktmanager
|
||||
|
||||
| Kapitel | Wichtige Inhalte | Status |
|
||||
| :--- | :--- | :--- |
|
||||
| [Anfänger II: KI-IDE-Tools kennenlernen](/de-de/stage-1/introduction-to-ai-ide/) | IDE bedienen, Benutzeroberfläche und effiziente Prompt-Methoden beherrschen | ✅ |
|
||||
| [Anfänger III: Prototypen erstellen](/de-de/stage-1/building-prototype/) | Vom Produkt-Analysis bis zum Multi-Page-Produktprototyp -- vollständiger Zyklus | ✅ |
|
||||
| [Anfänger IV: KI-Fähigkeiten in den Prototyp einbauen](/de-de/stage-1/integrating-ai-capabilities/) | API-Integration gängiger KI-Fähigkeiten (Text, Bild, Video) verstehen und umsetzen | ✅ |
|
||||
| [Anfänger V: Vollständiges Projektpraktikum](/de-de/stage-1/complete-project-practice/) | Echte Szenarien simulieren, Nutzerfeedback iterativ einarbeiten und Projekt präsentieren (inkl. Abschlussaufgabe) | ✅ |
|
||||
|
||||
#### Anhang
|
||||
|
||||
| Kapitel | Wichtige Inhalte | Status |
|
||||
| :--- | :--- | :--- |
|
||||
| [Anhang A: Produkt-Denken Ergänzung](/de-de/stage-1/appendix-a-product-thinking/) | Produkt-Denken-Rahmen von der Ideenbewertung bis zur Anforderungsaufschlüsselung und MVP | ✅ |
|
||||
| [Anhang B: Häufige Fehler und Lösungen](/de-de/stage-1/appendix-b-common-errors/) | Häufige Fehler und Behebungsstrategien beim Vibe Coding | ✅ |
|
||||
| [Anhang: Woher Ideen finden](/de-de/stage-1/appendix-idea-sources/) | Nischige Richtungen aus Referenz-Apps, Trends und VC-Listen ableiten | ✅ |
|
||||
| [Anhang: Double-Diamond-Modell](/de-de/stage-1/appendix-double-diamond/) | Verstehen, zuerst das Problem zu definieren, bevor man die Lösung entwirft | ✅ |
|
||||
| [Anhang: Jobs to Be Done](/de-de/stage-1/appendix-jobs-to-be-done/) | Mit der JTBD-Methode erkennen, was Nutzer wirklich erreichen wollen | ✅ |
|
||||
| [Anhang: The Mom Test Interview-Methode](/de-de/stage-1/appendix-mom-test/) | Bedarfsvalidierung durch Nutzerinterviews | ✅ |
|
||||
|
||||
### Zwei, Junior-/Mid-Level-Entwickler
|
||||
|
||||
#### Frontend-Bereich
|
||||
|
||||
| Kapitel | Wichtige Inhalte | Status |
|
||||
| :--- | :--- | :--- |
|
||||
| Lovart zur Materialerstellung nutzen | Lovart zum Batch-Generieren von visuellen Materialien wie Charakteren und Szenen beherrschen, Materialgrundlage für UI-Design und Frontend-Entwicklung schaffen | 🚧 |
|
||||
| Figma und MasterGo Einführung | Design-Tools zur Informationsarchitektur und Seitenstruktur nutzen, Grundlage für die Frontend-Implementierung schaffen | 🚧 |
|
||||
| Erste moderne Anwendung erstellen -- UI-Design | Komponentenbasierte Oberfläche basierend auf Designentwürfen umsetzen, erste Pipeline vom Design zum Code | 🚧 |
|
||||
| Seiten und Schaltflächen nach UI-Design-Richtlinien gestalten | Mainstream-Design-Richtlinien für Seitenstruktur und Schaltflächen-Hierarchie lernen und KI-gestützte Designentwürfe erstellen | 🚧 |
|
||||
| [Hogwarts-Portraits gemeinsam erstellen](/de-de/stage-2/frontend/hogwarts-portraits/) | Eine Frontend-Anwendung mit KI-Fähigkeiten von 0 auf 1 erstellen, Design und Entwicklung verknüpfen | 🚧 |
|
||||
|
||||
#### Backend-Entwicklung
|
||||
|
||||
| Kapitel | Wichtige Inhalte | Status |
|
||||
| :--- | :--- | :--- |
|
||||
| Was ist eine API? | HTTP-Schnittstellen und Request-Response-Modell verstehen, Vorbereitung auf Backend-Integration und Abstimmung | 🚧 |
|
||||
| [Von der Datenbank zu Supabase](/de-de/stage-2/backend/database-supabase/) | Datenbank und API auf Supabase umsetzen, Datenmodell und Frontend-Seite verknüpfen | 🚧 |
|
||||
| LLM-unterstütztes Schreiben von API-Code und API-Dokumentation | LLM beim Generieren von API- und Datenbankdokumentation sowie Code unterstützen, lesbaren und testbaren Backend-Code erstellen | 🚧 |
|
||||
| Git-Workflow und Zeabur-Deployment | Code im Git-Workflow verwalten und die Anwendung auf Zeabur bereitstellen | 🚧 |
|
||||
| Moderne CLI-Entwicklungstools | CLI-basierte KI-Programmierungstools zur Beschleunigung von Entwicklung und Debugging nutzen, einen persönlichen Engineering-Workflow aufbauen | 🚧 |
|
||||
| Stripe-Integration und andere Zahlungssysteme | Zahlungssystem integrieren, Zahlungs-Pipeline und grundlegende Abrechnungsprozesse abschließen | 🚧 |
|
||||
| Erste moderne Anwendung erstellen -- Full-Stack-Anwendung | Frontend, Backend und Zahlungsmodul integrieren, eine bereitstellbare Full-Stack-Web-Anwendung erstellen | 🚧 |
|
||||
| Moderne Frontend-Komponentenbibliothek + Trae-Praxis | Moderne Frontend-Komponentenbibliothek und Trae nutzen, unabhängig ein Produkt mit Login/Registrierung und Zahlungsunterstützung erstellen | 🚧 |
|
||||
|
||||
#### KI-Fähigkeiten Anhang
|
||||
|
||||
| Kapitel | Wichtige Inhalte | Status |
|
||||
| :--- | :--- | :--- |
|
||||
| [Dify-Einführung und Wissensdatenbank-Integration](/de-de/stage-2/ai-capabilities/dify-knowledge-base/) | Dify Workflow und grundlegendes RAG zum Aufbau eines toolbasierten Produkts nutzen, Vorlage für spätere App-Upgrades erstellen | 🚧 |
|
||||
| KI-Wörterbuch abfragen und multimodale APIs integrieren | Geeignete Modelle und APIs finden und multimodale Fähigkeiten wie Text und Bild in Produkte integrieren | 🚧 |
|
||||
|
||||
### Drei, Senior-Entwickler
|
||||
@@ -0,0 +1,768 @@
|
||||
# Anfänger I: Im AI-Zeitalter reicht es zu sprechen, um programmieren zu können
|
||||
|
||||
Dies ist ein **auf Projekt-Based Learning basierendes** Lern-Tutorial. Wir ermutigen dich, den Schritten zu folgen und die Ergebnisse zu reproduzieren.
|
||||
Keine Sorge vor Fehlern oder Änderungen – wir glauben immer an dich. Bitte behalte Folgendes im Gedächtnis:
|
||||
|
||||
<div style="text-align: center;">
|
||||
<div style="display: inline-block; padding: 8px 20px; border-radius: 8px; border: 1px dashed #FFB6C1; background: linear-gradient(135deg, #FFF0F5 0%, #FFE4EC 100%); margin: 12px 0;">
|
||||
<span style="font-size: 15px; font-weight: 500; color: #666;">Fertigstellen ist wichtiger als Perfektion</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script setup>
|
||||
import { relatedArticlesMap } from '@theme/data/relatedArticles'
|
||||
|
||||
const duration = 'Etwa <strong>4 Stunden</strong>, in mehreren Sitzungen abschließbar'
|
||||
const relatedArticles =
|
||||
relatedArticlesMap['de-de/stage-1/ai-capabilities-through-games'] ?? []
|
||||
</script>
|
||||
|
||||
## Kapitelübersicht
|
||||
|
||||
<ChapterIntroduction :duration="duration" :tags="['Konversationelles AI-Programmieren', 'AI-native Mini-Spiele', 'Snake-Spiel-Praxis']" coreOutput="AI-native Snake + eigenes Mini-Spiel" expectedOutput="1 lauffähige AI-native Snake + (optional) 1 selbst erstelltes AI-native Mini-Spiel oder Demo">
|
||||
|
||||
Wenn du **überhaupt nicht programmieren kannst** oder nur ein wenig davon verstehst, ist dieses Kapitel genau für dich gemacht. Wir beginnen mit den Grundlagen: AI durch **Gespräche** Code schreiben zu lassen – ohne Syntax auswendig zu lernen, ohne Umgebungen einzurichten, und alles läuft direkt im Browser.
|
||||
|
||||
Du wirst **dein erstes lauffähiges Programm** selbst bauen – eine Snake, die „Wörter frisst, Gedichte schreibt und malt". Durch diese praktische Übung wirst du erleben, wie sich AI-Programmieren wirklich anfühlt: Nicht dass AI dein Denken ersetzt, sondern dass du deine Ideen aussprichst und AI sie umsetzt.
|
||||
|
||||
Alle Kreationen beginnen bei 0 und werden zu 1. Wir freuen uns, dir Selbstvertrauen und Professionalität zu vermitteln. Für dich gilt: **Ausführungsfähigkeit is all you need**.
|
||||
|
||||
</ChapterIntroduction>
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="0" :items="[
|
||||
{ title: 'Herausforderungen & Chancen', description: 'Neue Möglichkeiten für normale Menschen' },
|
||||
{ title: 'Fähigkeiten erkunden', description: '60-Sekunden-Schnellstart' },
|
||||
{ title: 'Native Praxis', description: 'AI-native Snake bauen' },
|
||||
{ title: 'Kreativer Ausbau', description: 'Weitere Spiele entwickeln' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
## 1. Herausforderungen und Chancen für normale Menschen
|
||||
|
||||
Viele Menschen haben den Kopf voller Produktideen: ein kleines Tool zur Budgetverwaltung, eine Webseite, die das Wachstum des Kindes dokumentiert, oder sogar ein kleines Spiel. Aber sobald sie an Code oder Programmierer denken, werden sie sofort abgeschreckt.
|
||||
|
||||
Seit dem Aufkommen von AI gibt es erstmals eine völlig neue Möglichkeit für normale Menschen: Du musst nicht programmieren können, du musst nur lernen, AI klar zu sagen, was du willst. Daten von GitHub Copilot [zeigen](https://www.wearetenet.com/blog/github-copilot-usage-data-statistics), dass über 15 Millionen Entwickler AI-gestütztes Programmieren nutzen und im Durchschnitt 46% des Codes von AI generiert wird! Bei Java-Projekten liegt dieser Anteil bei 61%.
|
||||
|
||||
<el-card shadow="hover" style="margin: 20px 0; border-radius: 12px;">
|
||||
<template #header>
|
||||
<div style="display: flex; align-items: center; gap: 8px;">
|
||||
<span style="font-size: 20px;">🚀</span>
|
||||
<span style="font-weight: bold; font-size: 16px;">Effizienz- und Adaptionssteigerung</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<el-row :gutter="20" style="margin-bottom: 24px;">
|
||||
<el-col :span="6" :xs="12">
|
||||
<div style="text-align: center; padding: 10px;">
|
||||
<div style="color: #409EFF; font-size: 24px; font-weight: bold;">55%</div>
|
||||
<div style="color: #909399; font-size: 12px; margin-top: 4px;">Geschwindigkeitssteigerung</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6" :xs="12">
|
||||
<div style="text-align: center; padding: 10px;">
|
||||
<div style="color: #67C23A; font-size: 24px; font-weight: bold;">2.4 <span style="font-size: 14px;">Tage</span></div>
|
||||
<div style="color: #909399; font-size: 12px; margin-top: 4px;">Aufgabendauer (vorher 9.6 Tage)</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6" :xs="12">
|
||||
<div style="text-align: center; padding: 10px;">
|
||||
<div style="color: #E6A23C; font-size: 24px; font-weight: bold;">81%</div>
|
||||
<div style="color: #909399; font-size: 12px; margin-top: 4px;">Ersttags-Installationsrate</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6" :xs="12">
|
||||
<div style="text-align: center; padding: 10px;">
|
||||
<div style="color: #F56C6C; font-size: 24px; font-weight: bold;">96%</div>
|
||||
<div style="color: #909399; font-size: 12px; margin-top: 4px;">Vorschlagsannahmerate</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<div style="line-height: 1.8; color: #606266;">
|
||||
Was wirklich begeistert, ist der Sprung in der Effizienz: Die Geschwindigkeit bei der Aufgabenerledigung stieg um <b>55%</b>. Was früher 9,6 Tage brauchte, ist jetzt in <b>2,4 Tagen</b> erledigt. Dieser sichtbare Effizienzgewinn zeigt, dass AI nicht mehr nur ein „optionales Werkzeug" ist, sondern zu einem unverzichtbaren Programmierassistenten im Entwicklungsprozess wird. Die Adaptionsraten bestätigen dies: Am Tag der Zugangsgewährung installierten <b>81%</b> der Entwickler sofort und begannen es zu nutzen; davon <b>96%</b> übernahmen noch am selben Tag AI-generierte Codevorschläge. Mit anderen Worten: Entwickler integrierten AI fast sofort in ihre tägliche Arbeit.
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
Für normale Menschen ist dieser Trend noch bedeutsamer: Wenn selbst professionelle Programmierer stark auf AI angewiesen sind, um Code zu schreiben, **warum sollten wir, die nicht programmieren können, nicht direkt mit AI sprechen, um unsere Ideen umzusetzen?**
|
||||
|
||||
Das Ziel dieses Kurses ist es, dir eine neue Fähigkeit beizubringen: Anwendungen durch natürliche Sprachgespräche zu erstellen. Wir bringen dir bei, wie du mit AI in der Sprache des Computers kommunizierst und wie du AI dazu bringst, die Ideen in deinem Kopf in echte, nutzbare Produkte zu verwandeln.
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="1" :items="[
|
||||
{ title: 'Herausforderungen & Chancen', description: 'Neue Möglichkeiten für normale Menschen' },
|
||||
{ title: 'Fähigkeiten erkunden', description: '60-Sekunden-Schnellstart' },
|
||||
{ title: 'Native Praxis', description: 'AI-native Snake bauen' },
|
||||
{ title: 'Kreativer Ausbau', description: 'Weitere Spiele entwickeln' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
## 2. Wie weit kann AI dich bringen?
|
||||
|
||||
In diesem Abschnitt diskutieren wir nur eine Frage: Wenn du überhaupt nicht programmieren kannst, wieweit kann die heutige AI dich bringen?
|
||||
|
||||
Grob gesagt kannst du die Fähigkeiten aktueller Modelle so verstehen: Sie können **einfache interne Tools**, **Daten-Visualisierungs-Dashboards** und einige **leichte Mini-Spiele** entwickeln. Diese Fähigkeiten reichen für **eigene Tools** und für die **Validierung von Anforderungen aus der Perspektive eines Produktmanagers** völlig aus. Um jedoch per Knopfdruck ein **marktreifes, ausgereiftes Produkt** zu generieren, ist in der Regel immer noch menschliche Arbeit bei der **Prozessgestaltung**, **Detailoptimierung** und fortlaufenden Verbesserung nötig.
|
||||
|
||||
Schauen wir uns als Nächstes am Beispiel des Snake-Spiels an, wieweit AI-Programmieren tatsächlich gehen kann.
|
||||
|
||||
### 2.1 Ein Snake-Spiel in 60 Sekunden
|
||||
|
||||
Öffne zunächst die experimentelle Webseite [z.ai](https://chat.z.ai/), die im Tutorial verwendet wird. `z.ai` ist eine von Zhipu AI (einem der führenden chinesischen Sprachmodellunternehmen) entwickelte AI-Plattform, deren Kernfunktionen von Zhipus selbstentwickelter GLM-Serie bereitgestellt werden. Die Plattform integriert mehrere AI-Funktionen, darunter Folien-Generierung, Poster-Design und Full-Stack-Entwicklung. In diesem Tutorial konzentrieren wir uns auf die Nutzung des Full-Stack-Entwicklungsmoduls.
|
||||
|
||||
::: details 💡 Was ist das neue Paradigma „Programmieren im Browser"?
|
||||
|
||||
Früher erforderte die Entwicklung einer Webanwendung:
|
||||
- Installation einer Programmierumgebung (z. B. Python, Node.js)
|
||||
- Einrichtung eines Code-Editors
|
||||
- Erlernen von Sprachen wie HTML/CSS/JavaScript
|
||||
- Bewältigung von Abhängigkeiten und Fehlern
|
||||
|
||||
Heute reicht es mit AI-Programmierplattformen aus:
|
||||
- Browser öffnen, Webseite aufrufen
|
||||
- Gewünschte Funktionen in natürlicher Sprache beschreiben
|
||||
- AI generiert automatisch Code und zeigt Echtzeitvorschau
|
||||
|
||||
Dieses Paradigma „Gespräch als Programmierung" verwandelt das Programmieren vom „Code schreiben" zum „Anforderungen beschreiben". Du musst dich nicht um technische Details kümmern, sondern musst AI nur klar sagen, was du willst, und es verwandelt deine Ideen in lauffähige Programme. Das ist das neue Paradigma des Programmierens im AI-Zeitalter – **Vibe Coding**.
|
||||
:::
|
||||
|
||||
|
||||
|
||||
Gib nach der Eingabe unserer einfachen Anforderung auf **Full-Stack-Entwicklung** klicken, kannst du den kompletten Erstellungsprozess der Webseite in Echtzeit beobachten. Normalerweise reicht die Zeit für eine Tasse Kaffee, und die Webseite ist automatisch fertig!
|
||||
|
||||
```
|
||||
Erstelle ein Snake-Spiel für mich:
|
||||
1. Steuerung der Schlange mit Pfeiltasten
|
||||
2. Die Schlange wird nach dem Fressen von Nahrung länger und der Punktestand erhöht sich
|
||||
3. Das Spiel endet bei Kollision mit Wänden oder dem eigenen Körper
|
||||
4. Es sollte Start- und Neustart-Buttons geben
|
||||
5. Die Oberfläche soll übersichtlich und ansprechend sein
|
||||
```
|
||||
|
||||
|
||||
|
||||
Nach der Generierung siehst du rechts eine durchblätterbare Weboberfläche. Du kannst nach oben und unten scrollen, um den Seiteninhalt zu betrachten, oder oben auf die 🧭 -Schaltfläche klicken, um in den Vollbildmodus zu wechseln.
|
||||
|
||||
> Von links nach rechts oben: Pfeil-Schaltfläche öffnet die Seitenleiste mit dem Gesprächsverlauf, Stift-Schaltfläche für einen neuen Dialog, Kreisschaltfläche aktualisiert die Seite, Kompass-Schaltfläche schaltet in den Vollbildmodus, Download-Schaltfläche lädt das Projekt herunter, <>-Schaltfläche schaltet zur Code-Ansicht, Publish-Schaltfläche veröffentlicht das Projekt.
|
||||
|
||||
|
||||
|
||||
Wenn du den Quellcode der Webseite anzeigen möchtest, klicke auf das Code-Symbol oben rechts, um den vollständigen Code zu sehen.
|
||||
|
||||
|
||||
|
||||
::: tip 🌐 Entdecke weitere AI-Programmierwerkzeuge
|
||||
|
||||
Neben z.ai empfehlen wir dir, auch folgende hervorragende AI-Programmierplattformen auszuprobieren:
|
||||
|
||||
| Werkzeug | Adresse | Merkmale |
|
||||
|------|------|------|
|
||||
| **Google AI Studio** (empfohlen) | [aistudio.google.com/apps](https://aistudio.google.com/apps) | Offizielles Google-Produkt, unterstützt Gemini-Modelle, geeignet für schnelle Prototypenentwicklung |
|
||||
| **Figma Make** | [figma.com/make](https://www.figma.com/make) | Tiefe Integration mit Designwerkzeugen, geeignet für Designer zur schnellen Erstellung interaktiver Prototypen |
|
||||
| **Coze** | [coze.com](https://www.coze.cn) | AI-Bot-Plattform von ByteDance, bietet No-Code-Visuellerstellung. Tiefe Integration mit nationalen Modellen wie Doubao und Kimi, unterstützt Plugin-Marktplatz, geplante Aufgaben und Multi-Kanal-Publishing |
|
||||
| **v0.dev** | [v0.dev](https://v0.dev) | AI-UI-Generierungstool von Vercel, generiert lauffähige React-Komponenten-Code aus Beschreibungen |
|
||||
| **Bolt.new** | [bolt.new](https://bolt.new) | AI-Full-Stack-Entwicklungsplattform von StackBlitz, generiert und deployt komplette Webanwendungen |
|
||||
| **Lovable** | [lovable.dev](https://lovable.dev) | Spezialisiert auf hochwertige React-Anwendungen, unterstützt GitHub-Integration und One-Click-Deployment |
|
||||
| **Replit Agent** | [replit.com](https://replit.com) | Online IDE mit integriertem AI-Programmierassistenten, unterstützt mehrere Sprachen und Echtzeit-Zusammenarbeit |
|
||||
|
||||
Für einen detaillierten Vergleich und Tutorial zu Web-Programmierwerkzeugen siehe unsere Ergänzungslektüre: [Vergleich von 7 Vibe-Coding-Plattformen](../../stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial.md)
|
||||
:::
|
||||
|
||||
### 2.2 Was kann und was kann konversationelles Programmieren?
|
||||
|
||||
Dieser Abschnitt konzentriert sich auf eine konkrete Frage: Wenn du dich nur auf konversationelle AI verlässt und keinen Code schreibst, wieweit kann es die Dinge vorantreiben?
|
||||
|
||||
Auf Erfahrungsebene lautet eine relativ stabile Schlussfolgerung: Es kann dir helfen, etwas „kleines, aber Vollständiges" zu erstellen, aber „wann ist es genug" musst du bei jedem Schritt selbst entscheiden.
|
||||
|
||||
#### Besser bei „kleinen und klaren" Anwendungen
|
||||
|
||||
Aus dem vorherigen Snake-Beispiel hast du bereits ein typisches Muster gesehen:
|
||||
Solange du die Oberfläche und Interaktion klar beschreiben kannst, kann AI normalerweise innerhalb weniger Gesprächsrunden eine vollständige Webseite erstellen, die sich öffnen, anklicken und spielen lässt.
|
||||
|
||||
Solche Aufgaben haben oft gemeinsame Merkmale:
|
||||
|
||||
- Klaren Umfang: eine Webseite, ein einfaches internes Tool, ein kleines Spielprinzip
|
||||
- Sichtbare Ergebnisse: Du kannst sofort im Browser überprüfen, ob es wie erwartet funktioniert
|
||||
- Direkte Fehlerbehebung: Bei Problemen kannst du in nachfolgenden Gesprächen spezifische Phänomene beschreiben und Korrekturen anfordern (durch Kopieren von Fehlern oder Screenshots)
|
||||
|
||||
Innerhalb dieser Grenzen kannst du konversationelle AI als einen „Hilfsentwickler mit guter Ausführung" betrachten. Du musst nur in jeder Runde die Anforderungen in natürlicher Sprache verfeinern und korrigieren, um schnell einen brauchbaren Prototyp zu erhalten.
|
||||
|
||||
**Erfolgsquote von AI bei kleinen Projekten:**
|
||||
<el-progress :percentage="90" :stroke-width="15" status="success" striped striped-flow />
|
||||
|
||||
#### Große Projekte brauchen eine „Prozessperspektive"
|
||||
|
||||
Sobald du den Bereich „klein und klar" verlässt und erwartest, dass AI mit wenigen Gesprächsrunden ein komplexes System End-to-End erstellt, wirst du schnell an Grenzen stoßen. Große Projekte müssen Backends anbinden, Datenbanken verbinden, Drittanbieterdienste integrieren und betreffen Berechtigungen, Sicherheit, Nebenläufigkeit und viele Geschäftsregeln – das Ziel ist die Lieferung eines kompletten Systems, nicht einer einzigen Webseite.
|
||||
|
||||
In diesem Fall ist es vernünftiger, nicht alle Anforderungen auf einmal an AI zu werfen, sondern zuerst einen klaren Gesamtprozess zu skizzieren: Was sind die Schlüsselschritte, was sind die Eingaben, Ausgaben und Zustandsänderungen bei jedem Schritt, und welche Knoten sind am empfindlichsten für Leistung und Sicherheit. Basierend auf diesem Prozessdiagramm kannst du relativ unabhängige Schritte herauslösen und der konversationellen AI zur Generierung von Schnittstellen, Modulen, Skripten und Tests übergeben.
|
||||
|
||||
Nach aktueller Leistungsfähigkeit ist AI besser darin, einzelne kleine Schritte zu beschleunigen, während du (oder dein Team) entscheidest, wie die Schritte aufgeteilt und verknüpft werden, sowie für die endgültige Architektur, Systemintegration und den Betrieb verantwortlich bist.
|
||||
|
||||
#### Der Unterschied zwischen „können schreiben" und „brauchbar sein"
|
||||
|
||||
Auf den ersten Blick scheint AI alles zu können, aber wie brauchbar sind diese Dinge wirklich, und wieweit? Wie sollten wir das einordnen?
|
||||
|
||||
Eine hilfreiche Faustregel:
|
||||
|
||||
::: warning ⚠️ Leitfaden für Anwendungsszenarien
|
||||
|
||||
- **Prototyp / Demo / internes Tool**: Sehr geeignet, um von AI die erste Version erstellen zu lassen, dann selbst Details zu iterieren.
|
||||
- **Große Produkte für echte Nutzer**: Erfordert normalerweise langfristiges Engagement von Ingenieuren in Architektur, Abstraktion, Leistung und Wartung.
|
||||
- **Stark sicherheits- oder compliancekritische Systeme** (z. B. Zahlung, Risikokontrolle, Medizin): In der aktuellen Phase sollte man nicht „generieren und sofort live schalten"; es muss strenge Prüf- und Testprozesse geben.
|
||||
:::
|
||||
|
||||
Heutzutage kannst du AI relativ beruhigt als effizienten Partner für Demos und interne Tools betrachten:
|
||||
Solange du bereit bist, mehr zu testen, mehr zu iterieren und ein paar Runden „Hier stimmt etwas nicht, bitte korrigiere es und erkläre warum" zu spielen, ist die Qualität auf Prototyp- und Tool-Ebene normalerweise ausreichend und hat praktischen Wert.
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="2" :items="[
|
||||
{ title: 'Herausforderungen & Chancen', description: 'Neue Möglichkeiten für normale Menschen' },
|
||||
{ title: 'Fähigkeiten erkunden', description: '60-Sekunden-Schnellstart' },
|
||||
{ title: 'Native Praxis', description: 'AI-native Snake bauen' },
|
||||
{ title: 'Kreativer Ausbau', description: 'Weitere Spiele entwickeln' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
## 3. Praxis: Deine erste AI-native Anwendung
|
||||
|
||||
Kommen wir zum praktischen Teil. Im vorherigen Abschnitt haben wir mit AI schnell einen spielbaren Snake-Prototyp erstellt und grob verstanden, was AI kann und was nicht. Als Nächstes lernen wir, wie man mit grundlegenden **Vibe Coding**-Techniken eine **moderne** AI-native Snake erstellt. Wir lassen die Schlange Textzeichen statt Bohnen fressen. Am Ende soll das Spiel basierend auf den gefressenen Textzeichen ein Gedicht und ein Bild generieren.
|
||||
Durch dieses praktische Beispiel verstehst du den Kern des neuen Programmierparadigmas: Wie man Anforderungen klar in natürlicher Sprache ausdrückt.
|
||||
|
||||
### 3.1 AI-native Snake
|
||||
|
||||
Am Anfang können wir auf die einfachste Weise mit dem großen Modell sprechen, was uns hilft, schnell einen Produktprototyp zu erhalten. Gib einfach im Chat ein:
|
||||
|
||||
> **💡 Beispiel-Prompt:** Erstelle ein Snake-Spiel für mich
|
||||
>
|
||||
> 
|
||||
|
||||
> **💡 Beispiel-Prompt:** Erstelle ein Snake-Spiel, das Folgendes unterstützen soll:
|
||||
>
|
||||
> 1. Ich kann verschiedene Wörter fressen, die in einer Box gesammelt werden
|
||||
> 
|
||||
|
||||
> **💡 Beispiel-Prompt:** Erstelle ein Snake-Spiel, das Folgendes unterstützen soll:
|
||||
>
|
||||
> 1. Ich kann verschiedene Wörter fressen, die in einer Box gesammelt werden
|
||||
> 2. Wenn die Schlange 8 Wörter gefressen hat, soll das LLM basierend auf diesen Wörtern ein Gedicht erstellen; wir können das Gedicht nach Bedarf neu mischen.
|
||||
> 3. Nach Abschluss des Gedichts wird automatisch ein Bild basierend auf dem Gedicht erstellt.
|
||||
>
|
||||
> 
|
||||
|
||||
Beachte, dass während der Entwicklung Probleme auftreten können, bei denen zum Beispiel das Klicken auf einen Button keine Reaktion zeigt, Fehler bei der Nutzung von Funktionen auftreten, Funktionen nicht wie erwartet arbeiten oder die Frontend-Oberfläche nicht dem erwarteten Design entspricht.
|
||||
|
||||
In diesem Fall müssen wir das Modell weiter fragen, um diese unerwarteten Probleme zu beheben.
|
||||
|
||||
|
||||
|
||||
### 3.2 Neue Funktionen zum Spiel hinzufügen
|
||||
|
||||
Nachdem die Grundfunktionen fertig sind, können wir versuchen, unserem Programm einige neue Extras hinzuzufügen! Wenn du das Fressen von Wörtern oder Zeichen zu langweilig findest, kannst du die Schlange Wörter in verschiedenen Farben fressen lassen und entsprechend die Farbe der Schlange ändern.
|
||||
|
||||
Du kannst auch Spezialeffekte für den „Fress"-Vorgang hinzufügen oder magische Wörter einführen, die Effekte auslösen – zum Beispiel die Geschwindigkeit oder Größe der Schlange erhöhen. Eine andere Idee ist, bei jedem gefressenen Wort ein Gedicht und ein Bild generieren zu lassen, anstatt bis zu acht Wörtern zu warten.
|
||||
|
||||
Wenn das zu anspruchsvoll klingt, kannst du das Sprachmoduell direkt um Hilfe bitten! Es kann kreative Vorschläge machen, um dein Spiel interessanter zu gestalten. Probier es aus!
|
||||
|
||||
```
|
||||
1. „Wörter-entfesseln-Welten"-Mechanismus
|
||||
Jedes Mal, wenn die Schlange ein Wort frisst, assoziiert das LLM poetisch damit (z. B. „Baum" → „Wald", „Schatten") und das Bildmodell erstellt sofort ein kleines Kunstwerk für dieses Wort. Diese Bilder setzen sich nach und nach zu einem einzigartigen, vom Spieler geschaffenen Panorama zusammen, sodass der Spieler bei jedem Durchlauf „malend und dichtend" spielt.
|
||||
|
||||
2. „Gedicht-Puzzle"-Gameplay
|
||||
Jedes gefressene Wort löst das LLM aus, einen kurzen Vers zu generieren, und das Bildmodell erstellt eine Illustration. Diese Verse und Bilder setzen sich wie ein Puzzle zusammen und bilden am Ende einer Runde ein AI-gestaffeltes Gedicht und Bild.
|
||||
|
||||
3. „Magische Wörter" & „Story-Verzweigungen"
|
||||
Besondere „magische Wörter" (z. B. „Wind", „Nacht", „Traum") lösen nicht nur LLM-Gedichte aus, sondern ändern auch die Stimmung oder das Thema der Szene – der Stil der Bildgenerierung wechselt zu Nacht, Sturm oder traumhafter Atmosphäre.
|
||||
Story-Verzweigung: Das LLM gibt zu Beginn ein Thema oder Rätsel (z. B. „Herbsterinnerungen"). Die Wortwahl des Spielers beeinflusst direkt die Entwicklung der Geschichte und der Gedichte, und das Bildmodell aktualisiert Hintergrund und visuelle Effekte in Echtzeit.
|
||||
|
||||
4. „Echtzeit-Interaktionsgenerierung"
|
||||
Nach jedem Wort generiert das LLM eine Dialogzeile oder Beschreibung; NPCs im Spiel können mit dem Spieler „sprechen" oder die Umgebung ändert sich entsprechend.
|
||||
Das Aussehen der Schlange oder die Hindernisse im Spiel können sich basierend auf den gefressenen Wörtern visuell verändern – dank des Bildmodells.
|
||||
|
||||
5. „Kreation & Teilen"
|
||||
Spieler können am Ende der Sitzung ihre AI-kreierten Gedichte und Bilder speichern und teilen und ihre einzigartige „AI-Kollaboration" präsentieren.
|
||||
Bestenlisten für „Schönstes Gedicht + Kunst", „Kreativste Wortkombination" etc., die Replayability und Kreativität fördern.
|
||||
|
||||
6. „Satz-Snake"-Herausforderung
|
||||
Umgekehrter Modus: Das LLM gibt einen Vers oder ein Rätsel, und der Spieler muss die Schlange leiten, um die Wörter in der richtigen Reihenfolge zu fressen und den Satz zu rekonstruieren. Falsche Wörter lösen über das Bildgenerierungsmodell lustige oder künstlerische Konsequenzen aus.
|
||||
|
||||
7. „Themen-Level" & „Stilauswahl"
|
||||
Zu Beginn des Spiels wählt der Spieler ein Thema (z. B. „Märchen", „Sci-Fi", „Tang-Gedichte"); LLM und Bildmodell passen Wortauswahl, Gedichtstil und visuelle Effekte entsprechend an, sodass jeder Durchlauf frisch wirkt.
|
||||
|
||||
8. „Live-Zusammenarbeit"
|
||||
Wenn ein spezielles Wort gefressen wird, kann das LLM den Spieler auffordern, einen Satz oder Stil einzugeben, und generiert dann entsprechende Verse und Illustrationen – eine echte Mensch-AI-Kollaboration.
|
||||
|
||||
9. „AI-Easter Eggs & Erfolge"
|
||||
Bestimmte Wortkombinationen werden vom LLM als spezielle Themen oder interne Witze erkannt (z. B. „Mond", „Osmanthus", „Flussufer") und lösen seltene Verse und Illustrationen aus, die Erkundung belohnen.
|
||||
|
||||
10. „Wachsende Geschichte"
|
||||
Mit dem Wachsen der Schlange generiert das LLM ein fortlaufendes Geschichtsgedicht, und das Bildmodell erstellt ein nahtloses langes Scroll- oder Panorama-Bild, sodass der Spieler gleichzeitig „schreibt, malt und spielt".
|
||||
```
|
||||
|
||||
Darüber hinaus können wir das LLM bitten, projektweite Prompts für uns zu generieren. Im vorherigen Abschnitt haben wir nur selbst den Prompt für das Snake-Spiel geschrieben. Lass uns jetzt versuchen, das Modell einen Prompt mit einem Gesamtframework und Implementierungspfad generieren zu lassen (du kannst das direkt mit z.ai machen).
|
||||
|
||||
Wenn du lernen möchtest, bessere Prompts zu schreiben, siehe das [Prompt-Engineering-Appendix](/de-de/appendix/8-artificial-intelligence/prompt-engineering).
|
||||
|
||||
> Ich möchte, dass AI ein Web-Snake-Spiel generiert. Ich brauche einen umfassenderen Prompt, damit das Ergebnis beeindruckender und interessanter wird. Bitte generiere einen entsprechenden Prompt. Das aktuelle Ziel ist: ein Snake-Spiel zu generieren, das die Funktion des Fressens verschiedener Wörter zur Gedichtgenerierung implementieren soll und ein Bildgenerierungsmodul enthalten sollte.
|
||||
|
||||
Die Antwort von z.ai wird ungefähr so aussehen:
|
||||
|
||||
|
||||
|
||||
Wir können diesen Prompt verwenden, um das Projekt im Full-Stack-Modus neu zu generieren:
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="3" :items="[
|
||||
{ title: 'Herausforderungen & Chancen', description: 'Neue Möglichkeiten für normale Menschen' },
|
||||
{ title: 'Fähigkeiten erkunden', description: '60-Sekunden-Schnellstart' },
|
||||
{ title: 'Native Praxis', description: 'AI-native Snake bauen' },
|
||||
{ title: 'Kreativer Ausbau', description: 'Weitere Spiele entwickeln' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
### 3.3 Versuche, andere Mini-Spiele zu erstellen
|
||||
|
||||
Neben dem Snake-Spiel können wir der Fantasie freien Lauf lassen.
|
||||
|
||||
Erschaffe alles, was du willst, versuche sogar, alles kaputt zu machen! Und dann fang von vorne an!
|
||||
|
||||
```
|
||||
1. AI-Kunstgalerie-Plattform
|
||||
Beschreibung: Eine Online-Galerie zur Präsentation von AI-generierter Kunst, auf der Nutzer Werke hochladen, teilen und kommentieren können.
|
||||
Funktionen: Nutzerkontosystem, Kunstwerk-Upload und -Präsentation, Bewertungssystem, Kategorisierungsbrowser, AI-Generierungstool-Integration.
|
||||
Technische Highlights: React/Vue-Frontend, Node.js-Backend, MongoDB-Datenbank, AI-API-Integration.
|
||||
|
||||
2. Retro-Spiele-Archiv
|
||||
Beschreibung: Eine Website, die klassische Spiele ehrt, mit Spielgeschichte, Spielanleitungen und online spielbaren Retro-Spielen.
|
||||
Funktionen: Spieledatenbank, Zeitstrahl-Anzeige, Online-Emulator, Nutzerkommentare, Spielsammlung.
|
||||
Technische Highlights: Responsive Design, WebGL/Canvas-Spiele, RESTful API, Nutzer-Authentifizierungssystem.
|
||||
|
||||
3. Nachhaltiger-Lebensstil-Tracker
|
||||
Beschreibung: Eine Website, die Nutzern hilft, ihren CO2-Fußabdruck durch Umweltschutztipps und Community-Challenges zu verfolgen und zu reduzieren.
|
||||
Funktionen: Persönlicher CO2-Rechner, Zielsetzung, Fortschrittsverfolgung, Community-Challenges, Umweltschutzwissensdatenbank.
|
||||
Technische Highlights: Datenvisualisierung, mobile Optimierung, Social-Funktionen, Push-Benachrichtigungen.
|
||||
|
||||
4. Virtuelle-Küchen-Assistent
|
||||
Beschreibung: Eine AI-basierte Kochberatungsplattform mit personalisierten Rezeptvorschlägen und Schritt-für-Schritt-Kochanweisungen.
|
||||
Funktionen: Rezeptdatenbank, Zutatenerkennung, personalisierte Empfehlungen, Küchentimer, Nährwertanalyse.
|
||||
Technische Highlights: Bilderkennungs-API, ML-Empfehlungssystem, Sprachsteuerung, Echtzeit-Videoführung.
|
||||
|
||||
5. Indie-Musik-Entdeckungsplattform
|
||||
Beschreibung: Eine Musikstreaming-Plattform, die sich auf unabhängige und aufstrebende Künstler konzentriert, mit einzigartigem Entdeckungserlebnis.
|
||||
Funktionen: Musikstreaming, Künstlerprofile, personalisierte Empfehlungen, Playlist-Erstellung, Community-Bewertungen.
|
||||
Technische Highlights: Audio-Stream-Verarbeitung, Empfehlungsalgorithmus, Social-Funktionen, Musikvisualisierung.
|
||||
|
||||
6. Minimalistische Aufgabenverwaltung
|
||||
Beschreibung: Ein Aufgabenverwaltungstool mit zen-ästhetischem Design, das sich auf einfache und effiziente Aufgabenorganisation konzentriert.
|
||||
Funktionen: Aufgabenerstellung und -kategorisierung, Prioritäteneinstellung, Fortschrittsverfolgung, Teamzusammenarbeit, Datenanalyse.
|
||||
Technische Highlights: Minimalistisches UI-Design, Drag-and-Drop, Echtzeit-Synchronisation, plattformübergreifende Kompatibilität.
|
||||
|
||||
7. Sci-Fi-Schreibwerkstatt
|
||||
Beschreibung: Eine Plattform für Sci-Fi-Autoren mit kreativen Werkzeugen und Inspiration, einschließlich Worldbuilding-Hilfe und Charakterentwicklungstools.
|
||||
Funktionen: Geschichtenstrukturwerkzeuge, Charakterprofile, Worldbuilding-Vorlagen, Schreibstatistiken, Community-Feedback.
|
||||
Technische Highlights: Rich-Text-Editor, Datenvisualisierung, kollaboratives Editieren, AI-gestützte Kreation.
|
||||
|
||||
8. Persönliches Wissens-Graph
|
||||
Beschreibung: Ein Tool, das Nutzern hilft, persönliche Wissensnetzwerke aufzubauen und verschiedene Ideen und Informationen zu visualisieren und zu verknüpfen.
|
||||
Funktionen: Knotenerstellung und -verknüpfung, Tag-System, Suchfunktion, Import/Export-Werkzeuge, Visualisierungsdiagramme.
|
||||
Technische Highlights: Graph-Datenbank, Datenvisualisierungsalgorithmen, Markdown-Unterstützung, geräteübergreifende Synchronisation.
|
||||
|
||||
9. Virtueller Pflanzengarten
|
||||
Beschreibung: Eine interaktive Pflanzenenzyklopädie, in der Nutzer die Pflanzenwelt erkunden und virtuelle Gärten anlegen können.
|
||||
Funktionen: Pflanzendatenbank, 3D-Pflanzenmodelle, Wachstumssimulation, Gartenbauanleitung, Community-Showcase.
|
||||
Technische Highlights: 3D-Rendering, saisonale Wechselsimulation, AR-Integration, Pflanzen-Identifikations-API.
|
||||
|
||||
10. Programmier-Challenge-Arena
|
||||
Beschreibung: Eine Online-Wettbewerbsplattform für Programmierer mit verschiedenen Schwierigkeitsstufen.
|
||||
Funktionen: Herausforderungsaufgaben, Code-Editor, automatische Bewertung, Bestenliste, Lernpfad.
|
||||
Technische Highlights: Code-Sandbox-Umgebung, Echtzeit-Bewertungssystem, Algorithmus-Visualisierung, Social-Learning-Funktionen.
|
||||
```
|
||||
|
||||
Und noch mehr... Wenn du gerne spielst, lass uns gemeinsam versuchen, Spiele zu erschaffen!
|
||||
|
||||
```
|
||||
1. 3D Open-World RPG
|
||||
Beschreibung: Ein Fantasy-RPG mit weitläufiger Open World, Quests und Charakterentwicklung.
|
||||
Funktionen: Tag-Nacht-Zyklus, dynamisches Wetter, Skill-Baum, Multiplayer-Koop, Handwerkssystem.
|
||||
Technische Highlights: Three.js oder Babylon.js für 3D-Rendering, serverseitige Spiellogik, Charakteranpassung, Save-System.
|
||||
|
||||
2. Ego-Shooter (FPS) Arena
|
||||
Beschreibung: Ein schnelles Multiplayer-FPS mit verschiedenen Spielmodi und Karten.
|
||||
Funktionen: Team-Deathmatch, Capture-the-Flag, Waffenanpassung, Rangliste.
|
||||
Technische Highlights: WebGL/Three.js für 3D-Grafik, Multiplayer-Netzwerkcode, Treffererkennung, Voice-Chat.
|
||||
|
||||
3. AI-Schach und Multiplayer
|
||||
Beschreibung: Eine voll funktionsfähige Schachplattform mit AI-Gegnern und Online-Multiplayer.
|
||||
Funktionen: AI-Schwierigkeitsstufen, Endspiel-Herausforderungen, Turniermodus, Replay-Analyse.
|
||||
Technische Highlights: Schachlogikbibliothek, WebSocket für Echtzeit-Multiplayer, ELO-Ranglistensystem, Anti-Cheat.
|
||||
|
||||
4. Mahjong Online-Multiplayer
|
||||
Beschreibung: Ein traditionelles Mahjong-Spiel mit Online-Multiplayer und Punktestand.
|
||||
Funktionen: Mehrere Regelwerke, private Räume, Ranglistensystem, Replay-Funktion.
|
||||
Technische Highlights: Tile-Matching-Logik, Echtzeit-Multiplayer, Lobby-System, Punktestand-Tracking.
|
||||
|
||||
5. Rundenbasiertes Strategiespiel
|
||||
Beschreibung: Ein taktisches Strategiespiel mit Raster-Kampf und Einheitenverwaltung.
|
||||
Funktionen: Kampagnenmodus, Gefechtsmodus, Einheitenupgrade, Nebel des Krieges, Multiplayer.
|
||||
Technische Highlights: Raster-Bewegungssystem, AI-Entscheidungsfindung, Runden-Synchronisation, Save/Load-System.
|
||||
|
||||
6. Zeitfahren-Rennspiel
|
||||
Beschreibung: Ein 3D-Rennspiel mit Fokus auf Zeitfahren und Streckenrekorde.
|
||||
Funktionen: Mehrere Strecken, Autoanpassung, Geister-Replay, Bestenliste.
|
||||
Technische Highlights: 3D-Auto-Physik, Streckeneditor, Replay-System, Online-Bestenliste.
|
||||
|
||||
7. Kartenspiel (Deck-Building)
|
||||
Beschreibung: Ein strategisches Kartenspiel, in dem Spieler Decks bauen und gegen Gegner antreten.
|
||||
Funktionen: Kartensammlung, Deck-Building, Rangliste, Saison-Events.
|
||||
Technische Highlights: Kartenspiellogik, Matchmaking-System, AI-Gegner, Kartenanimationen.
|
||||
|
||||
8. Battle Royale (Top-Down 2D)
|
||||
Beschreibung: Ein Top-Down-2D-Battle-Royale mit schrumpfender Spielzone und Loot-Mechanik.
|
||||
Funktionen: Solo- und Squad-Modus, Waffenvielfalt, In-Game-Events, Bestenliste.
|
||||
Technische Highlights: Echtzeit-Multiplayer, Zonen-Schrumpfungslogik, Loot-Spawn-System, Matchmaking.
|
||||
|
||||
9. Horror-Überlebensspiel (Ego-Perspektive)
|
||||
Beschreibung: Ein Ego-Perspektive-Horrorspiel mit Ressourcenmanagement und Fluchtmechanik.
|
||||
Funktionen: Atmosphärische Umgebung, Rätsel, Enemy-AI, Multiple Endings.
|
||||
Technische Highlights: Dynamische Beleuchtung, Sound-Design, Enemy-Pathfinding, Save-System.
|
||||
|
||||
10. Rhythmus-Musikspiel (3D)
|
||||
Beschreibung: Ein 3D-Rhythmus-Spiel, in dem Spieler im Takt der Musik Noten treffen.
|
||||
Funktionen: Mehrere Schwierigkeitsstufen, Streckeneditor, Custom-Song-Unterstützung, Bestenliste.
|
||||
Technische Highlights: Audioanalyse, Beat-Synchronisation, 3D-Noten-Spuren, Input-Timing-Erkennung.
|
||||
```
|
||||
|
||||
## 📚 Assignment
|
||||
|
||||
<el-card id="assignment-card" shadow="hover" style="margin: 20px 0; border-radius: 12px;">
|
||||
<template #header>
|
||||
<div style="font-weight: bold; font-size: 16px;">🎯 Kapitelaufgabe: Erstelle deine erste AI-native Mini-Spiele</div>
|
||||
</template>
|
||||
|
||||
<p>
|
||||
In diesem Abschnitt hast du den kompletten Prozess von „Gespräch-generiertes Snake" bis zum „Verständnis des AI-native Mini-Spiel-Design-Gedankens" durchlaufen. Die folgende Aufgabe hilft dir, dieses Verständnis in echte Fähigkeiten umzuwandeln.
|
||||
</p>
|
||||
|
||||
<ol>
|
||||
<li>
|
||||
<strong>Reproduziere das AI-native Snake-Spiel vollständig</strong>
|
||||
<ul>
|
||||
<li>Mindestens implementiert: Die Schlange kann sich bewegen, nach dem Fressen von „Nahrung" ändern sich Länge und Punktestand, Kollision mit Wänden oder dem eigenen Körper beendet das Spiel.</li>
|
||||
<li>Während der Reproduktion übe, Fehlerphänomene + Fehlermeldungen + relevante Code-Snippets zusammen an AI zu übergeben und es um Korrektur im „Anfängermodus" zu bitten.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<strong>(Optional) Erstelle 1 AI-native Mini-Spiel oder Demo</strong>
|
||||
<ul>
|
||||
<li>Kann jedes leichte Gameplay rund um Text, Bilder, Musik oder Rhythmus sein, z. B. „Wörter fressen und Gedichte schreiben", „Rhythmus-Tippen", „Generatives Endless Runner" etc.</li>
|
||||
<li>Der Fokus liegt nicht auf aufwendiger Grafik, sondern darauf, dass du klar sagen kannst: Wobei hat AI konkret geholfen, und welches „schwer manuell Machbare oder Umständliche" es gelöst hat.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<p>
|
||||
Das ist das komplette Tutorial! Du brauchst möglicherweise <strong>4 Stunden</strong>, um alle Inhalte abzuschließen und dein eigenes Snake-Spiel zu bauen. Keine Eile – erkunde, experimentiere und genieße den Prozess. Wenn du auf Konzepte stößt, die du nicht verstehst, schau in den Anhang unten.
|
||||
</p>
|
||||
</el-card>
|
||||
|
||||
## Anhang
|
||||
|
||||
<el-card id="appendix-nav" shadow="hover" style="margin-top: 24px; margin-bottom: 24px; border-left: 5px solid #67C23A;">
|
||||
<div style="font-weight: bold; margin-bottom: 8px;">Anhang-Navigation</div>
|
||||
<div style="color: #606266; font-size: 14px; line-height: 1.6; margin-bottom: 12px;">
|
||||
Hier sind einige grundlegende Konzepte zu diesem Kapitel: Wenn du beim Lernen auf Fragen wie „Was ist Frontend?" oder „Was genau ist Vibe Coding?" stößt, kannst du jederzeit hier nachschlagen.
|
||||
</div>
|
||||
<el-row :gutter="16">
|
||||
<el-col :span="12">
|
||||
<a href="#appendix-1" style="text-decoration: none; color: inherit;"><b>Anhang 1: Brauchen wir Frontend-Entwicklungswissen?</b></a><br/>
|
||||
<span style="font-size: 12px; color: #909399">Verstehe die Rolle des Frontends in einer Anwendung und was „sichtbar" bedeutet.</span>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<a href="#appendix-2" style="text-decoration: none; color: inherit;"><b>Anhang 2: Was genau ist Vibe Coding</b></a><br/>
|
||||
<span style="font-size: 12px; color: #909399">Verstehe den Kerngedanken des „konversationellen Entwickelns" und wie man mit AI zusammenarbeitet.</span>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="16" style="margin-top: 10px;">
|
||||
<el-col :span="12">
|
||||
<a href="#appendix-3" style="text-decoration: none; color: inherit;"><b>Anhang 3: Modellkontext</b></a><br/>
|
||||
<span style="font-size: 12px; color: #909399">Verstehe Konzepte wie „Kontextlänge", die oft gehört aber leicht verwechselt werden.</span>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<a href="#appendix-4" style="text-decoration: none; color: inherit;"><b>Anhang 4: Instruction-Following-Fähigkeit</b></a><br/>
|
||||
<span style="font-size: 12px; color: #909399">Verstehe, warum Modelle manchmal „nicht zuhören", und wie man klarer schreibt.</span>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div style="margin-top: 12px; font-size: 12px; color: #909399;">
|
||||
Tipp: Du kannst mit Ctrl/⌘+F nach Stichwörten suchen oder unverständliche Abschnitte an AI kopieren, um sie im „komplett für Anfänger verständlichen" Modus erklären zu lassen.
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
## <span id="appendix-1">[Anhang 1: Brauchen wir Frontend-Entwicklungswissen?](#appendix-nav)</span>
|
||||
|
||||
::: tip 💡 Ein Satz zusammengefasst
|
||||
Du musst nicht programmieren können, aber Grundkenntnisse helfen dir, Anforderungen besser an AI zu beschreiben.
|
||||
:::
|
||||
|
||||
<el-row :gutter="16" style="margin: 20px 0;">
|
||||
<el-col :span="12" :xs="24" style="margin-bottom: 16px;">
|
||||
<el-card shadow="hover" style="border-radius: 12px; height: 100%;">
|
||||
<template #header>
|
||||
<div style="display: flex; align-items: center; gap: 8px;">
|
||||
<span style="font-size: 20px;">👁️</span>
|
||||
<span style="font-weight: bold;">Frontend</span>
|
||||
<el-tag type="success" size="small">Sichtbar</el-tag>
|
||||
</div>
|
||||
</template>
|
||||
<div style="color: #606266; line-height: 1.8;">
|
||||
Alles, was Nutzer <strong>sehen und anklicken</strong> können
|
||||
<ul style="margin: 12px 0; padding-left: 20px;">
|
||||
<li>Webseiten-Titel, Text, Bilder</li>
|
||||
<li>Schaltflächen, Eingabefelder, Dropdown-Menüs</li>
|
||||
<li>Spieloberfläche, Animationen</li>
|
||||
</ul>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="12" :xs="24" style="margin-bottom: 16px;">
|
||||
<el-card shadow="hover" style="border-radius: 12px; height: 100%;">
|
||||
<template #header>
|
||||
<div style="display: flex; align-items: center; gap: 8px;">
|
||||
<span style="font-size: 20px;">⚙️</span>
|
||||
<span style="font-weight: bold;">Backend</span>
|
||||
<el-tag type="info" size="small">Unsichtbar</el-tag>
|
||||
</div>
|
||||
</template>
|
||||
<div style="color: #606266; line-height: 1.8;">
|
||||
Datenverarbeitung auf dem Server
|
||||
<ul style="margin: 12px 0; padding-left: 20px;">
|
||||
<li>Nutzerpunktestand-Speicherung</li>
|
||||
<li>Login-Authentifizierung</li>
|
||||
<li>Level-Inhaltsvergabe</li>
|
||||
</ul>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
### Frontend-Dreiercombo
|
||||
|
||||
Der Browser baut Seiten mit drei Arten von „Code":
|
||||
|
||||
<el-tabs type="border-card" style="margin: 20px 0;">
|
||||
<el-tab-pane label="🏗️ HTML - Struktur">
|
||||
<div style="padding: 10px;">
|
||||
<p><strong>Funktion:</strong> Definiert, <strong>welche</strong> Elemente auf der Seite vorhanden sind</p>
|
||||
<p><strong>Analogy:</strong> Strukturskizze eines Hauses (wo Wände, Türen, Fenster sind)</p>
|
||||
<el-card style="background: #f5f7fa; margin-top: 12px;">
|
||||
<pre style="margin: 0;"><code><button>Klick mich</button>
|
||||
<h1>Überschrift</h1>
|
||||
<img src="photo.png"></code></pre>
|
||||
</el-card>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="🎨 CSS - Stil">
|
||||
<div style="padding: 10px;">
|
||||
<p><strong>Funktion:</strong> Steuert, <strong>wie</strong> Elemente aussehen</p>
|
||||
<p><strong>Analogy:</strong> Inneneinrichtung eines Hauses (Farbe, Material, Layout)</p>
|
||||
<el-card style="background: #f5f7fa; margin-top: 12px;">
|
||||
<pre style="margin: 0;"><code>button {
|
||||
background: blue;
|
||||
color: white;
|
||||
border-radius: 8px;
|
||||
}</code></pre>
|
||||
</el-card>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="⚡ JavaScript - Verhalten">
|
||||
<div style="padding: 10px;">
|
||||
<p><strong>Funktion:</strong> Lässt die Seite <strong>interaktiv</strong> werden</p>
|
||||
<p><strong>Analogy:</strong> Elektrische Schalter eines Hauses (Reaktion auf Klicks)</p>
|
||||
<el-card style="background: #f5f7fa; margin-top: 12px;">
|
||||
<pre style="margin: 0;"><code>button.onclick = () => {
|
||||
alert('Du hast mich geklickt!')
|
||||
}</code></pre>
|
||||
</el-card>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
|
||||
### Wie wird Code zur Seite?
|
||||
|
||||
Wenn du eine Webseite öffnest, verarbeitet der Browser drei Arten von Code nacheinander:
|
||||
|
||||
**1. HTML – Seitenstruktur definieren**
|
||||
Der Browser parst zuerst HTML, versteht, welche Elemente vorhanden sind (Überschriften, Absätze, Bilder, Buttons usw.) und ihre Hierarchie.
|
||||
|
||||
**2. CSS – Stile anwenden**
|
||||
Dann wendet der Browser CSS-Regeln an und fügt den Elementen Stile hinzu: Farbe, Größe, Position, Abstand usw., damit die Seite ansprechend wird.
|
||||
|
||||
**3. JavaScript – Interaktion hinzufügen**
|
||||
Schließlich wird JavaScript ausgeführt, um die Seite „lebendig" zu machen: auf Klicks reagieren, Formulare absenden, Animationen abspielen usw.
|
||||
|
||||
**4. Seitendarstellung**
|
||||
Das Zusammenspiel dieser drei ergibt die Webseite, die du schließlich siehst.
|
||||
|
||||
### Moderne Frontend-Frameworks: Von HTML zu React/Vue
|
||||
|
||||
Die zuvor vorgestellte HTML/CSS/JavaScript-Dreiercombo ist die Grundlage aller Webseiten. Wenn Seiten jedoch komplexer werden, stößt die direkte Nutzung auf Herausforderungen: Code ist schwer wartbar, viel Wiederholung, komplizierte Datensynchronisation.
|
||||
|
||||
**Moderne Frontend-Frameworks** (wie React, Vue, Angular) bauen auf HTML/CSS/JS auf und machen die Entwicklung effizienter:
|
||||
|
||||
**1. HTML/CSS/JS (Grundstufe)**
|
||||
Direkte Manipulation von Seitenelementen, geeignet für einfache Seiten. Bei wachsendem Code vermischen sich alle Logiken, was die Wartung erschwert.
|
||||
|
||||
**2. jQuery (Übergangsphase)**
|
||||
Vereinfachte DOM-Manipulation, machte Code übersichtlicher. Aber Seitenstatus musste weiterhin manuell verwaltet werden, bei Datenänderungen mussten selbst die entsprechenden Elemente gefunden und aktualisiert werden.
|
||||
|
||||
**3. React/Vue (Moderne Phase)**
|
||||
Nutzt komponentenbasierte und zustandsgesteuerte Designs:
|
||||
- **Komponenten**: Zerlegt die Seite in unabhängige, wiederverwendbare Module (wie Buttons, Karten, Navigationsleisten)
|
||||
- **Zustandsgesteuert**: Bei Datenänderungen aktualisiert das Framework automatisch die entsprechende Oberfläche, ohne manuelle Eingriffe
|
||||
|
||||
::: tip 💡 Einfach verstanden
|
||||
- **HTML/CSS/JS** = Grundmaterialien (Ziegel, Zement, Bewehrung)
|
||||
- **React/Vue** = Baugerüst (stellt Regeln und Werkzeuge für den Hausbau bereit)
|
||||
|
||||
Im Zeitalter des AI-gestützten Programmierens musst du nicht alle Details von Frameworks verstehen; es reicht, die Grundkonzepte zu kennen, um AI durch natürliche Sprachbeschreibungen Code generieren zu lassen.
|
||||
:::
|
||||
|
||||
### Im Vibe Coding
|
||||
|
||||
**Kernpunkt: Du musst keinen Code schreiben, du musst nur beschreiben können.**
|
||||
|
||||
Nach dem Verständnis von Frontend-Konzepten kannst du Anforderungen so an AI beschreiben:
|
||||
|
||||
> „Erstelle mit React eine Bestenliste-Seite: rechts die Punkteliste, bei Klick auf eine Zeile werden unten die Spielerdetails angezeigt, im minimalistischen modernen Stil."
|
||||
|
||||
Wenn du HTML, CSS, JavaScript und andere Frontend-Grundlagen vertiefen möchtest, siehe das [Web-Basics-Appendix](/de-de/appendix/3-browser-and-frontend/javascript-deep-dive). Für die Entwicklungsgeschichte der Frontend-Technologie siehe das [Frontend-Evolutionsgeschichte-Appendix](/de-de/appendix/3-browser-and-frontend/frontend-frameworks).
|
||||
|
||||
## <span id="appendix-2">[Anhang 2: Was genau ist Vibe Coding](#appendix-nav)</span>
|
||||
|
||||
> 💡 Was ist Vibe Coding? Der Informatiker [Andrej Karpathy](https://karpathy.ai/) (Mitbegründer von OpenAI, ehemaliger AI-Chef bei Tesla) prägte im Februar 2025 den Begriff **Vibe Coding**. Dieser Begriff beschreibt eine Programmiermethode, die auf LLMs basiert und **es Programmierern ermöglicht, lauffähigen Code durch natürliche Sprachbeschreibungen statt manuelles Codieren zu generieren.**
|
||||
|
||||
|
||||
|
||||
Wörtlich verstanden kann Vibe Coding als „Entwicklung durch Sprechen" verstanden werden. Der Kernwandel besteht darin: Du musst nicht mehr selbst Code Zeile für Zeile schreiben, Syntax nachschlagen und Bugs beheben; stattdessen beschreibst du in natürlicher Sprache, was du willst, z. B.:
|
||||
|
||||
„Ich brauche eine Login-Seite mit Eingabefeld für Handynummer und Bestätigungscode."
|
||||
„Nach erfolgreichem Login Weiterleitung zur Startseite mit Benutzername oben rechts."
|
||||
„Ein einfaches Snake-Minispiel mit Tastatursteuerung."
|
||||
|
||||
Große Sprachmodelle (LLM) übersetzen solche Beschreibungen automatisch in wirklich lauffähigen Code und generieren die entsprechende Seiten, Logik und Datenstrukturen. Nachdem du das Ergebnis gesehen hast, kannst du mit natürlicher Sprache Änderungswünsche äußern, z. B. „Button etwas größer", „Hintergrund dunkler", „Punktestand speichern und Bestenliste anzeigen", und AI passt die Implementierung weiter an.
|
||||
|
||||
In diesem Modus musst du nicht erst eine Programmiersprache lernen, um Code zu schreiben; stattdessen konzentrierst du dich darauf: klar zu beschreiben, was getan werden soll, das Ergebnis zu beurteilen und neue Änderungen vorzuschlagen. AI übernimmt die Umsetzung dieser übergeordneten Ideen in konkrete Implementierung und reduziert so mechanische, repetitive Codierungsarbeit erheblich.
|
||||
|
||||
Für weitere Details zu Vibe Coding siehe: [https://www.ibm.com/think/topics/vibe-coding](https://www.ibm.com/think/topics/vibe-coding)
|
||||
|
||||
Für mehr von Karpathys Gedanken siehe: [https://karpathy.bearblog.dev/blog/](https://karpathy.bearblog.dev/blog/)
|
||||
|
||||
### Wie man sich als Vibe-Coding-Meister ausgibt
|
||||
|
||||
In der Praxis werden beim echten Vibe Coding oft keine komplexen Prompts verwendet. Vielleicht brauchst du am Anfang einen konkreten, etwas komplexen Prompt für das gesamte Programm, aber danach genügen oft einfache Prompts wie diese:
|
||||
|
||||
```
|
||||
"Es gibt einen Bug im Code, bitte beheben."
|
||||
"Ich will keinen Teil-Code, gib mir den kompletten korrigierten Code."
|
||||
"Dein Code hat immer noch Probleme."
|
||||
"Bitte korrigiere erneut und gib den vollständigen korrigierten Code."
|
||||
"Es lief vorhin, warum geht es jetzt nicht mehr?"
|
||||
"Hast du mich nicht verstanden? Ändere nicht meinen ursprünglichen Code."
|
||||
"Füge keine Debugging-Funktionen hinzu."
|
||||
"Tu nichts, was ich nicht verlangt habe."
|
||||
"Wo ist die Funktion, die ich verlangt habe?"
|
||||
"Verstehst du nicht, was ich sage?"
|
||||
"Ich brauche nur eine Funktion."
|
||||
"Ich habe dir gesagt, meinen vorherigen Code zu beachten."
|
||||
"Bitte füge keine unnötigen Kommentare hinzu."
|
||||
"Bitte ändere nicht die grundlegende Logik meines ursprünglichen Codes."
|
||||
"Hilf mir, den Code zu ändern."
|
||||
"Ändere basierend auf meinem Code..."
|
||||
"Ändere nicht meine Variablennamen!!!"
|
||||
"Ändere nicht die ursprünglichen Funktionsnamen!"
|
||||
"Rühr nicht an meinen Variablen."
|
||||
"Füge keine zusätzlichen Funktionen hinzu."
|
||||
"Generiere nicht nur ein Gerüst, sondern vollständigen Code."
|
||||
```
|
||||
|
||||
Das mag übertrieben klingen, aber in der Praxis sind das genau die Prompts, die wir täglich verwenden können. Wegen der **Kontextlängenbegrenzung** großer Sprachmodelle oder weil ihre **Instruction-Following-Fähigkeit** nicht immer stark ist, kann das Modell Inhalte vergessen, die früher im Gespräch besprochen wurden. Beim Vibe Coding bevorzugen wir Modelle mit langem Kontext und starker Instruction-Following-Fähigkeit; wir können dies anhand von Rankings oder Metriken beurteilen.
|
||||
|
||||
Alternativ neigen Modelle dazu, im Stil ihrer Trainingsdaten zu antworten. Manche sprechen sehr formell, andere mögen viele Verzierungen, und einige Modelle mögen es, viele Kommentare oder unnötige Module im Code hinzuzufügen.
|
||||
|
||||
## <span id="appendix-3">[Anhang 3: Modellkontext](#appendix-nav)</span>
|
||||
|
||||
Modellkontext kann als das Kurzzeitgedächtnis von AI verstanden werden. Er bezieht sich auf alle Textinhalte, die das Modell in einer einzelnen Konversation oder Aufgabe „sehen" und „erinnern" kann, einschließlich deiner vorherigen Fragen, Systemanweisungen, relevante Materialien usw.
|
||||
|
||||
Gerade wegen des Kontexts kann AI verstehen, dass du eine Frage stellst, die sich auf frühere Inhalte bezieht, und kann runde für runde, scheinbar kohärente natürliche Gespräche führen. Ohne Kontext würde jede deiner Aussagen im Modell wie eine völlig neue Frage wirken, und es könnte nicht wissen, was du zuvor gesagt hast.
|
||||
|
||||
Jedes Modell hat seine eigene effektive Kontextlänge (Context Window). Diese wird normalerweise in Token (grob als „Wortfragmente") gemessen; aktuell liegen die meisten Modelle zwischen 32k und 128k Token. Je länger der Kontext, desto mehr kann das Modell „lesen", z. B.:
|
||||
|
||||
- Einmal eine längere Arbeit oder einen Bericht lesen
|
||||
- In einem Gespräch mehrere Quellen und Fälle referenzieren
|
||||
- Das Modell komplexe Diskussionsergebnisse aus früheren Runden merken lassen
|
||||
|
||||
Wenn deine Eingabe die Kontextbegrenzung des Modells erreicht oder überschreitet, treten häufig folgende Phänomene auf:
|
||||
|
||||
- Das Modell beginnt, Details oder Schlüsselinformationen aus längeren Texten zu vergessen
|
||||
- Im weiteren Verlauf des Gesprächs weicht das Thema vom ursprünglichen Ziel ab
|
||||
- Zwischen verschiedenen Fragen zum selben Material sind die referenzierten Inhalte inkonsistent
|
||||
|
||||
Diese Phänomene bedeuten nicht, dass das Modell plötzlich „dümmer" wird, sondern sind natürliche Folgen, wenn die Kontextkapazität erschöpft oder fast erschöpft ist.
|
||||
|
||||
In der Praxis wünscht man sich sowohl einen möglichst langen Kontext als auch das Bewusstsein:
|
||||
- Je länger der Kontext, desto mehr Rechenressourcen werden verbraucht
|
||||
- Die entsprechenden Aufrufkosten steigen ebenfalls
|
||||
|
||||
Daher muss man bei der Entwicklung von AI-Anwendungen eine Balance finden zwischen dem, was das Modell sehen kann, und der Kostenkontrolle sowie Effizienzsteigerung. Zum Beispiel:
|
||||
- Informationen, die langfristig erhalten bleiben müssen, werden aufbereitet, bevor sie dem Modell übergeben werden
|
||||
- Unnötige Details werden nicht immer wieder unverändert in den Kontext gestopft
|
||||
- Externe Wissensdatenbanken übergeben „langfristiges Gedächtnis" an das System, anstatt es in den Modellkontext zu quetschen
|
||||
|
||||
## <span id="appendix-4">[Anhang 4: Instruction-Following-Fähigkeit](#appendix-nav)</span>
|
||||
|
||||
Die Instruction-Following-Fähigkeit bezieht sich darauf: Ob das Modell nach dem Verstehen deiner Anweisung in der Lage ist, diese korrekt und vollständig auszuführen. Sie umfasst nicht nur die Beantwortung von Fragen, sondern auch die Ausführung von Aufgaben im angegebenen Format, Stil und mit den angegebenen Schritten.
|
||||
|
||||
Zum Beispiel sind folgende Anweisungen mit klaren Anforderungen:
|
||||
|
||||
- Fasse diesen Artikel in drei Hauptpunkte zusammen
|
||||
- Schreibe eine höfliche Antwort-E-Mail im formellen Stil
|
||||
- Übersetze dieses Wort ins Englische und bilde jeweils einen Beispielsatz
|
||||
- Extrahiere Autor, Datum und Hauptereignis aus dem Artikel
|
||||
|
||||
Ein Modell mit starker Instruction-Following-Fähigkeit hat normalerweise folgende Eigenschaften:
|
||||
|
||||
- Ausgabe in der geforderten Menge
|
||||
Wenn drei Hauptpunkte gefordert werden, werden nicht fünf geliefert.
|
||||
- Abdeckung aller angegebenen Elemente
|
||||
Wenn Autor, Datum und Ereignis gefordert werden, wird keines davon weggelassen.
|
||||
- Einhaltung des angegebenen Formats und Stils
|
||||
Wenn ein formeller Stil gefordert wird, wird keine zu umgangssprachliche Antwort geliefert.
|
||||
- Keine unnötigen zusätzlichen Erweiterungen
|
||||
Wenn nur Übersetzung und Beispielsatz gefordert werden, wird kein großer irrelevanter Erklärungsblock ausgegeben.
|
||||
|
||||
In der Praxis ist eine starke Instruction-Following-Fähigkeit aus folgenden Gründen sehr wichtig:
|
||||
|
||||
- Verbesserte Stabilität: Bei gleicher Anweisung sind Ausgabestruktur und Verhaltensmuster über verschiedene Zeitpunkte und bei mehrfacher Ausführung konsistenter, ohne willkürliche Ergänzungen
|
||||
- Verbesserte Reproduzierbarkeit: Wenn du einen Prompt in ein Produkt oder einen Prozess integrierst, kannst du erwarten, wie das Modell grob antwortet, was Testen und Iteration erleichtert
|
||||
- Einfachere Systemintegration: Wenn die Modellausgabe dem erwarteten Format entspricht, ist die automatische Anbindung an Backend-Programme, Workflows oder andere Tools einfacher
|
||||
|
||||
Daher sollte man bei der Auswahl und Bewertung eines großen Sprachmodells neben Intelligenz und Wissensabdeckung besonders auf seine Instruction-Following-Fähigkeit achten. Für industrielle Anwendungen ist oft wichtiger, ob es stabil und korrekt Anweisungen ausführen kann, als gelegentlich eine beeindruckende Antwort zu liefern.
|
||||
|
||||
<RelatedArticlesSection
|
||||
title="Weiterlernen"
|
||||
description="Von der spielerischen Erfahrung ausgehend, empfehlen wir dir, zur lokalen Entwicklung und Produktpraxis überzugehen."
|
||||
:items="relatedArticles"
|
||||
/>
|
||||
---
|
||||
title: 'Anfaenger 1: Im KI-Zeitalter reicht Reden zum Programmieren'
|
||||
description: 'Baue eine AI-native Snake-Variante per Dialog und uebertrage den Workflow auf dein eigenes Mini-Spiel oder Demo.'
|
||||
---
|
||||
@@ -0,0 +1,154 @@
|
||||
---
|
||||
title: 'Produktthinking und Loesungsentwurf'
|
||||
description: 'Wie du von "ein Tool bauen" zu "ein wertvolles Produkt entwerfen" kommst: Ideenquellen, Zerlegung in Loesungsbausteine, Verfeinerung und sinnvoller AI-Einsatz.'
|
||||
---
|
||||
|
||||
<script setup>
|
||||
const duration = 'ca. <strong>6 Stunden</strong>'
|
||||
</script>
|
||||
|
||||
# Produktthinking und Loesungsentwurf
|
||||
|
||||
## Kapiteluebersicht
|
||||
|
||||
<ChapterIntroduction :duration="duration" :tags="['Produktthinking', 'Beduerfnisanalyse', 'Loesungsentwurf', 'Nutzereinblicke']" coreOutput="1 kompletter Produktentwurf" expectedOutput="Umsetzbare Produktideen">
|
||||
|
||||
In den vorherigen Kapiteln hast du gelernt, wie du mit AI IDEs schnell Prototypen und kleine Tools umsetzt. In diesem Anhang verschieben wir den Fokus von <strong>"Kann ich es bauen?"</strong> zu <strong>"Was lohnt es sich zu bauen?"</strong>.
|
||||
|
||||
Wir behandeln:
|
||||
|
||||
1. Was ist eine Idee und wann ist sie gut genug, um Zeit zu investieren?
|
||||
2. Wie zerlegt man eine Idee in eine umsetzbare App (Scope, Nutzer, Szenario, Kernfluss)?
|
||||
3. Wie wird aus "funktioniert irgendwie" eine Anwendung, die Menschen gerne nutzen?
|
||||
4. Wo verstärkt AI den Wert wirklich (und wo ist AI nur Deko)?
|
||||
|
||||
</ChapterIntroduction>
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="0" :items="[
|
||||
{ title: 'Ideenquellen', description: 'Verlaessliche Produktideen finden' },
|
||||
{ title: 'Loesungszerlegung', description: 'Ideen in umsetzbare Apps verwandeln' },
|
||||
{ title: 'Verfeinerung', description: 'Von funktionsfaehig zu benutzerfreundlich' },
|
||||
{ title: 'AI-Verstaerkung', description: 'AI sinnvoll einsetzen, um Wert zu schaffen' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
## Was du lernen wirst
|
||||
|
||||
Am Ende solltest du beantworten koennen:
|
||||
|
||||
1. Woher kommen verlaessliche Ideen?
|
||||
2. Wie wird aus einer Idee ein umsetzbarer Loesungsentwurf?
|
||||
3. Woran erkenne ich eine "gute" App und wie verbessere ich sie?
|
||||
4. An welcher Stelle setze ich AI ein, um den Nutzen zu vergroessern?
|
||||
5. Wie finde ich die ersten echten Nutzer?
|
||||
|
||||
---
|
||||
|
||||
# 1. Verlaessliche Ideen finden
|
||||
|
||||
Viele suchen nach einem "genialen Einfall". In der Praxis entstehen die meisten guten Apps aus konkreten Situationen: wiederkehrende Probleme, echte Friktion, klare Zielgruppen.
|
||||
|
||||
## 1.1 Was ist eine Idee?
|
||||
|
||||
Eine Idee ist nicht nur Begeisterung. Eine umsetzbare Idee hat mindestens:
|
||||
|
||||
1. Eine klare Zielgruppe (wer genau?).
|
||||
2. Ein konkretes Nutzungsszenario (wann/wo tritt das Problem auf?).
|
||||
3. Eine konkrete Aufgabe (welches Ergebnis will der Nutzer erreichen?).
|
||||
4. Eine plausible Verbesserung gegenueber dem Status quo (warum ist es heute nervig/teuer/risikoreich?).
|
||||
|
||||
## 1.2 Idee vs. Bedarf (Need)
|
||||
|
||||
Eine Idee ist deine Hypothese. Ein Bedarf ist ein Problem, das Nutzer bereits aktiv loesen (auch mit schlechten Workarounds).
|
||||
|
||||
Eine einfache Unterscheidung:
|
||||
|
||||
- Echter Bedarf: Nutzer investieren heute schon Zeit/Geld/Stress, um das Problem zu umgehen.
|
||||
- Scheinbedarf: Nutzer finden es "interessant", aber wuerden weder bezahlen noch Verhalten aendern.
|
||||
|
||||
|
||||
|
||||
## 1.3 Warum "gute" Ideen wachsen
|
||||
|
||||
Gute Ideen haben oft einen natuerlichen Pfad:
|
||||
|
||||
Problem -> kleiner Nutzen sofort -> Weiterempfehlung -> wiederkehrende Nutzung.
|
||||
|
||||
Schlechte Ideen benoetigen konstanten externen Schub (Marketing, Erklaeren, Push), weil der Kernnutzen nicht trifft.
|
||||
|
||||
## 1.4 Vier stabile Ideenquellen
|
||||
|
||||
Diese Quellen liefern haeufig bessere Startpunkte als Trends:
|
||||
|
||||
1. Eigene Arbeit: repetitive Ablaufe, Koordination, Reporting, QA, Deployment.
|
||||
2. Communities: Foren/Chats, in denen dieselben Fragen staendig wiederkommen.
|
||||
3. Beschwerden: App-Reviews, Kommentare, "Warum geht das nicht einfacher?"-Momente.
|
||||
4. Bestehende Produkte: nicht kopieren, sondern Luecken finden (zu teuer, zu komplex, zu wenig spezialisiert).
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# 2. Loesungszerlegung: Von Idee zu App
|
||||
|
||||
Eine Idee wird erst dann baubar, wenn du sie in Entscheidungen uebersetzt.
|
||||
|
||||
## 2.1 Minimum: Nutzer, Szenario, Kernfluss
|
||||
|
||||
Definiere:
|
||||
|
||||
1. Nutzerprofil: Rolle, Ziel, Constraints, Zahlungsbereitschaft.
|
||||
2. Szenario: Trigger -> Arbeitsschritte -> Ergebnis.
|
||||
3. Kernfluss: die 3-7 Schritte, die den Wert liefern.
|
||||
|
||||
## 2.2 Scope schneiden (MVP)
|
||||
|
||||
Prinzip: Ein MVP ist nicht "weniger Features", sondern "ein klares Versprechen, das haelt".
|
||||
|
||||
Hilfsfragen:
|
||||
|
||||
- Was ist der kleinste Moment, in dem der Nutzer "Ah, das spart mir wirklich Zeit" sagt?
|
||||
- Welche Schritte kann ich streichen, ohne den Kernwert zu verlieren?
|
||||
- Welche Annahme ist am riskantesten? (Die muss zuerst validiert werden.)
|
||||
|
||||
---
|
||||
|
||||
# 3. Verfeinerung: Von benutzbar zu gern genutzt
|
||||
|
||||
Wenn die erste Version steht, ist die Arbeit nicht vorbei. Jetzt geht es um:
|
||||
|
||||
1. Klarheit: Nutzer verstehen sofort, was der naechste Schritt ist.
|
||||
2. Friktion: weniger Klicks, weniger Formulare, weniger Kontextwechsel.
|
||||
3. Vertrauen: transparente Daten, nachvollziehbare Ergebnisse, saubere Defaults.
|
||||
|
||||
Ein guter Test: Kann ein neuer Nutzer in 60 Sekunden Wert bekommen, ohne eine Anleitung zu lesen?
|
||||
|
||||
---
|
||||
|
||||
# 4. AI-Verstaerkung: AI dort einsetzen, wo sie Wert verstaerkt
|
||||
|
||||
AI ist besonders stark, wenn sie:
|
||||
|
||||
1. Sprache/Unstruktur in Struktur verwandelt (Text -> Aufgaben, Notizen -> ToDos).
|
||||
2. Zusammenfasst und priorisiert (lange Inhalte -> Kernpunkte + naechste Aktionen).
|
||||
3. Personalisierung ermoeglicht (unterschiedliche Nutzer brauchen unterschiedliche Vorschlaege).
|
||||
|
||||
AI ist oft schwach, wenn sie nur als "Chatbot-Schicht" auf eine App geklebt wird, ohne den Kernfluss besser zu machen.
|
||||
|
||||
---
|
||||
|
||||
## Abschluss: Dein Output
|
||||
|
||||
Nach diesem Anhang solltest du einen Loesungsentwurf schreiben koennen, der enthaelt:
|
||||
|
||||
1. Zielgruppe und Use-Case
|
||||
2. Kernproblem und warum es teuer/nervig ist
|
||||
3. Kernfluss (3-7 Schritte)
|
||||
4. MVP-Scope
|
||||
5. Validierungsplan (wie du in 7 Tagen echte Signale sammelst)
|
||||
|
||||
<RelatedArticlesSection />
|
||||
|
||||
+359
@@ -0,0 +1,359 @@
|
||||
# Sieben AI-Programmier-Tools im Vergleich
|
||||
|
||||
## Kapitelübersicht
|
||||
|
||||
Angesichts der schillernden Auswahl an AI-Programmier-Tools: Welches ist das richtige für Sie? Dieses Kapitel vergleicht 7 gängige Web Vibe Coding Plattformen wie Lovable, Replit, Z.ai usw. anhand einer einheitlichen Praxisaufgabe – der Entwicklung eines "Snake + AI-Poesie"-Spiels. Wir vergleichen sie aus mehreren Dimensionen wie Anfängerfreundlichkeit, Code-Kontrollierbarkeit und Bereitstellungskomfort, um Ihnen bei der schnellen Auswahl des besten Entwicklungstools zu helfen.
|
||||
|
||||
---
|
||||
|
||||
# 1. Snake-Spiel mit Vibe Coding erstellen: Vollständiges Praxis-Tutorial
|
||||
|
||||
Dieser Artikel stellt eine neue Softwareentwicklungspraxis vor – "Vibe Coding", die KI nutzt, um den Anwendungsentwicklungsprozess zu beschleunigen.
|
||||
|
||||
Als Nächstes werden wir nacheinander die Kernkonzepte von Vibe Coding vorstellen, erklären, was ein AI Agent ist, und praktische Methoden zum Schreiben von Prompts geben. Schließlich werden wir durch eine vollständige Praxis das "Snake"-Spiel von Grund auf erstellen und mehrere gängige Vibe Coding Plattformen im Detail vergleichen, um Ihnen bei der Auswahl der besten Tool-Kombination zu helfen.
|
||||
|
||||
## Was Sie lernen werden:
|
||||
|
||||
- **Was ist Vibe Coding**: Definition, Workflow und wichtigste Vorteile verstehen.
|
||||
- **Die Rolle von AI Agents**: Arbeitsweise von AI Agents und Unterschiede zu traditionellen Programmen verstehen.
|
||||
- **Wie man gute Prompts schreibt**: Klare, spezifische Prompt-Formulierungen für bessere Ergebnisse beherrschen.
|
||||
- **Vibe Coding Tools**: Eine Reihe gängiger AI-Programmier- und Design-Plattformen kennenlernen.
|
||||
- **Plattform-Vergleich**: Bewertung und Vergleich der Vor- und Nachteile von 7 verschiedenen AI Agent Plattformen aus der Perspektive von Einsteigern.
|
||||
- **UI / UX Tools**: Lernen, wie man Figma, Mastergo und andere UI/UX-Tools in den gesamten Workflow integriert.
|
||||
|
||||
## 1. Einleitung
|
||||
|
||||
In den bisherigen Kursen haben wir stets das Full-Stack-Entwicklungsmodell von z.ai für Programmieraufgaben verwendet.
|
||||
|
||||
Haben wir uns jedoch jemals gefragt: Sein Kern ist eigentlich der "AI Agent" (anders als gewöhnliche Chat-KI und viel intelligenter)? Denn es kommuniziert nicht nur mit Ihnen, sondern kann auch denken (wenn Sie ihm eine Aufgabe geben, plant es zunächst) und proaktiv handeln (z.B. Web-Suche aufrufen, Computerbefehle ausführen, Webseiten öffnen). Wir werden später darauf zurückkommen.
|
||||
|
||||
## 1. Was ist Vibe Coding?
|
||||
|
||||
Vibe Coding ist eine neue Softwareentwicklungsmethode, die KI nutzt, um den Anwendungsentwicklungsprozess zu beschleunigen. Es ist kein Ersatz für traditionelle Programmierung, sondern ein "konversationelleres" Programmiermodell. Dieses Konzept wurde vom AI-Forscher Andrej Karpathy vorgeschlagen: In diesem Workflow schreiben Entwickler nicht mehr Zeile für Zeile Code selbst, sondern steuern hauptsächlich AI Agents, um Anwendungen zu generieren, zu optimieren und zu debuggen.
|
||||
|
||||
Die Kernidee von Vibe Coding ist der Übergang von **"code-first"** zu **"intent-first"**. Sie müssen nicht mehr ab der ersten Codezeile planen, sondern beschreiben das gewünschte Ergebnis in natürlicher Sprache.
|
||||
|
||||
Ein typischer Vibe Coding-Workflow ist ein iterativer Kreislauf:
|
||||
|
||||
- **Ziel beschreiben**: Zunächst mit einem Satz oder Absatz beschreiben, was Sie implementieren möchten, z.B.: "Ein einfaches Snake-Spiel mit Python-Backend, das Gedichte generieren kann."
|
||||
- **AI generiert Code**: Der AI Agent analysiert Ihre Anforderungen, generiert eine erste Codeversion mit grundlegender Struktur, Frontend-Seiten und Backend-Logik.
|
||||
- **Ausführen und beobachten**: Den generierten Code ausführen, prüfen, ob er wie erwartet funktioniert, und dabei Bugs oder Schwächen entdecken.
|
||||
- **Feedback geben und iterieren**: Bei Fehlern oder unbefriedigenden Ergebnissen im Dialog weiter instruieren, z.B.: "Die Schlange bewegt sich zu langsam, mach sie schneller" oder "Der API Key in der `.env`-Datei wird nicht richtig gelesen, bitte den Backend-Code reparieren."
|
||||
- **Obige Schritte wiederholen**: Kontinuierlich im Kreislauf "Beschreiben → Generieren → Ausführen → Feedback" iterieren, bis die Anwendung zufrieden stellend ist.
|
||||
|
||||
### Die wichtigsten Vorteile von Vibe Coding:
|
||||
|
||||
- **Einstiegshürde senken**: Auch Designer, Gründer und Studierende ohne Programmiererfahrung können durch natürliche Sprache an der Anwendungsentwicklung teilnehmen.
|
||||
- **Schnelle Prototypen**: Die Zeit von der Idee zum MVP (Minimum Viable Product) wird drastisch verkürzt.
|
||||
- **Effizienz steigern**: Automatische Erledigung großer Mengen repetitiver, mechanischer Codierungsarbeit (wie Boilerplate-Code), sodass Entwickler sich auf Architektur-Design und Probleabstraktion konzentrieren können.
|
||||
- **Experimentieren fördern**: Ermutigt zu schnellem Ergebnis und kontinuierlicher Verbesserung, was das Ausprobieren neuer Ideen und Funktionen erleichtert.
|
||||
|
||||
## 2. Was sind Vibe Coding Online-Plattformen (Web-based)?
|
||||
|
||||
In diesem Praxis-Test werden Sie feststellen, dass die von uns bewerteten Tools in zwei Kategorien eingeteilt werden: **Web-based (Online-Plattformen)** und **IDE (lokale Entwicklungsumgebungen)**.
|
||||
|
||||
Obwohl beide im Kern AI-gestützt Code schreiben, gibt es gewaltige Unterschiede in der Nutzererfahrung und den Anwendungsszenarien:
|
||||
|
||||
### Vibe Coding Online-Plattformen (Web-based)
|
||||
|
||||
**Repräsentative Tools:** Lovable, Replit, Z.ai, v0
|
||||
|
||||
Das ist wie ein "Ready-to-move-in"-Hotelapartment.
|
||||
|
||||
- **Keine Umgebungskonfiguration nötig**: Sie müssen sich nicht um Python-Umgebung, Node.js-Version oder Abhängigkeitsinstallation kümmern. Browser öffnen, URL eingeben, direkt loslegen.
|
||||
- **Ein-Klick-Vorschau und Bereitstellung**: Nach der Codegenerierung zeigt die Plattform das Ergebnis automatisch in einem Seitenfenster an. Wenn fertig, einen Klick, um einen Link zu generieren und mit Freunden zu teilen.
|
||||
- **Geeignete Szenarien:**
|
||||
- **Schnelle Ideenvalidierung (MVP)**: Eine Idee im Kopf, mal eine halbe Stunde ausprobieren.
|
||||
- **Einsteiger**: Komplett frei von komplexen Umgebungsfehlern, nur die Freude an AI-Programmierung erleben.
|
||||
- **Leichtgewichtige Anwendungen**: Eine einfache Tool-Webseite, ein kleines Spiel oder eine persönliche Präsentationsseite.
|
||||
|
||||
### AI IDE (Lokale Entwicklungsumgebung)
|
||||
|
||||
**Repräsentative Tools:** Cursor, Trae, VS Code + AI-Plugin
|
||||
|
||||
Das ist wie ein "voll ausgestattetes" Eigenheim.
|
||||
|
||||
- **Starke lokale Fähigkeiten**: Läuft auf Ihrem Computer, hat direkten Zugriff auf alle Ihre lokalen Dateien und nutzt die Rechenleistung Ihres Computers.
|
||||
- **Nahtlose professionelle Workflow-Integration**: Geeignet für große Projekte, freie Plugin-Installation, Verbindung zu lokalen Datenbanken, komplexes Debugging.
|
||||
- **Geeignete Szenarien:**
|
||||
- **Professionelle Projektentwicklung**: Langfristig zu wartende, strukturell komplexe kommerzielle Projekte.
|
||||
- **Tiefe Anpassung**: Extreme Code-Kontrolle oder tiefe Integration mit bestehendem lokalem Workflow (wie Git, Docker).
|
||||
- **Datenschutz**: Code komplett lokal, besser konform zu Sicherheitsrichtlinien mancher Unternehmen.
|
||||
|
||||
**Zusammenfassend:** Wenn Sie gerade erst mit AI-Programmierung beginnen oder nur schnell etwas Kleines ausprobieren wollen, sind **Online-Plattformen** der perfekte Startpunkt. Wenn Sie professioneller Entwickler sind oder das Projekt immer komplexer wird, bietet eine **lokale IDE** eine höhere Obergrenze.
|
||||
|
||||
---
|
||||
|
||||
## 3. Was ist ein AI Agent?
|
||||
|
||||
### Was ist ein AI Agent?
|
||||
|
||||
Ein AI Agent ist ein Softwaresystem, das seine Umgebung wahrnehmen, Entscheidungen treffen und autonom handeln kann, um bestimmte Ziele zu erreichen. Im Vergleich zu traditioneller Software, die festen Anweisungen folgt und einen einzigen Prozessablauf hat, sind AI Agents flexibler und anpassungsfähiger.
|
||||
|
||||
Hier sind einige Schlüsseleigenschaften, die AI Agents von traditionellen Programmen unterscheiden:
|
||||
|
||||
- **Autonomie**: AI Agents haben hohe Unabhängigkeit. Traditionelle Programme müssen meist Schritt für Schritt von Menschen ausgelöst werden, während ein Agent basierend auf seinem Ziel selbst entscheiden kann, was er als Nächstes tun soll.
|
||||
- **Wahrnehmung und Gedächtnis**: Agents sammeln Daten aus der Umgebung (z.B. API-Antworten, Sensordaten, Nutzereingaben) und behalten Kontext durch "Gedächtnis", um Erfahrung in späteren Aktionen wiederzuverwenden und die Leistung kontinuierlich zu verbessern.
|
||||
- **Rationalität und Zielorientierung**: Agents analysieren und planen um ein gegebenes Ziel herum und wählen die geeignete Aktionssequenz, um höhere "Leistungskennzahlen" zu verfolgen.
|
||||
- **Werkzeugnutzung**: Ein Hauptmerk moderner AI Agents ist die Fähigkeit, externe Tools aufzurufen und nicht auf "Textgenerierung" beschränkt zu bleiben. Sie können z.B. Webseiten durchsuchen, Code ausführen, Datenbanken abfragen, E-Mails senden – ein Gehirn, das "Tools orchestriert".
|
||||
|
||||
Man kann es sich so vorstellen:
|
||||
|
||||
- Ein **traditionelles Programm** ist wie ein Taschenrechner. Man gibt Zahlen und Operatoren ein, es rechnet nur, wenn man den Knopf drückt.
|
||||
- Ein **AI-Assistent** ist wie ein menschlicher Assistent. Man bittet ihn "Finde Restaurants in meiner Nähe", er gibt Suchergebnisse und listet Optionen auf, aber die Entscheidung trifft am Ende man selbst.
|
||||
- Ein **AI Agent** ist eher wie ein automatisiertes Forschungsteam. Man gibt nur ein hochrangiges Ziel (z.B. "Plane eine Japanreise für mich"), und es zerlegt die Aufgabe, recherchiert online, bucht Flüge und Hotels (per API), erstellt einen Zeitplan und liefert das Ergebnis – fast ohne dass Sie sich um Details kümmern müssen.
|
||||
|
||||
---
|
||||
|
||||
# 2. Zum Thema Prompt-Schreiben
|
||||
|
||||
## 1. Prompt am besten auf einmal oder in mehreren Schritten schreiben?
|
||||
|
||||
Viele sind versucht, in einem einzigen Prompt "eine vollständige Full-Stack-Anwendung" zu beschreiben. Tatsächlich sind die aktuellen Tools bereits leistungsstark genug, um möglicherweise auf einmal ein einigermaßen akzeptables Ergebnis zu liefern. Insgesamt ist es jedoch oft besser, die Arbeit in kleine Schritte zu unterteilen und phasenweise zu iterieren, um nicht in einer "nicht mehr änderbaren" Sackgasse zu landen.
|
||||
|
||||
> **Kleiner Tipp:** Anstatt "alles auf einmal" zu erwarten, lieber das große Ziel in ausführbare kleine To-dos aufteilen.
|
||||
> Zum Beispiel: Nicht direkt "build me a Snake game" sagen, sondern aufteilen in:
|
||||
> "1. Zunächst ein Snake-Spiel-Frontend erstellen",
|
||||
> "2. Dann ein Backend zur Punkteaufzeichnung implementieren",
|
||||
> "3. Schließlich Frontend und Backend verbinden".
|
||||
> So kann AI Ihre Anforderungen genauer verstehen und zuverlässigere Ergebnisse liefern.
|
||||
|
||||
## 2. Je klarer, desto besser
|
||||
|
||||
- In Vibe Coding sind Ihre geschriebenen Prompts genauso wichtig wie Ihr geschriebener Code. Je klarer und spezifischer der Prompt, desto näher ist das Ergebnis an dem, was Sie sich vorstellen.
|
||||
- Ziel und Einschränkungen von Anfang an klar formulieren, reduziert spätere Änderungen, was nicht nur Zeit spart, sondern auch Kontingent und Kosten.
|
||||
|
||||
---
|
||||
|
||||
# 3. Tool-Übersicht (Vibe Coding / UIUX Tools)
|
||||
|
||||
## 1. AI Agent Plattformen
|
||||
|
||||
| **Name** | **Plattform** |
|
||||
| --- | --- |
|
||||
| **[Lovable](https://lovable.dev/)** | Web-based |
|
||||
| **[Cursor](https://cursor.com/cn/agents)** | PC |
|
||||
| **[Z.ai](https://chat.z.ai/)** | Web-based |
|
||||
| **[Replit](https://replit.com/~)** | Web-based |
|
||||
| **[Minimax](https://agent.minimaxi.com/)** | Web-based |
|
||||
| **[Trae](https://www.trae.ai/)** | PC |
|
||||
| **[V0](https://v0.app/)** | Web-based |
|
||||
|
||||
## 2. AI UIUX Plattformen
|
||||
|
||||
| **Name** | **Plattform** |
|
||||
| --- | --- |
|
||||
| **[Mastergo](https://mastergo.com/)** | Web-based |
|
||||
| **[Figma](https://www.figma.com/)** | Web-based, PC-Plugin |
|
||||
|
||||
---
|
||||
|
||||
# 4. Praxis-Tutorial (Vibe Coding + UI Kombination)
|
||||
|
||||
1. Geben Sie im Chat-Fenster der Vibe Coding Plattform Ihre Programmbeschreibung ein.
|
||||
Beispiel:
|
||||
|
||||
> Bitte erstellen Sie eine einfache Snake-Webanwendung mit Frontend und Backend.
|
||||
>
|
||||
> 1. Frontend
|
||||
>
|
||||
> - Seite 1: Spiel-Seite
|
||||
> - Tastatursteuerung der Schlangenbewegung.
|
||||
> - Die Schlange frisst keine Nahrung, sondern englische Wörter.
|
||||
> - Seitenleiste zeigt gesammelte Wörter und deren Anzahl.
|
||||
> - Nach Spielende bleiben gesammelte Wörter erhalten und werden im nächsten Spiel fortgesetzt.
|
||||
> - Seite 2: Gedicht-Seite (Make Poem)
|
||||
> - Dieselbe Wortliste wie auf der Spiel-Seite anzeigen (Datenkonsistenz).
|
||||
> - Einen Button zum Senden der aktuell gesammelten Wörter an das Backend zur Generierung eines Gedichts.
|
||||
> - Nach Gedichtgenerierung die verwendeten Wörter aus der Liste entfernen oder deren Zähler verringern.
|
||||
>
|
||||
> * Einfache Navigation zum Wechseln zwischen Game und Make Poem.
|
||||
> * Sicherstellen, dass gesammelte Wörter auf beiden Seiten sichtbar sind.
|
||||
>
|
||||
> 2. Backend
|
||||
>
|
||||
> - Backend-Schnittstelle bereitstellen, die gesammelte Wörter empfängt und ein Gedicht zurückgibt.
|
||||
> - DeepSeek API zur Gedichtgenerierung verwenden.
|
||||
> - API Key in `.env`-Datei speichern und in `.gitignore` ignorieren.
|
||||
|
||||
2. DeepSeek API Key eingeben. (Erhältlich unter [https://platform.deepseek.com/](https://platform.deepseek.com/))
|
||||
1. Der API Key des LLM wird verwendet, um große Modelle in Ihrem eigenen Projekt aufzurufen. Da es sich um sensible Informationen handelt, die nicht öffentlich sein dürfen, muss er separat in einer Konfigurationsdatei gespeichert werden.
|
||||
**Warum eine `.env`-Datei verwenden und sie nicht auf GitHub hochladen?**
|
||||
- Die `.env`-Datei dient speziell zur Speicherung von **Schlüsseln oder Passwörtern** (z.B. DeepSeek API Key).
|
||||
- Wenn diese Datei auf GitHub hochgeladen wird, kann jeder Ihren Schlüssel sehen und missbrauchen.
|
||||
- Aus Sicherheitsgründen müssen wir `.env` in der `.gitignore`-Datei deklarieren, damit Git sie nicht verfolgt.
|
||||
- So kann Ihr Projekt diese Schlüssel lokal weiterhin nutzen, ohne sie im Repository preiszugeben.
|
||||
|
||||
3. Nachdem das Ergebnis angezeigt wurde, können Sie bei Fehlern oder gewünschten Änderungen Ihre Änderungswünsche direkt im Chat-Fenster eingeben.
|
||||
4. Wenn Sie mit dem Seitendesign unzufrieden sind, können Sie das Interface auch in Figma oder Mastergo neu gestalten und die Designideen an den Agent zurückmelden.
|
||||
|
||||
- **Beispiel**
|
||||
|
||||
> Bitte entwerfen Sie eine **zweiseitige Web-Anwendung** namens _Word-Snake_.
|
||||
>
|
||||
> - **Game-Seite:**
|
||||
> - Schlange wird per Tastatur gesteuert.
|
||||
> - Die Schlange frisst englische Wörter statt normale Nahrung.
|
||||
> - Rechtes Panel zeigt gesammelte Wörter und deren Anzahl.
|
||||
> - Nach Spielende wird der Wortbestand nicht gelöscht, sondern im nächsten Spiel weiterverwendet.
|
||||
> - **Make Poem-Seite:**
|
||||
> - Denselben gemeinsamen Wortbestand anzeigen.
|
||||
> - Nutzer wählt einige Wörter aus und klickt auf **Generate Poem**-Button.
|
||||
> - Diese Wörter an das Backend senden, das DeepSeek API generiert ein Gedicht.
|
||||
> - Nach Gedichtgenerierung die verwendeten Wörter aus dem Bestand löschen oder verringern.
|
||||
> - **Navigation:** Einfacher Tab oder Top-Menü zum Wechseln zwischen den beiden Seiten.
|
||||
> - **Gemeinsamer Zustand:** Sicherstellen, dass gesammelte Wörter auf beiden Seiten stets synchron sichtbar sind.
|
||||
|
||||
- **Ergebnis-Beispiel**
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# 5. AI Agent Plattform-Vergleich (Wie man die beste Kombination für einfache Projekte wählt)
|
||||
|
||||
Verschiedene Vibe Coding Plattformen haben unterschiedliche Stärken und Workflows. Wir haben denselben "Snake-Spiel mit DeepSeek API"-Anforderungssatz auf mehreren Plattformen getestet und aus der Perspektive von Einsteigern bewertet. Hier ist die Zusammenfassung.
|
||||
|
||||
## 1. Vergleichskriterien
|
||||
|
||||
1. **Ziel**
|
||||
Ein Snake-Web-App mit DeepSeek API integrieren.
|
||||
2. **Spieldetails**
|
||||
1. Das Spiel generiert Gedichte über die DeepSeek LLM API.
|
||||
2. Die Schlange frisst englische Wörter; gesammelte Wörter bleiben nach Spielende erhalten und werden im nächsten Spiel weiterverwendet. Gleiche Wörter können mehrfach gesammelt und separat gezählt werden.
|
||||
3. Wenn ein Gedicht generiert wird, werden die verwendeten Wörter aus dem Bestand entfernt.
|
||||
|
||||
3. **Must-Haves**
|
||||
1. Eine lauffähige Frontend-Seite mit Snake-Spiel (Tastatursteuerung, Canvas-Rendering).
|
||||
2. Wort-Sammelmechanismus (Wörter erscheinen auf dem Brett, Schlange frisst sie, Seitenleiste-Liste wird aktualisiert).
|
||||
3. Persistenz des Wortbestands über mehrere Spielrunden.
|
||||
4. Backend mit DeepSeek API (ohne API Key zunächst ein Mock-Gedicht zurückgeben).
|
||||
5. "Gedicht generieren"-Button: Klick ruft Backend auf, zeigt Gedicht, aktualisiert Wortbestand basierend auf Nutzung.
|
||||
6. `.env`-Unterstützung für API Key und `.gitignore` zur Vermeidung von Schlüssellecks.
|
||||
|
||||
4. **Nice-to-Haves**
|
||||
1. Nutzer kann auswählen, welche Wörter für das Gedicht verwendet werden.
|
||||
2. Nutzerfreundliche Erfahrung (z.B. klare Wortliste in der Seitenleiste, gutes Layout im Gedicht-Bereich).
|
||||
3. Kommentare im Code für Einsteiger, die die Schlüssellogik erklären.
|
||||
|
||||
## 2. Codierungsergebnis-Vergleich
|
||||
|
||||
### 1. Lovable (Web-based)
|
||||
|
||||
- **Plattform-Typ:** Web
|
||||
- **Haupteigenschaften und Workflow:** Lovable macht Integration und Zusammenarbeit gut, automatisiert Initialisierungen wie die Verbindung mit Supabase-Datenbank und macht den Projektaufbau sehr reibungslos. Sie beschreiben einfach die Projektanforderungen, und der Agent verbindet alle Dienste und erstellt die Grundstruktur.
|
||||
- **Geeignete Nutzer:** Für Einsteiger, die zum ersten Mal Vibe Coding ausprobieren, ist Lovable eine sehr freundliche Wahl. Es vereinfacht die Komplexität der Mehrdienst-Verkettung und lässt Sie sich auf Prompts und Iterationen konzentrieren statt auf Umgebungskonfiguration. Dank hoher Automatisierung erhalten Sie schnell einen lauffähigen Prototyp.
|
||||
- **Prompt-Prozess:**
|
||||
|
||||
- **Snake-Spiel-Ergebnis:**
|
||||
|
||||
|
||||
|
||||
- **Preis:** Relativ teuer, aber mit einer Uni-E-Mail können Sie durch Studenten-Verifizierung den halben Preis erhalten.
|
||||
|
||||
|
||||
### 2. Cursor (IDE)
|
||||
|
||||
- **Plattform-Typ:** Desktop-Anwendung (PC)
|
||||
- **Haupteigenschaften und Workflow:** Cursor ist eine proprietäre IDE mit integrierten AI-Fähigkeiten, unterstützt Windows, macOS und Linux. Es baut Codegenerierung, intelligentes Umschreiben und Codebasis-Abfrage direkt in die Entwicklungsumgebung ein. Im Vergleich zu Web-Tools ist es näher an der traditionellen lokalen Entwicklungserfahrung. Da es eine lokale Umgebung ist, variieren die Konfigurationen verschiedener Computer, was gelegentlich zu umgebungsbezogenen Problemen führen kann. Der Vorteil: Das Projekt ist lokal, keine zusätzte Download- oder Laufzeitumgebung nötig, Cursor erledigt viele mühsame Schritte für Sie.
|
||||
- **Geeignete Nutzer:** Für Nutzer mit gewissen Programmierkenntnissen ist Cursor eine sehr leistungsstarke und vertraute Umgebung. Für absolute Einsteiger ohne Vorkenntnisse ist die Lernkurve jedoch steiler, da man selbst Projektstruktur, Abhängigkeitsmanagement und Dateiorganisation verstehen muss. Besser geeignet für Entwickler, die AI-Unterstützung in ihren traditionellen Codierungs-Workflow integrieren wollen.
|
||||
- **Prompt-Prozess:**
|
||||
|
||||
- **Snake-Spiel-Ergebnis:**
|
||||
|
||||
|
||||
|
||||
- **Preis:**
|
||||
|
||||
|
||||
### 3. Z.ai (Web-based)
|
||||
|
||||
- **Plattform-Typ:** Web
|
||||
- **Haupteigenschaften und Workflow:** Z.ai ist relativ direkt zu bedienen, aber eine offensichtliche Herausforderung ist: Sie müssen den generierten Code **manuell kopieren und einfügen**. Die Plattform selbst hat kein Echtzeit-Vorschaufenster, sodass man die Code-Ausführung nicht sofort sehen kann.
|
||||
- **Geeignete Nutzer:** Diese Plattform erfordert einen "hands-on" Ansatz. Fehlende Automatisierung bedeutet, dass Sie direkt mit dem Code arbeiten müssen, was für Leute, die AI-Outputs tief verstehen wollen, eine Art Training ist. Häufiges Kopieren und Einfügen bringt jedoch Effizienzprobleme und Fehler Risiken mit sich. Besser geeignet für Leute, die "rohe AI-Code-Outputs" sehen wollen, nicht für diejenigen, die ein One-Click-Erlebnis suchen.
|
||||
- **Prompt-Prozess:**
|
||||
|
||||
- **Snake-Spiel-Ergebnis:**
|
||||
|
||||
|
||||
|
||||
- **Preis:**
|
||||
|
||||
|
||||
### 4. Replit (Web-based)
|
||||
|
||||
- **Plattform-Typ:** Web
|
||||
- **Haupteigenschaften und Workflow:** Replit ist eine All-in-One Online-Entwicklungs- und Bereitstellungsumgebung. Im Browser können Sie Code schreiben, Programme ausführen und eine Online-Zugriffs-URL generieren. Vor dem Codieren zeigt es einen klaren Aktionsplan; außerdem gibt es einen visuellen Editor, in dem Sie direkt im Vorschaufenster die UI ändern können, und der Quellcode wird automatisch synchronisiert. So können Sie jederzeit überprüfen, ob die AI-Ausgabe Ihren Erwartungen entspricht, und die Anzahl der Hin- und Her-Korrekturen erheblich reduzieren.
|
||||
|
||||
|
||||
|
||||
- **Geeignete Nutzer:** Replit ist sehr einsteigerfreundlich. Es vereinfacht den vollständigen Kreislauf von der Codierung bis zur Bereitstellung, ohne zusätzte Server- oder Hosting-Konfiguration. Die Kollaborationsfunktion ist ebenfalls stark, ideal für Gruppenprojekte unter Kommilitonen oder Remote-Hilfe.
|
||||
- **Prompt-Prozess:** Während des Aufbaus verstand die AI die Anforderungen nicht sofort; es dauerte etwa 3 Iterationsrunden, bis das Ergebnis zufriedenstellend war.
|
||||
|
||||
- **Snake-Spiel-Ergebnis:**
|
||||
|
||||
|
||||
|
||||
- **Preis:**
|
||||
|
||||
|
||||
### 5. Minimax (Web-based)
|
||||
|
||||
- **Plattform-Typ:** Web
|
||||
- **Haupteigenschaften und Workflow:** Minimax benötigt bei der Aufgabenausführung oft länger. Der Prozess umfasst häufig: AI entdeckt und repariert automatisch Fehler, daher kann der gesamte Prozess langsam oder etwas mühsam sein. In diesem Projekt erstellt der Agent zunächst einen detaillierten Plan und baut dann Schritt für Schritt Backend, Datenbank und Frontend-Logik auf.
|
||||
- **Geeignete Nutzer:** Da es automatisch Tests ausführt und Fehler repariert, sind Zeit- und Token-Verbrauch hoch, aber man kann klar sehen, wie AI Probleme lokalisiert und löst, was aus Lernperspektive sehr wertvoll ist.
|
||||
- **Prompt-Prozess:**
|
||||
|
||||
|
||||
|
||||
- **Snake-Spiel-Ergebnis:**
|
||||
|
||||
|
||||
|
||||
- **Preis:** Die kostenlose Version kann bei komplexen Projekten wahrscheinlich nicht vollständig durchlaufen, daher wird ein kostenpflichtiges Upgrade empfohlen, um sicherzustellen, dass das Projekt vollständig erstellt werden kann.
|
||||
|
||||
|
||||
### 6. Trae (IDE)
|
||||
|
||||
- **Plattform-Typ:** Desktop-Anwendung (PC)
|
||||
- **Haupteigenschaften und Workflow:** Als Desktop-Anwendung hat Trae gegenüber Web-Tools normalerweise Vorteile bei Leistung und Reaktionsgeschwindigkeit. Es erfordert jedoch Download und Installation, was für einige Nutzer eine etwas höhere Einstiegshürde darstellt. Da es eine lokale Umgebung ist, bringen unterschiedliche Computerkonfigurationen und Abhängigkeitsumgebungen eine gewisse Unsicherheit mit sich. Der Vorteil: Trae hilft Ihnen, Projekterstellung und Laufzeitkonfiguration lokal abzuschließen; Sie können direkt auf Ihrem Rechner entwickeln und debuggen.
|
||||
- **Geeignete Nutzer:** Besser geeignet für Nutzer, die langfristig Vibe Coding-Projekte betreiben und ein spezielles Desktop-Tool verwenden möchten. Für Gelegenheitsnutzer ist es möglicherweise nicht die leichteste Wahl.
|
||||
- **Prompt-Prozess:**
|
||||
|
||||
- **Snake-Spiel-Ergebnis:**
|
||||
|
||||
|
||||
|
||||
- **Preis:** Preis relativ günstig, selbst die kostenlose Version reicht für qualitativ gute kleine Projekte.
|
||||
|
||||
|
||||
### 7. V0 (Web-based)
|
||||
|
||||
- **Plattform-Typ:** Web
|
||||
- **Haupteigenschaften und Workflow:** V0 ist ein Tool von Vercel, das sich auf die Generierung von React-UI-Komponenten konzentriert. Es zeichnet sich durch die Erzeugung hochwertiger, produktionsreifer Oberflächen aus. In der Praxis kann man jedoch auf Probleme stoßen wie "Code-Ansicht schwer zu finden" oder "keine klare Angabe, wo der API Key konfiguriert werden sollte".
|
||||
- **Geeignete Nutzer:** V0 ist sehr geeignet für Studierende oder Designer, die sich auf Frontend und UI/UX-Design konzentrieren. Es ist jedoch keine vollständige Full-Stack-Lösung; Sie benötigen weiterhin andere Plattformen für Backend-Logik und API-Integration. Wenn Ihr Ziel "ein komplettes Projekt in einem Durchgang" ist, ist es möglicherweise nicht die beste Erstwahl.
|
||||
- **Prompt-Prozess:**
|
||||
|
||||
|
||||
|
||||
|
||||
- **Snake-Spiel-Ergebnis:**
|
||||
|
||||
- **Preis:** Kostenlose Nutzer können etwa 4-5 einfache Projekte erstellen.
|
||||
|
||||
|
||||
## 3. Plattform-Gesamtvergleich
|
||||
|
||||
| **Plattform** | **Bewertung** | **Plattform** | **Anmerkungen** |
|
||||
| --- | --- | --- | --- |
|
||||
| **[Lovable](https://lovable.dev/)** | Sehr freundlich für AI-Programmier-Einsteiger, einfacher Einstieg, reibungslose Erfahrung, ideal als Erstwahl. | Web-based | Automatisiert Supabase- und andere Dienstverbindungen, reduziert Konfigurationsaufwand. |
|
||||
| **[Cursor](https://cursor.com/cn/agents)** | Geeignet für Nutzer mit Entwicklungserfahrung, steigert Produktivität und Code-Qualität erheblich. | PC | Erfordert gewisse Programmierkenntnisse, lokales Umfeld erfordert eigenes Verständnis von Projektstruktur und Abhängigkeiten. |
|
||||
| **[Z.ai](https://chat.z.ai/)** | Besser geeignet für Nutzer mit Programmierkenntnissen, die AI-Code-Output-Details direkt untersuchen wollen. | Web-based | Kein Vorschaufenster, Ergebnisprüfung mühsam; Code manuell kopieren, Ordner und Dateien manuell erstellen und Service manuell starten. |
|
||||
| **[Replit](https://replit.com/~)** | Empfohlen für Nutzer, die Ideen schnell zu zugänglichen Online-Services machen wollen. | Web-based | All-in-One Online-Entwicklung und -Bereitstellung, unterstützt Kollaboration und bietet visuellen Editor. |
|
||||
| **[Minimax](https://agent.minimaxi.com/)** | Geeignet für Leute, die den gesamten AI-Fehlererkennungs- und -Reparaturprozess sehen und daraus lernen wollen, aber insgesamt langsamer und token-intensiv. | Web-based | Längerer Gesamtprozess, AI führt mehrfach automatisch Tests aus und repariert Fehler. |
|
||||
| **[Trae](https://www.trae.ai/)** | Für Nutzer mit Programmiererfahrung, die Desktop-IDE + AI Agent kombinieren wollen, ein leistungsstarkes Effizienz-Tool. | PC | Lokale Installation und Umgebungskonfiguration erforderlich, aber bessere Leistung, geeignet für langfristige Vibe Coding-Projekte. |
|
||||
| **[V0](https://v0.app/)** | Optimiert für Nicht-Entwickler, die schnell React-UI erstellen wollen, geeignet für Frontend-/Design-orientierte Studierende. | Web-based | Fokussiert auf React-UI-Generierung, muss mit anderen Plattformen für Backend und vollständigen App-Aufbau kombiniert werden. |
|
||||
---
|
||||
title: 'Vergleich von 7 KI-Programmiertools'
|
||||
description: 'Praxisnaher Vergleich von Web-Vibe-Coding-Plattformen mit einer einheitlichen Aufgabe: Bedienbarkeit, Code-Kontrolle und Deployment.'
|
||||
---
|
||||
+348
@@ -0,0 +1,348 @@
|
||||
# Website mit Design- und Programmier-Agent entwerfen
|
||||
|
||||
## Kapitelübersicht
|
||||
|
||||
Dieses Kapitel zeigt, wie Design und Entwicklung durch AI perfekt zusammenarbeiten. Sie spielen die Rolle des Produktmanagers, leiten den "Design-Agent" bei der Erstellung von Logo-Design, Farbschema und Seitenlayout an und koordinieren dann den "Programmier-Agent" bei der Umsetzung der visuellen Entwürfe in lauffähigen Code. Von der Ideenfindung bis zum Website-Launch erleben Sie den vollständigen AI-gestützten Entwicklungsprozess und werden zu einem Ein-Personen-Team.
|
||||
|
||||
---
|
||||
|
||||
# 1. Erste Schritte
|
||||
|
||||
## 1. Tutorial-Einführung
|
||||
|
||||
Lassen Sie uns AI Design Agent und Coding Agent verwenden, um eine vollständige Website von Grund auf zu erstellen.
|
||||
|
||||
- **Design-Agent**: Verantwortlich für die Erstellung von Logo, Seitenlayout, Farbschema und anderen visuellen Elementen
|
||||
- **Coding-Agent**: Schreibt tatsächlichen Code (HTML/CSS/JS etc.) basierend auf Ihren Anforderungen an Funktionen und Layout und erstellt eine lauffähige Website
|
||||
|
||||
## 2. Design-Agent und Coding-Agent
|
||||
|
||||
- **Design-Agent**: AI, die basierend auf Ihren Prompts Bilder, Seitenmodelle oder Designstile generiert.
|
||||
- Mastergo
|
||||
- Lovart
|
||||
- Figma MCP
|
||||
- **Coding-Agent**: AI, die basierend auf Ihren Funktions- und Layoutanforderungen tatsächlichen Code (HTML/CSS/JS etc.) schreibt.
|
||||
- Z.AI
|
||||
- Trae
|
||||
- Cursor
|
||||
- Lovable
|
||||
|
||||
---
|
||||
|
||||
# 2. Logo mit Design-Agent erstellen
|
||||
|
||||
## 1. Wichtige Aspekte beim Logo-Design
|
||||
|
||||
Das Logo ist eines der Schlüsselelemente, die den ersten Eindruck Ihrer Website bestimmen. Um vom AI Design-Agent zufriedenstellende Ergebnisse zu erhalten, müssen Sie in Ihrem Prompt klar beschreiben, welche Art von Logo Sie möchten.
|
||||
|
||||
1. **Markenname / Text**
|
||||
|
||||
- Text, der im Logo erscheinen muss (z.B.: Website-Titel, Markenname).
|
||||
|
||||
2. **Stil (Stimmung / Atmosphäre)**
|
||||
|
||||
- Das Gesamtgefühl oder die Atmosphäre, die das Logo vermitteln soll.
|
||||
- _Beispiele: Minimalistisch, niedlich, schlicht, modern, Retro, futuristisch etc._
|
||||
|
||||
3. **Farbschema** (optional)
|
||||
|
||||
- Am besten die Logo-Farben mit dem Gesamtton der Website abstimmen.
|
||||
- Spezifische Hex-Codes oder grobe Farbtöne (kalt, warm etc.) angeben.
|
||||
- _Beispiele: **`#171721`** (Schwarz), **`#FF7130`** (Orange)._
|
||||
|
||||
4. **Form (Gestalt / Struktur)**
|
||||
|
||||
- Klären, ob das Logo eine bestimmte Form oder Komposition benötigt.
|
||||
- _Beispiele: Text innerhalb eines Kreises, Icon + Text-Kombination, Icon-dominiertes Logo etc._
|
||||
|
||||
5. **Icon / Symbol-Elemente** (optional)
|
||||
|
||||
- Grafiken oder Symbole, die im Logo erscheinen sollen.
|
||||
- _Beispiele: Bücher-Icon, Blitz-Symbol, AI-bezogene Grafik, abstrakte geometrische Formen etc._
|
||||
|
||||
## 2. Logo-Design-Prompt schreiben
|
||||
|
||||
**Beispiel-Prompt**
|
||||
|
||||
```
|
||||
"Bitte entwerfe ein minimalistisches Logo mit dem Markennamen 'My First Website'.
|
||||
Verwende Schwarz (#171721) und Orange (#FF7130) und platziere den Text innerhalb eines Kreises."
|
||||
```
|
||||
|
||||
```
|
||||
"Bitte entwerfe ein Logo mit dem Markennamen 'AIID'.
|
||||
Der Gesamtstil soll futuristisch, sauber und schlicht sein, Hauptfarben Blau und Weiß.
|
||||
Kombiniere ein abstraktes AI-Symbol mit dem Text und exportiere als PNG mit transparentem Hintergrund."
|
||||
```
|
||||
|
||||
## 3. Design beim Agent anfordern
|
||||
|
||||
- Obigen Prompt eingeben → Mehrere Designentwürfe des Agents vergleichen.
|
||||
|
||||
|
||||
|
||||
## 4. Endgültiges Logo bestimmen
|
||||
|
||||
- Die bevorzugte Version aus den Entwürfen auswählen und herunterladen.
|
||||
|
||||
---
|
||||
|
||||
# 3. Website-Struktur planen
|
||||
|
||||
## 1. Grundlegende Bereiche verstehen
|
||||
|
||||
Bevor Sie mit der Website-Erstellung beginnen, ist es wichtig zu planen, welche Menüs (Bereiche) Sie einfügen wollen. Das Menü-Design hängt davon ab, was Sie den Besuchern zeigen möchten und welche Aktionen Sie von ihnen erwarten.
|
||||
Generell besteht eine Website aus Grundbereichen wie **Home / About / Contact**.
|
||||
|
||||
## 2. Selbst eine Struktur-Skizze zeichnen (optional)
|
||||
|
||||
Sie können zunächst basierend auf dem Website-Ziel eine einfache Menüstruktur entwerfen.
|
||||
|
||||
### Grundmenü
|
||||
|
||||
1. **Home**
|
||||
1. Die Hauptseite, die Besucher nach dem Betreten der Website zuerst sehen
|
||||
2. Enthält normalerweise Logo, Hero-Bereich und einen kurzen Slogan oder eine Einleitung
|
||||
2. **About**
|
||||
1. Vorstellung, wer Sie sind oder Zweck des Projekts / Service
|
||||
2. Persönliches Portfolio: Selbstvorstellung + kurzer Lebenslauf
|
||||
3. Service-Website: Vision, Ziele und Kernfunktionen
|
||||
3. **Contact**
|
||||
1. Kontaktinformationen wie E-Mail, Telefonnummer, Social-Media-Links etc.
|
||||
2. Auch ein einfaches Kontaktformular möglich
|
||||
|
||||
### Optionale Menüs
|
||||
|
||||
4. **Services / Projects**
|
||||
1. Präsentation Ihrer Dienstleistungen oder Projekte / Portfolio
|
||||
2. Normalerweise als Liste oder Karten dargestellt
|
||||
|
||||
5. **Gallery**
|
||||
1. Zur Anzeige von Bildern, Fotos oder Designarbeiten
|
||||
|
||||
6. **Blog / News**
|
||||
1. Für Artikel, Updates oder Logs
|
||||
|
||||
7. **FAQ**
|
||||
1. Häufig gestellte Fragen und Antworten kompakt zusammengefasst
|
||||
|
||||
## 3. Farbschema wählen (optional)
|
||||
|
||||
Wenn Sie bereits ein Logo haben oder bestimmte Farben für das Website-Design verwenden möchten, können Sie die Farbcodes direkt im Prompt angeben.
|
||||
|
||||
**Beispiel:** `#171721, #872B97, #FF7130, #FF3C68`
|
||||
|
||||
Auch ohne eigenes Farbschema können Sie über Farb-Websites oder Suchbegriffe Inspiration finden.
|
||||
|
||||
- **Farbreferenz-Websites**
|
||||
- https://colorhunt.co/
|
||||
- https://coolors.co/
|
||||
|
||||
|
||||
|
||||
- **Farbsuche über Google-Schlüsselwörter**
|
||||
|
||||
|
||||
|
||||
## 4. Website-Design-Prompt schreiben
|
||||
|
||||
**Beispiel-Prompt**
|
||||
|
||||
```
|
||||
"Bitte entwerfe eine One-Page-Website mit den Bereichen Home, About und Contact.
|
||||
Verwende die Farben #171721, #FF7130 und #FF3C68.
|
||||
Der Gesamtstil soll modern und schlicht sein."
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
# 4. Website mit Design-Agent entwerfen
|
||||
|
||||
## 1. Prompt eingeben → Designentwürfe generieren
|
||||
|
||||
- Die geplante Struktur und das gewählte Farbschema im Prompt angeben.
|
||||
|
||||
**Mastergo Prompt-Beispiel**
|
||||
|
||||
|
||||
|
||||
## 2. Designentwürfe prüfen und Änderungswünsche stellen
|
||||
|
||||
Sie können dem Agent Feedback geben, z.B.:
|
||||
|
||||
- "Zu verspielt, den Gesamtstil schlichter machen."
|
||||
- "Eine andere Schriftart verwenden."
|
||||
- "Farbkombination anpassen."
|
||||
- "Diesen Bereich entfernen."
|
||||
|
||||
|
||||
|
||||
## 3. Endgültiges Design bestimmen
|
||||
|
||||
Wenn Sie den Designentwurf nach mehreren Änderungsrunden zufrieden sind, können Sie das Design in Code umwandeln, den der Coding-Agent verstehen und weiterverarbeiten kann.
|
||||
|
||||
Die Methode zur Umwandlung von Design in Code variiert je nach Plattform, erfolgt aber normalerweise über die Installation und Nutzung bestimmter Plugins innerhalb der Design-Plattform.
|
||||
|
||||
**Mastergo-Beispiel**
|
||||
|
||||
1. [Mastergo Plugin-Website](https://mastergo.com/community/plugin) öffnen und nach **seal** suchen.
|
||||
|
||||
|
||||
|
||||
2. Zurück zur Design-Seite, auf das **Quadrat-Icon (Plugins)** klicken.
|
||||
|
||||
|
||||
|
||||
3. Den Design-Bereich, den Sie in Code umwandeln möchten, auswählen und auf **Generate** klicken, um den Code zu generieren.
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# 5. Website mit Coding-Agent erstellen
|
||||
|
||||
## 1. Grundkonzepte von HTML/CSS/JS verstehen
|
||||
|
||||
Eine Website besteht im Wesentlichen aus drei Sprachen:
|
||||
|
||||
- **HTML (HyperText Markup Language)** → Struktur (Skelett)
|
||||
- **CSS (Cascading Style Sheets)** → Stil (Erscheinungsbild)
|
||||
- **JavaScript (JS)** → Funktionalität (Interaktion)
|
||||
|
||||
Diese drei arbeiten zusammen und bilden die komplette Webseite, die wir sehen.
|
||||
|
||||
1. **HTML (Struktur)**
|
||||
|
||||
- Definiert, "was auf der Seite angezeigt wird"
|
||||
- Platzierung von Text, Bildern, Buttons, Links etc.
|
||||
- Vergleichbar mit **Wänden und Rahmen** eines Gebäudes
|
||||
|
||||
**Beispiel**
|
||||
|
||||
```html
|
||||
<h1>Hallo!</h1>
|
||||
<p>Das ist meine erste Website.</p>
|
||||
<a href="contact.html">Kontakt</a>
|
||||
```
|
||||
|
||||
2. **CSS (Stil)**
|
||||
|
||||
- Bestimmt, "wie der Inhalt angezeigt wird"
|
||||
- Steuert Schriftgröße, Farbe, Abstände, Hintergrund, Button-Form etc.
|
||||
- Gibt dem HTML "Kleidung" und visuellen Stil
|
||||
|
||||
**Beispiel**
|
||||
|
||||
```css
|
||||
h1 {
|
||||
color: #FF7130; /* Textfarbe */
|
||||
font-size: 36px; /* Schriftgröße */
|
||||
text-align: center; /* Zentrierte Ausrichtung */
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #171721; /* Hintergrundfarbe */
|
||||
color: white; /* Standard-Textfarbe */
|
||||
}
|
||||
```
|
||||
|
||||
3. **JavaScript (JS) (Funktionalität)**
|
||||
|
||||
- Ermöglicht der Webseite, mit Nutzern zu interagieren
|
||||
- Kann Button-Klicks, Menü-Aufklappen, Bilderkarussells, Formular-Übermittlung etc. umsetzen
|
||||
- Wenn HTML/CSS das statische Skelett und Aussehen sind, dann ist JS das **Gehirn**, das die Webseite "lebendig" macht
|
||||
|
||||
**Beispiel**
|
||||
|
||||
```javascript
|
||||
function showAlert() {
|
||||
alert("Der Button wurde geklickt!");
|
||||
}
|
||||
```
|
||||
|
||||
```html
|
||||
<button onclick="showAlert()">Klick mich</button>
|
||||
```
|
||||
|
||||
## 2. Coding-Agent Code generieren lassen
|
||||
|
||||
**Beispiel-Prompt**
|
||||
|
||||
```
|
||||
"Bitte schreibe HTML und CSS für eine One-Page-Website mit Home-, About- und Contact-Bereichen.
|
||||
Verwende die Farben #171721, #FF7130, #FF3C68.
|
||||
Schwarzer Hintergrund, weißer Text."
|
||||
```
|
||||
|
||||
|
||||
|
||||
## 3. Website starten
|
||||
|
||||
Nachdem der Entwurfscode generiert wurde, startet der Agent normalerweise automatisch das Projekt und zeigt die generierte Website-Seite an.
|
||||
|
||||
Wenn Sie den Agent neu gestartet haben oder die Website-Anzeige nicht erscheint, können Sie einen Prompt wie diesen eingeben:
|
||||
|
||||
```
|
||||
"Please activate the project"
|
||||
```
|
||||
|
||||
Damit lässt der Agent das Projekt neu starten und öffnet die Vorschauseite, damit Sie den aktuellen Stand sehen können.
|
||||
|
||||
## 4. Einfache Änderungen vornehmen
|
||||
|
||||
Sie können den Entwurf weiterhin über natürliche Sprache feinjustieren, z.B.:
|
||||
|
||||
- "Den Button größer machen."
|
||||
- "Schriftstärke erhöhen."
|
||||
|
||||
|
||||
|
||||
## 5. Website-Textinhalte ändern
|
||||
|
||||
Die vom Agent generierte Erstversion enthält meist automatisch generierten Platzhaltertext. Um sie näher an Ihrem realen Szenario zu bringen, können Sie den tatsächlichen Inhalt vorbereiten und den Agent ihn ersetzen lassen.
|
||||
|
||||
**Anwendungsbeispiel**: About-Seite der AIID-Website aktualisieren
|
||||
|
||||
1. Zunächst den Inhalt, den Sie auf der About-Seite zeigen möchten, aufschreiben. Für besseres Agent-Verständnis kann der Inhalt im Markdown-Format gespeichert werden.
|
||||
|
||||
|
||||
|
||||
2. Dann im Dialog dem Agent mitteilen, den Inhalt der Datei auf der angegebenen Seite anzuwenden.
|
||||
|
||||
|
||||
|
||||
3. Die aktualisierte Version nach der Inhaltsanwendung ansehen.
|
||||
|
||||
|
||||
|
||||
## 6. Bilder einfügen
|
||||
|
||||
Wenn Sie bestimmte Bilder einfügen möchten (z.B. Logo, Hintergrundbild), können Sie diese zunächst in den Projektordner hochladen und im Prompt angeben, an welcher Stelle der Seite diese Bilder verwendet werden sollen.
|
||||
|
||||
- **Beispiel:**
|
||||
|
||||
|
||||
|
||||
- **Ergebnis:**
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# 6. Design und Code integrieren
|
||||
|
||||
## 1. Design-Dateien mit Website-Code integrieren (optional)
|
||||
|
||||
Wenn Sie vom Design-Agent Codedateien heruntergeladen haben, können Sie diese in das aktuelle Projektverzeichnis verschieben und den Coding-Agent bitten, diesen Design-Code mit dem bestehenden Projekt zu mergen.
|
||||
|
||||
- **Beispiel:**
|
||||
|
||||
|
||||
|
||||
- **Ergebnis:**
|
||||
|
||||
|
||||
---
|
||||
title: 'Eine Website mit Design- und Coding-Agents bauen'
|
||||
description: 'Von Idee bis Launch: Design-Agent fuer Visuals, Coding-Agent fuer Umsetzung. Ein wiederverwendbarer Workflow fuer Solo-Entwicklung.'
|
||||
---
|
||||
@@ -0,0 +1,325 @@
|
||||
---
|
||||
title: 'Was tun bei Fehlern im Code - Praxisleitfaden: Screenshots an die KI senden'
|
||||
description: 'Lernen Sie, wie Sie der KI effizient Fragen stellen, um verschiedene Fehler bei der Entwicklung zu lösen. Beherrschen Sie den Standardprozess aus Screenshot, Beschreibung und Problemeingrenzung und machen Sie die KI zu Ihrem Debugging-Assistenten.'
|
||||
---
|
||||
|
||||
<script setup>
|
||||
const duration = 'Etwa <strong>30 Minuten</strong>'
|
||||
</script>
|
||||
|
||||
# Was tun bei Fehlern im Code
|
||||
|
||||
## Kapitelübersicht
|
||||
|
||||
<ChapterIntroduction :duration="duration" :tags="['Debugging-Tipps', 'KI-Zusammenarbeit', 'Problemeingrenzung', 'Entwicklertools']" coreOutput="Ein standardisierter Fehlerbehebungsprozess" expectedOutput="90 % der häufigen Fehler selbstständig beheben können">
|
||||
|
||||
In der KI-Ära hat sich die Art und Weise, wie man Fehler behebt, verändert.
|
||||
|
||||
Sie müssen nicht alle Fehlertypen auswendig kennen, kein Debugging-Experte sein und nicht einmal verstehen, was der Fehler bedeutet.
|
||||
|
||||
<strong>Sie müssen nur eines lernen: wie man die KI richtig fragt.</strong>
|
||||
|
||||
Dieses Kapitel vermittelt Ihnen einen <strong>von einfach bis fortgeschritten</strong> strukturierten Behebungsprozess:
|
||||
|
||||
1. <strong>Schritt 1: Direkt fragen</strong>: Phänomen beschreiben + Screenshot, mit einem Satz fragen
|
||||
2. <strong>Schritt 2: Informationen ergänzen</strong>: Wenn das Problem nicht gelöst werden kann, F12 öffnen und wichtige Informationen nachreichen
|
||||
|
||||
Mit diesem Prozess können Sie <strong>90 % der Fehler selbst beheben</strong>.
|
||||
|
||||
</ChapterIntroduction>
|
||||
|
||||
::: info Hinweis
|
||||
Alle Methoden in diesem Kapitel basieren auf praktischer Erfahrung mit KI-IDEs wie Cursor/Trae/Claude und lassen sich direkt in der täglichen Entwicklung anwenden.
|
||||
:::
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="0" :items="[
|
||||
{ title: 'Direkt fragen', description: 'Phänomen beschreiben + Screenshot' },
|
||||
{ title: 'Info ergänzen', description: 'F12 öffnen, Problem eingrenzen' },
|
||||
{ title: 'Iterativ lösen', description: 'Bis das Problem gelöst ist' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
## 1. Kernprinzip: Screenshot an die KI senden
|
||||
|
||||
::: warning Warum ist dieses Kapitel so wichtig?
|
||||
|
||||
Viele Anfänger reagieren auf Fehlermeldungen wie folgt:
|
||||
- In Panik geraten und blind Code ändern
|
||||
- Eine halbe Stunde nach "Wie löse ich den Fehler xxx" suchen
|
||||
- Versuchen, selbst zu verstehen, was der Fehler bedeutet
|
||||
- Sich bis nachts um drei allein durchs Debugging quälen
|
||||
|
||||
<strong>Das ist alles verschwendete Zeit.</strong>
|
||||
|
||||
In der KI-Ära ist Debugging etwas sehr Einfaches geworden:
|
||||
|
||||
```
|
||||
Fehlermeldung sehen → Screenshot machen → KI fragen → Den Anweisungen der KI folgen
|
||||
```
|
||||
|
||||
Sie müssen den Fehler nicht verstehen, nicht debuggen können und nicht einmal wissen, wo das Problem liegt.
|
||||
|
||||
<strong>Sie müssen nur lernen, wie man fragt.</strong>
|
||||
|
||||
:::
|
||||
|
||||
### 1.1 Die einfachste Fragestellung
|
||||
|
||||
Keine komplizierten Vorlagen nötig -- zwei Methoden zur Auswahl:
|
||||
|
||||
**Methode 1: Phänomen beschreiben**
|
||||
|
||||
Format: Was Sie gerade getan haben, was jetzt aufgetreten ist
|
||||
|
||||
```
|
||||
Ich habe gerade den Code der Login-Seite geändert, jetzt ist die Seite weiß. Was soll ich tun?
|
||||
```
|
||||
|
||||
**Methode 2: Screenshot**
|
||||
|
||||
Einfach einen Screenshot der aktuellen Seite oder Fehlermeldung machen
|
||||
|
||||
```
|
||||
[Screenshot]
|
||||
|
||||
Wie löse ich diesen Fehler?
|
||||
```
|
||||
|
||||
**Die beste Methode: Beschreibung + Screenshot**
|
||||
|
||||
```
|
||||
Ich habe gerade den Code der Login-Seite geändert, jetzt ist die Seite weiß.
|
||||
|
||||
[Screenshot]
|
||||
|
||||
Was soll ich tun?
|
||||
```
|
||||
|
||||
**Merken: Beschreiben Sie den Kontext klar und fügen Sie einen Screenshot hinzu -- so kann die KI das Problem schneller lösen.**
|
||||
|
||||
### 1.2 Wie man das Problem klar beschreibt
|
||||
|
||||
Viele Anfänger wissen, dass sie fragen sollen, aber nicht, wie. Dabei genügt es, drei Dinge klar zu machen:
|
||||
|
||||
**1. Was Sie gerade getan haben**
|
||||
|
||||
```
|
||||
Ich habe gerade auf Speichern geklickt
|
||||
Ich habe gerade den Code der Login-Seite geändert
|
||||
Ich habe gerade die Seite aktualisiert
|
||||
```
|
||||
|
||||
**2. Was Sie jetzt sehen**
|
||||
|
||||
```
|
||||
Die Seite ist jetzt leer
|
||||
Der Button reagiert nicht auf Klicks
|
||||
Jetzt wird eine Fehlermeldung angezeigt
|
||||
```
|
||||
|
||||
**3. Welches Ergebnis Sie erzielen möchten**
|
||||
|
||||
```
|
||||
Ich möchte, dass die Daten erfolgreich gespeichert werden
|
||||
Ich möchte, dass die Seite normal angezeigt wird
|
||||
Ich möchte, dass nach dem Klick auf den Button eine Meldung erscheint
|
||||
```
|
||||
|
||||
**Vollständiges Beispiel:**
|
||||
|
||||
```
|
||||
Ich habe gerade auf Speichern geklickt, jetzt zeigt die Seite den Fehler "Speichern fehlgeschlagen".
|
||||
|
||||
[Screenshot]
|
||||
|
||||
Ich möchte, dass die Formulardaten erfolgreich in der Datenbank gespeichert werden. Was soll ich tun?
|
||||
```
|
||||
|
||||
**Wichtige Prinzipien:**
|
||||
- In einfachen Worten beschreiben, keine Fachbegriffe verwenden
|
||||
- Chronologisch vorgehen: Was zuerst getan wurde, was dann passiert ist
|
||||
- Die eigenen Erwartungen aussprechen, damit die KI weiß, was Sie wollen
|
||||
|
||||
## 2. Erster Schritt: Direkt das Phänomen beschreiben und fragen
|
||||
|
||||
Wenn Sie auf ein Problem stoßen, <strong>öffnen Sie noch nicht sofort F12</strong>. Beschreiben Sie zuerst das Phänomen, machen Sie einen Screenshot der aktuellen Seite und geben Sie es der KI.
|
||||
|
||||
Oft kann die KI anhand des Screenshots direkt eine Lösung vorschlagen.
|
||||
|
||||
### 2.1 Häufige Phänomene beschreiben
|
||||
|
||||
::: tip Einfach beschreiben
|
||||
|
||||
**Seite ist weiß**
|
||||
```
|
||||
Die Seite öffnet sich und ist leer. Was soll ich tun?
|
||||
|
||||
[Screenshot]
|
||||
```
|
||||
|
||||
**Button reagiert nicht auf Klicks**
|
||||
```
|
||||
Dieser Button reagiert nicht. Bitte prüfen.
|
||||
|
||||
[Screenshot]
|
||||
```
|
||||
|
||||
**Daten lassen sich nicht speichern**
|
||||
```
|
||||
Ich habe auf Speichern geklickt, aber die Daten wurden nicht gespeichert. Was soll ich tun?
|
||||
|
||||
[Screenshot]
|
||||
```
|
||||
|
||||
**Styling stimmt nicht**
|
||||
```
|
||||
Dieser Button ist verschoben. Wie kann ich das anpassen?
|
||||
|
||||
[Screenshot]
|
||||
```
|
||||
|
||||
**API-Fehler**
|
||||
```
|
||||
Beim Aufruf der Schnittstelle ist ein Fehler aufgetreten. Bitte prüfen.
|
||||
|
||||
[Screenshot]
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
### 2.2 Wenn die KI das Problem direkt löst
|
||||
|
||||
Herzlichen Glückwunsch, das Problem ist gelöst! Folgen Sie einfach den Anweisungen der KI.
|
||||
|
||||
### 2.3 Wenn die KI "weitere Informationen benötigt"
|
||||
|
||||
Jetzt müssen Sie F12 öffnen und wichtige Informationen nachreichen. Weiter unten.
|
||||
|
||||
## 3. Zweiter Schritt: Wichtige Informationen ergänzen
|
||||
|
||||
Wenn die KI weitere Informationen benötigt, öffnen Sie je nach Problemtyp F12 und ergänzen Sie die entsprechenden Inhalte.
|
||||
|
||||
### 3.1 Wann Informationen ergänzt werden müssen
|
||||
|
||||
Die KI könnte wie folgt antworten:
|
||||
- "Bitte öffnen Sie die Console und prüfen Sie, ob Fehler vorliegen"
|
||||
- "Machen Sie einen Screenshot des Network-Panels"
|
||||
- "Ich benötige die genaue Fehlermeldung"
|
||||
|
||||
In diesem Fall ergänzen Sie die Screenshots anhand der folgenden Anleitung.
|
||||
|
||||
### 3.2 Console-Informationen ergänzen (weiße Seite / Fehler)
|
||||
|
||||
::: tip Arbeitsschritte
|
||||
|
||||
**Schritt 1: F12 drücken, um die Entwicklertools zu öffnen**
|
||||
|
||||
Auf dem Mac: `Cmd+Option+I`, oder Rechtsklick auf die Seite und "Untersuchen" wählen.
|
||||
|
||||
**Schritt 2: Zum Tab Console wechseln**
|
||||
|
||||
**Schritt 3: Screenshot der roten Fehlermeldungen machen**
|
||||
|
||||
**Schritt 4: An die KI senden**
|
||||
|
||||
```
|
||||
Die Console zeigt folgende Fehler:
|
||||
|
||||
[Screenshot]
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
### 3.3 Network-Informationen ergänzen (Datenprobleme / API-Fehler)
|
||||
|
||||
::: tip Arbeitsschritte
|
||||
|
||||
**Schritt 1: F12 drücken, um die Entwicklertools zu öffnen**
|
||||
|
||||
**Schritt 2: Zum Tab Network wechseln**
|
||||
|
||||
**Schritt 3: Die Aktion erneut ausführen** (auf Speichern klicken / Seite aktualisieren)
|
||||
|
||||
**Schritt 4: Die entsprechende Anfrage finden und einen Screenshot machen**
|
||||
|
||||
- URL und Statuscode prüfen
|
||||
- Payload (gesendete Parameter) prüfen
|
||||
- Response (Rückgabeergebnis) prüfen
|
||||
|
||||
**Schritt 5: An die KI senden**
|
||||
|
||||
```
|
||||
Network-Informationen wie folgt:
|
||||
|
||||
Anfrage: [Screenshot 1]
|
||||
Parameter: [Screenshot 2]
|
||||
Antwort: [Screenshot 3]
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
### 3.4 Elements-Informationen ergänzen (Styling-Probleme)
|
||||
|
||||
::: tip Arbeitsschritte
|
||||
|
||||
**Schritt 1: Rechtsklick auf das Element → "Untersuchen"**
|
||||
|
||||
Die Entwicklertools positionieren sich automatisch auf diesem Element.
|
||||
|
||||
**Schritt 2: Screenshot des Styles-Panels machen**
|
||||
|
||||
**Schritt 3: An die KI senden**
|
||||
|
||||
```
|
||||
Element-Styling wie folgt:
|
||||
|
||||
[Screenshot]
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
## 4. Dritter Schritt: Iterativ bis zur Lösung
|
||||
|
||||
### 4.1 Ineffiziente Vorgehensweisen
|
||||
|
||||
Diese Vorgehensweisen verschwenden Ihre Zeit:
|
||||
|
||||
Bei einer Fehlermeldung in Panik geraten und blind Code ändern
|
||||
Eine halbe Stunde nach Lösungen suchen
|
||||
Versuchen, selbst die Bedeutung jedes Fehlers zu verstehen
|
||||
Sich allein bis nachts um drei durchs Debugging quälen
|
||||
|
||||
### 4.2 Effiziente Vorgehensweise
|
||||
|
||||
Gehen Sie nach diesem Prozess vor:
|
||||
|
||||
Zunächst das Phänomen beschreiben und mit Screenshot fragen
|
||||
Wenn die KI weitere Informationen benötigt, F12 öffnen und ergänzen
|
||||
Den Empfehlungen entsprechend den Code ändern
|
||||
Nach der Änderung testen; falls das Problem weiterhin besteht, weiter mit Screenshot fragen
|
||||
|
||||
## 5. Zusammenfassung: Vollständiger Prozess
|
||||
|
||||
```
|
||||
Problem aufgetreten
|
||||
↓
|
||||
Phänomen direkt beschreiben + Screenshot
|
||||
↓
|
||||
An die KI senden: "Was soll ich tun?"
|
||||
↓
|
||||
Hat die KI das Problem direkt gelöst?
|
||||
↓ Ja
|
||||
Den Anweisungen der KI folgen
|
||||
↓
|
||||
Testen, ob das Problem gelöst ist
|
||||
↓
|
||||
↓ Nein / KI benötigt weitere Informationen
|
||||
F12 öffnen, wichtige Informationen ergänzen
|
||||
↓
|
||||
Erneut an die KI senden
|
||||
↓
|
||||
Wiederholen, bis das Problem gelöst ist
|
||||
```
|
||||
@@ -0,0 +1,642 @@
|
||||
---
|
||||
title: 'C-End Konsumszenarien - Inspirationsreferenz'
|
||||
description: 'Dieses Dokument fasst kreative Anwendungsrichtungen von LLM in C-End-Konsumszenarien zusammen, inklusive Inspirationszenarien aus Lebensstil, emotionaler Begleitung, Unterhaltung, persoenlichem Wachstum und sozialer Interaktion als Referenz fuer Entwickler von AI-Anwendungen fuer Endverbraucher.'
|
||||
---
|
||||
|
||||
<script setup>
|
||||
import { computed, ref } from 'vue'
|
||||
|
||||
const duration = 'ca. <strong>4 Stunden</strong>'
|
||||
|
||||
const vibePoint = ref('')
|
||||
const feeling = ref('')
|
||||
|
||||
// Themenpool pro Szenario: Fokus auf Gefuehl, Atmosphaere und psychologische Suggestion
|
||||
const topicPool = {
|
||||
'lifestyle': [
|
||||
{ title: 'Morgenritual-Aktivierer', desc: 'Erstellt persoenliche Morgenrituale basierend auf Wetter, Terminen und Stimmung' },
|
||||
{ title: 'Wohlfuehl-Atmosphaere fuer Single-Haushalte', desc: 'Gestaltet Wohlfuehl-Ambiente mit Licht, Musik und Duft-Kombinationen' },
|
||||
{ title: 'Wochenend-Wellness-Plan-Generator', desc: 'Empfiehlt die perfekte Couch-Kombination: Film + Snacks + Ambiente' },
|
||||
{ title: 'Einschlaf-Geschichten-Radio', desc: 'Sanfte Geschichten und Meditationsfuehrungen als persoenlicher Begleiter zum Einschlafen' },
|
||||
{ title: 'Alltagsaesthetik-Inspiration', desc: 'Entdeckt Schoenheit im Alltag und generiert Aesthetik-Tipps und Ritualfuehrer' }
|
||||
],
|
||||
'emotion': [
|
||||
{ title: 'Nachtlicher Zuhoerer', desc: '24/7 verfuegbarer emotionaler Zuhoerer ohne Wertung' },
|
||||
{ title: 'Trennungs-Begleiter', desc: 'Sanfte Begleitung, Heilungsraete und emotionale Entlastung nach einer Trennung' },
|
||||
{ title: 'Angstbewaeltigungs-Atemtrainer', desc: 'Erkennt Angst und fuehrt Atemuebungen und Achtsamkeitsmeditation an' },
|
||||
{ title: 'Selbstvertrauens-Aufbauer', desc: 'Hilft durch positive Dialoge und psychologische Suggestion beim Wiederaufbau von Selbstwert' },
|
||||
{ title: 'Emotionales Tagebuch-Analyst', desc: 'Analysiert Emotionstagebuecher, erkennt Muster und gibt warme Einblicke' }
|
||||
],
|
||||
'entertainment': [
|
||||
{ title: 'Immersives Murder-Mystery DM', desc: 'Spielt den Spielleiter, erzeugt Spannung und treibt die Handlung voran' },
|
||||
{ title: 'Open-World-Seelen-NPC', desc: 'NPCs mit Persoenlichkeit, die sich an Spielergeschichten erinnern' },
|
||||
{ title: 'Personalisierter Podcast-Generator', desc: 'Erstellt eigene Podcasts basierend auf Interessen, natuerlich wie ein Gespraech' },
|
||||
{ title: 'Virtuelles Konzert-Ambiente', desc: 'Erzeugt Live-Gefuehl bei Online-Konzerten mit Echtzeit-Interaktion' },
|
||||
{ title: 'Interaktiver Roman-Mitschreiber', desc: 'Erstellt gemeinsam Geschichten, jede Wahl beeinflusst die Handlung' }
|
||||
],
|
||||
'growth': [
|
||||
{ title: 'Persoenlicher Wachstums-Begleiter', desc: 'Dokumentiert Entwicklung, ermutigt und blickt auf wichtige Meilensteine zurueck' },
|
||||
{ title: 'Gamifizierter Gewohnheits-Coach', desc: 'Verwandelt oede Gewohnheitsbildung in ein spannendes Abenteuerspiel' },
|
||||
{ title: 'Lernpartner-Vermittlung', desc: 'Findet gleichgesinnte Lernpartner fuer gegenseitige Motivation' },
|
||||
{ title: 'Taegliche Kleinodes-Entdecker', desc: 'Hilft, kleine Schoenheiten im Alltag zu finden und Dankbarkeit zu kultivieren' },
|
||||
{ title: 'Lebenssimulator', desc: 'Simuliert verschiedene Lebensentscheidungen und erlebt alternative Wege' }
|
||||
],
|
||||
'social': [
|
||||
{ title: 'Eisbrecher-Thema-Generator', desc: 'Bietet interessante Themen fuer soziale Anlaesse zum Aufbrechen' },
|
||||
{ title: 'Social-Media-Copywriter', desc: 'Generiert stilvolle Posts basierend auf Fotos und Stimmung' },
|
||||
{ title: 'Date-Atmosphaere-Planer', desc: 'Plant komplette Date-Ambientes von Ort ueber Themen bis Ueberraschungen' },
|
||||
{ title: 'Remote-Party-Animator', desc: 'Belebt Online-Geselligkeit mit Spielen und Interaktion' },
|
||||
{ title: 'Sozialenergie-Manager', desc: 'Hilft Introvertierten, soziale Energie zu managen' }
|
||||
],
|
||||
'creative': [
|
||||
{ title: 'Inspiration-Notfallkit', desc: 'Unerwartete kreative Funken bei Ideenblockaden' },
|
||||
{ title: 'Personal-Style-Entdecker', desc: 'Hilft, den eigenen einzigartigen Stil zu finden' },
|
||||
{ title: 'Bullet-Journal-Aesthetik-Berater', desc: 'Bietet Layout-, Farb- und Content-Tipps fuer Buecher und Tagebuecher' },
|
||||
{ title: 'Fotografie-Kompositions-Leitfaden', desc: 'Gibt Foto- und Bearbeitungstipps basierend auf Szene und gewuenschter Stimmung' },
|
||||
{ title: 'Stimmungsbasierter Musik-Matcher', desc: 'Empfiehlt die perfekte Musikauswahl fuer aktuelle Stimmung und Szene' }
|
||||
],
|
||||
'travel': [
|
||||
{ title: 'City-Walk-Entdeckerfuehrer', desc: 'Erkunde Staedte wie ein Einheimischer und finde versteckte Orte' },
|
||||
{ title: 'Reise-Tagebuch-Generator', desc: 'Verwandelt Reisefotos und Stimmungen in schoene Reiseberichte' },
|
||||
{ title: 'Solo-Reise-Begleiter', desc: 'Bietet Begleitung, Ratschlaege und Sicherheit fuer Alleinreisende' },
|
||||
{ title: 'Zielort-Atmosphaere-Vorschau', desc: 'Erlebe die Atmosphaere des Reiseziels vorab immersiv' },
|
||||
{ title: 'Reisefotografie-Stimmungsberater', desc: 'Gibt Anleitung fuer atmosphaerische Reisefotos basierend auf Szene und Licht' }
|
||||
],
|
||||
'health': [
|
||||
{ title: 'Motivations-Aktivierer', desc: 'Gibt genau die richtige Ermutigung wenn man sich nicht bewegen moechte' },
|
||||
{ title: 'Gesunde-Kueche-Inspiration', desc: 'Generiert gesunde, wohltuende Rezepte basierend auf Stimmung und Zutaten' },
|
||||
{ title: 'Schlafqualitaet-Optimierer', desc: 'Erstellt umfassend optimale Schlafbedingungen von Umwelt bis Psyche' },
|
||||
{ title: 'Koerperwahrnehmungs-Leitfaden', desc: 'Lenkt die Aufmerksamkeit auf Koerpersignale und foerdert Koerper-Geist-Verbindung' },
|
||||
{ title: 'Selbstfuersorge-Erinnerung', desc: 'Erinnert daran, im Alltag innezuhalten und sich selbst zu pflegen' }
|
||||
],
|
||||
'learning': [
|
||||
{ title: 'Gamifizierter Wissens-Explorer', desc: 'Verwandt oedes Lernen in ein spannendes Entdeckungsabenteuer' },
|
||||
{ title: 'Sprachlern-Szenariopartner', desc: 'Spielt verschiedene Rollen fuer natuerliches Sprachenlernen in Dialogen' },
|
||||
{ title: 'Neugier-Befriediger', desc: 'Beantwortet wilde Fragen und stillt die Neugier auf die Welt' },
|
||||
{ title: 'Lesebuch-Inspiration', desc: 'Hilft beim Ordnen von Leseeindruecken und findet neue Perspektiven' },
|
||||
{ title: 'Wissensvermittlung-Gestalter', desc: 'Verwandelt Gelerntes in interessante Teilen-Inhalte' }
|
||||
],
|
||||
'relationship': [
|
||||
{ title: 'Beziehungs-Kommunikationscoach', desc: 'Hilft, schwierige Gefuehle auszudruecken und Beziehungen zu verbessern' },
|
||||
{ title: 'Familien-Gedanken-Erinnerung', desc: 'Erinnert daran, sich um Familie zu kuemmern mit herzlichen Interaktions-Tipps' },
|
||||
{ title: 'Freundschaftspflege-Berater', desc: 'Hilft, Fernfreundschaften zu pflegen und gemeinsame Themen zu finden' },
|
||||
{ title: 'Liebesgesten- und Ueberraschungsplaner', desc: 'Plant unvergessliche Ueberraschungen und romantische Momente' },
|
||||
{ title: 'Konfliktdeeskalations-Berater', desc: 'Bietet Ratschlaege und Formulierungen zur Entspannung bei Beziehungskonflikten' }
|
||||
],
|
||||
'pet': [
|
||||
{ title: 'Haustier-Tagebuch', desc: 'Tagebucheintraege aus der Perspektive des Haustiers' },
|
||||
{ title: 'Haustier-Verhaltensdeuter', desc: 'Entschluesselt die Korpersprache des Haustiers' },
|
||||
{ title: 'Haustier-Aktivitaeten-Planer', desc: 'Plant kreative Interaktionsaktivitaeten mit dem Haustier' },
|
||||
{ title: 'Haustier-Gedaechtnis-Geschichten', desc: 'Verwandelt Fotos und Erinnerungen in herzliche Geschichten' },
|
||||
{ title: 'Neulings-Haustierfuehrer', desc: 'Bietet waerme Begleitung und Anleitung fuer Erst-Haustierbesitzer' }
|
||||
],
|
||||
'finance': [
|
||||
{ title: 'Kaufimpuls-Bewusstsein', desc: 'Erkennt Emotionen hinter Impulskaeufen und foerdert gesunde Konsumgewohnheiten' },
|
||||
{ title: 'Sparziel-Visualisierer', desc: 'Verwandelt Sparziele in sichtbare Traumfortschritte' },
|
||||
{ title: 'Finanzwissen-Spaasschule', desc: 'Lerne Finanzwissen auf unterhaltsame Weise' },
|
||||
{ title: 'Finanzangst-Beruhiger', desc: 'Bietet emotionale Unterstuetzung und praktische Ratschlaege bei Finanzstress' },
|
||||
{ title: 'Mini-Investment-Experience', desc: 'Spielerischer Einstieg ins Investieren mit niedriger Hemmschwelle' }
|
||||
],
|
||||
'career': [
|
||||
{ title: 'Karriereorientierungs-Begleiter', desc: 'Bietet Zuhoeren, Erkundung und Orientierung in beruflichen Uebergangsphasen' },
|
||||
{ title: 'Beruflicher Sinn-Aktivierer', desc: 'Hilft, Wert und Bedeutung in der Arbeit zu entdecken' },
|
||||
{ title: 'Beruflicher Netzwerk-Berater', desc: 'Bietet lockere Themen und Interaktionstipps fuer berufliche Netzwerke' },
|
||||
{ title: 'Nebenverdienst-Ideengeber', desc: 'Weckt kreative Nebenverdienst-Ideen basierend auf Faehigkeiten und Interessen' },
|
||||
{ title: 'Vorstellungsgespraech-Confidence-Booster', desc: 'Psychologische Vorbereitung und Motivation vor Vorstellungsgespraechen' }
|
||||
],
|
||||
'home': [
|
||||
{ title: 'Wohnraum-Atmosphaere-Gestalter', desc: 'Designt Wohn-Ambientes basierend auf Stimmung und Jahreszeit' },
|
||||
{ title: 'Jahreszeiten-Einrichtungsberater', desc: 'Passt die Einrichtung an die Jahreszeiten an fuer Abwechslung' },
|
||||
{ title: 'Kleine-Raum-Magie', desc: 'Schoene, gemuetliche Atmosphaere auch auf engem Raum' },
|
||||
{ title: 'Haushaltsritual-Gestalter', desc: 'Verleiht alltaeglichen Haushaltsaktivitaeten Sinn und Ritual' },
|
||||
{ title: 'Ausmisten-Begleiter', desc: 'Psychologische Unterstuetzung und Entscheidungs Hilfe beim Ausmuellen' }
|
||||
],
|
||||
'food': [
|
||||
{ title: 'Solo-Mahlzeit-Genuss', desc: 'Einfache, wohltuende Rezepte fuer Single-Haushalte' },
|
||||
{ title: 'Festtisch-Ambiente-Designer', desc: 'Festliche Tischdekorationen fuer besondere Anlaesse' },
|
||||
{ title: 'Stimmungsbasierter Kuechen-Matcher', desc: 'Empfiehlt Speisen und Zubereitungen passend zur aktuellen Stimmung' },
|
||||
{ title: 'Kuechenanfaenger-Motivator', desc: 'Waerme Ermutigung und einfache Rezepte fuer Kochanfaenger' },
|
||||
{ title: 'Food-Fotografie-Ambiente-Guide', desc: 'Macht auch einfache Gerichte fotogen' }
|
||||
],
|
||||
'fashion': [
|
||||
{ title: 'Outfit-Moodboard des Tages', desc: 'Generiert Outfit-Inspiration basierend auf Wetter, Anlass und Stimmung' },
|
||||
{ title: 'Capsule-Wardrobe-Stylist', desc: 'Unendige Kombinationsmoeglichkeiten mit wenigen Teilen' },
|
||||
{ title: 'Personal-Style-Reise', desc: 'Hilft, den eigenen einzigartigen Stil zu entdecken und aufzubauen' },
|
||||
{ title: 'Upcycling-Style-Kreativierer', desc: 'Neue Kombinationsideen fuer vorhandene Kleidung' },
|
||||
{ title: 'Anlass-Outfit-Berater', desc: 'Selbstbewusste Outfits fuer besondere Anlaesse' }
|
||||
]
|
||||
}
|
||||
|
||||
// Vordefinierte Empfehlungszuordnung nach Atmosphaere und Gefuehl
|
||||
const recommendationMap = {
|
||||
// Atmosphaere: heilsam
|
||||
'healing': {
|
||||
'relax': ['emotion', 'lifestyle', 'health', 'home'],
|
||||
'inspire': ['creative', 'growth', 'learning', 'entertainment'],
|
||||
'connect': ['relationship', 'social', 'pet', 'emotion'],
|
||||
'escape': ['travel', 'entertainment', 'creative', 'lifestyle']
|
||||
},
|
||||
// Atmosphaere: Wachstum
|
||||
'growth': {
|
||||
'relax': ['growth', 'learning', 'creative', 'health'],
|
||||
'inspire': ['career', 'learning', 'creative', 'growth'],
|
||||
'connect': ['social', 'relationship', 'career', 'learning'],
|
||||
'escape': ['travel', 'entertainment', 'creative', 'lifestyle']
|
||||
},
|
||||
// Atmosphaere: sozial
|
||||
'social': {
|
||||
'relax': ['social', 'pet', 'food', 'home'],
|
||||
'inspire': ['social', 'creative', 'entertainment', 'travel'],
|
||||
'connect': ['relationship', 'social', 'pet', 'travel'],
|
||||
'escape': ['social', 'travel', 'entertainment', 'creative']
|
||||
},
|
||||
// Atmosphaere: Entdeckung
|
||||
'explore': {
|
||||
'relax': ['travel', 'creative', 'lifestyle', 'food'],
|
||||
'inspire': ['travel', 'creative', 'learning', 'entertainment'],
|
||||
'connect': ['travel', 'social', 'relationship', 'pet'],
|
||||
'escape': ['travel', 'entertainment', 'creative', 'lifestyle']
|
||||
},
|
||||
// Atmosphaere: Alltag
|
||||
'daily': {
|
||||
'relax': ['lifestyle', 'home', 'health', 'emotion'],
|
||||
'inspire': ['creative', 'food', 'fashion', 'home'],
|
||||
'connect': ['relationship', 'social', 'pet', 'lifestyle'],
|
||||
'escape': ['entertainment', 'creative', 'travel', 'lifestyle']
|
||||
}
|
||||
}
|
||||
|
||||
const vibeOptions = [
|
||||
{ label: 'Heilsam', value: 'healing', desc: 'Waerme, Trost, Heilung' },
|
||||
{ label: 'Wachstum', value: 'growth', desc: 'Fortschritt, Durchbruch, Transformation' },
|
||||
{ label: 'Sozial', value: 'social', desc: 'Verbindung, Teilen, Interaktion' },
|
||||
{ label: 'Entdeckung', value: 'explore', desc: 'Neugier, Abenteuer, Finden' },
|
||||
{ label: 'Alltag', value: 'daily', desc: 'Gewoehnlich, echt, im Moment' }
|
||||
]
|
||||
|
||||
const feelingOptions = [
|
||||
{ label: 'Entspannen', value: 'relax', desc: 'Stress abbauen, abschalten' },
|
||||
{ label: 'Inspiration suchen', value: 'inspire', desc: 'Kreativitaet anregen, Impulse erhalten' },
|
||||
{ label: 'Verbindung wuenschen', value: 'connect', desc: 'Mit Menschen verbinden, emotionale Resonanz' },
|
||||
{ label: 'Kurz entfliehen', value: 'escape', desc: 'Der Realitaet entfliehen, eintauchen' }
|
||||
]
|
||||
|
||||
const scenarios = [
|
||||
{ key: 'lifestyle', name: 'Lebensstil', anchor: '#_1-lebensstil' },
|
||||
{ key: 'emotion', name: 'Emotionale Begleitung', anchor: '#_2-emotionale-begleitung' },
|
||||
{ key: 'entertainment', name: 'Unterhaltung', anchor: '#_3-unterhaltung' },
|
||||
{ key: 'growth', name: 'Persoenliches Wachstum', anchor: '#_4-persoenliches-wachstum' },
|
||||
{ key: 'social', name: 'Soziale Interaktion', anchor: '#_5-soziale-interaktion' },
|
||||
{ key: 'creative', name: 'Kreativer Ausdruck', anchor: '#_6-kreativer-ausdruck' },
|
||||
{ key: 'travel', name: 'Reiseerfahrung', anchor: '#_7-reiseerfahrung' },
|
||||
{ key: 'health', name: 'Koerperliche und geistige Gesundheit', anchor: '#_8-koerperliche-und-geistige-gesundheit' },
|
||||
{ key: 'learning', name: 'Wissensentdeckung', anchor: '#_9-wissensentdeckung' },
|
||||
{ key: 'relationship', name: 'Beziehungspflege', anchor: '#_10-beziehungspflege' },
|
||||
{ key: 'pet', name: 'Haustier-Begleitung', anchor: '#_11-haustier-begleitung' },
|
||||
{ key: 'finance', name: 'Finanzielle Gesundheit', anchor: '#_12-finanzielle-gesundheit' },
|
||||
{ key: 'career', name: 'Karriereentwicklung', anchor: '#_13-karriereentwicklung' },
|
||||
{ key: 'home', name: 'Wohnraum', anchor: '#_14-wohnraum' },
|
||||
{ key: 'food', name: 'Kulinarik', anchor: '#_15-kulinarik' },
|
||||
{ key: 'fashion', name: 'Mode und Stil', anchor: '#_16-mode-und-stil' }
|
||||
]
|
||||
|
||||
// Empfehlungen berechnen: zufaellig aus dem Themenpool auswaehlen
|
||||
const recommendationTopics = computed(() => {
|
||||
if (!vibePoint.value || !feeling.value) return []
|
||||
|
||||
const keys = recommendationMap[vibePoint.value]?.[feeling.value] || []
|
||||
const topics = []
|
||||
|
||||
// Aus jedem empfohlenen Szenario 1-2 Themen zufaellig auswaehlen
|
||||
keys.forEach(key => {
|
||||
const scenario = scenarios.find(item => item.key === key)
|
||||
const scenarioTopics = topicPool[key] || []
|
||||
|
||||
if (scenario && scenarioTopics.length > 0) {
|
||||
// 1-2 Themen zufaellig auswaehlen
|
||||
const count = Math.floor(Math.random() * 2) + 1
|
||||
const shuffled = [...scenarioTopics].sort(() => Math.random() - 0.5)
|
||||
const selected = shuffled.slice(0, Math.min(count, shuffled.length))
|
||||
|
||||
selected.forEach(topic => {
|
||||
topics.push({
|
||||
...topic,
|
||||
scenarioKey: key,
|
||||
scenarioName: scenario.name,
|
||||
scenarioAnchor: scenario.anchor
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
// Zufaellig sortieren und Gesamtzahl begrenzen
|
||||
return topics.sort(() => Math.random() - 0.5).slice(0, 8)
|
||||
})
|
||||
|
||||
// Beschreibung der aktuellen Auswahl abrufen
|
||||
const currentSelection = computed(() => {
|
||||
const vibe = vibeOptions.find(i => i.value === vibePoint.value)
|
||||
const feel = feelingOptions.find(p => p.value === feeling.value)
|
||||
return {
|
||||
vibe: vibe?.label || '',
|
||||
feeling: feel?.label || ''
|
||||
}
|
||||
})
|
||||
|
||||
const scrollToAnchor = (anchor) => {
|
||||
// Scrollen verzoegern, damit das DOM aktualisiert ist
|
||||
setTimeout(() => {
|
||||
// Suche per ID versuchen (unterstuetzt mehrere Formate)
|
||||
let element = document.querySelector(anchor)
|
||||
|
||||
// Falls nicht gefunden, andere moegliche ID-Formate versuchen
|
||||
if (!element) {
|
||||
// Unterstrich-Praefix entfernen
|
||||
const altAnchor = anchor.replace('#_', '#')
|
||||
element = document.querySelector(altAnchor)
|
||||
}
|
||||
|
||||
// Falls weiter nicht gefunden, per Ueberschriftentext suchen
|
||||
if (!element) {
|
||||
// Szenarionamen aus dem Anchor extrahieren
|
||||
const anchorText = decodeURIComponent(anchor.replace('#', '').replace(/^_/, ''))
|
||||
const headings = document.querySelectorAll('h2, h3')
|
||||
|
||||
for (let heading of headings) {
|
||||
const headingText = heading.textContent.trim()
|
||||
// Exakte oder partielle Uebereinstimmung
|
||||
const cleanHeading = headingText.replace(/^\d+\.\s*/, '')
|
||||
if (cleanHeading === anchorText || headingText.includes(anchorText)) {
|
||||
element = heading
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (element) {
|
||||
element.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'start'
|
||||
})
|
||||
// Zielabschnitt hervorheben
|
||||
element.style.backgroundColor = '#fdf2f8'
|
||||
element.style.transition = 'background-color 0.3s'
|
||||
element.style.padding = '8px'
|
||||
element.style.borderRadius = '4px'
|
||||
setTimeout(() => {
|
||||
element.style.backgroundColor = ''
|
||||
element.style.padding = ''
|
||||
}, 2000)
|
||||
}
|
||||
}, 100)
|
||||
}
|
||||
|
||||
const resetSelection = () => {
|
||||
vibePoint.value = ''
|
||||
feeling.value = ''
|
||||
}
|
||||
</script>
|
||||
|
||||
# C-End Konsumszenarien - Inspirationsreferenz
|
||||
|
||||
## Kapiteluebersicht
|
||||
|
||||
<ChapterIntroduction :duration="duration" :tags="['C-End-Apps', 'Lebensstil', 'Emotionales Erlebnis', 'Atmosphaere']" coreOutput="15+ Lebensszenario-Inspirationen entdecken" expectedOutput="Produktrichtungen finden, die Nutzer beruehren">
|
||||
|
||||
Dieses Dokument fasst <strong>kreative Anwendungsrichtungen von LLM in C-End-Konsumszenarien</strong> zusammen. Anders als B-End-Produkte, die auf Effizienz und Schmerzpunkte fokussieren, legen C-End-Produkte mehr Wert auf <strong>Atmosphaere, psychologische Suggestion und Gefuehlsbetonung</strong>, damit Nutzer emotionale Resonanz und positive Erlebnisse haben.
|
||||
|
||||
</ChapterIntroduction>
|
||||
|
||||
## Schnellauswahl der Szenario-Atmosphaere
|
||||
|
||||
<el-card shadow="hover" style="margin-top: 16px; margin-bottom: 24px; border-left: 5px solid #ec4899;">
|
||||
<div style="font-weight: 600; margin-bottom: 8px;">Finden Sie inspirierende Szenarien</div>
|
||||
<div style="color: #606266; font-size: 14px; line-height: 1.6; margin-bottom: 12px;">
|
||||
Waehlen Sie Ihre gewuenschte Atmosphaere und aktuelle Stimmung - das System empfiehlt passende Szenarien. Klicken Sie auf Tags, um zum entsprechenden Kapitel zu springen.
|
||||
</div>
|
||||
<el-row :gutter="16">
|
||||
<el-col :span="12">
|
||||
<el-select v-model="vibePoint" placeholder="Atmosphaere-Typ waehlen" style="width: 100%;">
|
||||
<el-option
|
||||
v-for="item in vibeOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
<div style="font-weight: 500;">{{ item.label }}</div>
|
||||
<div style="font-size: 12px; color: #909399;">{{ item.desc }}</div>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-select v-model="feeling" placeholder="Aktuelle Stimmung waehlen" style="width: 100%;">
|
||||
<el-option
|
||||
v-for="item in feelingOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
<div style="font-weight: 500;">{{ item.label }}</div>
|
||||
<div style="font-size: 12px; color: #909399;">{{ item.desc }}</div>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<div v-if="recommendationTopics.length > 0" style="margin-top: 16px;">
|
||||
<div style="font-weight: 600; margin-bottom: 12px; color: #ec4899;">
|
||||
Fuer Sie empfohlen {{ currentSelection.vibe }} × {{ currentSelection.feeling }} Szenarien:
|
||||
</div>
|
||||
<div style="display: flex; flex-wrap: wrap; gap: 8px;">
|
||||
<el-tag
|
||||
v-for="topic in recommendationTopics"
|
||||
:key="topic.title"
|
||||
type="danger"
|
||||
effect="light"
|
||||
style="cursor: pointer; margin-bottom: 4px;"
|
||||
@click="scrollToAnchor(topic.scenarioAnchor)"
|
||||
>
|
||||
{{ topic.title }}
|
||||
</el-tag>
|
||||
</div>
|
||||
<el-button type="text" size="small" @click="resetSelection" style="margin-top: 8px;">
|
||||
Neu waehlen
|
||||
</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
---
|
||||
|
||||
## 1. Lebensstil
|
||||
|
||||
> 💡 **Kernkonzept**：Alltaegliches mit Ritualen versehen und Schoenheit in Details schaffen
|
||||
|
||||
| Nr. | Szenario-Name | Szenario-Funktion |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | Morgenritual-Aktivierungsassistent | Integriert Wetter-API und Kalenderdaten; LLM generiert persoenliche Morgenplaene; spielt passende Musik ueber Smart Speaker ab und laesst Licht langsam heller werden |
|
||||
| 2 | Atmosphaeren-Gestalter fuer Single-Haushalte | Bindet Smart-Home-Geraete ein (Licht, Lautsprecher, Duftspender); LLM passt Parameter nach Uhrzeit und Stimmung an; lernt Nutzerpraeferenzen und optimiert laufend |
|
||||
| 3 | Wochenend-Wellness-Plan-Generator fuer Zuhause | Bindet Streaming-APIs fuer Filmlisten ein und kombiniert Nutzerpraeferenzen zu Film + Essen + Einrichtung |
|
||||
| 4 | Einschlaf-Radio fuer innere Ruhe | Nutzt TTS fuer sanfte Geschichten, mischt White Noise und laesst die Lautstaerke intelligent abfallen; passt Inhalte anhand von Schlafdaten an |
|
||||
| 5 | Alltagsaesthetik-Inspirationsfaenger | Analysiert Umgebungsfotos per Bilderkennung, LLM generiert Aesthetik-Tipps; Content-Empfehlungen im Stil von Pinterest/Xiaohongshu |
|
||||
|
||||
---
|
||||
|
||||
## 2. Emotionale Begleitung
|
||||
|
||||
> 💡 **Kernkonzept**：Bedingungslose Annahme und Begleitung als sanfter emotionaler Raum
|
||||
|
||||
| Nr. | Szenario-Name | Szenario-Funktion |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | Naechtlicher Kummerkasten-Zuhoerer | Ende-zu-Ende-Verschluesselung fuer Privatsphaere; LLM-Emotionsanalyse versteht Gefuehle; Langzeitgedaechtnis speichert Nutzerstories und begleitet in Mehr-Runden-Dialogen |
|
||||
| 2 | Trennungs-Heilungsbegleiter | Erkennt emotionale Phasen und bietet phasenweise Unterstuetzung (Erzaehlphase -> Entlastungsphase -> Wiederaufbau); RAG-Suche in psychologischer Wissensbasis |
|
||||
| 3 | Atemcoach gegen Angst | Bindet Biosensordaten ein (Herzrate/Atem); ueberwacht Angstniveau in Echtzeit; fuehrt per Stimme Atemrhythmus und progressive Muskelentspannung an |
|
||||
| 4 | Mentor zum Wiederaufbau von Selbstvertrauen | Dialograhmen aus positiver Psychologie, dokumentiert kleine Erfolge und gibt Feedback; kognitive Umstrukturierung hilft gegen negative Selbstgespraeche |
|
||||
| 5 | Intelligente Deutung des Emotionstagebuchs | NLP-Modell zur Emotionserkennung, Zeitreihenanalyse entdeckt Muster; visualisierte Emotionskarte und praediktive Emotionswarnungen |
|
||||
|
||||
---
|
||||
|
||||
## 3. Unterhaltung
|
||||
|
||||
> 💡 **Kernkonzept**：Immersive Erlebnisse schaffen, Unterhaltung als Zufluchtsort der Seele
|
||||
|
||||
| Nr. | Szenario-Name | Szenario-Funktion |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | Immersiver Murder-Mystery-DM | LLM generiert Handlungszweige in Echtzeit, Sprachsynthese spielt NPCs; Schwierigkeit und Tempo passen sich Spielerreaktionen an; AR/VR-Szenenrendering |
|
||||
| 2 | Seelenvoller NPC fuer Open-World-Spiele | Langzeitgedaechtnis-Datenbank speichert Spielerinteraktionen, LLM generiert persoenliche Dialoge; Affective Computing gibt NPCs echte emotionale Reaktionen |
|
||||
| 3 | Personalisierte Podcast-Content-Generierung | Generiert eigene Inhalte anhand des Interessenprofils; TTS klont bevorzugte Stimmen; beantwortet Hoererfragen interaktiv in Echtzeit |
|
||||
| 4 | Atmosphaeren-Team fuer virtuelle Konzerte | Virtuelle Avatare, Echtzeit-Chat-Interaktion, virtuelle Lightsticks/Fan-Requisiten; raeumliches Audio schafft Live-Gefuehl |
|
||||
| 5 | Co-Creation-Partner fuer interaktive Romane | LLM generiert Handlung in Echtzeit, Nutzerentscheidungen beeinflussen den Verlauf; mehrere Enden und dynamische Figurenbeziehungen |
|
||||
|
||||
---
|
||||
|
||||
## 4. Persoenliches Wachstum
|
||||
|
||||
> 💡 **Kernkonzept**：Wachstum ist keine Askese, sondern eine spannende Reise der Selbstentdeckung
|
||||
|
||||
| Nr. | Szenario-Name | Szenario-Funktion |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | Zeuge persoenlichen Wachstums | Visualisiert Wachstumspfade als Timeline, markiert Meilensteine automatisch; Vergleichsbilder zeigen "frueheres Ich" vs. "heutiges Ich" |
|
||||
| 2 | Gamifizierter Coach fuer Gewohnheitsaufbau | Gamification-Mechaniken (XP, Level, Abzeichen), soziale Ranglisten, AI-Coach-Rollenspiel wie "Abenteuermentor" |
|
||||
| 3 | Matching fuer Lernpartner | Matching-Algorithmus nach Interessen und Lernzielen, Lerngruppen-Community, gegenseitige Check-ins |
|
||||
| 4 | Entdecker kleiner taeglicher Gluecksmomente | Bilderkennung entdeckt schoene Alltagsmomente, Gratitude-Journal-Fuehrung, woechentlicher Rueckblick auf schoene Momente |
|
||||
| 5 | Lebenssimulations-Erlebnis | Mehrzweigige Story simuliert Folgen verschiedener Entscheidungen, Vergleich paralleler Leben; visualisierte Entscheidungsfolgen |
|
||||
|
||||
---
|
||||
|
||||
## 5. Soziale Interaktion
|
||||
|
||||
> 💡 **Kernkonzept**：Soziales natuerlich und entspannt gestalten, komfortable Verbindung finden
|
||||
|
||||
| Nr. | Szenario-Name | Szenario-Funktion |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | Eisbrecher-Themengenerator | Intelligente Themenempfehlungen nach Anlass und Teilnehmenden, Echtzeit-Gespraechsanalyse fuer Anschlussfragen; Rettungshinweise fuer peinliche Momente |
|
||||
| 2 | Social-Post-Atmosphaeren-Texter | Analysiert Bildinhalte, LLM generiert Texte in mehreren Stilen (literarisch/humorvoll/tiefgehend); intelligente Emoji- und Layout-Empfehlungen |
|
||||
| 3 | Date-Atmosphaerenplaner | Generiert Date-Plaene nach Interessen beider Personen, empfiehlt Restaurants/Aktivitaeten und Gespraechsthemen; Wetter- und Verkehrshinweise in Echtzeit |
|
||||
| 4 | Stimmungsmacher fuer Remote-Treffen | Online-Spielbibliothek, Eisbrecher-Aktivitaetsgenerator, Themenrad; virtuelle Hintergruende und Filter staerken die Atmosphaere |
|
||||
| 5 | Assistent fuer soziale Energie | Bewertet Energieverbrauch nach sozialen Aktivitaeten, gibt Erholungsvorschlaege (Alleinzeit-Aktivitaeten); intelligente Planung des Sozialkalenders |
|
||||
|
||||
---
|
||||
|
||||
## 6. Kreativer Ausdruck
|
||||
|
||||
> 💡 **Kernkonzept**：Jeder hat Kreativitaet, sie muss nur geweckt werden
|
||||
|
||||
| Nr. | Szenario-Name | Szenario-Funktion |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | Notfallkit gegen Inspirationsmangel | Cross-Domain-Assoziationsalgorithmus, zufaellige Stimuluswoerter, kreative Prompt-Bibliothek; Mindmap-Tool fuer Ideendivergenz |
|
||||
| 2 | Guide zur Entdeckung des persoenlichen Stils | Bildanalyse erkennt vorhandenen Stil, empfiehlt Stiltrends, virtuelle Anprobe/Make-up; Timeline der Stilentwicklung |
|
||||
| 3 | Aesthetikberater fuer Bullet Journals und Tagebuecher | Layout-Vorlagen, Farbpaletten, Deko-Elemente; Handschrifterkennung und Content-Verschoenerung |
|
||||
| 4 | Fotografie-Kompositions- und Atmosphaeren-Guide | Szenenerkennung und Kompositionsvorschlaege, Filterstil-Empfehlungen, intelligente Anpassung von Bearbeitungsparametern; Lernpfad fuer Fototechnik |
|
||||
| 5 | Musik-Stimmungs-Matcher | Algorithmus fuer musikalische Emotionsanalyse, Stimmungserkennung, persoenliche Playlists; Musikgeschichten und Hintergrundinfos |
|
||||
|
||||
---
|
||||
|
||||
## 7. Reiseerkundung
|
||||
|
||||
> 💡 **Kernkonzept**：Reisen ist nicht nur Landschaften sehen, sondern verschiedene Lebensweisen erfahren
|
||||
|
||||
| Nr. | Szenario-Name | Szenario-Funktion |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | City-Walk-Erkundungsfuehrer | Aggregiert Inhalte lokaler Kenner, empfiehlt Nischenorte, AR-Navigation; Echtzeit-Uebersetzung und Spracherklaerungen |
|
||||
| 2 | Reise-Stimmungs-Tagebuchgenerator | Automatische Fotoklassifikation und Auswahl, LLM generiert schoene Reiseberichte, Geotag-Timeline; Reisevideo mit einem Klick |
|
||||
| 3 | Begleitassistent fuer Solo-Reisen | Echtzeit-Positionsfreigabe und Sicherheitshinweise, lokale Notfallkontakte, AI-Reisefuehrer per Stimme; Community fuer Alleinreisende |
|
||||
| 4 | Atmosphaerenvorschau des Reiseziels | VR/360-Grad-Panorama, Simulation lokaler Geraeusche und Gerueche, kulturelle Hintergruende; virtuelle "Probewohnen"-Erfahrung |
|
||||
| 5 | Atmosphaerenberatung fuer Reisefotografie | Golden-Hour-Erinnerungen, Kompositionshilfslinien, Empfehlungen lokaler Fotospots; Tipps fuer Farbgrading nach der Aufnahme |
|
||||
|
||||
---
|
||||
|
||||
## 8. Koerperliche und geistige Gesundheit
|
||||
|
||||
> 💡 **Kernkonzept**：Gesundheit ist kein Ziel, sondern sanfte Selbstfuersorge
|
||||
|
||||
| Nr. | Szenario-Name | Szenario-Funktion |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | Aktivierer fuer Bewegungsmotivation | Empfiehlt passende Sportarten nach Nutzerzustand, Mikro-Workouts (5 Minuten), gamifizierte Sport-Challenges; soziale Sport-Check-ins |
|
||||
| 2 | Inspirationskueche fuer gesunde Ernaehrung | Erkennt Zutaten im Kuehlschrank, empfiehlt persoenliche Rezepte, analysiert Naehrstoffkombinationen; Step-by-step-Kochanleitung |
|
||||
| 3 | Atmosphaeren-Optimierer fuer Schlafqualitaet | Analysiert Schlaftracking-Daten, generiert Einschlafrituale, empfiehlt Umweltoptimierung (Temperatur/Luftfeuchte/Licht); intelligentes Wecken |
|
||||
| 4 | Guide fuer Koerperwahrnehmung | Fuehrt Body-Scan-Meditation an, verbindet Koerperbereiche mit Emotionen, Uebungen fuer Koerper-Geist-Verbindung; Biofeedback-Visualisierung |
|
||||
| 5 | Erinnerung an Selbstfuersorge | Ueberwacht Arbeitsintensitaet, erinnert regelmaessig an Pausen, empfiehlt Mikro-Selbstfuersorge (Wasser/Stretching/Tiefatmen); Selbstfuersorge-Protokoll |
|
||||
|
||||
---
|
||||
|
||||
## 9. Wissensentdeckung
|
||||
|
||||
> 💡 **Kernkonzept**：Lernen ist ein endloses Abenteuer, Neugier ist der beste Lehrer
|
||||
|
||||
| Nr. | Szenario-Name | Szenario-Funktion |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | Gamifizierter Guide zur Wissensentdeckung | Visualisiert Wissenspunkte als Karte, Lernpfad mit Leveln, Erfolgsabzeichen; AI-Mentor-Rollenspiel |
|
||||
| 2 | Szenario-Partner fuer Sprachenlernen | LLM spielt verschiedene Rollen fuer Dialoge, korrigiert Aussprache, erklaert kulturelle Hintergruende; immersive Szenariosimulation |
|
||||
| 3 | Assistent zur Befriedigung von Neugier | Bindet Wikipedia/Wissensgraphen ein, erklaert komplexe Konzepte verstaendlich, empfiehlt verwandtes Wissen; Neugier-Protokoll |
|
||||
| 4 | Inspirationsgeber fuer Lesenotizen | Analysiert Buchinhalte, extrahiert und verknuepft Standpunkte, empfiehlt Denkperspektiven; Vorlagen und Verschoenerung fuer Lesenotizen |
|
||||
| 5 | Atmosphaeren-Gestalter fuer Wissensaustausch | Erstellt automatisch Wissenskarten, optimiert Share-Texte, verbessert Visuals; Datenfeedback fuer Social Sharing |
|
||||
|
||||
---
|
||||
|
||||
## 10. Beziehungspflege
|
||||
|
||||
> 💡 **Kernkonzept**：Gute Beziehungen brauchen Pflege - aber das muss nicht kompliziert sein
|
||||
|
||||
| Nr. | Szenario-Name | Szenario-Funktion |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | Kommunikationscoach fuer intime Beziehungen | Generiert Vorlagen fuer Gefuehlsausdruck, leitet gewaltfreie Kommunikation an, bietet Formulierungen zur Konfliktloesung; bewertet Beziehungsgesundheit |
|
||||
| 2 | Erinnerungsassistent fuer Familienfuersorge | Erinnerungen an wichtige Daten (Geburtstage/Jahrestage), Vorschlaege fuer Fuersorgeformulierungen, Familienaktivitaeten; erstellt Familienalben |
|
||||
| 3 | Atmosphaeren-Gestalter fuer Freundschaftspflege | Protokolliert Freundesinteraktionen, empfiehlt gemeinsame Themen, organisiert Remote-Treffen; Freundschafts-Timeline und Erinnerungsgenerierung |
|
||||
| 4 | Planer fuer Gestandnisse und Ueberraschungen | Generiert persoenliche Ueberraschungsplaene, empfiehlt Geschenke und romantische Formulierungen; Zeitplan und Erinnerungen fuer die Umsetzung |
|
||||
| 5 | Guide zur Konfliktentschaerfung | Formulierungen zur emotionalen Abkuehlung, Perspektivwechsel-Anleitung, Schritte zur Versoehnung; Tracking der Beziehungsreparatur |
|
||||
|
||||
---
|
||||
|
||||
## 11. Haustier-Begleitung
|
||||
|
||||
> 💡 **Kernkonzept**：Haustiere sind Familie, ihre Begleitung verdient es, festgehalten zu werden
|
||||
|
||||
| Nr. | Szenario-Name | Szenario-Funktion |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | Anthropomorphes Haustier-Tagebuch | Analysiert Haustierverhalten, generiert Tagebucheintraege in Ich-Perspektive, ordnet Fotos automatisch zu; Haustier-"Freundeskreis" |
|
||||
| 2 | Deuter fuer Haustierverhalten | Analysiert Videos von Haustierverhalten, Gesundheitswarnungen, Trainingstipps; Wissensbasis zu Rassemerkmalen |
|
||||
| 3 | Planer fuer gemeinsame Haustierzeit | Aktivitaetsempfehlungen fuer Haustiere, DIY-Spielzeuganleitungen, haustierfreundliche Orte; Haustier-Social-Matching |
|
||||
| 4 | Generator fuer Haustier-Erinnerungsgeschichten | Waehlt Fotos und Videos aus, generiert Timeline-Geschichten, kombiniert passende Musik; automatische Erstellung von Erinnerungsalbum/-video |
|
||||
| 5 | Beruhigender Guide fuer neue Haustierhalter | Phasenweiser Pflegeguide, FAQ, Umgang mit Notfaellen; Community-Support fuer Einsteiger |
|
||||
|
||||
---
|
||||
|
||||
## 12. Finanzielle Gesundheit
|
||||
|
||||
> 💡 **Kernkonzept**：Finanzielle Freiheit ist nicht das Ziel - finanzielle Gesundheit schon
|
||||
|
||||
| Nr. | Szenario-Name | Szenario-Funktion |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | Assistent fuer Konsum-Emotionsbewusstsein | Analysiert Konsumaufzeichnungen und Emotion-Konsum-Zusammenhaenge, warnt vor Impulskaeufen; empfiehlt alternative Formen der Befriedigung |
|
||||
| 2 | Visuelle Motivation fuer Sparziele | Visualisiert Ziel-Fortschritt, rendert Traumszenen, feiert Meilensteine; Spiel zum Aufbau von Spargewohnheiten |
|
||||
| 3 | Finanzwissen leicht gelernt | Liefert Wissen in kleinen Einheiten, szenariobasierte Fallbeispiele, interaktive Q&A; Wissenstests und Zertifikate |
|
||||
| 4 | Beruhiger fuer Finanzangst | Bewertet finanzielle Gesundheit, Stressmanagement-Techniken, kleine Handlungsplaene; finanzpsychologische Beratung |
|
||||
| 5 | Spiel fuer Kleininvestment-Erfahrung | Virtuelle Investmentsimulation, Risikoaufklaerung, Portfolio-Spiel; Anleitung zu echten Kleininvestitionen |
|
||||
|
||||
---
|
||||
|
||||
## 13. Karriereentwicklung
|
||||
|
||||
> 💡 **Kernkonzept**：Karriere ist kein Schienenstrang, sondern eine Wildnis zum Erkunden
|
||||
|
||||
| Nr. | Szenario-Name | Szenario-Funktion |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | Begleiter bei beruflicher Orientierungslosigkeit | Berufliches Interessensassessment, Kompetenzinventar, Brancheninformationen; Dialog mit Karrierementor |
|
||||
| 2 | Aktivierer fuer berufliches Erfolgserleben | Dokumentiert Arbeitsergebnisse, extrahiert Wert, visualisiert Erfolge; sammelt positives Feedback von Kollegen/Kunden |
|
||||
| 3 | Assistent fuer Workplace-Social-Atmosphaere | Empfiehlt berufliche Gespraechsthemen, Networking-Techniken, Branchenveranstaltungen; optimiert LinkedIn-Inhalte |
|
||||
| 4 | Inspirationsgeber fuer Nebenprojekte | Matching von Faehigkeiten, Interessen und Marktnachfrage, Nebenprojekt-Fallbibliothek, Startguide; Side-Project-Community |
|
||||
| 5 | Confidence-Booster vor Vorstellungsgespraechen | Simulierte Interviews, Vorbereitung haeufiger Fragen, Techniken zur Staerkung von Selbstvertrauen; Image-Tipps |
|
||||
|
||||
---
|
||||
|
||||
## 14. Wohnraum
|
||||
|
||||
> 💡 **Kernkonzept**：Zuhause ist nicht nur ein Wohnort, sondern ein Zufluchtsort der Seele
|
||||
|
||||
| Nr. | Szenario-Name | Szenario-Funktion |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | Atmosphaeren-Designer fuer Wohnraeume | Analysiert Raumfotos, empfiehlt Stile, Moebel und Dekoration; AR-Vorschau des Effekts |
|
||||
| 2 | Guide fuer saisonale Wohnraumveraenderung | Empfiehlt saisonale Themen, Aufbewahrungs- und Praesentationsideen, Festtagsdeko; erstellt Einkaufsliste |
|
||||
| 3 | Magie fuer kleine Wohnungen | Raumoptimierungsalgorithmus, Empfehlungen fuer Multifunktionsmoebel, Aufbewahrungstipps; visuelle Raumvergroesserung |
|
||||
| 4 | Gestalter von Wohnritualen | Designt Alltagsrituale (Morgen/Abend/Wochenende), erinnert an Ausfuehrung; Feedback zur Ritualwirkung |
|
||||
| 5 | Psychologische Begleitung beim Ausmisten | Bewertet emotionalen Wert von Gegenstaenden, fuehrt durch Ausmist-Schritte, psychologische Unterstuetzung; Spenden-/Recyclingkanaele |
|
||||
|
||||
---
|
||||
|
||||
## 15. Kulinarik
|
||||
|
||||
> 💡 **Kernkonzept**：Essen ist die Sprache der Liebe, Kochen ist eine Art der Liebeserforschung
|
||||
|
||||
| Nr. | Szenario-Name | Szenario-Funktion |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | Heilende Solo-Mahlzeiten | Erkennt Kuehlschrankzutaten, empfiehlt einfache Rezepte, Step-by-step-Anleitung; Aesthetik fuer Solo-Plating |
|
||||
| 2 | Atmosphaerendesign fuer Festtafeln | Festtagsmenues, Tischdeko-Plaene, Atmosphaeren-Tipps; Optimierung der Gaesteerfahrung |
|
||||
| 3 | Koch-Stimmungs-Matcher | Algorithmus fuer Stimmung-Essen-Zusammenhaenge, Rezepte zur Emotionsregulation, Comfort-Food-Empfehlungen; Kochtherapie-Anleitung |
|
||||
| 4 | Vertrauensaufbau fuer Kochanfaenger | Supereinfache Rezepte, Rettungstipps bei Fehlern, Formulierungen fuer Selbstvertrauen; schrittweise Steigerung der Schwierigkeit |
|
||||
| 5 | Atmosphaeren-Guide fuer Food-Fotografie | Plating-Tipps, Nutzung von Naturlicht, Aufnahmewinkel; Filter- und Nachbearbeitungstipps |
|
||||
|
||||
---
|
||||
|
||||
## 16. Mode und Stil
|
||||
|
||||
> 💡 **Kernkonzept**：Mode ist Selbstdarstellung, Stil ist der sichtbare Ausdruck des Inneren
|
||||
|
||||
| Nr. | Szenario-Name | Szenario-Funktion |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | Outfit-Moodboard des Tages | Kombinierte Empfehlungen nach Wetter/Anlass/Stimmung, virtuelle Anprobe, Styling-Inspiration; Kleiderschrankverwaltung |
|
||||
| 2 | Capsule-Wardrobe-Stylist | Kleiderschrank-Inventar, Kombinationssets fuer Einzelteile, One-piece-multiple-looks; Einkaufstipps zum Schliessen von Luecken |
|
||||
| 3 | Reise zur Entdeckung des persoenlichen Stils | Stiltest, Referenz-Icon-Empfehlungen, Pfad der Stilentwicklung; Aufbau von Selbstvertrauen |
|
||||
| 4 | Kreativer fuer neue Looks aus alter Kleidung | Upcycling-Inspiration, neue Kombinationsweisen, Akzentuierung mit Accessoires; nachhaltige Modephilosophie |
|
||||
| 5 | Stylingberater fuer besondere Anlaesse | Deutet Dresscodes, generiert Stylingplaene, Make-up- und Frisurvorschlaege; stimmige Gesamtkoordination |
|
||||
|
||||
---
|
||||
|
||||
## Kernprinzipien fuer C-End-Produktdesign
|
||||
|
||||
### 1. Von "Funktion" zu "Gefuehl"
|
||||
|
||||
B-End-Produkte fragen: "Welches Problem loest diese Funktion?" C-End-Produkte fragen: "Welches Gefuehl erzeugt diese Funktion?"
|
||||
|
||||
| B-End-Denken | C-End-Denken |
|
||||
|---------|---------|
|
||||
| Effizienz steigern | Zeit fuer die Dinge sparen, die man liebt |
|
||||
| Kosten senken | Jeden Cent wertvoll ausgeben |
|
||||
| Schmerzpunkte loesen | Schoene Erlebnisse schaffen |
|
||||
| Vollstaendige Funktionalitaet | Stimmung passt |
|
||||
|
||||
### 2. Drei Ebenen der Atmosphaere-Gestaltung
|
||||
|
||||
**Sinnesebene**: Gestaltung von Sehen, Hoeren und Fuehlen
|
||||
- Waerme Farben
|
||||
- Beruhigende Geraeusche
|
||||
- Fliessende Animationen
|
||||
|
||||
**Emotionale Ebene**: Resonanz und Fuehrung von Emotionen
|
||||
- Die Stimmung des Nutzers verstehen
|
||||
- Emotionale Unterstuetzung bieten
|
||||
- Positive Emotionen erzeugen
|
||||
|
||||
**Bedeutungsebene**: Anerkennung von Wert und Zugehoerigkeit
|
||||
- Nutzer fuehlen sich verstanden
|
||||
- Zugehoerigkeitsgefuehl schaffen
|
||||
- Handlungen Sinn verleihen
|
||||
|
||||
### 3. Die Kraft psychologischer Suggestion
|
||||
|
||||
C-End-Produkte vermitteln durch Text und Design psychologische Suggestionen:
|
||||
|
||||
- **Positive Suggestion**: "Du machst das schon gut", "Geh langsam vor, das ist in Ordnung"
|
||||
- **Zugehoerigkeits-Suggestion**: "Viele Menschen fuehlen wie du", "Du bist nicht allein"
|
||||
- **Wachstums-Suggestion**: "Jeder Versuch ist Fortschritt", "Du wirst besser"
|
||||
|
||||
### 4. Nutzer zu einer besseren Version ihrer selbst machen
|
||||
|
||||
Die besten C-End-Produkte aendern Nutzer nicht, sondern helfen ihnen, die Person zu werden, die sie sein moechten.
|
||||
|
||||
- Nicht "du solltest...", sondern "du kannst..."
|
||||
- Nicht "du musst...", sondern "wenn du moechtest..."
|
||||
- Nicht "du bist noch nicht genug...", sondern "du hast bereits..."
|
||||
|
||||
---
|
||||
|
||||
> 🌟 **Merke**: C-End-Nutzer kaufen keine Funktionen, sondern Gefuehle; keine Werkzeuge, sondern Begleitung; keine Services, sondern Verstaendnis.
|
||||
@@ -0,0 +1,232 @@
|
||||
---
|
||||
title: 'C-End Szenarien - Inspirationsreferenz'
|
||||
description: 'Ideenpool fuer LLM-Anwendungen im Konsumentenbereich: Lifestyle, Emotion, Unterhaltung, Wachstum und mehr. Fokus: Gefuehl, Atmosphaere und geringe Friktion.'
|
||||
---
|
||||
|
||||
<script setup>
|
||||
import { computed, ref } from 'vue'
|
||||
|
||||
const duration = 'ca. <strong>4 Stunden</strong>'
|
||||
|
||||
const vibePoint = ref('')
|
||||
const feeling = ref('')
|
||||
|
||||
// Themenpool pro Kategorie: Fokus auf Gefuehl, Atmosphaere, psychologische Suggestion.
|
||||
const topicPool = {
|
||||
lifestyle: [
|
||||
{ title: 'Morgenritual-Aktivierer', desc: 'Erstellt persoenliche Morgenrituale basierend auf Wetter, Terminen und Stimmung' },
|
||||
{ title: 'Wohlfuehl-Atmosphaere fuer Single-Haushalte', desc: 'Gestaltet Wohlfuehl-Ambiente mit Licht, Musik und Duft-Kombinationen' }
|
||||
],
|
||||
emotion: [
|
||||
{ title: 'Nachtlicher Zuhoerer', desc: '24/7 verfuegbarer emotionaler Zuhoerer ohne Wertung' },
|
||||
{ title: 'Angstbewaeltigungs-Atemtrainer', desc: 'Fuehrt durch Atemuebungen und Achtsamkeit, wenn Stress hoch ist' }
|
||||
],
|
||||
entertainment: [
|
||||
{ title: 'Immersives Mystery-Adventure', desc: 'Interaktives Story-Spiel, das sich an Entscheidungen erinnert' },
|
||||
{ title: 'Personalisierter Podcast-Generator', desc: 'Erstellt kurze Audio-Snacks aus deinen Themen und Quellen' }
|
||||
],
|
||||
growth: [
|
||||
{ title: 'Gamifizierter Gewohnheits-Coach', desc: 'Verwandelt Gewohnheiten in ein motivierendes Quest-System' },
|
||||
{ title: 'Persoenlicher Lern-Sparringspartner', desc: 'Hilft beim Lernen, fragt ab und baut einen Plan aus deinem Ziel' }
|
||||
],
|
||||
social: [
|
||||
{ title: 'Eisbrecher-Thema-Generator', desc: 'Gibt passende Themen fuer Dates, Dinner oder Team-Events' },
|
||||
{ title: 'Social-Media-Copywriter', desc: 'Formuliert Posts im passenden Ton aus Foto + Kontext' }
|
||||
],
|
||||
travel: [
|
||||
{ title: 'City-Walk-Entdeckerfuehrer', desc: 'Walks wie ein Local: Routen, Spots, Timing, kleine Geschichten' },
|
||||
{ title: 'Reise-Tagebuch-Generator', desc: 'Macht aus Notizen/Fotos einen schoen strukturierten Reisebericht' }
|
||||
],
|
||||
health: [
|
||||
{ title: 'Schlafqualitaet-Optimierer', desc: 'Baut eine Schlafroutine aus Licht, Sound, Atem und Gewohnheiten' },
|
||||
{ title: 'Gesunde-Kueche-Inspiration', desc: 'Rezepte nach Stimmung, Zeit, Zutaten und Ziel (z.B. leicht/satt)' }
|
||||
]
|
||||
}
|
||||
|
||||
// Vordefinierte Empfehlungspfade (VibePoint + Feeling -> Kategorien).
|
||||
const recommendationMap = [
|
||||
{ vibe: 'healing', feeling: 'calm', picks: ['emotion', 'health', 'lifestyle'] },
|
||||
{ vibe: 'growth', feeling: 'focused', picks: ['growth', 'learning', 'lifestyle'] },
|
||||
{ vibe: 'social', feeling: 'connected', picks: ['social', 'entertainment', 'lifestyle'] },
|
||||
{ vibe: 'explore', feeling: 'curious', picks: ['travel', 'entertainment', 'learning'] },
|
||||
{ vibe: 'daily', feeling: 'light', picks: ['lifestyle', 'health', 'social'] }
|
||||
]
|
||||
|
||||
const categories = [
|
||||
{ key: 'lifestyle', name: 'Lebensstil', anchor: '#_1-lebensstil' },
|
||||
{ key: 'emotion', name: 'Emotionale Begleitung', anchor: '#_2-emotion' },
|
||||
{ key: 'entertainment', name: 'Unterhaltung', anchor: '#_3-unterhaltung' },
|
||||
{ key: 'growth', name: 'Persoenliches Wachstum', anchor: '#_4-wachstum' },
|
||||
{ key: 'social', name: 'Soziale Interaktion', anchor: '#_5-sozial' },
|
||||
{ key: 'travel', name: 'Reiseerfahrung', anchor: '#_6-reise' },
|
||||
{ key: 'health', name: 'Gesundheit', anchor: '#_7-gesundheit' }
|
||||
]
|
||||
|
||||
function pickTopics(keys) {
|
||||
const results = []
|
||||
for (const key of keys) {
|
||||
const pool = topicPool[key] || []
|
||||
if (pool.length === 0) continue
|
||||
// 1-2 zufaellige Themen je Kategorie.
|
||||
const count = Math.min(pool.length, Math.random() > 0.6 ? 2 : 1)
|
||||
const shuffled = [...pool].sort(() => Math.random() - 0.5)
|
||||
results.push(...shuffled.slice(0, count).map((t) => ({ ...t, category: key })))
|
||||
}
|
||||
return results.slice(0, 8)
|
||||
}
|
||||
|
||||
const recommended = computed(() => {
|
||||
const v = vibePoint.value.trim()
|
||||
const f = feeling.value.trim()
|
||||
const match =
|
||||
recommendationMap.find((x) => x.vibe === v && x.feeling === f) ||
|
||||
recommendationMap.find((x) => x.vibe === v) ||
|
||||
recommendationMap.find((x) => x.feeling === f)
|
||||
const picks = match?.picks?.filter((k) => k in topicPool) || ['lifestyle', 'emotion', 'growth']
|
||||
return pickTopics(picks)
|
||||
})
|
||||
|
||||
function scrollToAnchor(anchor) {
|
||||
if (!anchor) return
|
||||
const id = anchor.replace(/^#/, '')
|
||||
const el = document.getElementById(id)
|
||||
if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' })
|
||||
}
|
||||
</script>
|
||||
|
||||
# C-End Szenarien - Inspirationsreferenz
|
||||
|
||||
<ChapterIntroduction :duration="duration" :tags="['C-End', 'Szenarien', 'Inspiration', 'Atmosphaere']" coreOutput="Eine priorisierte Ideenliste" expectedOutput="3-5 lohnende Startpunkte">
|
||||
|
||||
Dieses Dokument ist eine Inspirationssammlung fuer Konsumenten-Apps. Der Fokus liegt nicht nur auf "Funktionen", sondern auf <strong>Gefuehl</strong> und <strong>Atmosphaere</strong>: Warum wuerde jemand wiederkommen? Welche Emotion wird gestaerkt? Welche Friktion wird entfernt?
|
||||
|
||||
</ChapterIntroduction>
|
||||
|
||||
## Schnell-Generator (optional)
|
||||
|
||||
Waehle einen Vibe und ein Feeling. Du bekommst ein paar zufaellige Ideen zum Start.
|
||||
|
||||
<div class="vp-doc" style="display: grid; gap: 12px; grid-template-columns: 1fr 1fr; align-items: end;">
|
||||
<div>
|
||||
<label style="display: block; font-weight: 600; margin-bottom: 6px;">VibePoint</label>
|
||||
<select v-model="vibePoint" style="width: 100%; padding: 8px;">
|
||||
<option value="">(frei)</option>
|
||||
<option value="healing">healing</option>
|
||||
<option value="growth">growth</option>
|
||||
<option value="social">social</option>
|
||||
<option value="explore">explore</option>
|
||||
<option value="daily">daily</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label style="display: block; font-weight: 600; margin-bottom: 6px;">Feeling</label>
|
||||
<select v-model="feeling" style="width: 100%; padding: 8px;">
|
||||
<option value="">(frei)</option>
|
||||
<option value="calm">calm</option>
|
||||
<option value="focused">focused</option>
|
||||
<option value="connected">connected</option>
|
||||
<option value="curious">curious</option>
|
||||
<option value="light">light</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="margin-top: 12px;">
|
||||
<div style="display: flex; gap: 8px; flex-wrap: wrap;">
|
||||
<button v-for="c in categories" :key="c.key" class="VPButton medium" type="button" @click="scrollToAnchor(c.anchor)">
|
||||
{{ c.name }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="recommended.length" style="margin-top: 16px;">
|
||||
<h3>Empfehlungen</h3>
|
||||
<ul>
|
||||
<li v-for="(t, idx) in recommended" :key="idx">
|
||||
<strong>{{ t.title }}</strong>: {{ t.desc }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
---
|
||||
|
||||
## 1. Lebensstil
|
||||
|
||||
### 1.1 Morgenritual-Aktivierer
|
||||
|
||||
Ein kleiner Begleiter, der morgens aus Wetter, Kalender und Stimmung eine Mini-Routine baut (5-10 Minuten) und den Start in den Tag leichter macht.
|
||||
|
||||
### 1.2 Wohlfuehl-Atmosphaere fuer Single-Haushalte
|
||||
|
||||
Licht, Musik, Duft, kurze Impulse. Ziel ist ein spuerbar "waermeres" Zuhause ohne viel Aufwand.
|
||||
|
||||
## 2. Emotion
|
||||
|
||||
### 2.1 Nachtlicher Zuhoerer
|
||||
|
||||
Ein sicherer Raum fuer Gedanken. Keine Bewertung, klare Grenzen, Fokus auf Empathie und Reflexion.
|
||||
|
||||
### 2.2 Angstbewaeltigungs-Atemtrainer
|
||||
|
||||
Wenn Stress hoch ist: Atem, Grounding, kurze Uebungen. Einfach, schnell, wiederholbar.
|
||||
|
||||
## 3. Unterhaltung
|
||||
|
||||
### 3.1 Immersives Mystery-Adventure
|
||||
|
||||
Eine Story, die sich an Entscheidungen erinnert, Charaktere mit Kontinuitaet, kurze Sessions.
|
||||
|
||||
### 3.2 Personalisierter Podcast-Generator
|
||||
|
||||
Taeglicher 5-Minuten-Clip aus deinem Themenmix: Zusammenfassung, Einordnung, naechste Schritte.
|
||||
|
||||
## 4. Wachstum
|
||||
|
||||
### 4.1 Gamifizierter Gewohnheits-Coach
|
||||
|
||||
Quest-System statt ToDo-Liste. Kleine Belohnungen, klare Progression, weniger Schuldgefuehl.
|
||||
|
||||
### 4.2 Lern-Sparringspartner
|
||||
|
||||
Stellt Fragen, baut einen Plan, trackt Fortschritt. Fokus auf "dranbleiben".
|
||||
|
||||
## 5. Sozial
|
||||
|
||||
### 5.1 Eisbrecher-Thema-Generator
|
||||
|
||||
Passende Themen fuer Situationen (Date, Team-Dinner, Networking) plus kurze Follow-ups.
|
||||
|
||||
### 5.2 Social-Media-Copywriter
|
||||
|
||||
Aus Foto + Kontext -> 3 Textvarianten in unterschiedlichem Ton (locker, sachlich, poetisch).
|
||||
|
||||
## 6. Reise
|
||||
|
||||
### 6.1 City-Walk-Entdeckerfuehrer
|
||||
|
||||
Routen mit Timing (Sonne/Andrang), kleine Geschichten und "warum genau hier".
|
||||
|
||||
### 6.2 Reise-Tagebuch-Generator
|
||||
|
||||
Aus Notizen/Fotos -> ein sauberer Bericht, inklusive Highlights und Learnings.
|
||||
|
||||
## 7. Gesundheit
|
||||
|
||||
### 7.1 Schlafqualitaet-Optimierer
|
||||
|
||||
Routine, Umgebung, kleine Schritte. Fokus: weniger Friktion, mehr Kontinuitaet.
|
||||
|
||||
### 7.2 Gesunde-Kueche-Inspiration
|
||||
|
||||
Rezepte nach Zeit, Zutaten und Ziel. Einfach starten, nicht ueberfordern.
|
||||
|
||||
---
|
||||
|
||||
## Notizen zum Produktdenken fuer C-End
|
||||
|
||||
1. Nutzer kaufen selten "Funktionen". Sie kaufen Gefuehl: Sicherheit, Ruhe, Zugehoerigkeit, Neugier, Kontrolle.
|
||||
2. Gute C-End Produkte sind leicht, ritualisierbar und liefern schnell einen kleinen Nutzen.
|
||||
3. Copy und UI transportieren Suggestion: "Du bist nicht allein", "Das ist machbar", "Du machst Fortschritt".
|
||||
|
||||
<RelatedArticlesSection />
|
||||
|
||||
@@ -0,0 +1,544 @@
|
||||
---
|
||||
title: 'Double-Diamond-Modell: Erst das Richtige tun, dann die Dinge richtig tun'
|
||||
description: 'Ein Einführungsartikel zum Double-Diamond-Modell für Einsteiger. Verstehen Sie die vier Phasen Discover, Define, Develop und Deliver und vermeiden Sie es, voreilig Prototypen zu erstellen, bevor das Problem klar ist.'
|
||||
---
|
||||
|
||||
<script setup>
|
||||
const duration = 'Etwa <strong>1,5 Stunden</strong>'
|
||||
</script>
|
||||
|
||||
# Double-Diamond-Modell: Erst das Richtige tun, dann die Dinge richtig tun
|
||||
|
||||
<a id="top-dd"></a>
|
||||
|
||||
## Kapitelübersicht
|
||||
|
||||
<ChapterIntroduction
|
||||
:duration="duration"
|
||||
:tags="['Double Diamond', 'Design Thinking', 'Anforderungsanalyse', 'Lösungsdesign']"
|
||||
coreOutput="1 klarere Problemdefinition und 1 geeigneterer Validierungsansatz"
|
||||
expectedOutput="Nicht mehr sofort Prototypen zeichnen, sondern erst das Problem durchdenken und dann Lösungen vergleichen"
|
||||
>
|
||||
|
||||
Viele Menschen, die zum ersten Mal ein Produkt entwickeln, fallen nicht in die Falle "nicht hart genug gearbeitet", sondern in die, zu schnell in die Lösung einzusteigen.
|
||||
|
||||
Sobald eine Richtung im Kopf auftaucht, beginnen sie darüber nachzudenken, wie die Seiten aussehen sollen, wo die Buttons hingehören, ob sie AI integrieren sollten, ob sie eine Login-Registrierung brauchen und welches Tool für den Prototyp geeignet ist. Nach all der Arbeit stellen sie fest, dass die grundlegendste Frage überhaupt nicht geklärt ist: Hat der Nutzer wirklich dieses Problem? Lohnt es sich, dieses Problem jetzt zu lösen? Sie dachten, sie würden das Projekt vorantreiben, aber eigentlich beschleunigen sie nur in die falsche Richtung.
|
||||
|
||||
Das Double-Diamond-Modell wurde genau entwickelt, um diese Situation zu vermeiden.
|
||||
|
||||
Seine wertvollste Erinnerung ist: **"Die richtigen Dinge tun" und "die Dinge richtig tun" sind zwei völlig verschiedene Phasen.** Wenn Sie noch nicht einmal das Problem verstanden haben und schon eilig einen Prototypen erstellen, machen Sie meist nur die falsche Richtung vollständiger.
|
||||
|
||||
</ChapterIntroduction>
|
||||
|
||||
::: info Minimales SOP
|
||||
**Ziel**: Nach dem Lesen wissen Sie besser, wann Sie zuerst über das Problem nachdenken sollten und wann es an der Zeit ist, Lösungen und Prototypen zu entwerfen. So vermeiden Sie es, von Anfang an sehr fleißig in die falsche Richtung zu arbeiten.
|
||||
|
||||
**Aktionspunkte**: Gehen Sie nacheinander die vier Schritte `Discover → Define → Develop → Deliver` durch und tun Sie in jedem Schritt nur das, was in dieser Phase ansteht.
|
||||
|
||||
**Ergebnis**: Sie erhalten eine klarere Problemdefinition, mehrere vergleichbare Lösungen und eine überprüfbare minimale Version.
|
||||
|
||||
**Stichwortsprünge**: [Was ist das Double-Diamond-Modell](#dd-what) · [Erste Diamant](#dd-first) · [Wie AI Ihnen hilft](#dd-ai)
|
||||
:::
|
||||
|
||||
## Was Sie lernen werden
|
||||
|
||||
1. Was das Double-Diamond-Modell ist und warum es sich für Einsteiger in der Produktentwicklung eignet
|
||||
2. Was die vier Phasen Discover, Define, Develop und Deliver jeweils bewirken
|
||||
3. Wie man unterscheidet: "Soll ich weiter divergieren?" oder "Soll ich jetzt konvergieren?"
|
||||
4. Wie man das Double-Diamond-Modell bei AI-Produkten, Prototyp-Design und Anforderungsvalidierung einsetzt
|
||||
|
||||
<a id="dd-what"></a>
|
||||
## [1. Was ist das Double-Diamond-Modell überhaupt?](#top-dd)
|
||||
|
||||
Das Double-Diamond-Modell ist ein klassischer Designprozess-Rahmen, der vom britischen **Design Council** popularisiert wurde. Es stellt einen vollständigen Design- und Innovationsprozess als zwei aufeinanderfolgende Diamanten dar.
|
||||
|
||||
Warum "Diamanten"? Weil jeder Diamant zwei entgegengesetzte, aber gleichermaßen wichtige Aktionen enthält:
|
||||
|
||||
- **Divergieren**: Zunächst den Horizont erweitern und mehr Möglichkeiten betrachten
|
||||
- **Konvergieren**: Dann den Bereich verengen, Entscheidungen treffen und Prioritäten setzen
|
||||
|
||||
Der gesamte Prozess besteht aus vier Schritten:
|
||||
|
||||
1. **Discover**: Nutzer, Probleme, Umfeld und Markt umfassend verstehen
|
||||
2. **Define**: Aus den vielen Informationen das wirklich löswerte Kernproblem herausfiltern
|
||||
3. **Develop**: Mehrere Lösungsansätze um das Kernproblem divergieren
|
||||
4. **Deliver**: Auswählen, Prototypen erstellen, testen und die geeignetste Lösung liefern
|
||||
|
||||
Wenn man diese vier Schritte auf einen einprägsamen Satz komprimiert:
|
||||
|
||||
- **Erster Diamant**: Zunächst klären, welches Problem überhaupt gelöst werden soll
|
||||
- **Zweiter Diamant**: Dann entscheiden, mit welchem Ansatz es gelöst werden soll
|
||||
|
||||
Das lässt sich auch so ausdrücken:
|
||||
|
||||
- **Erster Diamant: Die richtigen Dinge tun**
|
||||
- **Zweiter Diamant: Die Dinge richtig tun**
|
||||
|
||||
## 2. Warum das Double-Diamond-Modell besonders für Einsteiger geeignet ist
|
||||
|
||||
Der typische Rhythmus von Einsteigern bei der Produktentwicklung sieht oft so aus:
|
||||
|
||||
- Eine Idee kommt auf
|
||||
- Man findet die Richtung toll
|
||||
- Sofort Prototypen zeichnen
|
||||
- Beim Erstellen werden es immer mehr Funktionen
|
||||
- Am Ende weiß man nicht mehr, welches Problem man eigentlich löst
|
||||
|
||||
Der Wert des Double-Diamond-Modells liegt nicht darin, den Prozess komplizierter zu machen, sondern darin, **"das Problem verstehen" und "die Lösung entwerfen" voneinander zu trennen**.
|
||||
|
||||
Das klingt banal, ist aber in der Praxis äußerst wichtig. Denn viele gescheiterte Produkte scheitern nicht an mangelndem Engagement, sondern daran, dass:
|
||||
|
||||
- Das falsche Problem gewählt wurde
|
||||
- Die Nutzer missverstanden wurden
|
||||
- Zu früh eine Lösung festgelegt wurde
|
||||
- Viel Zeit in Detailveredelung investiert wurde, ohne die Richtung zu validieren
|
||||
|
||||
Das Double-Diamond-Modell erinnert Sie ständig daran:
|
||||
|
||||
- Nicht davon ausgehen, dass das Problem bereits geklärt ist, nur weil die Idee naheliegt
|
||||
- Nicht davon ausgehen, dass die Lösung es wert ist, umgesetzt zu werden, nur weil sie machbar ist
|
||||
- Nicht davon ausgehen, dass die Nutzer sie wirklich brauchen, nur weil der Prototyp komplett aussieht
|
||||
|
||||
<a id="dd-first"></a>
|
||||
## [3. Erster Diamant: Die richtigen Dinge tun](#top-dd)
|
||||
|
||||
Der erste Diamant konzentriert sich auf **das Problem selbst**, nicht auf die Lösung.
|
||||
|
||||
Man kann ihn in einem Satz zusammenfassen: **Nicht sofort loslegen, sondern zuerst klären, ob es sich überhaupt lohnt.**
|
||||
|
||||
### 3.1 Discover: Zunächst den Problemraum öffnen
|
||||
|
||||
Die Kernaufgabe der Discover-Phase ist **umfassende Recherche, keine schnellen Schlüsse**.
|
||||
|
||||
Typische Tätigkeiten in diesem Schritt:
|
||||
|
||||
- Beobachten, wie Nutzer in echten Szenarien agieren
|
||||
- Potenzielle Nutzer interviewen und herausfinden, wann sie zuletzt ein Problem hatten
|
||||
- Beobachten, wie sie sich aktuell behelfen
|
||||
- Wettbewerbs- und Alternativlösungen analysieren
|
||||
- Markt-, Prozess-, Restriktions- und Wertschöpfungsinformationen sammeln
|
||||
|
||||
Viele glauben, Discover bedeute einfach "mehr Material lesen". Wichtiger ist jedoch: **Sie müssen Menschen und Szenarien verstehen, nicht nur Informationen sammeln.**
|
||||
|
||||
Wenn Sie beispielsweise ein Tool entwickeln möchten, das "AI beim Erstellen von Meeting-Protokollen hilft", sollten Sie in der Discover-Phase vor allem Folgendes klären:
|
||||
|
||||
- Was Nutzer nach Meetings am meisten belastet
|
||||
- Ist das Aufzeichnen das Problem, das Zusammenfassen oder das Weiterleiten
|
||||
- Schreiben sie selbst, lassen sie Praktikanten schreiben, hören sie Aufnahmen ab oder verzichten sie ganz auf Protokolle
|
||||
- Welche Meeting-Szenarien Protokolle am meisten benötigen und welche überhaupt nicht
|
||||
|
||||
Das wichtigste Ziel dieses Schritts ist nicht, eine Antwort zu finden, sondern **nicht zu früh zu glauben, man hätte bereits die Antwort.**
|
||||
|
||||
### 3.2 Define: Aus den Informationen das Kernproblem destillieren
|
||||
|
||||
Wenn Discover das Öffnen des Horizonts ist, ist Define das Einengen.
|
||||
|
||||
In der Define-Phase geht es nicht darum, alle Beobachtungen zu behalten, sondern zu fragen:
|
||||
|
||||
- Welches Problem ist wirklich am wichtigsten und sollte zuerst gelöst werden
|
||||
- Welches Problem am häufigsten auftritt, am schmerzhaftesten ist und den größten Wert bietet
|
||||
- Auf welches Szenario wir uns in der ersten Version konzentrieren sollten
|
||||
|
||||
Der Kern dieses Schritts besteht darin, ein breites Thema auf eine klare Problemdefinition zu verdichten.
|
||||
|
||||
Vielleicht sagen Sie zunächst:
|
||||
|
||||
> Ich möchte ein AI-Tool entwickeln, das die Meeting-Effizienz steigert.
|
||||
|
||||
In der Define-Phase könnte eine bessere Formulierung lauten:
|
||||
|
||||
> Wir lösen zunächst das Problem, dass Projektteams nach 30 bis 60 Minuten dauernden Kooperationsmeetings nicht in der Lage sind, innerhalb von 10 Minuten ein Protokoll mit Aufgaben, Verantwortlichen und Fristen zu erstellen.
|
||||
|
||||
Jetzt wird das Problem konkreter:
|
||||
|
||||
- Wer sind die Nutzer
|
||||
- Was ist das Szenario
|
||||
- Wo liegt der Engpass
|
||||
- Was ist das Erfolgskriterium
|
||||
|
||||
Das Wesen von Define ist: **Von "es gibt viele Probleme" konvergieren zu "welches Problem lösen wir diesmal zuerst".**
|
||||
|
||||
## 4. Zweiter Diamant: Die Dinge richtig tun
|
||||
|
||||
Erst wenn der erste Diamant abgeschlossen ist, sollten Sie in den zweiten Diamanten eintreten. Denn jetzt lösen Sie keine vage Richtung mehr, sondern ein konkretes, bereits eingegrenztes Problem.
|
||||
|
||||
### 4.1 Develop: Lösungsansätze um das Kernproblem divergieren
|
||||
|
||||
Der Fokus der Develop-Phase liegt auf **der Exploration mehrerer möglicher Lösungen für dasselbe Problem**.
|
||||
|
||||
Beachten Sie: Diese Divergenz unterscheidet sich von der Discover-Phase.
|
||||
|
||||
- Die Divergenz in Discover erforscht den Problemraum
|
||||
- Die Divergenz in Develop erforscht den Lösungsraum
|
||||
|
||||
Beim Meeting-Protokoll-Beispiel könnten Sie in der Develop-Phase Folgendes in Betracht ziehen:
|
||||
|
||||
- Web-Tool oder Meeting-Plugin
|
||||
- Hochgeladene Audioaufzeichnung nachträglich verarbeiten oder Echtzeit-Mitschrift
|
||||
- Nur Zusammenfassung oder Fokus auf Aufgabenextraktion
|
||||
- Persönliche Effizienz oder Team-Synchronisation betonen
|
||||
- Freie Bearbeitung für Nutzer oder direkte strukturierte Vorlage ausgeben
|
||||
|
||||
Dieser Schritt eignet sich gut für Brainstorming und die Zusammenarbeit im Team.
|
||||
|
||||
Aber es gibt eine Voraussetzung: **Alle Lösungen müssen demselben definierten Problem dienen.**
|
||||
Wenn das Problem nicht klar definiert ist, wird Develop schnell wieder zu einem ungeordneten Sammelsurium von Funktionen.
|
||||
|
||||
### 4.2 Deliver: Lösung auswählen, Prototyp erstellen, testen und liefern
|
||||
|
||||
Deliver ist die Konvergenzphase im zweiten Diamanten.
|
||||
|
||||
Jetzt geht es nicht mehr darum, weiter nachzudenken, sondern zu entscheiden:
|
||||
|
||||
- Welcher Ansatz passt am besten zur aktuellen Phase
|
||||
- Welche Version am kleinsten, aber am nützlichsten ist
|
||||
- Welche Funktionen zuerst entwickelt werden müssen und welche später kommen können
|
||||
- Wie man Prototypen erstellt, testet und in kleinem Rahmen validiert
|
||||
|
||||
Viele glauben, Deliver bedeute einfach "launch". Genauer gesagt bedeutet es: **Eine Lösung in etwas Überprüfbares, Validierbares und Iterierbares verwandeln.**
|
||||
|
||||
Das kann sein:
|
||||
|
||||
- Ein Low-Fidelity-Flussdiagramm
|
||||
- Ein Figma-Prototyp
|
||||
- Ein lauffähiger MVP
|
||||
- Ein kleiner Nutzer-Test
|
||||
- Eine iterative Version nach echtem Feedback
|
||||
|
||||
Der Fokus von Deliver liegt nicht auf "perfekter Auslieferung", sondern darauf, **die Lösung so schnell wie möglich in einer realen Umgebung zu validieren.**
|
||||
|
||||
## 5. Eine einprägsame Übersichtstabelle
|
||||
|
||||
Wenn Sie die vier Phasen immer wieder durcheinanderbringen, merken Sie sich einfach diese Version:
|
||||
|
||||
| Phase | Was Sie tun | Schlüsselwörter | Typische Ergebnisse |
|
||||
| --- | --- | --- | --- |
|
||||
| Discover | Problem verstehen | Recherche, Beobachtung, Interviews, Informationssammlung | Nutzererkenntnisse, Szenarienotizen, Problemliste |
|
||||
| Define | Problem definieren | Destillieren, Fokussieren, Priorisieren, Problem umformulieren | Problemdefinition, Prioritäten, MVP-Ansatz |
|
||||
| Develop | Lösungen erkunden | Brainstorming, Vergleichen, Co-Kreation, Prototyp-Ideen | Lösungsliste, Flussskizzen, Prototyp-Richtung |
|
||||
| Deliver | Lösung validieren | Prototyp, Testen, Iterieren, Ausliefern | Prototyp, Test-Feedback, optimierte Version |
|
||||
|
||||
Noch kompakter:
|
||||
|
||||
- **Discover / Define**: "Die richtigen Dinge tun"
|
||||
- **Develop / Deliver**: "Die Dinge richtig tun"
|
||||
|
||||
## 6. Die häufigsten Missverständnisse zum Double-Diamond-Modell
|
||||
|
||||
### 6.1 Direkt zu Deliver springen, ohne Discover
|
||||
|
||||
Das ist der häufigste Fehler. Viele beginnen sofort mit dem Zeichnen von Prototypen, dem Schreiben von PRDs, dem Anbinden von Modellen und dem Erstellen von Seiten, sobald sie eine Idee haben.
|
||||
|
||||
Das Problem ist nicht, dass Sie nicht fleißig genug arbeiten, sondern dass Sie möglicherweise nicht einmal bestätigt haben, ob sich das Problem überhaupt zu lösen lohnt.
|
||||
|
||||
### 6.2 Lange Discover-Phase, aber nie Define
|
||||
|
||||
Ein anderer Extremfall: ständig recherchieren, Material lesen, Interviews führen, aber sich nicht trauen zu konvergieren.
|
||||
|
||||
Das Double-Diamond-Modell soll Sie nicht endlos divergieren lassen, sondern erinnert Sie: Nach der Divergenz müssen Sie in die Entscheidungs- und Priorisierungsphase übergehen.
|
||||
|
||||
### 6.3 Nach Define das Problem heimlich ändern
|
||||
|
||||
Viele Teams ändern in der Develop-Phase die Problemdefinition, weil ein bestimmter Ansatz einfacher umsetzbar ist.
|
||||
|
||||
Das ist gefährlich. Denn Sie lösen möglicherweise gar kein Problem, sondern suchen nur Rechtfertigungen für Ihren bevorzugten Ansatz.
|
||||
|
||||
### 6.4 Deliver als "kompletter Launch" missverstehen
|
||||
|
||||
Deliver bedeutet nicht, dass das fertige Produkt komplett sein muss. Oft ist ein testbarer Prototyp oder eine kleine Nutzererprobung bereits ein gutes Deliverable.
|
||||
|
||||
## 7. Wie das Double-Diamond-Modell bei AI-Produkten eingesetzt wird
|
||||
|
||||
AI-Produkte neigen besonders zur "Fähigkeiten zuerst"-Falle, weil die Modellfähigkeiten so verlockend aussehen. Man möchte direkt darüber nachdenken:
|
||||
|
||||
- Soll ich multimodal integrieren
|
||||
- Soll ich einen Agenten erstellen
|
||||
- Soll ich einen Workflow hinzufügen
|
||||
- Soll ich Sprache, Bilder oder Websuche anbinden
|
||||
|
||||
Das Double-Diamond-Modell zwingt Sie jedoch, zuerst zu fragen:
|
||||
|
||||
- Wo genau hängen die Nutzer fest
|
||||
- Muss dieses Problem zwingend mit AI gelöst werden
|
||||
- Wenn man keine AI verwendet, was genau ist am aktuellen Ansatz am schlechtesten
|
||||
- Wenn AI hinzugefügt wird, was ist der zentrale Fortschritt
|
||||
|
||||
Das hilft Ihnen, eine häufige Situation zu vermeiden: **Starke Fähigkeiten, schwacher Wert.**
|
||||
|
||||
Ein praktischer Ablauf:
|
||||
|
||||
1. In der Discover-Phase beobachten, wie Nutzer Aufgaben aktuell erledigen
|
||||
2. In der Define-Phase das schmerzhafteste Szenario als klare Problemdefinition formulieren
|
||||
3. In der Develop-Phase vergleichen, welche AI-Fähigkeiten am besten zu diesem Problem passen
|
||||
4. In der Deliver-Phase eine Minimalversion erstellen und von echten Nutzern testen lassen
|
||||
|
||||
## 8. Eine direkt anwendbare Double-Diamond-Vorlage
|
||||
|
||||
Wenn Sie an Ihrem eigenen Produkt arbeiten, können Sie in dieser Reihenfolge vorgehen:
|
||||
|
||||
### Discover
|
||||
|
||||
- Wer sind die Nutzer, die ich beobachte?
|
||||
- Wann hatten sie zuletzt dieses Problem?
|
||||
- Wie lösen sie es derzeit?
|
||||
- Was sie am meisten nervt, am langsamsten ist und sie am wenigsten beruhigt?
|
||||
|
||||
### Define
|
||||
|
||||
- Welches dieser Probleme ist am wertvollsten und sollte zuerst gelöst werden?
|
||||
- Welches Szenario ist am häufigsten oder am kritischsten?
|
||||
- Wen und was bedienen wir in der ersten Version ausschließlich?
|
||||
- Wie ändert sich der Nutzerstatus, wenn das Problem erfolgreich gelöst ist?
|
||||
|
||||
### Develop
|
||||
|
||||
- Welche möglichen Lösungen gibt es für dieses Problem?
|
||||
- Welche Lösungen sind am leichtesten, am schnellsten und am einfachsten zu validieren?
|
||||
- Was muss zwingend gemacht werden, was kann später erfolgen?
|
||||
|
||||
### Deliver
|
||||
|
||||
- Was ist das Minimalste, das wir liefern können, um diese Richtung zu validieren?
|
||||
- Ist es ein Flussdiagramm, ein Prototyp oder ein MVP?
|
||||
- Wen müssen wir zum Testen einladen?
|
||||
- Wie entscheiden wir nach dem Test, ob wir weitermachen, ändern oder abbrechen?
|
||||
|
||||
## 9. Ein Beispiel, das auch Einsteiger verstehen
|
||||
|
||||
Angenommen, Sie möchten ein AI-Tool entwickeln, "das Hochschulabsolventen bei der Vorbereitung von Lebensläufen für Bewerbungen hilft".
|
||||
|
||||
Viele würden sofort in den zweiten Diamanten springen und über Folgendes nachdenken:
|
||||
|
||||
- Ein-Klick-Verschönerung
|
||||
- Intelligentes Umschreiben
|
||||
- Automatisches JD-Matching
|
||||
- Generierung von Selbstvorstellungen
|
||||
|
||||
Nach dem Double-Diamond-Modell wäre ein besserer Prozess:
|
||||
|
||||
### Erster Diamant
|
||||
|
||||
**Discover**
|
||||
|
||||
- Mit frischen Absolventen darüber sprechen, wann sie zuletzt einen Lebenslauf geändert haben
|
||||
- Beobachten, wie sie ihren alten Lebenslauf in eine neue Version umwandeln
|
||||
- Verstehen, ob sie am meisten von "nicht wissen, was sie schreiben sollen", "nicht wissen, wie sie ändern sollen" oder "nicht beurteilen können, ob es gut genug ist" betroffen sind
|
||||
|
||||
**Define**
|
||||
|
||||
- Zu einer spezifischeren Problemdefinition konvergieren:
|
||||
- Nicht "Studierende können keine Lebensläufe erstellen"
|
||||
- Sondern "Studierende bei der ersten Bewerbung um ein Praktikum können ihre bisherigen Erfahrungen nicht in Formulierungen umwandeln, die zur Stellenbeschreibung passen, und verzögern deshalb ihre Bewerbung"
|
||||
|
||||
### Zweiter Diamant
|
||||
|
||||
**Develop**
|
||||
|
||||
- Mehrere Lösungsansätze erwägen: Vorlagenbibliothek, AI-Umschreibung, Stellenvergleich, Lebenslauf-Bewertung, Fallbeispiele
|
||||
|
||||
**Deliver**
|
||||
|
||||
- Erste Version nur: "Erfahrungs-Bullet-Points basierend auf der Stellenbeschreibung umschreiben"
|
||||
- 5 Studierenden zum Test geben und prüfen, ob sie schneller die erste Version ihres Lebenslaufs einreichen
|
||||
|
||||
Sie werden feststellen: Wenn der erste Diamant gründlich bearbeitet wurde, wird der zweite viel klarer.
|
||||
|
||||
## 10. Zusammenfassung
|
||||
|
||||
Die größte Stärke des Double-Diamond-Modells liegt darin, ein Chaos in vier klarere Aktionen zu zerlegen:
|
||||
|
||||
- Erst divergieren, um das Problem zu verstehen
|
||||
- Dann konvergieren, um das Problem zu definieren
|
||||
- Dann divergieren, um Lösungen zu erkunden
|
||||
- Schließlich konvergieren, um die Lösung zu liefern
|
||||
|
||||
Es macht Sie nicht langsamer, sondern hilft Ihnen, **viele Umwege zu vermeiden, die beschäftigt aussehen, aber in die falsche Richtung führen.**
|
||||
|
||||
Besonders in der AI-Ära, in der das Erstellen von Dingen immer schneller wird, ist das Double-Diamond-Modell sogar noch wichtiger. Denn wenn "etwas zu bauen" immer einfacher wird, wird die wirklich seltene Fähigkeit: **Lösen Sie ein Problem, das es wert ist, gelöst zu werden, und tun Sie es auf angemessene Weise.**
|
||||
|
||||
Merken Sie sich nur diesen einen Satz:
|
||||
|
||||
**Erst die richtigen Dinge tun, dann die Dinge richtig tun.**
|
||||
|
||||
<a id="dd-ai"></a>
|
||||
## [11. Wie Sie AI nutzen können, um den Double-Diamond-Prozess zu durchlaufen](#top-dd)
|
||||
|
||||
Das Double-Diamond-Modell ist kein AI-Tool, aber AI eignet sich hervorragend als "Beschleuniger" in den vier Phasen. Der Schlüssel liegt nicht darin, AI für Sie entscheiden zu lassen, sondern darin, sie zu nutzen, um Ihren Horizont zu erweitern, Informationen zu ordnen, Lösungen zu vergleichen und Validierungsmaterial zu erstellen.
|
||||
|
||||
### 11.1 In der Discover-Phase: AI für eine erste Informationsgrundlage nutzen
|
||||
|
||||
Vor offiziellen Interviews und Recherche können Sie AI zunächst einen leichten Problemaufklärungsscan durchführen lassen:
|
||||
|
||||
- Welche gängigen Alternativlösungen gibt es auf dem Markt
|
||||
- Worauf Nutzer in öffentlichen Communitys am häufigsten klagen
|
||||
- In welchen Szenarien und bei welchen Zielgruppen dieses Problem auftritt
|
||||
- Was bestehende Produkte übersehen
|
||||
|
||||
Dieser Schritt kann echte Recherche nicht ersetzen, eignet sich aber gut, um schnell eine Problem-Landkarte zu erstellen.
|
||||
|
||||
Ein einfacher Einsteiger-Prompt könnte lauten:
|
||||
|
||||
```text
|
||||
Ich möchte ein Tool entwickeln, das Studierenden beim Umschreiben von Lebensläufen hilft.
|
||||
Bitte schlage nicht sofort Funktionen vor, sondern zeige zuerst, welche Schwierigkeiten in diesem Problem am häufigsten auftreten.
|
||||
```
|
||||
|
||||
AI könnte ausgeben:
|
||||
|
||||
```text
|
||||
Erste Problem-Landkarte:
|
||||
|
||||
1. Man weiß nicht, welche Erfahrungen man erwähnen sollte
|
||||
2. Man weiß nicht, wie man den Lebenslauf auf eine bestimmte Stelle anpasst
|
||||
3. Nach vielen Überarbeitungen ist man sich immer noch nicht sicher, ob es gut genug ist
|
||||
4. Man braucht jemanden zum Gegenlesen, möchte aber nicht ständig um Gefälligkeiten bitten
|
||||
5. Wegen der Unsicherheit verschobt man den Lebenslauf immer wieder
|
||||
```
|
||||
|
||||
Diese Ausgabe soll Ihnen nicht die Entscheidung abnehmen, sondern Ihnen den schnelleren Einstieg in Discover ermöglichen.
|
||||
|
||||
### 11.2 In der Define-Phase: AI beim Konvergieren der Problemdefinition unterstützen
|
||||
|
||||
Nachdem man viele Informationen gesammelt hat, ist das Schwierigste oft, das Problem in einen wirklich klaren Satz zu verdichten. Sie können Ihre Recherche-Notizen an AI übergeben und sie bitten, daraus mehrere Problemdefinitionen zu komprimieren:
|
||||
|
||||
```text
|
||||
Hier sind die Nutzer-Feedbacks und Recherche-Notizen, die ich in der Discover-Phase gesammelt habe:
|
||||
[Inhalt einfügen]
|
||||
|
||||
Bitte hilf mir bei drei Dingen:
|
||||
1. Die häufigsten Problemmuster zusammenfassen
|
||||
2. Nach Häufigkeit, Schmerzintensität und Validierbarkeit 3 priorisierte Probleme identifizieren
|
||||
3. Jedes Problem als konkrete Problemdefinition formulieren
|
||||
```
|
||||
|
||||
So kommen Sie leichter in die Define-Phase, anstatt im Zustand "es gibt so viele Probleme" stecken zu bleiben.
|
||||
|
||||
Sie können die Eingabe auch sehr einfach formulieren:
|
||||
|
||||
```text
|
||||
Die Probleme, die ich bisher gesammelt habe:
|
||||
1. Man weiß nicht, was man im Lebenslauf schreiben soll
|
||||
2. Man weiß nicht, wie man ihn anpasst
|
||||
3. Man hat nie das Gefühl, er sei gut genug, und traut sich nicht, ihn abzuschicken
|
||||
|
||||
Bitte sage mir, welches Problem sich am besten für die erste Version eignet.
|
||||
```
|
||||
|
||||
AI könnte ausgeben:
|
||||
|
||||
```text
|
||||
Empfohlenes Prioritätsproblem:
|
||||
|
||||
"Studierende bei ihrer ersten Praktikumsbewerbung sind sich nicht sicher, ob ihr Lebenslauf bereit zum Abschicken ist, überarbeiten ihn endlos und verschoben die Bewerbung."
|
||||
|
||||
Gründe:
|
||||
1. Dieses Problem ist konkreter
|
||||
2. Es erklärt das Verschleppungsverhalten
|
||||
3. Es ist einfacher, eine kleine Version zur Validierung zu entwerfen
|
||||
```
|
||||
|
||||
Diese Art von Ausgabe ist sehr nützlich, denn sie hilft, aus einer Vielzahl vager Probleme eine Definition herauszudestillieren, die als MVP-Startpunkt dienen kann.
|
||||
|
||||
### 11.3 In der Develop-Phase: AI nutzen, um mehrere Lösungen zu divergieren
|
||||
|
||||
Viele verharren nach der Problemdefinition auf dem ersten Lösungsansatz, der ihnen in den Sinn kommt. AI eignet sich hervorragend dafür, Sie zur Divergenz zu zwingen:
|
||||
|
||||
```text
|
||||
Ich habe ein Kernproblem definiert: [Ihre Problemdefinition]
|
||||
Bitte gib mir nicht sofort eine Endlösung, sondern schlage aus folgenden Perspektiven jeweils 2-3 Lösungsrichtungen vor:
|
||||
1. Das leichtgewichtigste MVP
|
||||
2. Der am besten zur Bedarfsvalidierung geeignete Ansatz
|
||||
3. Der erfahrungssteigernde Ansatz
|
||||
4. Ein Ansatz ohne AI
|
||||
5. Ein Ansatz mit AI
|
||||
Vergleiche schließlich die Vorteile, Risiken und Validierungskosten jedes Ansatzes.
|
||||
```
|
||||
|
||||
So werden Sie nicht zu früh auf einen einzigen Ansatz festgelegt.
|
||||
|
||||
Ein einfacher Prompt könnte lauten:
|
||||
|
||||
```text
|
||||
Meine aktuelle Problemdefinition lautet:
|
||||
"Studierende sind sich nicht sicher, ob ihr Lebenslauf abschickbereit ist, und verschoben ihn deshalb ständig."
|
||||
|
||||
Bitte schlage mir 4 verschiedene Lösungsansätze vor, nicht nur einen.
|
||||
```
|
||||
|
||||
AI könnte ausgeben:
|
||||
|
||||
```text
|
||||
Ansatz 1: Checkliste für abschickbereite Lebensläufe
|
||||
Ansatz 2: Gezieltes Umschreiben basierend auf der Stellenbeschreibung
|
||||
Ansatz 3: Lebenslauf hochladen und Risikohinweise erhalten
|
||||
Ansatz 4: Hervorragende Beispiele zum Vergleich zeigen
|
||||
```
|
||||
|
||||
Jetzt können Sie leichter "Lösungen vergleichen", anstatt von Anfang an nur auf AI-Umschreibung zu starren.
|
||||
|
||||
### 11.4 In der Deliver-Phase: AI beim Generieren von Prototyp-Text und Testmaterial unterstützen
|
||||
|
||||
Wenn Sie in die Deliver-Phase eintreten, ist AI hervorragend dafür geeignet, folgende Aufgaben zu beschleunigen:
|
||||
|
||||
- Seitentexte für Low-Fidelity-Prototypen generieren
|
||||
- Nutzer-Testskripte erstellen
|
||||
- Mehrere vergleichbare Versionen von &Uberschriften, Buttons und Beschreibungen erstellen
|
||||
- Feedback und Problemlisten nach Tests zusammenfassen
|
||||
|
||||
Beispielsweise könnten Sie AI bitten, ein 20-minütiges Nutzer-Testskript zu erstellen oder 5 Nutzer-Feedbacks in "weitermachen / Richtung ändern / pausieren" zu kategorisieren.
|
||||
|
||||
Ein minimaler Prompt könnte lauten:
|
||||
|
||||
```text
|
||||
Ich habe einen einfachen Prototyp erstellt:
|
||||
Der Nutzer lädt einen Lebenslauf hoch und das System zeigt an, welche Stellen noch nicht bewerbungstauglich sind.
|
||||
|
||||
Bitte generiere ein 15-minütiges Nutzer-Testskript.
|
||||
```
|
||||
|
||||
AI könnte ausgeben:
|
||||
|
||||
```text
|
||||
15-minütiges Testskript:
|
||||
|
||||
1. Bitte den Nutzer zunächst, seine letzte Lebenslauferfahrung zu beschreiben
|
||||
2. Den Nutzer den Lebenslauf selbstständig hochladen lassen
|
||||
3. Beobachten, ob er die Feedback-Ergebnisse versteht
|
||||
4. Fragen: Welche Hinweise waren am hilfreichsten, welche verwirrend
|
||||
5. Fragen: Würden Sie das Tool vor der nächsten Bewerbung erneut nutzen
|
||||
```
|
||||
|
||||
Diese Art von Ausgabe ist sehr praktisch, denn sie hilft, von "Ich habe den Prototyp fertig" zu "Wie teste ich als Nächstes" zu gelangen.
|
||||
|
||||
### 11.5 AI als "Phasen-Wächter" einsetzen
|
||||
|
||||
Das häufigste Problem beim Double-Diamond-Modell ist, dass Menschen Phasen überspringen. Sie können AI direkt als Wächter fungieren lassen, der Sie erinnert, wo Sie sich gerade befinden:
|
||||
|
||||
```text
|
||||
Bitte spiele die Rolle eines Produktprozess-Coachs.
|
||||
Hier ist mein aktueller Projektstatus: [Ihre Beschreibung]
|
||||
Bitte beurteile, ob ich mich eher in Discover, Define, Develop oder Deliver befinde.
|
||||
Und sage mir:
|
||||
1. Ob ich zu früh in die nächste Phase gesprungen bin
|
||||
2. Welche Aktion in der aktuellen Phase am wichtigsten nachzuholen ist
|
||||
3. Welche Dinge ich jetzt noch nicht tun sollte
|
||||
```
|
||||
|
||||
Das ist besonders hilfreich für Einsteiger, da man leicht dazu neigt, "Prototypen zu zeichnen, bevor man das Problem durchdacht hat".
|
||||
|
||||
## Assignments
|
||||
|
||||
Bitte bearbeiten Sie die folgenden Aufgaben basierend auf dem obigen Inhalt:
|
||||
|
||||
1. Wählen Sie eine Produktidee, an der Sie kürzlich gedacht haben, und erstellen Sie einen Entwurf für die vier Schritte Discover, Define, Develop, Deliver
|
||||
2. In der Define-Phase: Zwingen Sie sich, das Problem auf einen konkreten Satz zu verdichten
|
||||
3. In der Develop-Phase: Listen Sie mindestens 3 verschiedene Lösungsansätze auf, anstatt nur den ersten Gedanken zu verfolgen
|
||||
4. In der Deliver-Phase: Beschreiben Sie eine minimale validierbare Version, die Sie innerhalb einer Woche liefern können
|
||||
|
||||
## Weiterführende Literatur
|
||||
|
||||
Dieser Artikel bezieht sich hauptsächlich auf die offiziellen Materialien des Design Council zum Double Diamond. Hier sind empfehlenswerte weiterführende Quellen:
|
||||
|
||||
- [Design Council: The Double Diamond](https://www.designcouncil.org.uk/our-resources/the-double-diamond/)
|
||||
- [Design Council: Framework for Innovation](https://www.designcouncil.org.uk/our-work/skills-learning/tools-frameworks/framework-for-innovation-design-councils-evolved-double-diamond/)
|
||||
- [Design Council: History of the Double Diamond](https://www.designcouncil.org.uk/our-resources/the-double-diamond/history-of-the-double-diamond/)
|
||||
@@ -0,0 +1,301 @@
|
||||
---
|
||||
title: 'Woher Ideen finden: 3 beste Referenzquellen für Anfänger'
|
||||
description: 'Ein Ideen-Leitfaden für Einsteiger ohne Vorkenntnisse. Fokussiert auf Websites zum direkten Stöbern, Trends, echte Geschäftsquellen und VC-Listen, um schnell konkretere Richtungen zu finden.'
|
||||
---
|
||||
|
||||
<script setup>
|
||||
const duration = 'Etwa <strong>1,5 Stunden</strong>'
|
||||
</script>
|
||||
|
||||
# Woher Ideen finden: 3 beste Referenzquellen für Anfänger
|
||||
|
||||
<a id="top-idea-sources"></a>
|
||||
|
||||
## Kapitelübersicht
|
||||
|
||||
<ChapterIntroduction
|
||||
:duration="duration"
|
||||
:tags="['Ideen finden', 'Produktrichtung', 'Bedarfsentdeckung', 'Branchenbeobachtung']"
|
||||
coreOutput="Eine konkretere, recherchewürdige Produktrichtung"
|
||||
expectedOutput="Wissen, wo man stöbbern sollte, worauf man achten muss und was man zuerst anschauen sollte -- nicht nur bei 'KI + irgendeine Branche' stehen bleiben"
|
||||
>
|
||||
|
||||
Viele Menschen bleiben beim ersten Schritt stecken, nicht weil sie überhaupt keine Inspiration haben, sondern weil sie nach dem Stöbern vieler Inhalte nur noch Schlagworte im Kopf behalten:
|
||||
|
||||
- AI for education
|
||||
- AI for healthcare
|
||||
- AI for finance
|
||||
- AI agent for business
|
||||
|
||||
Das sind noch keine Ideen. Sie sagen nur "die Richtung ist groß", aber nicht:
|
||||
|
||||
- Wer nutzt es
|
||||
- In welchem Szenario
|
||||
- Wie aktuell behelfsmäßig gearbeitet wird
|
||||
- Welcher Schritt als Erstes sinnvoll ist
|
||||
|
||||
Dieser Artikel verzichtet auf leere Methodik und stellt Ihnen direkt eine Reihe besser nutzbarer Quellen vor.
|
||||
|
||||
</ChapterIntroduction>
|
||||
|
||||
::: info Minimales SOP
|
||||
**Ziel**: Nach dem Lesen wissen Sie, wo Sie zuerst stöbern, wenn Ihnen nichts einfällt, welche Links sich für "konkrete Bedarfe" eignen, welche für Trends und welche für echte Geschäftsszenarien.
|
||||
|
||||
**Aktion**: Zunächst eine Ideenliste stöbern, dann profitable Kleinprodukte ansehen, dann Trends und geschäftsnähere Quellen prüfen, am Ende 1 Richtung behalten, die Sie weiter recherchieren möchten.
|
||||
|
||||
**Ergebnis**: Sie erhalten 1 konkretere, validierungswürdige Richtung statt bei Schlagworten stehen zu bleiben.
|
||||
|
||||
**Stichwortsprünge**: [Referenz-App-Liste](#idea-apps) · [Trend-Quellen](#idea-trends) · [Geschäftsnähere Quellen](#idea-business) · [VC-/Accelerator-Quellen](#idea-vc) · [Kürzester Pfad](#idea-path) · [Wie KI hilft](#idea-ai)
|
||||
:::
|
||||
|
||||
## Was Sie lernen werden
|
||||
|
||||
1. Welche Websites sich zum direkten Ideen-Stöbern eignen
|
||||
2. Welche Websites sich eignen, um bereits profitable Kleinprodukte zu entdecken
|
||||
3. Welche Quellen sich für Trends und Branchenveränderungen eignen
|
||||
4. Welche Quellen näher an echten Geschäften und echten Zahlungen sind
|
||||
5. Ein kürzester Nutzungspfad für Anfänger ohne Vorkenntnisse
|
||||
|
||||
<a id="idea-apps"></a>
|
||||
## [1. Referenz-App-Liste: Zuerst sehen, was andere bereits tun](#top-idea-sources)
|
||||
|
||||
Das ist der beste Ausgangspunkt für Anfänger, weil es am konkretesten ist.
|
||||
|
||||
### Erste Liga: Direkt Ideenlisten öffnen, einfach auswählen
|
||||
|
||||
- [Reddit — r/SomebodyMakeThis](https://www.reddit.com/r/SomebodyMakeThis/)
|
||||
Dieses Subreddit hat den Kernzweck: Echte Nutzer posten direkt "Ich wünsche mir, dass jemand ein XX baut". Jeder Post ist meist ein konkretes Produktbedürfnis, oft mit etwas Szenario-Beschreibung. Sortieren nach `Top -> Past Month` oder `Top -> Past Year`, schon haben Sie in 20 Minuten eine Reihe echter Bedarfe.
|
||||
- [Reddit — r/AppIdeas](https://www.reddit.com/r/AppIdeas/)
|
||||
Ähnlich wie oben, aber eher Software/App-Fokus. Das Beitragsformat ist häufig "Ich brauche eine App, die XX kann" -- kleinteiliger, viele kleine, schöne Nischen.
|
||||
- [Reddit — r/Startup_Ideas](https://www.reddit.com/r/Startup_Ideas/)
|
||||
Vollständiger als die vorherigen. Viele Posts bestehen nicht nur aus einem Satz, sondern enthalten etwas Marktanalyse, Geschäftsmodell und warum es sich jetzt lohnt.
|
||||
- [Unvalidated Ideas](https://unvalidatedideas.com/)
|
||||
Wöchentlich neue, nicht validierte Startup-Ideen, typische Felder sind Zielgruppe, Monetarisierung, erste Validierungsansätze. Einheitliches Format, schnelles Überfliegen.
|
||||
- [IdeasAI](https://ideasai.com/)
|
||||
KI-generierte Startup-Ideen, endlos scrollbar. Qualität schwankend, aber gut, um in der Phase "gar kein Gefühl" Inspiration zu erhalten und dann selbst in Nischenszenarien abzutauchen.
|
||||
|
||||
### Zweite Liga: Bereits profitable Kleinprodukte anderer ansehen, Ideen zurückableiten
|
||||
|
||||
Die Logik dieser Plattformen: Andere haben den Bedarf bereits validiert, verdienen sogar schon Geld. Sie schauen nicht, um zu kopieren, sondern um zu sehen, "welche kleinen Probleme bereits jemand bezahlt".
|
||||
|
||||
- [Starter Story](https://www.starterstory.com/)
|
||||
Viele echte Kleinunternehmer-Case-Studies, oft mit Gründer-Interviews, Umsatzzahlen, Startprozess. Fokus auf Produkte mit 10k bis 100k USD Monatsumsatz -- meist näher an dem, was normale Menschen sich vorstellen können.
|
||||
- [Indie Hackers — Products](https://www.indiehackers.com/products)
|
||||
Indie-Entwickler zeigen ihre Produkte, viele veröffentlichen Umsatz und Wachstum. Nach Umsatz sortieren und sehen, welche konkreten Probleme die Produkte mit einigen Tausend bis Zehntausend USD lösen.
|
||||
- [MicroConf Blog](https://microconf.com/blog)
|
||||
Fokus auf Micro SaaS. Gut für "klein genug, aber jemand zahlt dafür".
|
||||
- [1000 Tools](https://1000.tools/)
|
||||
KI-Tool-Aggregator. Gut, um zu sehen, welche Kategorien bereits besetzt, aber mittelmäßig umgesetzt sind, oder welche Richtungen im Inland/in bestimmten Branchen noch unerschlossen sind.
|
||||
- [Product Hunt](https://www.producthunt.com/)
|
||||
Wiederkehrende Produkttypen beobachten, nicht nur Platz 1 im Fokus -- eher sehen, welche Kategorien immer wieder auftauchen, aber noch kein klarer Gewinner existiert.
|
||||
- [BetaList](https://betalist.com/)
|
||||
Gut für Frühphasen-Produkte und Teams, die noch an der Richtung arbeiten.
|
||||
|
||||
### Beim Produkt-Ansehen nicht nur das Produkt selbst betrachten, sondern auch negative Bewertungen und "Dienstleister"
|
||||
|
||||
- [G2](https://www.g2.com/)
|
||||
Nutzung: 1- und 2-Sterne-Bewertungen ansehen. In den schlechten Bewertungen versteckt sich oft "welcher Schritt der bestehenden Tools nicht gut gemacht ist".
|
||||
- [Capterra](https://www.capterra.com/)
|
||||
Nutzung: Ähnlich wie G2, gut für echte Beschwerden bei SaaS-Produkten.
|
||||
- Taobao / Xianyu / [Fiverr](https://www.fiverr.com/) / [Upwork](https://www.upwork.com/) / ZhuBaJie
|
||||
Nutzung: Nach "Dienstleister", "Vertretung", "Eingabe", "Transkription" suchen. Wenn eine bestimmte manuelle Dienstleistung gut läuft, verbirgt sich dahinter meist ein wiederholbarer, produktisierbarer Prozess.
|
||||
|
||||
Signalschwellen sind einfach:
|
||||
|
||||
- Nutzer beschweren sich bereits über bestehende Tools
|
||||
- Nutzer zahlen bereits dafür, dass andere es für sie erledigen
|
||||
- Nutzer investieren bereits viel Arbeitskraft und Zeit in diesen Prozess
|
||||
|
||||
### Vierte Liga: Videos ansehen, manche Menschen zerlegen Ideen direkt für dich
|
||||
|
||||
Wenn Sie lieber "jemand erklärt mir die Gedanken" mögen statt Foren und Rankings zu durchsuchen, eignen sich Videos und Podcasts ebenfalls.
|
||||
|
||||
- Suche nach `Greg Isenberg startup ideas`
|
||||
Gut, um jemanden zu sehen, der 2-3 konkrete Ideen analysiert, Marktgröße, Wettbewerb und Ansatzpunkte erklärt.
|
||||
- Suche nach `My First Million podcast`
|
||||
Zwei Moderatoren brainstormen oft eine ganze Folge lang Geschäftsideen, hohe Dichte, häufig sehr konkrete Nischen.
|
||||
- Suche nach `YC startup ideas` oder `Michael Seibel startup ideas`
|
||||
Gut für Anfänger, direkte Sprache, viele erklären direkt, wie man die Richtung wählt.
|
||||
|
||||
<a id="idea-trends"></a>
|
||||
## [2. Trend-Quellen: Sehen, welche Richtungen aufsteigen](#top-idea-sources)
|
||||
|
||||
Trend-Seiten geben Ihnen nicht direkt Ideen, sondern helfen einzuschätzen: Ob eine Richtung an Dynamik gewinnt und ob es sich lohnt, weiter zu recherchieren.
|
||||
|
||||
- [Exploding Topics](https://explodingtopics.com/)
|
||||
Datengetriebenes Tracking von schnell wachsenden, aber noch nicht im Mainstream angekommenen Themen und Produktkategorien. Gut für "im Kommen, aber noch nicht überlaufen".
|
||||
- [Google Trends](https://trends.google.com/)
|
||||
Keywords suchen, Trendlinie der letzten 12 Monate ansehen, dann in "Verwandte Suchanfragen" die "Steigenden" Begriffe prüfen.
|
||||
- [Glimpse](https://meetglimpse.com/)
|
||||
Ähnlich wie Google Trends
|
||||
- Branchenbericht-Zusammenfassungen
|
||||
Gut, wenn Sie bereits eine Richtung haben und schnell sehen wollen, wo die Branche steht.
|
||||
- McKinsey / BCG / Gartner Trend-Inhalte
|
||||
Eher Unternehmens- und Großbranchen-Perspektive, gut für B2B, Industrie, traditionelle Branchen.
|
||||
- [State of AI Report](https://www.stateof.ai/)
|
||||
Wenn Ihre Richtung mit KI-Technologie selbst zu tun hat, eignet sich dieser Jahresbericht gut, um den Überblick zu gewinnen.
|
||||
|
||||
Bei Trends nur auf drei Dinge achten:
|
||||
|
||||
- Steigt der Begriff kontinuierlich?
|
||||
- In welchem konkreten Szenario zeigt er sich?
|
||||
- Wer würde als Erster Zeit, Wechselkosten oder Budget dafür aufwenden?
|
||||
|
||||
<a id="idea-business"></a>
|
||||
## [3. Geschäftsnähere Quellen: Wer gibt Geld aus, wer beschwert sich, wer verkauft manuelle Dienstleistungen](#top-idea-sources)
|
||||
|
||||
Wenn Sie keine "coole" Richtung suchen, sondern eine "näher am echten Geschäft", müssen Sie Quellen näher an Workflows nutzen.
|
||||
|
||||
### Wer gibt wirklich Geld für was aus
|
||||
|
||||
- [Chinesische Regierungseinkaufsplattform](https://www.ccgp.gov.cn/)
|
||||
Nutzung: Begriffe wie "Smart Construction Site", "Labormanagementsystem", "Datenerfassung", "Praxismanagement", "Angebotsystem" suchen, Budget, technische Anforderungen, Nutzungsszenarien ansehen.
|
||||
- Öffentliche Ressourcentransaktionszentren der Provinzen und Städte
|
||||
Nutzung: Sehen, was lokale Regierungen und Staatsunternehmen tatsächlich einkaufen.
|
||||
- BiBiao / QianliMa / BiaoShiTong
|
||||
Nutzung: Unternehmensseitige Beschaffungsbedarfe und häufige Systemtypen sehen.
|
||||
|
||||
Das starke Signal dieser Quellen: Es wird nicht über die Zukunft diskutiert, sondern "heute zahlt bereits jemand dafür".
|
||||
|
||||
### Wer beschwert sich über was
|
||||
|
||||
- Fertigungsindustrie: Maschinenbau-Foren, SPS-Foren
|
||||
- Gesundheitswesen: Dingxiangyuan, Yimaitong
|
||||
- Bau / Ingenieurwesen: Tumu Online, Glodon-Community
|
||||
- Finanzen / Buchhaltung: Chinesisches Rechnungswesen-Forum
|
||||
- Außenhandel: Fubu-Außenhandelsforum, Mike-Community
|
||||
- Gastronomie / Einzelhandel: Zhiye Catering, Lianshang-Forum
|
||||
- [Reddit](https://www.reddit.com/) vertikale Subreddits: `r/smallbusiness`, `r/Entrepreneur`, `r/SaaS`, `r/healthcare`, `r/manufacturing`
|
||||
- [V2EX](https://www.v2ex.com/)
|
||||
- Jike
|
||||
- Xiaohongshu
|
||||
|
||||
Bei der Suche nicht nur "KI" oder "Innovation" verwenden, effektiver ist:
|
||||
|
||||
- zu umständlich
|
||||
- gibt es einen besseren Weg
|
||||
- Empfehlung für Tools gesucht
|
||||
- Excel reicht nicht mehr aus
|
||||
- I wish there was
|
||||
- is there a tool for
|
||||
- I hate
|
||||
|
||||
### Wer verkauft wiederkehrende manuelle Dienstleistungen
|
||||
|
||||
- [Fiverr](https://www.fiverr.com/)
|
||||
- [Upwork](https://www.upwork.com/)
|
||||
- ZhuBaJie
|
||||
- Taobao
|
||||
- Xianyu
|
||||
|
||||
Wenn Sie sehen, dass diese Dienstleistungen gut laufen, lohnt sich weitere Recherche:
|
||||
|
||||
- PDF-Angebote in Excel übertragen
|
||||
- Kundendaten batchweise bereinigen
|
||||
- Lebenslauf / Texte überarbeiten / Transkription / Archivierung
|
||||
|
||||
Hinter solchen Dienstleistungen steckt meist kein einmaliger Bedarf, sondern ein wiederkehrender Workflow.
|
||||
|
||||
### Vollständige Workflows ansehen, nicht nur Ideenlisten
|
||||
|
||||
Manchmal ist der direkteste Weg, eine Branche auszuwählen, den Prozess einmal durchzugehen und nach Schritten zu suchen, die noch mit WeChat, Excel, Stift, Papier und Telefon erledigt werden.
|
||||
|
||||
- Außenhandel: Lieferanten finden, anfragen, vergleichen, Angebote erstellen, an Kunden senden, Antworten verfolgen, Inspektion arrangieren, Buchung, Verzollung.
|
||||
Interessanter Ansatzpunkt: Lieferantenangebot in Kundenangebot überführen.
|
||||
- Zahnarztpraxis: Empfang, Röntgen, Befundung, Behandlungsplan-Besprechung, Follow-up, Behandlung, Kontrolltermin.
|
||||
Interessanter Ansatzpunkt: Dem Patienten den Behandlungsplan erklären und kontinuierlich folgen.
|
||||
- Baustelle: Inspektion, fotografieren, in Gruppenchat posten, Bericht erstellen, an Auftraggeber übergeben.
|
||||
Interessanter Ansatzpunkt: Von Baustellenfotos zum compliance-Bericht.
|
||||
|
||||
<a id="idea-vc"></a>
|
||||
## [4. VC-/Accelerator-Quellen: "Wohin die Welle geht" sehen](#top-idea-sources)
|
||||
|
||||
Diese Quellen eignen sich gut, um große Richtungen zu finden, aber nicht als direkter Validierungsersatz.
|
||||
|
||||
- [Y Combinator — Requests for Startups](https://www.ycombinator.com/rfs)
|
||||
Nutzung: Gut für Ansatzpunkte, da oft direkt gesagt wird "Wir möchten sehen, dass jemand das baut".
|
||||
- [a16z — Big Ideas](https://a16z.com/big-ideas-2025/)
|
||||
Nutzung: Eher große Trends und Track-Einschätzungen, gut für Branchengefühl.
|
||||
- [NFX](https://www.nfx.com/)
|
||||
Nutzung: Gut für schnelles Überfliegen einer Reihe von Startup-Themen.
|
||||
- [Sequoia Capital](https://www.sequoiacap.com/article/)
|
||||
Nutzung: Nicht immer direkte Ideenlisten, aber oft Erklärungen zu Plattformwandel und Chancen.
|
||||
- [First Round Review](https://review.firstround.com/)
|
||||
Nutzung: Gut für tieferes Eintauchen, nicht unbedingt Ideenliste, aber hohe Artikelqualität.
|
||||
|
||||
Vorteile dieser Quellen:
|
||||
|
||||
- Zeigen, welche Richtungen zukunftsträchtig sind
|
||||
- Zeigen, welche Tracks voraussichtlich weiter gefördert werden
|
||||
- Ermöglichen schnellen Einstieg in die Sprache eines bestimmten Tracks
|
||||
|
||||
Einschränkungen dieser Quellen:
|
||||
|
||||
- Meist Investorenperspektive
|
||||
- Nicht immer klar, welche Rolle am meisten Schmerz hat
|
||||
- Nicht immer klar, welcher Prozessschritt am stärksten blockiert
|
||||
- Nicht immer klar, wer heute bereits dafür zahlt
|
||||
|
||||
Bessere Nutzung: Zunächst Richtung finden, dann zurück zu Referenzprodukten, Branchenforen, Beschaffungsinformationen und echten Workflows gehen, um konkretere Ansatzpunkte zu finden.
|
||||
|
||||
<a id="idea-path"></a>
|
||||
## [5. Kürzester Nutzungspfad für "Jemand ohne Idee, der nur einen Assistenten bauen will"](#top-idea-sources)
|
||||
|
||||
Wenn Sie nur einen kürzesten Weg gehen möchten:
|
||||
|
||||
1. Schritt, 30 Minuten.
|
||||
[r/SomebodyMakeThis](https://www.reddit.com/r/SomebodyMakeThis/) öffnen, nach `Top -> Past Year` sortieren, schnell 50 Posts überfliegen, alle Richtungen speichern, bei denen Sie denken "Das könnte ich vielleicht bauen".
|
||||
2. Schritt, 30 Minuten.
|
||||
[Starter Story](https://www.starterstory.com/) oder [Indie Hackers Products](https://www.indiehackers.com/products) öffnen, nach Umsatz sortieren, mittelgroße Produkte ansehen, nicht nur die erfolgreichsten. Richtungen finden, die mit Schritt 1 zusammenhängen, sehen, an wen sie konkret verkauft werden und welchen Schritt sie lösen.
|
||||
3. Schritt, 20 Minuten.
|
||||
[Google Trends](https://trends.google.com/) aufrufen, verwandte Keywords suchen, prüfen, ob der Trend steigt, dann "Verwandte Suchanfragen"-Spitzenworte ansehen.
|
||||
4. Schritt, 20 Minuten.
|
||||
G2 / Capterra / Branchenforen / Beschaffungsplattformen / Fiverr aufrufen, prüfen, wo es heute am meisten nervt und wo noch manuell gearbeitet wird.
|
||||
|
||||
Nach dem Durchlesen reicht es, diesen Satz sagen zu können:
|
||||
|
||||
- Eine bestimmte Art von Mensch, in einem bestimmten Szenario, wird von einem bestimmten Prozessschritt blockiert, und behilft sich aktuell mit einer bestimmten umständlichen Methode.
|
||||
|
||||
<a id="idea-ai"></a>
|
||||
## [6. Wie KI Ihnen hilft](#top-idea-sources)
|
||||
|
||||
Dieses Kapitel behandelt nicht primär KI, aber KI eignet sich gut zum Strukturieren.
|
||||
|
||||
Die zwei nützlichsten Anwendungen:
|
||||
|
||||
- Links, Beitragstitel und Nutzer-Zitate, die Sie gefunden haben, an die KI senden und sie nach "Zielgruppe / Szenario / Schmerzpunkt / Alternative" sortieren lassen.
|
||||
- KI bitten, aus vielen verstreuten Informationen 3 Kandidatenrichtungen zusammenzufassen, statt weiter 50 Funktionen zu generieren.
|
||||
|
||||
Direkt so fragen:
|
||||
|
||||
```text
|
||||
Ich habe kürzlich diese Quellen gefunden:
|
||||
1. [Titel oder Zitat einfügen]
|
||||
2. [Titel oder Zitat einfügen]
|
||||
3. [Titel oder Zitat einfügen]
|
||||
|
||||
Bitte keine Funktionsliste geben.
|
||||
Bitte nur drei Dinge tun:
|
||||
1. Nach Zielgruppe und Szenario kategorisieren
|
||||
2. Wiederkehrende mühsame Schritte identifizieren
|
||||
3. Mir 3 konkretere Kandidatenrichtungen zusammenfassen
|
||||
```
|
||||
|
||||
## Weiterführende Literatur
|
||||
|
||||
- [Y Combinator - Requests for Startups](https://www.ycombinator.com/rfs)
|
||||
- [a16z - Big Ideas](https://a16z.com/big-ideas-2025/)
|
||||
- [NFX](https://www.nfx.com/)
|
||||
- [Reddit - r/SomebodyMakeThis](https://www.reddit.com/r/SomebodyMakeThis/)
|
||||
- [Reddit - r/AppIdeas](https://www.reddit.com/r/AppIdeas/)
|
||||
- [Reddit - r/Startup_Ideas](https://www.reddit.com/r/Startup_Ideas/)
|
||||
- [Starter Story](https://www.starterstory.com/)
|
||||
- [Indie Hackers - Products](https://www.indiehackers.com/products)
|
||||
- [Product Hunt](https://www.producthunt.com/)
|
||||
- [BetaList](https://betalist.com/)
|
||||
- [IdeasAI](https://ideasai.com/)
|
||||
- [Unvalidated Ideas](https://unvalidatedideas.com/)
|
||||
- [Google Trends](https://trends.google.com/)
|
||||
- [Exploding Topics](https://explodingtopics.com/)
|
||||
- [G2](https://www.g2.com/)
|
||||
- [Capterra](https://www.capterra.com/)
|
||||
@@ -0,0 +1,719 @@
|
||||
---
|
||||
title: 'B2B-Branchenszenarien - Inspirationsreferenz'
|
||||
description: 'Dieses Dokument sammelt praktische LLM-Anwendungen fuer B2B-Unternehmensszenarien, darunter Fertigung, intelligenter Kundenservice, Bildung, Programmierung, Gesundheitswesen, Cybersicherheit, Finanzdienstleistungen und Unternehmensservices. Es dient als Referenz fuer Entwickler von AI-Anwendungen im B2B-Bereich.'
|
||||
---
|
||||
|
||||
<script setup>
|
||||
import { computed, ref } from 'vue'
|
||||
|
||||
const duration = 'ca. <strong>6 Stunden</strong>'
|
||||
|
||||
const interestPoint = ref('')
|
||||
const purpose = ref('')
|
||||
|
||||
const topicPool = {
|
||||
manufacturing: [
|
||||
{ title: 'AI-gestuetzte Designplattform', desc: 'Konzeptdesign fuer Produktoptik mit Bildgenerierungsmodellen' },
|
||||
{ title: 'Intelligenter Assistent fuer Zeichnungspruefung', desc: 'Designnormen mit RAG als Wissensbasis nutzbar machen' },
|
||||
{ title: 'Automatische technische Dokumentation', desc: 'Spezifikationen und Handbuecher mit LLM erzeugen' },
|
||||
{ title: 'Automatische Anlagen-Inspektionsberichte', desc: 'Sprachbeschreibung in strukturierte Berichte umwandeln' },
|
||||
{ title: 'Q&A fuer Industrieanlagen-Fehlerdiagnose', desc: 'Historische Fehlerfaelle als Vektor-Wissensbasis nutzen' }
|
||||
],
|
||||
'customer-service': [
|
||||
{ title: 'Multikanal-Kundenservice mit Auto-Antworten', desc: 'Nachrichten verstehen, Antworten erzeugen und Tickets anlegen' },
|
||||
{ title: 'Lead-Erkennung und Follow-up-Empfehlungen', desc: 'Dialoghistorien analysieren und Kaufabsicht bewerten' },
|
||||
{ title: 'Interner Wissens-Q&A-Assistent', desc: 'Interne Dokumente als RAG-Wissensbasis erschliessen' },
|
||||
{ title: 'Gespraechszusammenfassung und Ticket-Erstellung', desc: 'Kerninformationen extrahieren und Felder automatisch fuellen' },
|
||||
{ title: 'Best-Practice-Skript-Wissensbasis', desc: 'Erfolgreiche Servicefaelle in Skriptvorlagen verdichten' }
|
||||
],
|
||||
education: [
|
||||
{ title: 'Personalisierter Sprachlernpfad', desc: 'Lernniveau einschaetzen und taegliche Aufgaben planen' },
|
||||
{ title: 'Automatische Unterrichtsentwuerfe', desc: 'Aus Lehrplaenen Unterrichtsrahmen und Ressourcen erzeugen' },
|
||||
{ title: 'Automatische Korrektur und Lernanalyse', desc: 'Subjektive Aufgaben bewerten und Hinweise geben' },
|
||||
{ title: 'Kompetenzmodell und Lernlandkarte', desc: 'Stellenanforderungen in Lernpfade uebersetzen' },
|
||||
{ title: 'Fremdsprachen-Szenariotraining', desc: 'LLM spielt Rollen fuer muendliche Uebungen' }
|
||||
],
|
||||
programming: [
|
||||
{ title: 'Code-Vervollstaendigung und Bug-Fix', desc: 'IDE-Plugin liefert Vorschlaege und Reparaturen' },
|
||||
{ title: 'Low-Code-App-Bau und Automatisierung', desc: 'Natuerliche Sprache in Low-Code-Konfigurationen umwandeln' },
|
||||
{ title: 'Unit-Test-Generator', desc: 'Code per AST analysieren und Grenzfaelle erzeugen' },
|
||||
{ title: 'Code-Analyse und Sprachmigration', desc: 'Qualitaet pruefen und Migrationsvorschlaege geben' },
|
||||
{ title: 'Frontend-UI-Codegenerierung', desc: 'Designbilder erkennen und responsives CSS erzeugen' }
|
||||
],
|
||||
healthcare: [
|
||||
{ title: 'Intelligente Laborbefund-Interpretation', desc: 'Kennzahlen per OCR erkennen und Auffaelligkeiten erklaeren' },
|
||||
{ title: 'Gesundheitsberatung mit Wissens-Retrieval', desc: 'Medizinische Wissensgraphen und RAG fuer Antworten nutzen' },
|
||||
{ title: 'Datenanalyse fuer klinische Forschung', desc: 'EMR-Daten integrieren und Auswertungscode unterstuetzen' },
|
||||
{ title: 'Automatische Bildbefunde', desc: 'Bildmerkmale in strukturierte Berichte ueberfuehren' },
|
||||
{ title: 'Medikationsassistent fuer chronische Krankheiten', desc: 'Erinnerungen erzeugen und Kontraindikationen pruefen' }
|
||||
],
|
||||
security: [
|
||||
{ title: 'Code-Sicherheitsluecken erkennen und beheben', desc: 'SAST-Ergebnisse mit LLM erklaeren und Fixes vorschlagen' },
|
||||
{ title: 'AI-Phishing-Mail-Erkennung', desc: 'Mailinhalte, Absender und Links auf Risiken pruefen' },
|
||||
{ title: 'Automatische Security-Tagesberichte', desc: 'Logs zusammenfassen und Schluesselereignisse extrahieren' },
|
||||
{ title: 'Penetrationstest-Berichtsgenerator', desc: 'Schwachstellenbeschreibungen in Berichte umwandeln' },
|
||||
{ title: 'Threat-Intelligence-Analyse', desc: 'Mehrere Quellen anbinden und Auswirkungen bewerten' }
|
||||
],
|
||||
finance: [
|
||||
{ title: 'Kredit-Due-Diligence-Berichte', desc: 'Finanzdaten analysieren und Risikoberichte erzeugen' },
|
||||
{ title: 'Private-Banking-Vermoegensberater', desc: 'Risikoprofil analysieren und Allokation empfehlen' },
|
||||
{ title: 'IPO-Prospekt und Compliance-Pruefung', desc: 'Vorlagen fuellen und Konsistenz pruefen' },
|
||||
{ title: 'Finanzbericht und Anomaliewarnung', desc: 'Finanzanalyse automatisieren und Abweichungen markieren' },
|
||||
{ title: 'Training fuer Versicherungsagenten', desc: 'Kundendialoge simulieren und Skripte bewerten' }
|
||||
],
|
||||
enterprise: [
|
||||
{ title: 'Compliance-Pruefung im Vertragslebenszyklus', desc: 'Klauseln mit Regeln vergleichen und Aenderungen vorschlagen' },
|
||||
{ title: 'Verkaufsgespraech-Transkription', desc: 'ASR nutzen und passende Skripte empfehlen' },
|
||||
{ title: 'Marketing-Content und Design', desc: 'Verkaufstexte und Kernargumente erzeugen' },
|
||||
{ title: 'Analyse von Wettbewerber-Werbung', desc: 'Anzeigen sammeln und Platzierungsstrategien auswerten' },
|
||||
{ title: 'Netzweite Trendanalyse', desc: 'Hot Topics erkennen und Themenwinkel empfehlen' }
|
||||
],
|
||||
content: [
|
||||
{ title: 'Assistenz fuer Film- und Romaninhalte', desc: 'Outline, Figuren und Dialoge erzeugen' },
|
||||
{ title: 'Markengeschichte und PR-Artikel', desc: 'Markenkeywords in mehrere Textstile uebersetzen' },
|
||||
{ title: 'Virtueller Avatar fuer Livestreams', desc: 'Digitaler Mensch, TTS und LLM-Dialog kombinieren' },
|
||||
{ title: 'Short-Video-Skript und Schnitt', desc: 'Skripte, Storyboards und Schnittvorschlaege erzeugen' },
|
||||
{ title: 'Marketing-Content-System', desc: 'Copy und Selling Points strukturiert generieren' }
|
||||
],
|
||||
government: [
|
||||
{ title: 'Buergerhotline mit Sprachdialog und Dispatch', desc: 'Anliegen erkennen und automatisch weiterleiten' },
|
||||
{ title: 'Service-Wegweiser und Politik-Q&A', desc: 'Verwaltungswissen per RAG abrufbar machen' },
|
||||
{ title: 'Foerderpolitik-Matching', desc: 'Unternehmensprofile mit passenden Programmen abgleichen' },
|
||||
{ title: 'Vorpruefung von Verwaltungsunterlagen', desc: 'Dokumente per OCR erkennen und Vollstaendigkeit pruefen' },
|
||||
{ title: 'Stadt-Grid-Ereignismanagement', desc: 'Ereignistypen erkennen und Einsatzstellen zuteilen' }
|
||||
],
|
||||
legal: [
|
||||
{ title: 'Agent fuer Vertragsrisiken', desc: 'Klauseln mit Risikolisten vergleichen und markieren' },
|
||||
{ title: 'AI-Berater fuer Gewinnwahrscheinlichkeit', desc: 'Fallmerkmale extrahieren und aehnliche Faelle finden' },
|
||||
{ title: 'Monitoring von Gesetzesaenderungen', desc: 'Aenderungen auswerten und Auswirkungen analysieren' },
|
||||
{ title: 'AIGC-Entwurf fuer Anwaltsschreiben', desc: 'Sachverhalte in standardisierte Schreiben ueberfuehren' },
|
||||
{ title: 'Rechtsklauseln in Alltagssprache', desc: 'Komplexe Klauseln verstaendlich erklaeren' }
|
||||
],
|
||||
travel: [
|
||||
{ title: 'AIGC-Reisefuehrer-Generator', desc: 'Aus Praeferenzen Tagesplaene erzeugen' },
|
||||
{ title: 'Flug- und Hotelpreisprognose', desc: 'OTA-Daten sammeln und Preistrends vorhersagen' },
|
||||
{ title: 'Reiseplan-Reorganisation bei Flugausfall', desc: 'Alternativen analysieren und Notfallplaene empfehlen' },
|
||||
{ title: 'Visa-Unterlagen-Pruefung', desc: 'Fotos per OCR auswerten und Formulare fuellen' },
|
||||
{ title: 'Sprach- und Menueuebersetzung auf Reisen', desc: 'Offline-Sprache und Menuebilder uebersetzen' }
|
||||
],
|
||||
emotion: [
|
||||
{ title: 'Virtueller 24-Stunden-Begleiter', desc: 'Gespraechshistorie merken und empathisch antworten' },
|
||||
{ title: 'Multimodale Emotionserkennung', desc: 'Stimme und Text fuer Unterstuetzung auswerten' },
|
||||
{ title: 'Kognitives Training fuer Alzheimer', desc: 'Spiele und Erinnerungsimpulse kombinieren' },
|
||||
{ title: 'Sozialtraining bei sozialer Angst', desc: 'Szenarien simulieren und Tipps geben' },
|
||||
{ title: 'Stimmungsmonitoring und positive Impulse', desc: 'Trends erkennen und ermutigende Inhalte erzeugen' }
|
||||
],
|
||||
entertainment: [
|
||||
{ title: 'Open-World-NPC-Entscheidungsengine', desc: 'Verhaltensbaeume mit LLM-Entscheidungen kombinieren' },
|
||||
{ title: 'Murder-Mystery-DM-Assistent', desc: 'Spielerentscheidungen in Handlungszweige uebersetzen' },
|
||||
{ title: 'Interaktive Romanenden', desc: 'Leserentscheidungen generieren neue Enden' },
|
||||
{ title: 'E-Sport-Analyse und AI-Kommentar', desc: 'Spielbilder analysieren und Kommentare erzeugen' },
|
||||
{ title: 'Mehrrollen-TTS-Hoerbuch', desc: 'Textrollen verteilen und Stimmen erzeugen' }
|
||||
],
|
||||
ecommerce: [
|
||||
{ title: 'Produktdetailseiten in hoher Konversion', desc: 'Selling Points und Szenenbeschreibungen erzeugen' },
|
||||
{ title: 'Virtuelle Kleidermodelle und Try-on', desc: 'Anprobeeffekte und Praesentationsvideos generieren' },
|
||||
{ title: 'Mehrsprachige E-Commerce-Lokalisierung', desc: 'Produkttexte uebersetzen und kulturell polieren' },
|
||||
{ title: 'Digitaler Livestream-Verkauf', desc: 'Avatar, Echtzeit-Skript und Produktdaten verbinden' },
|
||||
{ title: 'Trend-Insight und Bestseller-Prognose', desc: 'Social- und Shopdaten fuer Produktauswahl auswerten' }
|
||||
],
|
||||
energy: [
|
||||
{ title: 'Stromverbrauchsanalyse im Haushalt', desc: 'Verbrauchsmuster erkennen und Sparstrategien ableiten' },
|
||||
{ title: 'PV-Defekterkennung per Drohne', desc: 'Thermische Bilder analysieren und Defekte markieren' },
|
||||
{ title: 'Strompreisprognose und Handelsstrategie', desc: 'Preise vorhersagen und Strategien erzeugen' },
|
||||
{ title: 'CO2-Footprint und ESG-Bericht', desc: 'Emissionsfaktoren berechnen und Berichte erstellen' },
|
||||
{ title: 'Lastprognose bei Extremwetter', desc: 'Wetterdaten anbinden und Notfalldispatch planen' }
|
||||
],
|
||||
'av-media': [
|
||||
{ title: 'Highlight-Erkennung und Short-Video-Schnitt', desc: 'Keyframes finden und Clips automatisch schneiden' },
|
||||
{ title: 'Rauschtrennung und Stimmverstaerkung', desc: 'Audio separieren und Sprache verbessern' },
|
||||
{ title: '4K-Restauration alter Aufnahmen', desc: 'Super-Resolution und Kolorierung einsetzen' },
|
||||
{ title: 'Realistische TTS-Synchronisation', desc: 'Mehrstimmige TTS mit Emotionssteuerung nutzen' },
|
||||
{ title: 'Meeting-Transkription und To-do-Extraktion', desc: 'Sprecher trennen und Aufgaben extrahieren' }
|
||||
],
|
||||
'ai-marketing': [
|
||||
{ title: 'Virale Social-Copy mit AIGC', desc: 'Themen, Emojis und Hashtags optimieren' },
|
||||
{ title: 'Marketing-Poster mit AI-Layout', desc: 'Poster automatisch an Formate anpassen' },
|
||||
{ title: 'Markenlogo und VI-System', desc: 'Logoideen und visuelle Regeln generieren' },
|
||||
{ title: 'Trend-Hunting fuer Marketingideen', desc: 'Hot Topics finden und kreative Winkel ableiten' },
|
||||
{ title: 'Short-Video-Skript und Storyboard', desc: 'Skripte, Shots und Drehhinweise erzeugen' }
|
||||
],
|
||||
'data-intelligence': [
|
||||
{ title: 'Natural-Language-to-SQL', desc: 'Natuerliche Sprache in SQL-Abfragen umwandeln' },
|
||||
{ title: 'Datenasset-Katalog und Klassifikation', desc: 'Metadaten sammeln und automatisch klassifizieren' },
|
||||
{ title: 'Datenqualitaets-Anomalien', desc: 'Regeln und ML fuer Erkennung und Reparaturhinweise nutzen' },
|
||||
{ title: 'Intelligente Berichte und Visualisierung', desc: 'Berichte dialogisch konfigurieren' },
|
||||
{ title: 'Q&A fuer Datenkennzahlen', desc: 'Kennzahlendefinitionen als Wissensbasis nutzen' }
|
||||
]
|
||||
}
|
||||
|
||||
const recommendationMap = {
|
||||
'creative-content': {
|
||||
'increase-efficiency': ['content', 'av-media', 'ai-marketing', 'entertainment'],
|
||||
'reduce-cost': ['content', 'ecommerce', 'ai-marketing'],
|
||||
'improve-experience': ['entertainment', 'emotion', 'travel', 'content'],
|
||||
'innovate-business': ['ai-marketing', 'content', 'av-media', 'entertainment']
|
||||
},
|
||||
'tech-service': {
|
||||
'increase-efficiency': ['programming', 'enterprise', 'data-intelligence', 'customer-service'],
|
||||
'reduce-cost': ['programming', 'enterprise', 'manufacturing'],
|
||||
'improve-experience': ['customer-service', 'enterprise', 'programming'],
|
||||
'innovate-business': ['data-intelligence', 'programming', 'security', 'enterprise']
|
||||
},
|
||||
'data-intel': {
|
||||
'increase-efficiency': ['data-intelligence', 'finance', 'enterprise', 'manufacturing'],
|
||||
'reduce-cost': ['data-intelligence', 'manufacturing', 'energy'],
|
||||
'improve-experience': ['data-intelligence', 'customer-service', 'ecommerce'],
|
||||
'innovate-business': ['data-intelligence', 'finance', 'security', 'ai-marketing']
|
||||
},
|
||||
'user-service': {
|
||||
'increase-efficiency': ['customer-service', 'ecommerce', 'travel', 'enterprise'],
|
||||
'reduce-cost': ['customer-service', 'ecommerce', 'enterprise'],
|
||||
'improve-experience': ['customer-service', 'emotion', 'travel', 'ecommerce', 'entertainment'],
|
||||
'innovate-business': ['ecommerce', 'travel', 'emotion', 'entertainment']
|
||||
},
|
||||
'industry-solution': {
|
||||
'increase-efficiency': ['manufacturing', 'healthcare', 'finance', 'government'],
|
||||
'reduce-cost': ['manufacturing', 'energy', 'enterprise', 'finance'],
|
||||
'improve-experience': ['healthcare', 'education', 'government', 'travel'],
|
||||
'innovate-business': ['finance', 'security', 'legal', 'healthcare', 'government']
|
||||
}
|
||||
}
|
||||
|
||||
const interestOptions = [
|
||||
{ label: 'Kreative Inhalte', value: 'creative-content', desc: 'Texte, Bilder, Videos und andere Inhalte' },
|
||||
{ label: 'Technische Services', value: 'tech-service', desc: 'Entwicklungstools, Automatisierung, Code-Assistenz' },
|
||||
{ label: 'Datenintelligenz', value: 'data-intel', desc: 'Analyse, Prognose und Entscheidungsunterstuetzung' },
|
||||
{ label: 'Nutzerservice', value: 'user-service', desc: 'Kundenservice, Marketing und Nutzererlebnis' },
|
||||
{ label: 'Branchenloesungen', value: 'industry-solution', desc: 'Tiefe Anwendungen fuer konkrete Branchen' }
|
||||
]
|
||||
|
||||
const purposeOptions = [
|
||||
{ label: 'Effizienz steigern', value: 'increase-efficiency', desc: 'Automatisieren und Prozesse beschleunigen' },
|
||||
{ label: 'Kosten senken', value: 'reduce-cost', desc: 'Personalaufwand und Ressourcenverbrauch reduzieren' },
|
||||
{ label: 'Erlebnis verbessern', value: 'improve-experience', desc: 'Servicequalitaet und Zufriedenheit erhoehen' },
|
||||
{ label: 'Geschaeft erneuern', value: 'innovate-business', desc: 'Neue Produkte und neue Modelle erkunden' }
|
||||
]
|
||||
|
||||
const industries = [
|
||||
{ key: 'manufacturing', name: 'Industriefertigung', anchor: '#_1-industriefertigung' },
|
||||
{ key: 'customer-service', name: 'Intelligenter Kundenservice', anchor: '#_2-intelligenter-kundenservice' },
|
||||
{ key: 'education', name: 'Bildungswesen', anchor: '#_3-bildungswesen' },
|
||||
{ key: 'programming', name: 'Intelligentes Programmieren', anchor: '#_4-intelligentes-programmieren' },
|
||||
{ key: 'healthcare', name: 'Gesundheitswesen', anchor: '#_5-gesundheitswesen' },
|
||||
{ key: 'security', name: 'Cybersicherheit', anchor: '#_6-cybersicherheit' },
|
||||
{ key: 'finance', name: 'Finanzen und Versicherung', anchor: '#_7-finanzen-und-versicherung' },
|
||||
{ key: 'enterprise', name: 'Unternehmensservices', anchor: '#_8-unternehmensservices' },
|
||||
{ key: 'content', name: 'Content-Produktion und Betrieb', anchor: '#_9-content-produktion-und-betrieb' },
|
||||
{ key: 'government', name: 'Smart Government', anchor: '#_10-smart-government' },
|
||||
{ key: 'legal', name: 'Recht und Vertragsmanagement', anchor: '#_11-recht-und-vertragsmanagement' },
|
||||
{ key: 'travel', name: 'Reise und Mobilitaet', anchor: '#_12-reise-und-mobilitaet' },
|
||||
{ key: 'emotion', name: 'Emotionale Begleitung', anchor: '#_13-emotionale-begleitung' },
|
||||
{ key: 'entertainment', name: 'Unterhaltung und Freizeit', anchor: '#_14-unterhaltung-und-freizeit' },
|
||||
{ key: 'ecommerce', name: 'E-Commerce Services', anchor: '#_15-e-commerce-services' },
|
||||
{ key: 'energy', name: 'Energie', anchor: '#_16-energie' },
|
||||
{ key: 'av-media', name: 'Audio und Video', anchor: '#_17-audio-und-video' },
|
||||
{ key: 'ai-marketing', name: 'AI-Marketing', anchor: '#_18-ai-marketing' },
|
||||
{ key: 'data-intelligence', name: 'Datenintelligenz', anchor: '#_19-datenintelligenz' }
|
||||
]
|
||||
|
||||
const recommendationTopics = computed(() => {
|
||||
if (!interestPoint.value || !purpose.value) return []
|
||||
|
||||
const keys = recommendationMap[interestPoint.value]?.[purpose.value] || []
|
||||
const topics = []
|
||||
|
||||
keys.forEach(key => {
|
||||
const industry = industries.find(item => item.key === key)
|
||||
const industryTopics = topicPool[key] || []
|
||||
|
||||
if (industry && industryTopics.length > 0) {
|
||||
const count = Math.floor(Math.random() * 2) + 1
|
||||
const shuffled = [...industryTopics].sort(() => Math.random() - 0.5)
|
||||
const selected = shuffled.slice(0, Math.min(count, shuffled.length))
|
||||
|
||||
selected.forEach(topic => {
|
||||
topics.push({
|
||||
...topic,
|
||||
industryKey: key,
|
||||
industryName: industry.name,
|
||||
industryAnchor: industry.anchor
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
return topics.sort(() => Math.random() - 0.5).slice(0, 8)
|
||||
})
|
||||
|
||||
const currentSelection = computed(() => {
|
||||
const interest = interestOptions.find(i => i.value === interestPoint.value)
|
||||
const pur = purposeOptions.find(p => p.value === purpose.value)
|
||||
return {
|
||||
interest: interest?.label || '',
|
||||
purpose: pur?.label || ''
|
||||
}
|
||||
})
|
||||
|
||||
const scrollToAnchor = (anchor) => {
|
||||
setTimeout(() => {
|
||||
let element = document.querySelector(anchor)
|
||||
|
||||
if (!element) {
|
||||
const altAnchor = anchor.replace('#_', '#')
|
||||
element = document.querySelector(altAnchor)
|
||||
}
|
||||
|
||||
if (!element) {
|
||||
const anchorText = decodeURIComponent(anchor.replace('#', '').replace(/^_/, ''))
|
||||
const headings = document.querySelectorAll('h2, h3')
|
||||
|
||||
for (let heading of headings) {
|
||||
const headingText = heading.textContent.trim()
|
||||
const cleanHeading = headingText.replace(/^\d+\.\s*/, '')
|
||||
if (cleanHeading === anchorText || headingText.includes(anchorText)) {
|
||||
element = heading
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (element) {
|
||||
element.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'start'
|
||||
})
|
||||
element.style.backgroundColor = '#f0f9ff'
|
||||
element.style.transition = 'background-color 0.3s'
|
||||
element.style.padding = '8px'
|
||||
element.style.borderRadius = '4px'
|
||||
setTimeout(() => {
|
||||
element.style.backgroundColor = ''
|
||||
element.style.padding = ''
|
||||
}, 2000)
|
||||
}
|
||||
}, 100)
|
||||
}
|
||||
|
||||
const resetSelection = () => {
|
||||
interestPoint.value = ''
|
||||
purpose.value = ''
|
||||
}
|
||||
</script>
|
||||
|
||||
# B2B-Branchenszenarien - Inspirationsreferenz
|
||||
|
||||
## Kapiteluebersicht
|
||||
|
||||
<ChapterIntroduction :duration="duration" :tags="['B2B-Anwendungen', 'Industrie', 'AI-Szenarien', 'Umsetzung', 'Branchenloesungen']" coreOutput="15+ B2B-Branchenszenarien verstehen" expectedOutput="Eine passende Richtung fuer Unternehmenskunden finden">
|
||||
|
||||
Dieses Dokument sammelt <strong>praktische LLM-Anwendungen in B2B-Unternehmensszenarien</strong>. Im Unterschied zu B2C-Produkten stehen hier reale Geschaeftsprobleme, Effizienzsteigerung, Kostensenkung und Prozesssicherheit im Vordergrund. Die Beispiele helfen dabei, von der Anforderungsanalyse bis zur technischen Umsetzung konkrete Projektideen zu finden.
|
||||
|
||||
</ChapterIntroduction>
|
||||
|
||||
## Branchenschnellauswahl
|
||||
|
||||
<el-card shadow="hover" style="margin-top: 16px; margin-bottom: 24px; border-left: 5px solid #409EFF;">
|
||||
<div style="font-weight: 600; margin-bottom: 8px;">Passende Anwendungsszenarien finden</div>
|
||||
<div style="color: #606266; font-size: 14px; line-height: 1.6; margin-bottom: 12px;">
|
||||
Waehlen Sie Interessengebiet und Ziel. Das System empfiehlt passende Branchenrichtungen; ein Klick auf eine Zeile springt direkt zum Abschnitt.
|
||||
</div>
|
||||
<el-row :gutter="16">
|
||||
<el-col :span="12">
|
||||
<el-select v-model="interestPoint" placeholder="Interessengebiet waehlen" style="width: 100%;">
|
||||
<el-option v-for="item in interestOptions" :key="item.value" :label="item.label" :value="item.value">
|
||||
<div style="display: flex; flex-direction: column;">
|
||||
<span>{{ item.label }}</span>
|
||||
<span style="font-size: 12px; color: #909399;">{{ item.desc }}</span>
|
||||
</div>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-select v-model="purpose" placeholder="Ziel waehlen" style="width: 100%;">
|
||||
<el-option v-for="item in purposeOptions" :key="item.value" :label="item.label" :value="item.value">
|
||||
<div style="display: flex; flex-direction: column;">
|
||||
<span>{{ item.label }}</span>
|
||||
<span style="font-size: 12px; color: #909399;">{{ item.desc }}</span>
|
||||
</div>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<div v-if="recommendationTopics.length > 0" style="margin-top: 16px;">
|
||||
<div style="font-weight: 600; margin-bottom: 10px; color: #409EFF;">
|
||||
Empfohlen: {{ recommendationTopics.length }} Anwendungsszenarien
|
||||
<span style="font-weight: normal; color: #909399; font-size: 13px; margin-left: 8px;">
|
||||
({{ currentSelection.interest }} + {{ currentSelection.purpose }})
|
||||
</span>
|
||||
</div>
|
||||
<el-table :data="recommendationTopics" style="width: 100%; cursor: pointer;" @row-click="(row) => scrollToAnchor(row.industryAnchor)" highlight-current-row>
|
||||
<el-table-column prop="title" label="Anwendungsszenario" min-width="300">
|
||||
<template #default="scope">
|
||||
<div style="font-weight: 500; color: #303133;">{{ scope.row.title }}</div>
|
||||
<div style="font-size: 12px; color: #909399; margin-top: 4px;">{{ scope.row.desc }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="industryName" label="Branche" width="180" align="center">
|
||||
<template #default="scope">
|
||||
<el-tag type="info" effect="light" size="small">{{ scope.row.industryName }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div style="margin-top: 10px; font-size: 12px; color: #909399;">
|
||||
Klicken Sie auf eine Tabellenzeile, um zum passenden Branchenkapitel zu springen.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else-if="!interestPoint || !purpose" style="margin-top: 14px; color: #909399; font-size: 13px;">
|
||||
<span v-if="!interestPoint && !purpose">Bitte Interessengebiet und Ziel waehlen.</span>
|
||||
<span v-else-if="!interestPoint">Bitte Interessengebiet waehlen.</span>
|
||||
<span v-else>Bitte Ziel waehlen.</span>
|
||||
</div>
|
||||
|
||||
<div v-if="interestPoint || purpose" style="margin-top: 12px;">
|
||||
<el-button size="small" @click="resetSelection">Auswahl zuruecksetzen</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
## Branchenschnellvorstellung
|
||||
|
||||
### Gängige Technologieauswahl
|
||||
|
||||
In AI-Anwendungsprojekten tauchen besonders haeufig drei technische Richtungen auf:
|
||||
|
||||
1. **LLM**: gut fuer Sprache, Dialoge, Zusammenfassungen, Textgenerierung, Uebersetzung und Wissens-Q&A.
|
||||
2. **VLM**: verbindet Bildverstehen und Sprache, etwa fuer Bildbeschreibung, visuelle Q&A, Medizinbilder, Qualitaetspruefung und Design.
|
||||
3. **GenAI**: erzeugt Texte, Bilder, Audio oder Video und eignet sich fuer Designassistenz, Marketingmaterial, Training und Content-Produktion.
|
||||
|
||||
### Auswahlstrategie
|
||||
|
||||
Wählen Sie eine Richtung nicht nur nach Trend, sondern nach drei praktischen Kriterien:
|
||||
|
||||
1. **Interesse**: Wer sich fuer Design interessiert, kann Content oder Industriedesign testen; wer technische Tiefe sucht, kann Security, Medizin oder Entwicklungswerkzeuge waehlen.
|
||||
2. **Branchennaehe**: Eigene Ressourcen senken die Einstiegskosten. Fertigung, Bildung, Medizin, Handel oder Verwaltung liefern jeweils andere Daten, Workflows und Fachwoerter.
|
||||
3. **Schwierigkeit**: Einsteiger starten mit Kundenservice, Content oder einfachen Q&A-Systemen; Fortgeschrittene koennen Qualitaetspruefung, medizinische Bildanalyse oder Code-Assistenz bearbeiten.
|
||||
|
||||
## 1. Industriefertigung
|
||||
|
||||
Fertigungsszenarien drehen sich um Design, Produktion, Qualitaetspruefung und Wartung. AI kann Informationen strukturieren, wiederkehrende Dokumente erzeugen und Expertenwissen leichter nutzbar machen.
|
||||
|
||||
| Nr. | Anwendungsszenario | Umsetzungsreferenz |
|
||||
| :--: | --- | --- |
|
||||
| 1 | AI-gestuetzte Designplattform | Bildmodelle erzeugen Konzepte; LLM prueft Designregeln; Three.js zeigt 3D-Ansichten. |
|
||||
| 2 | Zeichnungspruefungsassistent | CAD-Daten analysieren; RAG greift auf Konstruktionsnormen zu. |
|
||||
| 3 | Technische Dokumentation | Produktdatenbank plus LLM erzeugt Spezifikationen und Handbuecher. |
|
||||
| 4 | Anlagen-Inspektionsbericht | Spracheingabe wird transkribiert und als strukturierter Bericht gespeichert. |
|
||||
| 5 | Stapler-Dispatch und Routenplanung | Auftraege, Lagerorte und Karten-API erzeugen optimale Fahrwege. |
|
||||
| 6 | Datenabfrage per natuerlicher Sprache | Text-to-SQL fragt OLAP-Systeme wie Doris oder ClickHouse ab. |
|
||||
| 7 | Fehlerdiagnose-Q&A | Historische Stoerfaelle werden als Vektorwissen abgefragt. |
|
||||
| 8 | Qualitaetspruefbericht | OCR und CV erkennen Defekte; LLM erzeugt Bericht und Klassifikation. |
|
||||
| 9 | Inventurassistent | Bestandsdaten werden abgeglichen; Abweichungen und Warnungen entstehen automatisch. |
|
||||
| 10 | Prozessoptimierungs-Q&A | Produktionswissen wird per RAG erschlossen und in Verbesserungsvorschlaege ueberfuehrt. |
|
||||
|
||||
## 2. Intelligenter Kundenservice
|
||||
|
||||
Kundenservice profitiert stark von LLM, weil viel Kommunikation, Zusammenfassung, Klassifikation und Wissenssuche anfallen.
|
||||
|
||||
| Nr. | Anwendungsszenario | Umsetzungsreferenz |
|
||||
| :--: | --- | --- |
|
||||
| 1 | Multikanal-Auto-Antworten | Website, App und Messenger anbinden; LLM erkennt Absicht und erstellt Tickets. |
|
||||
| 2 | Lead-Erkennung | Dialoge analysieren, Kaufabsicht bewerten und Follow-up empfehlen. |
|
||||
| 3 | Internes Wissens-Q&A | Confluence und Dokumente vektorisieren; RAG erzeugt Antworten. |
|
||||
| 4 | Zufriedenheitsanalyse | Gespraeche nach Sentiment, Problemtyp und Loesungsstatus auswerten. |
|
||||
| 5 | Gespraechszusammenfassung | Nach Chatende Zusammenfassung und Ticketfelder automatisch ausfuellen. |
|
||||
| 6 | Skript-Compliance | Antworten auf verbotene Aussagen und Compliance-Risiken pruefen. |
|
||||
| 7 | Ticket-Klassifikation | Lange Gespraeche zusammenfassen und mit Tags versehen. |
|
||||
| 8 | Emotionswarnung | Tonfall und Textsignal auswerten; bei Risiko per WebSocket warnen. |
|
||||
| 9 | Best-Practice-Skripte | Gute Faelle analysieren und passende Vorlagen im Kontext empfehlen. |
|
||||
| 10 | Outbound-Qualitaetspruefung | Telefonaufnahmen transkribieren, Kernaussagen extrahieren und QA-Berichte erzeugen. |
|
||||
|
||||
## 3. Bildungswesen
|
||||
|
||||
AI kann Unterricht individualisieren, Lernstaende erfassen und Lehrkraefte bei Material, Feedback und Verwaltung entlasten.
|
||||
|
||||
| Nr. | Anwendungsszenario | Umsetzungsreferenz |
|
||||
| :--: | --- | --- |
|
||||
| 1 | Personalisierter Lernpfad | Niveau und Ziel analysieren; taegliche Aufgaben und Ressourcen empfehlen. |
|
||||
| 2 | Unterrichtsentwurf | Lehrplan eingeben; LLM erzeugt Ziele, Ablauf und Materialien. |
|
||||
| 3 | Korrektur und Lernanalyse | Aufgaben bewerten; Wissensluecken ueber Graphen lokalisieren. |
|
||||
| 4 | Kompetenzmodell | Stellenanzeigen analysieren und Lernlandkarten ableiten. |
|
||||
| 5 | Schulcurriculum | Schulprofil und Lernbedarf in Kursrahmen und Folien ueberfuehren. |
|
||||
| 6 | Fremdsprachenpraxis | LLM spielt Rollen; ASR bewertet Aussprache; TTS liefert Vorbild. |
|
||||
| 7 | Studien- und Karriereberatung | Punktzahlen, Interessen und Zulassungsdaten kombinieren. |
|
||||
| 8 | Programmiercoach fuer Kinder | Code erklaeren und zwischen Blocksprache und Python vermitteln. |
|
||||
| 9 | Wissens-Mindmap | Kursthema in Mindmap und naechste Lernschritte umwandeln. |
|
||||
| 10 | Essay-Bewertung | Struktur, Sprache und Argumentation bewerten und kommentieren. |
|
||||
|
||||
## 4. Intelligentes Programmieren
|
||||
|
||||
Entwicklungswerkzeuge sind naheliegende B2B-Szenarien, weil Code, Logs, Tickets und Dokumentation bereits stark strukturiert sind.
|
||||
|
||||
| Nr. | Anwendungsszenario | Umsetzungsreferenz |
|
||||
| :--: | --- | --- |
|
||||
| 1 | Code-Vervollstaendigung und Bug-Fix | IDE-Plugin, Fehlerspur-Analyse und automatische Reparaturvorschlaege. |
|
||||
| 2 | Low-Code-App-Bau | Natuerliche Sprache in Komponenten, Datenmodelle und Workflows ueberfuehren. |
|
||||
| 3 | Unit-Test-Generator | AST analysieren und Grenzfaelle fuer Jest oder Pytest erzeugen. |
|
||||
| 4 | Code-Analyse und Migration | Tree-sitter, Regeln und LLM fuer Qualitaet und Sprachwechsel kombinieren. |
|
||||
| 5 | Natural-Language-to-SQL | Datenfragen in sichere SQL-Abfragen uebersetzen. |
|
||||
| 6 | API-Test und Dokumentation | Schnittstellenbeschreibungen in Testfaelle und API-Doku umwandeln. |
|
||||
| 7 | UI-Testwartung | Browseraktionen aufzeichnen und instabile Selektoren reparieren. |
|
||||
| 8 | Loganalyse | ELK-Daten auswerten, Ursachen verdichten und Fixes empfehlen. |
|
||||
| 9 | UI-Codegenerierung | Designbilder per OCR/VLM auswerten und Komponenten erzeugen. |
|
||||
| 10 | Datenbankschema-Design | Anforderungen in ER-Modelle und DDL-Skripte ueberfuehren. |
|
||||
|
||||
## 5. Gesundheitswesen
|
||||
|
||||
Gesundheitsszenarien verlangen Fachwissen, Datenschutz und menschliche Pruefung. AI eignet sich vor allem fuer Assistenz, Strukturierung und Erklaerung.
|
||||
|
||||
| Nr. | Anwendungsszenario | Umsetzungsreferenz |
|
||||
| :--: | --- | --- |
|
||||
| 1 | Laborbefund-Interpretation | Berichtsbilder erkennen, Werte extrahieren und Auffaelligkeiten erklaeren. |
|
||||
| 2 | Gesundheitsberatung mit RAG | Leitlinien, ICD-10 und Arzneimittelinformationen abrufbar machen. |
|
||||
| 3 | Klinische Forschungsanalyse | EMR-Daten integrieren und Analysecode erzeugen. |
|
||||
| 4 | Medizinische Uebungsfragen | Lehrbuchkapitel in Aufgaben, Loesungen und Fehleranalysen umwandeln. |
|
||||
| 5 | Pharma-Forschungs-Q&A | Wirkstoff-, Ziel- und Krankheitsgraph fuer Recherche nutzen. |
|
||||
| 6 | Arzneimittel-Q&A | Beipackzettel erkennen und Dosierung, Risiken und Hinweise beantworten. |
|
||||
| 7 | Patientenverstaendliche Artikel | Krankheitsname und Zielgruppe in einfache Texte ueberfuehren. |
|
||||
| 8 | Bildbefund-Generator | Radiologische Merkmale in strukturierte Berichtsvorlagen schreiben. |
|
||||
| 9 | OP-Bericht | Sprachaufzeichnungen in codierte, strukturierte OP-Dokumentation ueberfuehren. |
|
||||
| 10 | Medikations-Erinnerung | Medikamentenliste analysieren und Erinnerungen samt Warnungen erzeugen. |
|
||||
|
||||
## 6. Cybersicherheit
|
||||
|
||||
Security-Szenarien verbinden Logdaten, Code, Bedrohungswissen und klare Handlungsablaeufe. LLM hilft beim Erklaeren und Priorisieren.
|
||||
|
||||
| Nr. | Anwendungsszenario | Umsetzungsreferenz |
|
||||
| :--: | --- | --- |
|
||||
| 1 | Code-Schwachstellen-Fix | SAST-Ergebnisse erklaeren und Pull-Request-Vorschlaege erzeugen. |
|
||||
| 2 | Phishing-Erkennung | Mailtext, Sender und Links analysieren und Gateway-Regeln anstossen. |
|
||||
| 3 | Security-Tagesbericht | Logs zusammenfassen und wichtige Ereignisse hervorheben. |
|
||||
| 4 | Security-Wissens-Q&A | CVE- und interne Dokumente als RAG-Wissen nutzen. |
|
||||
| 5 | Penetrationstest-Bericht | Schwachstellen in Berichte und Reparaturhinweise ueberfuehren. |
|
||||
| 6 | Malware- und Datenschutzmonitoring | Sandboxsignale auswerten und sensible Daten erkennen. |
|
||||
| 7 | Compliance-Checkliste | Systemtyp in Sicherheitschecklisten nach CIS oder anderen Standards umsetzen. |
|
||||
| 8 | Threat-Intelligence-Q&A | Externe und interne Quellen verbinden und auf eigene Assets beziehen. |
|
||||
| 9 | Incident-Postmortem | Zeitlinie, Ursache und Verbesserungen aus Ereignisdaten erzeugen. |
|
||||
| 10 | Globales Threat-Monitoring | Sicherheitsnews und Disclosure-Daten sammeln, bewerten und melden. |
|
||||
|
||||
## 7. Finanzen und Versicherung
|
||||
|
||||
Finanzszenarien drehen sich um Risiko, Compliance, Dokumente, Beratung und Berichte. AI sollte hier immer mit Audit- und Review-Prozessen gekoppelt werden.
|
||||
|
||||
| Nr. | Anwendungsszenario | Umsetzungsreferenz |
|
||||
| :--: | --- | --- |
|
||||
| 1 | Kredit-Due-Diligence | Unternehmens- und Finanzdaten in Risikoberichte ueberfuehren. |
|
||||
| 2 | Vermoegensberatung | Risikopraeferenz und Zielportfolio analysieren. |
|
||||
| 3 | IPO-Prospekt | Vorlagen fuellen und Datenkonsistenz pruefen. |
|
||||
| 4 | Finanzbericht | Managementanalyse und Warnungen vor Kennzahlenabweichungen erzeugen. |
|
||||
| 5 | Beleg-Q&A | Rechnungen per OCR erkennen und Rueckfragen beantworten. |
|
||||
| 6 | Compliance-Fallrecherche | Straf- und Regulierungsfaelle abrufbar machen. |
|
||||
| 7 | Versicherungscoach | Kundenszenarien simulieren und Skripte bewerten. |
|
||||
| 8 | Versicherungsproduktvergleich | Klauseln strukturieren und Unterschiede hervorheben. |
|
||||
| 9 | Emotionserkennung im Vertrieb | Stimme und Formulierungen fuer Coachinghinweise auswerten. |
|
||||
| 10 | Schadenstatus-Dialog | Police oder Fallnummer abfragen und Status erklaeren. |
|
||||
|
||||
## 8. Unternehmensservices
|
||||
|
||||
Unternehmensservices betreffen CRM, HR, Marketing, Meeting-Workflows und interne Verwaltung. Gute Projekte starten meist bei einem konkreten, wiederkehrenden Prozess.
|
||||
|
||||
| Nr. | Anwendungsszenario | Umsetzungsreferenz |
|
||||
| :--: | --- | --- |
|
||||
| 1 | Kundenabwanderungswarnung | Verhalten erfassen, Churn-Risiko modellieren und Rueckgewinnung empfehlen. |
|
||||
| 2 | B2B-Outreach | Firmendaten filtern und personalisierte E-Mails erzeugen. |
|
||||
| 3 | Sales-Pipeline-Prognose | CRM-Daten analysieren und Zielerreichung vorhersagen. |
|
||||
| 4 | Markenmonitoring | Nachrichten und Social Media auswerten und Krisen frueh erkennen. |
|
||||
| 5 | E-Mail-Assistent | Kontext verstehen und professionelle Antwortentwuerfe erzeugen. |
|
||||
| 6 | CV-Parsing und Matching | Lebenslaeufe extrahieren und passende Stellen empfehlen. |
|
||||
| 7 | Onboarding-Q&A | Handbuecher und Prozesse fuer neue Mitarbeiter abrufbar machen. |
|
||||
| 8 | OKR-Feedback | Zielerreichung analysieren und Feedbackvorschlaege erzeugen. |
|
||||
| 9 | Meeting-Notizen | Transkription, Entscheidungen und Aufgaben automatisch erfassen. |
|
||||
| 10 | Rechnungs- und Spesenprozess | OCR, Plausibilitaetspruefung und Finanzsystemanbindung kombinieren. |
|
||||
|
||||
## 9. Content-Produktion und Betrieb
|
||||
|
||||
Content-Prozesse sind gut geeignet, weil Entwurf, Varianten, Bewertung und Distribution stark wiederholbar sind.
|
||||
|
||||
| Nr. | Anwendungsszenario | Umsetzungsreferenz |
|
||||
| :--: | --- | --- |
|
||||
| 1 | Film- und Romanassistenz | Outline, Figuren, Dialoge und Storystruktur erzeugen. |
|
||||
| 2 | Markenstory und PR-Text | Markenkeywords in mehrere Versionen fuer A/B-Tests umwandeln. |
|
||||
| 3 | Virtueller Livestream-Avatar | Avatar, TTS, LLM-Dialog und OBS-Streaming verbinden. |
|
||||
| 4 | Short-Video-Skript und Schnitt | Skript, Storyboard und Highlight-Clips generieren. |
|
||||
| 5 | Verkaufsgespraech-Skripte | Telefonaufnahmen analysieren und erfolgreiche Formulierungen empfehlen. |
|
||||
| 6 | Marketing-Content-System | Produktdaten in Copy, Bilder und Kampagnenvarianten ueberfuehren. |
|
||||
| 7 | ROI-Monitoring fuer Ads | Plattform-APIs auswerten und Optimierungen vorschlagen. |
|
||||
| 8 | Keyword- und Traffic-Analyse | Suchdaten analysieren und Content-Themen empfehlen. |
|
||||
| 9 | Wettbewerber-Werbung | Anzeigen sammeln und Strategien sowie Creatives vergleichen. |
|
||||
| 10 | Trendanalyse und Redaktionsplan | Hot Topics auswerten und Kalenderplaene erzeugen. |
|
||||
|
||||
## 10. Smart Government
|
||||
|
||||
Verwaltungsprojekte muessen Verstaendlichkeit, Nachvollziehbarkeit und Sicherheit verbinden. AI kann Buergeranliegen strukturieren und interne Arbeit beschleunigen.
|
||||
|
||||
| Nr. | Anwendungsszenario | Umsetzungsreferenz |
|
||||
| :--: | --- | --- |
|
||||
| 1 | Buergerhotline-Dispatch | Anruf erkennen, Anliegen klassifizieren und an Abteilungen leiten. |
|
||||
| 2 | Service-Wegweiser | Verwaltungswissen per RAG fuer Verfahren und Politikfragen nutzen. |
|
||||
| 3 | Foerderpolitik-Matching | Unternehmensprofile mit passenden Programmen abgleichen. |
|
||||
| 4 | Unterlagen-Vorpruefung | OCR und Regeln pruefen Vollstaendigkeit und Compliance. |
|
||||
| 5 | Videoanomalie im oeffentlichen Raum | CV erkennt Schlaegerei, Sturz oder andere Risiken. |
|
||||
| 6 | Stadt-Grid-Dispatch | IoT- und Kameradaten in Ereignistypen und Arbeitsauftraege ueberfuehren. |
|
||||
| 7 | Oeffentliche Meinung und Risiko | Hotline, Netzbeobachtung und Umfragen zusammen analysieren. |
|
||||
| 8 | Digitale Archivierung | OCR extrahiert Text; LLM klassifiziert Akten. |
|
||||
| 9 | Notfallressourcen-Dispatch | Ereignisdaten in Reaktionsplaene und Ressourcenverteilung ueberfuehren. |
|
||||
| 10 | Umweltmonitoring | Luftsensoren und CV-Quellen auswerten und Trends erklaeren. |
|
||||
|
||||
## 11. Recht und Vertragsmanagement
|
||||
|
||||
Rechtliche Szenarien profitieren von Dokumentenstrukturierung, Aehnlichkeitssuche und klarer Risikoerklaerung. Fachliche Pruefung bleibt zwingend.
|
||||
|
||||
| Nr. | Anwendungsszenario | Umsetzungsreferenz |
|
||||
| :--: | --- | --- |
|
||||
| 1 | Vertragsrisiko-Agent | Vertragsklauseln gegen Risikolisten pruefen. |
|
||||
| 2 | Vertragslebenszyklus-Review | Regelwerke vergleichen und Aenderungsvorschlaege verfolgen. |
|
||||
| 3 | Gewinnwahrscheinlichkeitsanalyse | Fallmerkmale und aehnliche Urteile auswerten. |
|
||||
| 4 | Gesetzesaenderungsradar | Aenderungen erkennen, zusammenfassen und Auswirkungen melden. |
|
||||
| 5 | Anwaltsschreiben-Entwurf | Sachverhalte in formale Schreiben und Checklisten ueberfuehren. |
|
||||
| 6 | Gerichtstranskription | Audio transkribieren und Streitpunkte mit Zeitstempeln extrahieren. |
|
||||
| 7 | IP-Verletzungsmonitoring | Plattformen beobachten und Beweise sichern. |
|
||||
| 8 | IPO-Datenkonsistenz | Prospektkapitel vergleichen und Abweichungen markieren. |
|
||||
| 9 | Klauseln in Alltagssprache | Markierte Rechtsklauseln einfach erklaeren. |
|
||||
| 10 | Beweisketten-Visualisierung | Materialien hochladen, Beziehungen und Zeitlinien analysieren. |
|
||||
|
||||
## 12. Reise und Mobilitaet
|
||||
|
||||
Reiseszenarien verbinden Planung, Preise, Uebersetzung, Bewertungen und Echtzeitdaten. AI macht aus vielen kleinen Informationen nutzbare Empfehlungen.
|
||||
|
||||
| Nr. | Anwendungsszenario | Umsetzungsreferenz |
|
||||
| :--: | --- | --- |
|
||||
| 1 | AIGC-Reisefuehrer | Tage, Budget und Interessen in Reiseplaene umwandeln. |
|
||||
| 2 | Preisprognose fuer Flug und Hotel | OTA-Daten sammeln, Trends modellieren und Warnungen senden. |
|
||||
| 3 | Reorganisation bei Flugausfall | Statusdaten pruefen und Alternativrouten empfehlen. |
|
||||
| 4 | Visa-Unterlagen-Assistent | Dokumente erkennen, Vollstaendigkeit pruefen und Formulare fuellen. |
|
||||
| 5 | Reiseuebersetzung | Sprache offline uebersetzen und Menuebilder per OCR erklaeren. |
|
||||
| 6 | Hotelbewertungsanalyse | Bewertungen auswerten und Risiken sowie Vorteile verdichten. |
|
||||
| 7 | VR-Zielvorschau | 360-Grad-Bilder und virtuelle Zimmerbesichtigung kombinieren. |
|
||||
| 8 | Reisebericht aus Fotos | Zeit und Ort extrahieren und Social Copy erzeugen. |
|
||||
| 9 | Geschaeftsreise-Abrechnung | Plattform-APIs und Rechnungen fuer Compliance pruefen. |
|
||||
| 10 | Besucherflussprognose | Auslastungsdaten modellieren und Routen mit weniger Andrang empfehlen. |
|
||||
|
||||
## 13. Emotionale Begleitung
|
||||
|
||||
Emotionale AI-Anwendungen verlangen besondere Vorsicht, Datenschutz und klare Eskalationsmechanismen. Sie eignen sich eher als begleitende Assistenz als als Ersatz fuer Fachhilfe.
|
||||
|
||||
| Nr. | Anwendungsszenario | Umsetzungsreferenz |
|
||||
| :--: | --- | --- |
|
||||
| 1 | Virtueller Begleiter | Dialogverlauf speichern und personalisierte Antworten erzeugen. |
|
||||
| 2 | Emotionserkennung und Beratung | Stimme und Text analysieren; Krisenhinweise erkennen. |
|
||||
| 3 | Alzheimer-Training | Kognitive Spiele und Erinnerungsmedien kombinieren. |
|
||||
| 4 | Sozialangst-Coach | Virtuelle soziale Situationen simulieren. |
|
||||
| 5 | Gute-Nacht-Geschichten fuer Kinder | Thema und Vorlieben in personalisierte Geschichten verwandeln. |
|
||||
| 6 | Digitale Erinnerungsperson | Vorhandene Texte und Stimmen fuer Erinnerungsdialoge nutzen. |
|
||||
| 7 | Persoenlichkeitsspiegel | Testdaten in Analyse und empathische Antworten ueberfuehren. |
|
||||
| 8 | Stimmungsmonitor | Tagebuchdaten auswerten und positive Impulse senden. |
|
||||
| 9 | Anonyme Jugendberatung | Niedrigschwellige Gespraeche mit Sicherheitswarnungen kombinieren. |
|
||||
| 10 | Virtuelles Haustier | Persoenlichkeitsmodell und Interaktion wachsen lassen. |
|
||||
|
||||
## 14. Unterhaltung und Freizeit
|
||||
|
||||
Unterhaltungsszenarien nutzen AI fuer Story, Personalisierung, Audio, Video und Gameplay. Der Kern ist meist ein besseres Erlebnis, nicht nur Automatisierung.
|
||||
|
||||
| Nr. | Anwendungsszenario | Umsetzungsreferenz |
|
||||
| :--: | --- | --- |
|
||||
| 1 | Open-World-NPC-Engine | Verhaltensbaum und LLM-Dialoge verbinden. |
|
||||
| 2 | Murder-Mystery-DM-Assistent | Entscheidungen in Hinweise, Logik und Zweige ueberfuehren. |
|
||||
| 3 | Interaktive Romanenden | Leserwahl in alternative Enden umwandeln. |
|
||||
| 4 | 3D-Charaktergenerierung | Textbeschreibung in Skizze, Modell und Material ueberfuehren. |
|
||||
| 5 | E-Sport-Kommentator | Spielbild analysieren und Kommentare erzeugen. |
|
||||
| 6 | Humor-Empfehlung | Nutzerprofil mit passenden Inhalten abgleichen. |
|
||||
| 7 | AI-Stimmkorrektur | Rauschen reduzieren und Gesangsstimme verbessern. |
|
||||
| 8 | Serienclip-Extraktion | Figurenbezogene Szenen erkennen und schneiden. |
|
||||
| 9 | Mehrrollen-Hoerbuch | Rollen verteilen, Stimmen erzeugen und Effekte mischen. |
|
||||
| 10 | Spielanalyse-Coach | Partien auswerten und Trainingshinweise geben. |
|
||||
|
||||
## 15. E-Commerce Services
|
||||
|
||||
E-Commerce-Projekte zielen auf schnellere Content-Produktion, bessere Conversion, Kundenservice und Preis- oder Trendanalyse.
|
||||
|
||||
| Nr. | Anwendungsszenario | Umsetzungsreferenz |
|
||||
| :--: | --- | --- |
|
||||
| 1 | Produktdetailseiten-Batchproduktion | Produktdaten in Selling Points, Szenen und Bilder ueberfuehren. |
|
||||
| 2 | Virtuelles Kleidermodel | Produktbilder in Try-on und Demo-Videos umwandeln. |
|
||||
| 3 | Mehrsprachige Lokalisierung | Produkttexte uebersetzen und kulturell anpassen. |
|
||||
| 4 | Sentimentbasierter Kundenbot | Beratungsgespräche analysieren und passende Antworten erzeugen. |
|
||||
| 5 | Digitaler Livestream-Verkauf | Avatar, Produktdaten und Echtzeitskript verbinden. |
|
||||
| 6 | Preisvergleichs-Plugin | Preise crawlen, Trends zeigen und Warnungen ausloesen. |
|
||||
| 7 | Kaeuferbild-Auswahl und Short-Video | UGC bewerten und in Video-Vorlagen einsetzen. |
|
||||
| 8 | Verkaufsdialog-Analyse | ASR und Compliance-Check mit Skriptempfehlung kombinieren. |
|
||||
| 9 | Trend- und Bestseller-Prognose | Social- und Shopdaten fuer Produktauswahl analysieren. |
|
||||
| 10 | Private-Traffic-Cluster | Nutzerverhalten clustern und Marketingautomatisierung ausloesen. |
|
||||
|
||||
## 16. Energie
|
||||
|
||||
Energieszenarien verbinden Messdaten, Prognosen, Inspektion und Nachhaltigkeitsberichte. AI hilft vor allem bei Analyse und operativer Empfehlung.
|
||||
|
||||
| Nr. | Anwendungsszenario | Umsetzungsreferenz |
|
||||
| :--: | --- | --- |
|
||||
| 1 | Stromverbrauchsanalyse | Smart-Meter-Daten auswerten und Sparhinweise geben. |
|
||||
| 2 | PV-Defekterkennung | Drohnenbilder und Thermodaten fuer Defektmarkierung nutzen. |
|
||||
| 3 | Strompreisstrategie | Marktpreise prognostizieren und Handelsstrategie erzeugen. |
|
||||
| 4 | Batteriegesundheit | Betriebsdaten analysieren und Thermal-Runaway-Risiken warnen. |
|
||||
| 5 | CO2-Footprint und ESG | Energieverbrauch in Emissionen und Berichte umrechnen. |
|
||||
| 6 | Netzlast bei Extremwetter | Wetter- und Lastdaten fuer Dispatch-Strategien nutzen. |
|
||||
| 7 | Tankstellen-Sicherheitsvideo | Riskante Handlungen erkennen und Alarm senden. |
|
||||
| 8 | Pipeline-Lecksuche | Akustiksensoren analysieren und Leckposition berechnen. |
|
||||
| 9 | Virtuelles Kraftwerk | Dezentrale Ressourcen buendeln und Handelsentscheidungen unterstuetzen. |
|
||||
| 10 | Minensicherheit | Standortdaten verfolgen und Sperrzonenalarm ausloesen. |
|
||||
|
||||
## 17. Audio und Video
|
||||
|
||||
Audio- und Videoszenarien verbessern Produktion, Restauration, Transkription und Wiederverwertung von Medieninhalten.
|
||||
|
||||
| Nr. | Anwendungsszenario | Umsetzungsreferenz |
|
||||
| :--: | --- | --- |
|
||||
| 1 | Highlight-Erkennung | Langvideos analysieren und kurze Clips schneiden. |
|
||||
| 2 | Rauschtrennung | Audiomodelle entfernen Hintergrund und verstaerken Stimme. |
|
||||
| 3 | 4K-Restauration | Super-Resolution und Kolorierung fuer alte Aufnahmen nutzen. |
|
||||
| 4 | TTS-Synchronisation | Mehrere Stimmen und Emotionen generieren. |
|
||||
| 5 | Bilinguale Untertitel | ASR, Uebersetzung und Untertitel-Overlay kombinieren. |
|
||||
| 6 | Objektentfernung im Video | Tracking und Inpainting fuer konsistente Frames nutzen. |
|
||||
| 7 | Lizenzfreie Musik | Musikmodelle erzeugen Stilvarianten und pruefen Rechte. |
|
||||
| 8 | Stimmklon und Voice Conversion | Wenige Samples fuer personalisierte Stimmen nutzen. |
|
||||
| 9 | Drehbuch zu Storyboard | Skripte parsen und Vorschauvideos generieren. |
|
||||
| 10 | Meeting-Transkription | Sprechertrennung, Aufgabenextraktion und Zeitstempel erzeugen. |
|
||||
|
||||
## 18. AI-Marketing
|
||||
|
||||
AI-Marketing kombiniert Content-Erstellung, Layout, Trendanalyse, Budgetsteuerung und Markenmonitoring.
|
||||
|
||||
| Nr. | Anwendungsszenario | Umsetzungsreferenz |
|
||||
| :--: | --- | --- |
|
||||
| 1 | Virale Social-Copy | Themen in kurze, teilbare Copy mit Hashtags umsetzen. |
|
||||
| 2 | Posterlayout | Copy und Vorlage in mehrere Formate exportieren. |
|
||||
| 3 | Markenlogo und VI | Markenkeywords in Logoideen und visuelle Regeln verwandeln. |
|
||||
| 4 | Trend-Hunting | Hot Topics sammeln und Marketingwinkel ableiten. |
|
||||
| 5 | ROI- und Budgetsteuerung | Ad-Plattformdaten analysieren und Gebote optimieren. |
|
||||
| 6 | Wettbewerber-Wochenbericht | Konkurrenzinhalte sammeln, Strategien erkennen und berichten. |
|
||||
| 7 | SEO-Artikel-Batch | Keywords analysieren und Artikel mit Optimierungshinweisen erzeugen. |
|
||||
| 8 | Personalisierte Marketingmail | Nutzerprofile in individuelle E-Mails und A/B-Tests uebersetzen. |
|
||||
| 9 | Markenreputation | Netzweite Stimmung auswerten und Krisenwarnungen senden. |
|
||||
| 10 | Short-Video-Storyboard | Thema in Skript, Shots und Drehhinweise ueberfuehren. |
|
||||
|
||||
## 19. Datenintelligenz
|
||||
|
||||
Datenintelligenz macht Daten fuer Fachbereiche nutzbar: Fragen, Visualisierungen, Qualitaet, Governance und Kennzahlendefinitionen.
|
||||
|
||||
| Nr. | Anwendungsszenario | Umsetzungsreferenz |
|
||||
| :--: | --- | --- |
|
||||
| 1 | Text-to-SQL-Datenabfrage | Natuerliche Sprache in SQL und Visualisierung umwandeln. |
|
||||
| 2 | Dialogisches BI | Eine Frage erzeugt Diagramme und alternative Darstellungen. |
|
||||
| 3 | Screenshot zu Excel | Tabellenstrukturen per VLM erkennen und exportieren. |
|
||||
| 4 | Bild zu Tabelle | OCR erkennt Zellstruktur und Daten. |
|
||||
| 5 | Wissensgraph aus heterogenen Daten | Entitaeten und Beziehungen extrahieren und speichern. |
|
||||
| 6 | Berichtserklaerung | Diagramme oder Daten hochladen und Trends erklaeren lassen. |
|
||||
| 7 | Schema-Q&A | Tabellen und Felder erklaeren und Beispiel-SQL erzeugen. |
|
||||
| 8 | Master-Data-Deduplizierung | Mehrere Quellen abgleichen und Dubletten zusammenfuehren. |
|
||||
| 9 | Datenanforderung zu Testfaellen | Anforderungen in Pruefszenarien und Validierungen uebersetzen. |
|
||||
| 10 | Kennzahlen-Q&A | Definitionen, Berechnungslogik und Abhaengigkeiten abrufbar machen. |
|
||||
@@ -0,0 +1,496 @@
|
||||
---
|
||||
title: 'Mit Jobs to Be Done herausfinden, was Nutzer wirklich erreichen wollen'
|
||||
description: 'Ein Einführungsartikel zu Jobs to Be Done für Einsteiger. Verstehen Sie, dass Nutzer keine Funktionen kaufen, sondern in bestimmten Szenarien Ihr Produkt "einstellen", um einen Fortschritt zu erzielen. Lernen Sie, mit JTBD Produktrichtungen, Interviewfragen und AI-Prompts zu strukturieren.'
|
||||
---
|
||||
|
||||
<script setup>
|
||||
const duration = 'Etwa <strong>1,5 Stunden</strong>'
|
||||
</script>
|
||||
|
||||
# Mit Jobs to Be Done herausfinden, was Nutzer wirklich erreichen wollen
|
||||
|
||||
<a id="top-jtbd"></a>
|
||||
|
||||
## Kapitelübersicht
|
||||
|
||||
<ChapterIntroduction
|
||||
:duration="duration"
|
||||
:tags="['JTBD', 'Nutzerbedürfnisse', 'Produktdenken', 'Bedarfserkenntnis']"
|
||||
coreOutput="1 JTBD-Satz, der einem echten Bedarf näher kommt"
|
||||
expectedOutput="Eine vage Idee zu einem konkreteren Nutzerszenario und einer MVP-Richtung verdichten können"
|
||||
>
|
||||
|
||||
Viele Anfänger machen bei der Produktentwicklung am häufigsten den Fehler, ihre gesamte Aufmerksamkeit auf "Welche Funktionen will ich bauen" zu richten. Man sieht, dass andere intelligente Kategorisierung haben, man will auch welche; man sieht, dass andere automatische Zusammenfassung haben, man will auch welche; man sieht, dass andere Agenten, Multimodalität und Workflows gebaut haben, man fühlt sich auch nicht zurückbleiben.
|
||||
|
||||
In der Realität entscheiden sich Nutzer aber selten deshalb für ein Produkt, weil "der Funktionsname cool klingt". Vielmehr möchten sie in einem bestimmten Moment etwas voranbringen und "stellen" ad hoc ein Werkzeug, einen Service oder sogar eine Person ein, die ihnen bei diesem Schritt hilft.
|
||||
|
||||
Genau das ist es, was die **Jobs to Be Done (JTBD)** -Methode uns verdeutlichen will: **Nutzer kaufen nicht die Funktion an sich, sondern stellen eine Lösung ein, die ihnen hilft, einen Fortschritt zu erzielen.**
|
||||
|
||||
Dieser Artikel führt Sie in verständlicher Sprache durch JTBD und macht es zu einem Analysewerkzeug, das Sie direkt bei der Entwicklung von AI-Anwendungen einsetzen können.
|
||||
|
||||
</ChapterIntroduction>
|
||||
|
||||
::: info Minimales SOP
|
||||
**Ziel**: Nach dem Lesen wissen Sie besser, wie Sie eine vage Idee in einen Satz mit echtem Nutzerszenario verdichten, anstatt nur eine Sammlung von Funktionsnamen im Kopf zu haben.
|
||||
|
||||
**Aktionspunkte**: 1 vage Idee aufschreiben, 3 potenzielle Nutzer nach "Wie haben Sie das letzte Mal damit umgebracht" fragen und dann zu 1 JTBD-Satz zusammenfassen.
|
||||
|
||||
**Ergebnis**: Sie erhalten eine klarere Bedarfshypothese und wissen, was in der ersten Version prioritär gelöst werden sollte.
|
||||
|
||||
**Stichwortsprünge**: [Was ist JTBD](#jtbd-what) · [Ein-Satz-Formel](#jtbd-formula) · [Wie AI Ihnen hilft](#jtbd-ai)
|
||||
:::
|
||||
|
||||
## Was Sie lernen werden
|
||||
|
||||
1. Was Jobs to Be Done ist und warum es näher an echten Bedürfnissen liegt als "Funktions-Brainstorming"
|
||||
2. Wie man unterscheidet zwischen "Funktionen, die Nutzer sagen zu wollen" und "was Nutzer wirklich erreichen wollen"
|
||||
3. Wie man mit einer einfachen Vorlage eine vage Idee in Szenario, Auslöser, Hindernis und Erfolgskriterium zerlegt
|
||||
4. Wie man JTBD bei AI-Produkten, Interview-Fragen und Prompt-Strukturierung anwendet
|
||||
|
||||
<a id="jtbd-what"></a>
|
||||
## [1. Was ist Jobs to Be Done?](#top-jtbd)
|
||||
|
||||
Jobs to Be Done wird oft als **JTBD** abgekürzt. Die Kernidee dahinter hängt mit dem klassischen Ausdruck zusammen, den Clayton Christensens Team verbreitet hat: **Nutzer "stellen" ein Produkt ein, um etwas zu erledigen.**
|
||||
|
||||
Dieses "Etwas" ist keine oberflächliche Aktion auf einer To-do-Liste, sondern ein **Fortschritt**, den der Nutzer für seinen Zustand anstrebt. Zum Beispiel:
|
||||
|
||||
- Nicht "Ich brauche ein AI-Protokoll-Tool", sondern "Ich möchte innerhalb von 10 Minuten nach einem Meeting die wichtigsten Punkte, Aufgaben und Verantwortlichen zusammenfassen, anstatt mich auf Erinnerung zu verlassen"
|
||||
- Nicht "Ich brauche eine Haushaltsbuch-App", sondern "Ich möchte wissen, wohin mein Geld geht, damit ich am Monatsende nicht mehr ängstlich bin"
|
||||
- Nicht "Ich brauche einen Lebenslauf-Optimierer", sondern "Ich möchte zuversichtlicher einen ansehnlichen Lebenslauf verschicken, ohne bei jeder Bewerbung zu zweifeln, dass er schlecht geschrieben ist"
|
||||
|
||||
Deshalb konzentriert sich **JTBD nicht darauf, wie das Produkt aussieht, sondern darauf, warum der Nutzer es in diesem Moment braucht.**
|
||||
|
||||
Das erklärt auch, warum viele scheinbar unterschiedliche Produkte tatsächlich um denselben Job konkurrieren. Wenn ein Nutzer "auf dem Arbeitsweg weniger gelangweilt sein" möchte, könnte er Kurzvideos, Podcasts, Spiele, Chats oder sogar Nickerchen einsetzen. Wenn ein Nutzer "ein langes PDF schnell verstehen" möchte, könnte er AI-Zusammenfassungs-Tools, Praktikanten, Kollegen, sich selbst durchbeißen oder es erst einmal liegen lassen.
|
||||
|
||||
Mit dieser Perspektive werden Sie feststellen, dass Ihre wahren Konkurrenten oft nicht nur "eine andere App, die wie Ihre aussieht" sind, sondern **alle akzeptablen Alternativlösungen, die dem Nutzer aktuell zur Verfügung stehen.**
|
||||
|
||||
## 2. Worin unterscheidet sich JTBD von Personas und Funktionslisten?
|
||||
|
||||
Viele Einsteiger beginnen die Bedarfsanalyse mit Personas: 25 Jahre alt, weiblich, Großstadt, Büroangestellte, mag Effizienz-Tools, offen für neue Produkte. Diese Informationen sind nicht ganz nutzlos, aber sie **erklären oft nicht, warum eine Person in diesem Moment handelt.**
|
||||
|
||||
JTBD interessiert sich eher für folgende Fragen:
|
||||
|
||||
- In welchem Szenario hat er beschlossen, nach einer Lösung zu suchen?
|
||||
- Was genau hat ihn blockiert?
|
||||
- Was möchte er zum nächsten Schritt voranbringen?
|
||||
- Mit welchem behelfsmäßigen Ansatz hält er sich aktuell über Wasser?
|
||||
- Welches Ergebnis würde ihn das Gefühl haben lassen: "Es hat sich gelohnt"
|
||||
|
||||
Mit anderen Worten: **Personas beschreiben eher, wer dieser Mensch ungefähr ist; JTBD beschreibt eher, was dieser Mensch jetzt wirklich erreichen will.**
|
||||
|
||||
Gleichzeitig führen Funktionslisten oft in die Irre. Nutzer sagen: "Ich will Word-Export", "Ich will AI-Umschreibung", "Ich will Spracheingabe". Das sind alles oberflächliche Äußerungen. JTBD fragt weiter:
|
||||
|
||||
- Warum benötigen Sie jetzt Word-Export und nicht PDF?
|
||||
- Möchten Sie umschreiben, weil der Stil schlecht ist, oder weil Sie verschiedene Zielgruppen ansprechen müssen?
|
||||
- Möchten Sie Spracheingabe, weil Sie nicht tippen möchten, oder weil Sie häufig unterwegs, beim Autofahren oder direkt nach Meetings aufzeichnen?
|
||||
|
||||
Oft ist **eine Funktion nur eine vorläufige Übersetzung eines Jobs.** Wenn Sie nur Funktionen sammeln, machen Sie leicht ein Produkt, das "alles aufstapelt, was Nutzer sagen". Wenn Sie den dahinterliegenden Job erkennen, haben Sie eher die Chance, eine wirklich handliche und wettbewerbsfähige Lösung zu entwickeln.
|
||||
|
||||
## 3. Ein Beispiel, das auch Einsteiger verstehen
|
||||
|
||||
Lassen Sie uns zunächst nicht an komplexe AI-Produkte denken, sondern mit einem Alltagsbeispiel beginnen.
|
||||
|
||||
Angenommen, jemand hat morgens vor dem Verlassen des Hauses keine Zeit zum Frühstück und kauft oft ein Sandwich und Kaffee am U-Bahn-Eingang. Oberflächlich betrachtet "kauft" er ein Frühstück. Mit der JTBD-Perspektive könnte das, was er wirklich erreichen will, jedoch sein:
|
||||
|
||||
- An einem morgendlichen Tag in Eile mit minimalem geistigen Aufwand eine Mahlzeit organisieren
|
||||
- Sicherstellen, dass er vor der Ankunft im Büro nicht hungrig wird
|
||||
- Sein Arbeitsweg-Tempo nicht durch Frühstück beeinträchtigen
|
||||
|
||||
In diesem Fall stellt der Nutzer nicht "eine bestimmte Sandwich-Marke" ein, sondern eine Lösung, die ihm hilft, seinen Morgen reibungslos zu gestalten. Wenn der nahe gelegene Supermarkt schneller, näher und zuverlässiger ist, könnte er sofort wechseln.
|
||||
|
||||
Diesen Logik auf AI-Produkte übertragen, wird es noch offensichtlicher.
|
||||
|
||||
Wenn Sie beispielsweise ein "AI-Meeting-Protokoll-Tool" entwickeln möchten, würden Sie auf Funktionsebene leicht darüber nachdenken:
|
||||
|
||||
- Audio-Upload unterstützen
|
||||
- Sprecher-Trennung integrieren
|
||||
- Markdown-Export anbieten
|
||||
- Automatische Aufgaben generieren
|
||||
|
||||
Das alles ist nicht falsch, aber noch nicht ausreichend. Mit JTBD eine Ebene tiefer gefragt, könnte der Nutzer Folgendes wirklich erreichen wollen:
|
||||
|
||||
- Innerhalb von 10 Minuten nach dem Meeting die Diskussionsergebnisse an nicht anwesende Personen weiterleiten
|
||||
- Aufgaben, Verantwortliche und Fristen sauber extrahieren, damit das Team nicht aus dem Gedächtnis zusammenarbeiten muss
|
||||
- Die Zeit für wiederholtes Zusammenfassen von Meeting-Inhalten reduzieren und Energie für Entscheidungen und Fortschritt aufwenden
|
||||
|
||||
Sobald der Job klar formuliert ist, ergeben sich viele Funktionsprioritäten automatisch. Vielleicht ist das Wichtigste in der ersten Version nicht "12 Exportformate unterstützen", sondern:
|
||||
|
||||
- Protokollstruktur muss klar genug sein
|
||||
- Aufgabenerkennung muss zuverlässig sein
|
||||
- Freigabelink muss bequem sein
|
||||
- Ergebnisse müssen direkt an das Team weitergeleitet werden können
|
||||
|
||||
Das ist der Wert von JTBD: **Es hilft Ihnen, von "Welche Fähigkeiten will ich aufstapeln" zurückzukehren zu "Welchen Fortschritt will ich dem Nutzer ermöglichen".**
|
||||
|
||||
## 4. Eine nützliche JTBD-Vorlage
|
||||
|
||||
Wenn Sie Einsteiger sind, müssen Sie JTBD zunächst nicht zu akademisch betrachten. Konzentrieren Sie sich auf die 5 wichtigsten Elemente.
|
||||
|
||||
### 4.1 Szenario
|
||||
|
||||
In welchem Moment und in welcher Umgebung denkt der Nutzer an dieses Produkt?
|
||||
|
||||
- Nach einem Meeting
|
||||
- Wenn der Chef spontan Material anfordert
|
||||
- Abends bei der Vorbereitung einer Bewerbung
|
||||
- Am Monatsende, wenn das Geld wieder nicht reicht
|
||||
|
||||
**Ein Bedarf ohne Szenario ist meist noch nicht echt genug.**
|
||||
|
||||
### 4.2 Auslöser
|
||||
|
||||
Was bringt ihn dazu, sofort nach einer Lüsung zu suchen?
|
||||
|
||||
- Von langen Dokumenten überwältigt und weiß nicht, wo man anfangen soll
|
||||
- Morgen muss Material abgegeben werden, heute erst gemerkt, dass das Format chaotisch ist
|
||||
- Gerade vom Chef nach dem Fortschritt gefragt und bemerkt, dass man nicht klar zusammengefasst hat
|
||||
- Möchte kontinuierlich aufzeichnen, aber handschriftlich, kopieren und zusammenstellen ist zu aufwendig
|
||||
|
||||
Auslöser sind oft emotional aufgeladen. Diese Emotion ist wichtig, denn sie bestimmt, warum der Nutzer in diesem Moment handelt.
|
||||
|
||||
### 4.3 Gewünschter Fortschritt
|
||||
|
||||
Er will nicht nur "eine Aktion ausführen", sondern sich in einen neuen Zustand bringen:
|
||||
|
||||
- Von Chaos zu Klarheit
|
||||
- Von Angst zu Sicherheit
|
||||
- Von Aufschieben zu Aufbrechen
|
||||
- Von Ineffizienz zu Leichtigkeit
|
||||
- Von Unklarheit zu direkter Lieferung
|
||||
|
||||
In diesem Schritt ist das Wort "Fortschritt" entscheidend. Denn viele kaufen nicht das Werkzeug, sondern die **Zustandsveränderung.**
|
||||
|
||||
### 4.4 Aktuelle Alternativlösung
|
||||
|
||||
Wie macht er es ohne Ihr Produkt?
|
||||
|
||||
- Manuell kopieren und einfügen
|
||||
- Mit Excel oder Notizen kämpfen
|
||||
- Kollegen um Hilfe bitten
|
||||
- Aufschieben
|
||||
- Zwischen mehreren Tools hin- und herwechseln
|
||||
|
||||
Wer die Alternative ist, das ist Ihre echte Wettbewerbsumgebung.
|
||||
|
||||
### 4.5 Erfolgskriterium
|
||||
|
||||
Wann gilt das Problem als wirklich gelöst?
|
||||
|
||||
- Innerhalb von 10 Minuten ein teilbares Ergebnis erhalten
|
||||
- Ohne größere Nachbearbeitung an andere versenden können
|
||||
- Keine wichtigen Punkte übersehen, keine Fehler machen, nichts vergessen
|
||||
- Beim ersten Mal wissen, wie es weitergeht
|
||||
|
||||
Wenn Sie nicht einmal sagen können, "wie der Nutzer beurteilt, ob es sich gelohnt hat", ist die Richtung wahrscheinlich noch nicht ausreichend konvergiert.
|
||||
|
||||
<a id="jtbd-formula"></a>
|
||||
## [5. Eine direkt anwendbare Ein-Satz-Formel](#top-jtbd)
|
||||
|
||||
Wenn Sie eine Produktrichtung strukturieren möchten, können Sie zunächst diese sehr praktische Formel verwenden:
|
||||
|
||||
> Wenn __________, möchte ich __________, um __________.
|
||||
> Aktuell kann ich __________ nur mühsam nutzen, um dieses Ziel zu erreichen.
|
||||
|
||||
Beispiel:
|
||||
|
||||
> Wenn ich nach einem informationsreichen Projektmeeting fertig bin, möchte ich schnell ein Protokoll mit Aufgaben, Verantwortlichen und Fristen erhalten, um sofort mein Team zu informieren und die Umsetzung voranzutreiben.
|
||||
> Aktuell kann ich nur durch eigene Erinnerung, Durchsuchen von Chat-Verläufen und manuelle Zusammenstellung mühsam dieses Ziel erreichen.
|
||||
|
||||
Ein weiteres Beispiel:
|
||||
|
||||
> Wenn ich mich auf eine neue Stelle bewerbe, möchte ich schnell meine bisherigen Erfahrungen in eine Version umschreiben, die besser zur Stelle passt, um zuversichtlicher einen ansehnlichen Lebenslauf verschicken zu können.
|
||||
> Aktuell kann ich nur durch wiederholtes Kopieren des alten Lebenslaufs und manuelles Ändern der Formulierungen mühsam dieses Ziel erreichen, und am Ende bin ich immer unsicherer.
|
||||
|
||||
Wenn Sie einen Satz auf diese Klarheitsstufe bringen können, wird das darauf folgende Seitendesign, die Prompt-Gestaltung und die Priorisierung von Funktionen deutlich einfacher.
|
||||
|
||||
## 6. Bei AI-Produkten: Drei Job-Ebenen besonders beachten
|
||||
|
||||
Viele AI-Produkte wirken in Funktionsdemonstrationen beeindruckend, können Nutzer nach dem echten Launch jedoch nicht halten. Der häufige Grund: Nur die oberflächliche Aktion wurde gelöst, nicht der tiefere Job.
|
||||
|
||||
Sie können einen Job grob in drei Ebenen unterteilen:
|
||||
|
||||
### 6.1 Funktionsebene
|
||||
|
||||
Was ist die oberflächlichste Aufgabe?
|
||||
|
||||
- Dokumente zusammenfassen
|
||||
- Texte umschreiben
|
||||
- Aufgaben extrahieren
|
||||
- Bilder generieren
|
||||
|
||||
Das ist die Ebene, die Nutzer am leichtesten aussprechen.
|
||||
|
||||
### 6.2 Emotionale Ebene
|
||||
|
||||
Welche Unannehmlichkeit möchte der Nutzer reduzieren oder welches Gefühl gewinnen?
|
||||
|
||||
- Nicht so in Panik sein wollen
|
||||
- Nicht unprofessionell wirken wollen
|
||||
- Nicht jedes Mal bei null anfangen wollen
|
||||
- Mehr Kontrolle haben wollen
|
||||
|
||||
Viel Zahlungsbereitschaft hängt tatsächlich stark mit der emotionalen Ebene zusammen.
|
||||
|
||||
### 6.3 Soziale Ebene
|
||||
|
||||
Wie möchte der Nutzer in den Augen anderer erscheinen?
|
||||
|
||||
- Zuverlässiger wirken
|
||||
- Im Team besser organisiert erscheinen
|
||||
- Vor Kunden professioneller auftreten
|
||||
- Auf Social-Media-Plattformen besser ausdrücken können
|
||||
|
||||
Wenn Sie nur die Funktionsebene bedienen, ist das Produkt leicht ersetzbar; wenn Sie gleichzeitig die emotionale und soziale Ebene verstehen, finden Sie eher einen wirklich klebrigen Wert.
|
||||
|
||||
## 7. JTBD umgekehrt zur Produktrichtungsfilterung nutzen
|
||||
|
||||
Manchmal haben Sie noch kein Produkt, sondern 3 bis 5 Ideen und wissen nicht, welche Sie umsetzen sollen. JTBD eignet sich hervorragend als Filter.
|
||||
|
||||
Nehmen Sie jede Idee und stellen Sie sich 5 Fragen:
|
||||
|
||||
1. Ist das Szenario, das dieser Idee entspricht, konkret genug?
|
||||
2. Nutzt der Nutzer bereits eine behelfsmäßige Lösung?
|
||||
3. Ist der Schmerz dieses Jobs stark genug oder häufig genug?
|
||||
4. Wenn ich es gut mache, wird der Nutzer merklich "eine Zustandsverbesserung" spüren?
|
||||
5. Kann die erste Version nur um den wichtigsten Schritt dieses Jobs herum eine sehr kleine, aber nützliche Version sein?
|
||||
|
||||
Wenn eine Richtung am Ende nur "klingt interessant" ist, aber keine klaren Auslöser, Alternativlösungen und Erfolgskriterien formuliert werden kann, ist sie wahrscheinlich eher eine vage Inspiration als eine ausgereifte Richtung.
|
||||
|
||||
## 8. Interview-Fragen, die Sie direkt verwenden können
|
||||
|
||||
Viele beginnen eine Umfrage mit: "Welche Funktionen möchten Sie?" Diese Frage liefert leicht oberflächliche Antworten.
|
||||
|
||||
JTBD eignet sich besser für folgende Fragen:
|
||||
|
||||
- Wann hatten Sie das letzte Mal dieses Problem?
|
||||
- Was haben Sie damals getan und warum sind Sie hängengeblieben?
|
||||
- Wie haben Sie es schließlich gelöst?
|
||||
- Was war in diesem Prozess das Nervigste, Langsamste oder Beunruhigendste?
|
||||
- Wenn es ein Tool gäbe, das Ihnen hilft: Welches Ergebnis würde Sie wirklich überzeugen?
|
||||
- Welche Alternativmethoden haben Sie ausprobiert und warum waren sie nicht gut genug?
|
||||
|
||||
Diese Frageweise hat einen Vorteil: Sie bringt das Gespräch zurück zu echten Erlebnissen, anstatt bei imaginären Präferenzen zu bleiben.
|
||||
|
||||
## 9. AI nutzen, um JTBD-Analyse durchzuführen
|
||||
|
||||
JTBD wurde nicht von AI erfunden, aber AI eignet sich hervorragend, um JTBD zu ordnen und zu destillieren.
|
||||
|
||||
Wenn Sie beispielsweise 5 bis 10 Nutzer-Feedbacks gesammelt haben, können Sie diese dem Modell geben und es bitten, nach folgender Struktur zusammenzufassen:
|
||||
|
||||
```text
|
||||
Bitte spiele die Rolle eines Produktforschungsassistenten.
|
||||
Ich werde dir einige Nutzer-Originalzitate geben. Bitte gib zunächst keine Funktionsvorschläge,
|
||||
sondern ordne sie nach dem Jobs-to-Be-Done-Framework:
|
||||
|
||||
1. In welchem Szenario befindet sich der Nutzer
|
||||
2. Was ist das auslösende Ereignis für seine Handlung
|
||||
3. Welchen Fortschritt möchte er wirklich erreichen
|
||||
4. Was ist die aktuelle Alternativlösung
|
||||
5. Welches Erfolgskriterium ist ihm am wichtigsten
|
||||
6. Welche Emotionswörter tauchen in diesen Feedbacks wiederholt auf
|
||||
|
||||
Fasse abschließend diese Inhalte in 3 priorisierte JTBD-Hypothesen zusammen.
|
||||
```
|
||||
|
||||
Wenn Sie bereits eine Idee haben, können Sie AI auch beim ersten Konvergierungsschritt unterstützen:
|
||||
|
||||
```text
|
||||
Ich möchte [Ihre Produktidee] entwickeln.
|
||||
Bitte gib mir nicht direkt eine Funktionsliste, sondern analysiere sie mit der Jobs-to-Be-Done-Methode:
|
||||
|
||||
1. Welche konkreten Szenarien könnte dieses Produkt bedienen
|
||||
2. Was ist der Kern-Job, den der Nutzer in jedem Szenario erreichen will
|
||||
3. Welche bestehenden Alternativlösungen gibt es
|
||||
4. Welcher Job eignet sich am besten als MVP-Startpunkt und warum
|
||||
5. Formuliere den empfohlenen Job als klaren JTBD-Satz
|
||||
```
|
||||
|
||||
Der Vorteil: Sie werden nicht sofort von AI zu "50 Funktionen brainstormen" gedrängt, sondern klären zunächst die Richtung.
|
||||
|
||||
## 10. Die 4 häufigsten Fehler von Einsteigern
|
||||
|
||||
### 10.1 Den Job als Funktionsnamen formulieren
|
||||
|
||||
"AI-Zusammenfassung", "Intelligente Kategorisierung", "Automatische Generierung" sind keine Jobs, sondern nur mögliche Implementierungsweisen.
|
||||
|
||||
### 10.2 Die Zielgruppe zu weit formulieren
|
||||
|
||||
"Alle Büroangestellten", "Alle Studierenden", "Alle Gründer" sind meist zu allgemein. Je allgemeiner, desto schwerer erkennen Sie echte Szenarien.
|
||||
|
||||
### 10.3 Nur hören, was Nutzer sagen, nicht beobachten, was Nutzer tun
|
||||
|
||||
Nutzer beschreiben, was sie wollen, aber ihre wahren Prioritäten verstecken sich oft darin, wie sie aktuell improvisieren.
|
||||
|
||||
### 10.4 Von Anfang an eine komplette Plattform bauen wollen
|
||||
|
||||
Die richtige Herangehensweise an JTBD ist meist nicht "Ich baue eine All-in-One-Plattform", sondern zunächst den wichtigsten Schritt in einem Szenario ins Visier zu nehmen und ihn sehr handlich zu machen.
|
||||
|
||||
## 11. Zusammenfassung
|
||||
|
||||
Der wertvollste Beitrag von Jobs to Be Done besteht nicht darin, Ihnen ein neues Schlagwort zu geben, sondern Ihnen zu helfen, die Perspektive zu wechseln: **Nicht auf Produktfunktionen starren, sondern darauf, was Nutzer voranbringen möchten.**
|
||||
|
||||
Wenn Sie anfangen, sich wiederholt zu fragen:
|
||||
|
||||
- In welchem Szenario stellen Nutzer dieses Produkt ein
|
||||
- Wo genau hängen sie fest
|
||||
- Mit welcher Methode kämpfen sie sich aktuell durch
|
||||
- Wie ändert sich ihr Zustand, wenn das Problem gelöst ist
|
||||
|
||||
werden Sie feststellen, dass viele ursprünglich vage Ideen plötzlich klar werden und viele ursprünglich beeindruckende Funktionen plötzlich weniger wichtig sind.
|
||||
|
||||
Bei der Produktentwicklung, besonders bei AI-Produkten, ist das Schlimmste, sich von Anfang an in der Präsentation von Fähigkeiten zu verlieren. JTBD hilft Ihnen, die Aufmerksamkeit auf das wirklich Wichtige zurückzulenken: **Warum Nutzer Sie brauchen und welchen Fortschritt Sie ihnen ermöglichen.**
|
||||
|
||||
<a id="jtbd-ai"></a>
|
||||
## [12. Wie Sie AI nutzen können, um JTBD zu praktizieren](#top-jtbd)
|
||||
|
||||
JTBD wurde nicht von AI erfunden, aber AI eignet sich hervorragend als Forschungsassistent, Ordnungsassistent und Gegenüber in dieser Methode. Der Schlüssel: **AI beim Ordnen und Erweitern helfen lassen, nicht Nutzer für Sie erfinden lassen.**
|
||||
|
||||
Sie können es so einsetzen:
|
||||
|
||||
### 12.1 AI helfen lassen, vage Ideen in JTBD-Hypothesen umzuschreiben
|
||||
|
||||
Wenn Sie nur eine vage Beschreibung im Kopf haben, wie "Ich möchte ein Tool entwickeln, das Studierenden bei der Praktikumssuche hilft", können Sie zunächst AI bitten, es in mögliche Jobs aufzuteilen:
|
||||
|
||||
```text
|
||||
Ich habe eine vage Produktidee: [Ihre Idee]
|
||||
Bitte gib mir nicht direkt eine Funktionsliste, sondern analysiere sie mit der Jobs-to-Be-Done-Methode:
|
||||
1. Welche konkreten Szenarien könnten entsprechen
|
||||
2. Welchen Fortschritt wollen Nutzer in jedem Szenario wirklich erreichen
|
||||
3. Welche Alternativlösungen könnten es geben
|
||||
4. Welcher Job eignet sich am besten für ein MVP
|
||||
Formuliere abschließend jeden Job als klaren JTBD-Satz.
|
||||
```
|
||||
|
||||
Sie können die Eingabe auch sehr anfängerhaft formulieren:
|
||||
|
||||
```text
|
||||
Ich möchte etwas entwickeln, das Studierenden bei der Praktikumssuche hilft.
|
||||
Ich kann noch nicht genau sagen, was es sein soll. Hilf mir herauszufinden, was Nutzer wirklich erreichen wollen.
|
||||
```
|
||||
|
||||
AI könnte folgende nützliche Ausgabe liefern:
|
||||
|
||||
```text
|
||||
Mögliche JTBD-Richtungen:
|
||||
|
||||
1. Wenn ich mich zum ersten Mal auf ein Praktikum bewerbe, möchte ich schnell wissen, welche Unterlagen ich zuerst vorbereiten sollte,
|
||||
damit ich nicht wegen Informationschaos meine Bewerbung aufschiebe.
|
||||
|
||||
2. Wenn ich eine Praktikumsstelle sehe, möchte ich schnell beurteilen können, ob es sich lohnt, mich zu bewerben,
|
||||
damit ich nicht zu viel Zeit auf ungeeignete Stellen verschwende.
|
||||
|
||||
3. Wenn ich mit der Bewerbung beginne, möchte ich meinen bestehenden Lebenslauf in eine Version umschreiben, die besser zur Stelle passt,
|
||||
damit ich schneller abschicken und die Erfolgsquote erhöhen kann.
|
||||
```
|
||||
|
||||
Der Wert dieser Ausgabe liegt darin, Ihre ursprünglich sehr allgemeine Idee in mehrere richtungenähere Szenarien aufzuteilen.
|
||||
|
||||
### 12.2 AI beim Ordnen von Interview-Originalzitaten helfen lassen
|
||||
|
||||
Wenn Sie bereits mehrere Nutzer-Interviews durchgeführt haben, können Sie die Interviewaufzeichnungen an AI übergeben und sie bitten, wiederkehrende Szenarien, Auslöser, Alternativlösungen und Erfolgskriterien zu destillieren.
|
||||
|
||||
```text
|
||||
Hier sind die Originalzitate von 5 Nutzern.
|
||||
Bitte gib zunächst keine Lösungsvorschläge, sondern ordne sie nach dem JTBD-Framework:
|
||||
1. In welchem Szenario befindet sich der Nutzer
|
||||
2. Was ist das auslösende Ereignis für seine Handlung
|
||||
3. Welchen Fortschritt möchte er wirklich erreichen
|
||||
4. Was ist die aktuelle Alternativlösung
|
||||
5. Welches Erfolgskriterium ist ihm am wichtigsten
|
||||
6. Welche Informationen tauchen bei mehreren Nutzern wiederholt auf
|
||||
Fasse abschließend in 3 priorisierte JTBD-Hypothesen zusammen.
|
||||
```
|
||||
|
||||
Eine sehr einfache Eingabe könnte so aussehen:
|
||||
|
||||
```text
|
||||
Ich habe 3 Personen gefragt, sie sagten ungefähr Folgendes:
|
||||
|
||||
1. Jedes Mal, wenn ich mich auf ein Praktikum bewerbe, muss ich meinen Lebenslauf neu anpassen. Das ist extrem nervig.
|
||||
2. Was ich eigentlich am meisten fürchte, ist, nicht zu wissen, ob ich es richtig mache.
|
||||
3. Ich lasse derzeit ältere Kommilitonen gegenlesen, aber es ist mir peinlich, ständig um Gefälligkeiten zu bitten.
|
||||
|
||||
Hilf mir herauszufinden, was sie wirklich erreichen wollen.
|
||||
```
|
||||
|
||||
AI könnte ausgeben:
|
||||
|
||||
```text
|
||||
Zusammenfassung:
|
||||
|
||||
- Gemeinsames Szenario: Vor der Praktikumsbewerbung muss der Lebenslauf bearbeitet werden
|
||||
- Gemeinsame Schwierigkeit: Nicht wissen, wie man es "gut genug" macht
|
||||
- Aktuelle Alternativlösung: Ältere Kommilitonen bitten, selbstständig wiederholt überarbeiten
|
||||
- Möglicher JTBD:
|
||||
Wenn ich mich auf ein Praktikum bewerbe, möchte ich schneller beurteilen können, ob mein Lebenslauf abschickbereit ist,
|
||||
damit ich nicht ständig im "Noch ein bisschen überarbeiten" festhänge und ihn nie verschicke.
|
||||
```
|
||||
|
||||
Diese Ausgabe ist sehr nützlich, denn sie hilft, aus verstreuten Originalzitaten etwas herauszudestillieren, das eher einem "Bedarf" entspricht.
|
||||
|
||||
### 12.3 AI eine leichte Webrecherche durchführen lassen
|
||||
|
||||
Bevor Sie mit umfangreichen Interviews beginnen, können Sie AI zunächst einen leichten Scan externer Informationen durchführen lassen:
|
||||
|
||||
- Wie wird in öffentlichen Foren oder Communitys über dieses Problem geklagt
|
||||
- Welche Probleme lösen bestehende Produkte hauptsächlich
|
||||
- Was ist die häufigste Alternativlösung der Nutzer
|
||||
- Was wird in Bewertungen am meisten gelobt und kritisiert
|
||||
|
||||
Diese Recherche kann echte Nutzer-Interviews nicht ersetzen, eignet sich aber gut als Aufwärmübung in der Discover-Phase, um zunächst eine Problemlandkarte zu erstellen.
|
||||
|
||||
Ein einfacher Prompt könnte lauten:
|
||||
|
||||
```text
|
||||
Bitte recherchiere für mich:
|
||||
"Was sind die häufigsten Schmerzpunkte beim Umschreiben von Lebensläufen und Bewerben für Praktika bei Studierenden?"
|
||||
Konzentriere dich auf das, was Leute in öffentlichen Foren, Erfahrungsberichten und Bewerbungs-Communitys selbst sagen.
|
||||
Fasse es in 5 häufigsten Problemen zusammen.
|
||||
```
|
||||
|
||||
AI könnte ausgeben:
|
||||
|
||||
```text
|
||||
Häufigste Schmerzpunkte:
|
||||
|
||||
1. Nicht wissen, welche Erfahrungen im Lebenslauf stehen sollten
|
||||
2. Nicht wissen, wie man für verschiedene Stellen anpasst
|
||||
3. Nach vielen Überarbeitungen immer noch unsicher, ob es gut genug ist
|
||||
4. Keine zuverlässige Person zum Gegenlesen finden
|
||||
5. Komplexer Bewerbungsprozess, der zum Aufschieben verleitet
|
||||
```
|
||||
|
||||
Diese Art von Ausgabe kann nicht als endgültige Schlussfolgerung dienen, hilft aber zu entscheiden, welche Art von Problem priorisiert interviewt werden sollte.
|
||||
|
||||
### 12.4 AI als "Gegenspieler" fungieren lassen
|
||||
|
||||
Oft sind wir zu sehr mit unseren eigenen Ideen verbunden. Sie können AI gezielt als kritischen Gegenüber einsetzen, der Sie zwingt, das Problem klarer zu formulieren:
|
||||
|
||||
```text
|
||||
Bitte spiele die Rolle eines sehr strengen Produktforschungsberaters.
|
||||
Hier ist meine JTBD-Hypothese: [Ihre Hypothese]
|
||||
Kritisiere sie aus folgenden Perspektiven:
|
||||
1. Ist dieses Szenario zu weit gefasst
|
||||
2. Wurde dieser Job als Funktion statt als echter Fortschritt formuliert
|
||||
3. Ist die Alternativlösung zu schwach
|
||||
4. Ist das Erfolgskriterium unklar
|
||||
5. Was ist das größte Risiko, das bei dieser Hypothese validiert werden muss
|
||||
```
|
||||
|
||||
Der Vorteil: Sie erkennen schneller, ob Sie sich auf den Bedarf oder nur auf Ihre bevorzugte Lösung konzentrieren.
|
||||
|
||||
## Assignments
|
||||
|
||||
Bitte bearbeiten Sie die folgenden Aufgaben basierend auf dem obigen Inhalt:
|
||||
|
||||
1. Wählen Sie eine Produktidee, an die Sie kürzlich gedacht haben, und formulieren Sie sie mit einer JTBD-Formel klar
|
||||
2. Ergänzen Sie diese Idee mit den 5 Elementen: Szenario, Auslöser, Fortschritt, Alternativlösung, Erfolgskriterium
|
||||
3. Finden Sie 3 potenzielle Nutzer und fragen Sie mindestens einmal: "Wann hatten Sie das letzte Mal dieses Problem?"
|
||||
4. Übergeben Sie die Interview-Originalzitate an AI und fassen Sie sie in 3 priorisierte JTBD-Hypothesen zusammen
|
||||
|
||||
## Weiterführende Literatur
|
||||
|
||||
- [Christensen Institute: Jobs to Be Done](https://www.christenseninstitute.org/theory/jobs-to-be-done/)
|
||||
- [Harvard Business School Online: What Is Jobs to Be Done?](https://online.hbs.edu/blog/post/jobs-to-be-done)
|
||||
- [Intercom: Jobs-to-be-Done: A framework for customer needs](https://www.intercom.com/blog/jobs-to-be-done-framework/)
|
||||
- [Mural: Jobs to Be Done framework guide](https://www.mural.co/blog/jobs-to-be-done-framework)
|
||||
@@ -0,0 +1,589 @@
|
||||
---
|
||||
title: 'The Mom Test: Wie man Bedürfnisse durch Nutzerinterviews validiert'
|
||||
description: 'Ein Einführungsartikel zu The Mom Test für Einsteiger. Lernen Sie, höfliches Feedback zu vermeiden und Nutzerinterviews auf der Basis echten Verhaltens, konkreter Fakten und bestehender Probleme durchzuführen.'
|
||||
---
|
||||
|
||||
<script setup>
|
||||
const duration = 'Etwa <strong>1,5 Stunden</strong>'
|
||||
</script>
|
||||
|
||||
# The Mom Test: Wie man Bedürfnisse durch Nutzerinterviews validiert
|
||||
|
||||
<a id="top-mom"></a>
|
||||
|
||||
## Kapitelübersicht
|
||||
|
||||
<ChapterIntroduction
|
||||
:duration="duration"
|
||||
:tags="['Nutzerinterviews', 'Bedarfsvalidierung', 'Nutzerforschung', 'Produktrecherche']"
|
||||
coreOutput="1 Satz Interview-Fragen, die echte Informationen zutage fördern"
|
||||
expectedOutput="Nutzerhöflichkeit nicht mehr als Validierung betrachten und stattdessen echtes Verhalten zur Richtungsbewertung nutzen"
|
||||
>
|
||||
|
||||
Viele denken beim ersten Mal, wenn sie eine Produktrecherche durchführen, das Wichtigste sei "mit jemandem zu sprechen". Also fragen sie Freunde, Kollegen oder sogar Familienmitglieder:
|
||||
|
||||
- Was hältst du von meiner Idee?
|
||||
- Würdest du ein solches Produkt nutzen, wenn es gäbe?
|
||||
- Klingt diese Funktion nicht ganz gut?
|
||||
|
||||
Die anderen geben dann oft sehr ermutigendes Feedback:
|
||||
|
||||
- Das ist toll
|
||||
- Klingt sehr nützlich
|
||||
- Ich denke, du könntest es ausprobieren
|
||||
|
||||
Das Problem ist, dass diese Antworten Ihnen in der Regel nicht bei der Entscheidungsfindung helfen. Sie sind eher Höflichkeit, Unterstützung oder eine natürliche Reaktion, um Ihnen nicht den Wind aus den Segeln zu nehmen. Sie denken, Sie hätten "Marktvalidierung" erhalten, aber tatsächlich haben Sie nur eine Reihe von schwer verwertbaren Trostpflastern gesammelt.
|
||||
|
||||
The Mom Test wurde genau entwickelt, um dieses Problem zu lösen. Es erinnert uns: **Nutzer wollen Sie nicht absichtlich täuschen, sondern Ihre Frageweise führt sie natürlich zu schönen, aber nutzlosen Antworten.**
|
||||
|
||||
</ChapterIntroduction>
|
||||
|
||||
::: info Minimales SOP
|
||||
**Ziel**: Nach dem Lesen wissen Sie besser, wie Sie mit Nutzern sprechen, ohne nur "klingt gut" zu hören, sondern wirklich Informationen zu erhalten, die Ihnen bei der Richtungsbewertung helfen.
|
||||
|
||||
**Aktionspunkte**: Ändern Sie Ihre ursprünglich geplanten 5 Fragen und priorisieren Sie "Wann war das letzte Mal" und "Wie haben Sie das damals gelöst".
|
||||
|
||||
**Ergebnis**: Sie können leichter unterscheiden, was Meinungen sind und was wirklich evidenzbasierte Erkenntnisse.
|
||||
|
||||
**Stichwortsprünge**: [Was ist The Mom Test](#mom-what) · [Drei Kernprinzipien](#mom-principles) · [Wie AI Ihnen hilft](#mom-ai)
|
||||
:::
|
||||
|
||||
## Was Sie lernen werden
|
||||
|
||||
1. Welches Problem The Mom Test eigentlich löst und warum viele "Nutzerbefragungen" keine echten Informationen liefern
|
||||
2. Die wichtigsten Prinzipien dieser Methode: Weniger nach Meinungen fragen, mehr nach Verhalten; weniger nach Hypothesen, mehr nach Fakten
|
||||
3. Wie man eine Frage, die leicht zu falsch-positivem Feedback führt, in eine wertvollere Interview-Frage umschreibt
|
||||
4. Wie man The Mom Test mit JTBD, Bedarfsvalidierung und MVP-Bewertung verknüpft
|
||||
|
||||
<a id="mom-what"></a>
|
||||
## [1. Was ist The Mom Test überhaupt?](#top-mom)
|
||||
|
||||
The Mom Test stammt aus dem gleichnamigen Buch von Rob Fitzpatrick. Der Name klingt wie ein Witz, trifft aber den Nagel auf den Kopf:
|
||||
|
||||
**Selbst Ihre Mutter wird Ihnen nur schwer direkt sagen: "Das ist eine schlechte Idee."**
|
||||
|
||||
Der Grund ist nicht, dass sie nicht ehrlich ist, sondern:
|
||||
|
||||
- Sie will Sie nicht verletzen
|
||||
- Sie wird Sie unbewusst ermutigen
|
||||
- Sie neigt dazu, in Ihrem Ausdruck zu antworten
|
||||
|
||||
Nicht nur Mütter, sondern auch Freunde, Kollegen, ehemalige Mitschüler und sogar viele Fremde geben oft ähnliches "positives Feedback", wenn sie mit Ihrer Produktidee konfrontiert werden. Das bedeutet nicht, dass der Bedarf wirklich existiert, sondern nur, dass Sie die Frage so formuliert haben, dass sie leicht eine schöne Antwort provozieren.
|
||||
|
||||
Also geht es bei The Mom Test nie um "Frag deine Mama nicht", sondern:
|
||||
|
||||
**Stellen Sie Ihre Fragen nicht so, dass jeder Ihnen zustimmt.**
|
||||
|
||||
Die Methode will Ihnen beibringen, wie Sie durch Gespräche Informationen erhalten, die näher an echten Bedürfnissen sind, anstatt eine Sammlung von sich gut anfühlenden Kommentaren zu sammeln.
|
||||
|
||||
## 2. Welches Kernproblem es löst
|
||||
|
||||
The Mom Test löst hauptsächlich eine sehr häufige kognitive Täuschung:
|
||||
|
||||
**Höfliches positives Feedback als echten Bedarf zu betrachten.**
|
||||
|
||||
Wenn Sie fragen:
|
||||
|
||||
- Was hältst du von dieser App-Idee?
|
||||
- Würdest du ein AI-Tool nutzen, das dir beim Schreiben von Lebensläufen hilft?
|
||||
- Ist diese Funktion nicht sehr wertvoll?
|
||||
|
||||
Diese Fragen haben gemeinsame Merkmale:
|
||||
|
||||
- Sie fragen nach "Meinungen"
|
||||
- Sie enthalten eine leichte Andeutung
|
||||
- Sie reden über eine Zukunft, die noch nicht eingetreten ist
|
||||
|
||||
Und die Antworten auf "Meinungen" und "zukünftige Hypothesen" sind meist instabil. Viele Menschen überschätzen ihr Interesse, ihre Ausführungsbereitschaft und ihre zukünftige Zahlungsbereitschaft.
|
||||
|
||||
The Mom Test erinnert Sie daran:
|
||||
|
||||
- Vertrauen Sie nicht zu sehr auf die Bewertungen anderer zu Ihrer Idee
|
||||
- Vertrauen Sie nicht zu sehr auf die Vorhersagen anderer zu ihrem zukünftigen Verhalten
|
||||
- Kehren Sie möglichst zu dem zurück, was Nutzer bereits getan haben
|
||||
|
||||
Denn im Vergleich zu "Würden Sie es nutzen" ist "Wie haben Sie das letzte Mal damit umgegangen" oft näher an der Wahrheit.
|
||||
|
||||
<a id="mom-principles"></a>
|
||||
## [3. Die drei wichtigsten Prinzipien](#top-mom)
|
||||
|
||||
Wenn Sie sich nur das Wichtigste merken möchten, starten Sie mit diesen drei Prinzipien.
|
||||
|
||||
### 3.1 Weniger über Ihre Idee reden, mehr über die echten Erfahrungen des Nutzers
|
||||
|
||||
In vielen ineffektiven Interviews wird zu Beginn die eigene Lösung vorgestellt, man erzählt, wie aufregend sie ist und welches Produkt man entwickeln will. Das Problem: Sobald Sie zu viel erzählen, schaltet der andere leicht in den "Unterstützen"- und "Ermutigen"-Modus.
|
||||
|
||||
Besser ist es, den Schwerpunkt auf die Erfahrungen des Gesprächspartners zu legen:
|
||||
|
||||
- Wann hatten Sie das letzte Mal dieses Problem?
|
||||
- Was haben Sie damals getan?
|
||||
- Wie haben Sie es schließlich gelöst?
|
||||
- Welcher Schritt war am mühsamsten?
|
||||
|
||||
Diese Fragen führen das Gespräch natürlicher zurück zur Realität, anstatt bei imaginären Präferenzen zu bleiben.
|
||||
|
||||
### 3.2 Weniger nach abstrakten Meinungen fragen, mehr nach konkreten Fakten
|
||||
|
||||
"Ich finde diese Funktion gut", "Klingt gut", "Scheint nützlich zu sein" – diese Äußerungen sind zu abstrakt, um Produktentscheidungen zu leiten.
|
||||
|
||||
Wertvollere Informationen sehen eher so aus:
|
||||
|
||||
- Letzte Woche habe ich dafür 2 Stunden verschwendet
|
||||
- Aktuell kämpfe ich mit Excel und WeChat
|
||||
- Letzten Monat habe ich bereits für ein ähnliches Tool bezahlt
|
||||
- Meine größte Angst ist es, falsch zu machen, nicht langsam zu sein
|
||||
|
||||
Das sind die Informationen, die Ihnen wirklich helfen, Problemstärke, Häufigkeit und Zahlungsbereitschaft zu beurteilen.
|
||||
|
||||
### 3.3 Weniger fragen, welche Lösung der Nutzer will, mehr beobachten, wie er aktuell löst
|
||||
|
||||
Nutzer sind gut darin, ihre Schwierigkeiten zu beschreiben, aber nicht unbedingt darin, Lösungen zu entwerfen.
|
||||
|
||||
Wenn Sie fragen:
|
||||
|
||||
- Möchten Sie ein AI-Tool, das das automatisch für Sie erledigt?
|
||||
- Denken Sie, eine intelligente Funktion wäre hilfreich?
|
||||
|
||||
Erhalten Sie meist nur eine vage Haltung zu einer Lösung, nicht den Bedarf selbst.
|
||||
|
||||
Bessere Fragen:
|
||||
|
||||
- Welche Methode nutzen Sie aktuell, um dieses Problem zu lösen?
|
||||
- Warum haben Sie sich für diese Vorgehensweise entschieden?
|
||||
- Was ist daran nicht gut genug?
|
||||
|
||||
Die bestehenden Alternativlösungen zu verstehen, ist oft wichtiger als direkt zu fragen, "was wollen Sie".
|
||||
|
||||
## 4. Warum Menschen Ihnen immer schöne, aber nutzlose Antworten geben
|
||||
|
||||
Wenn Sie dies verstehen, werden Sie bei Interviews weniger Fehleinschätzungen machen.
|
||||
|
||||
### 4.1 Menschen sind unbewusst höflich
|
||||
|
||||
Besonders wenn Ihr Gesprächspartner eine Beziehung zu Ihnen hat, wird er nur schwer direkt sagen:
|
||||
|
||||
- Diese Richtung klingt nicht vielversprechend
|
||||
- Ich würde es überhaupt nicht nutzen
|
||||
- Dieses Problem ist für mich nicht so wichtig
|
||||
|
||||
Er wird eher sagen: "Ganz gut", "Man könnte es mal probieren".
|
||||
|
||||
### 4.2 Menschen überschätzen ihr zukünftiges Ich
|
||||
|
||||
Viele glauben ernsthaft, sie würden in Zukunft:
|
||||
|
||||
- Disziplinierter sein
|
||||
- Lernbereiter sein
|
||||
- Zahlungsbereiter sein
|
||||
- Offener für neue Tools sein
|
||||
|
||||
Also bedeutet "Ich würde es nutzen, wenn es gäbe" oft nicht, dass sie es wirklich tun werden.
|
||||
|
||||
### 4.3 Ihre Frageweise selbst führt die Antwort
|
||||
|
||||
Wenn Sie fragen:
|
||||
|
||||
- Ist meine Idee nicht ganz gut?
|
||||
- Ist diese Funktion für Sie nicht sehr hilfreich?
|
||||
|
||||
Haben Sie heimlich die "richtige Antwort" in die Frage eingebaut.
|
||||
|
||||
Deshalb betont The Mom Test besonders: **Machen Sie das Interview nicht zu einer Suche nach Bestätigung.**
|
||||
|
||||
## 5. Direktvergleich: Welche Fragen leicht ins Leere führen, welche wertvoller sind
|
||||
|
||||
Diese Gegenüberstellung wird fast jeder Einsteiger nutzen.
|
||||
|
||||
| Leider nutzlose Fragen | Wertvollere Fragen |
|
||||
| --- | --- |
|
||||
| Was hältst du von meiner Idee? | Wann hattest du das letzte Mal dieses Problem? |
|
||||
| Würdest du dieses Produkt nutzen? | Wie löst du das aktuell? |
|
||||
| Würdest du für diese Funktion bezahlen? | Hast du letztes Mal für dieses Problem Geld ausgegeben? Wofür? |
|
||||
| Findest du diese Funktion wichtig? | Welcher Schritt in diesem Prozess ist am nervigsten, langsamsten oder beunruhigendsten? |
|
||||
| Möchtest du ein AI-Tool, das das automatisch macht? | Warum hast du bisher noch keine bessere Lösung gefunden? |
|
||||
|
||||
Das Wichtigste an dieser Tabelle ist nicht der konkrete Satz, sondern die Richtung dahinter:
|
||||
|
||||
- Von Meinungen zu Fakten
|
||||
- Von der Zukunft zur Vergangenheit
|
||||
- Von Ihrer Lösung zum Problem des Nutzers
|
||||
|
||||
## 6. Eine Interview-Struktur, die Einsteiger sofort nutzen können
|
||||
|
||||
Wenn Sie jetzt sofort jemanden finden und sprechen möchten, können Sie in dieser Reihenfolge vorgehen.
|
||||
|
||||
### 6.1 Eröffnung: Erklären Sie, dass Sie lernen, nicht verkaufen
|
||||
|
||||
Zum Beispiel:
|
||||
|
||||
> Ich erforsche gerade, wie Leute mit solchen Problemen umgehen. Ich möchte die reale Situation verstehen, nicht etwas verkaufen.
|
||||
|
||||
Diese Formulierung macht es dem Gesprächspartner leichter, die psychologische Last "Ich muss positives Feedback geben" abzulegen.
|
||||
|
||||
### 6.2 Mit dem letzten echten Erlebnis beginnen
|
||||
|
||||
Beginnen Sie mit Fragen wie:
|
||||
|
||||
- Wann hatten Sie das letzte Mal dieses Problem?
|
||||
- Was ist damals passiert?
|
||||
- Was war Ihre erste Reaktion?
|
||||
|
||||
Sobald das Gespräch in konkrete Ereignisse eintritt, steigt die Informationsqualität meist deutlich.
|
||||
|
||||
### 6.3 Weiter nach Verhalten, Kosten und Alternativlösungen fragen
|
||||
|
||||
Weiterfragen:
|
||||
|
||||
- Welche Methode nutzen Sie aktuell zur Lösung?
|
||||
- Was ist das Unangenehmste an dieser Methode?
|
||||
- Wie viel Zeit, Geld oder Energie haben Sie dafür aufgewendet?
|
||||
- Haben Sie andere Methoden ausprobiert? Warum nicht weiter verwendet?
|
||||
|
||||
### 6.4 Erst am Ende Schmerzintensität und Priorität bewerten
|
||||
|
||||
Sie müssen nicht direkt nach "Tut es weh?" fragen. Sie können aus Details beurteilen:
|
||||
|
||||
- Tritt es häufig auf
|
||||
* Handelt er bereits aktiv, um Abhilfe zu schaffen
|
||||
* Ist er bereits bereit, dafür Kosten auf sich zu nehmen
|
||||
* Zeigt er beim Erzählen spürbare Emotionen
|
||||
|
||||
All das ist nützlicher als die Frage "Ist das Ihr Schmerzpunkt?".
|
||||
|
||||
## 7. Ein vollständigeres Beispiel
|
||||
|
||||
Angenommen, Sie möchten ein Produkt entwickeln: "AI hilft Studierenden beim Umschreiben von Lebensläufen".
|
||||
|
||||
### Falsche Frageweise
|
||||
|
||||
Sie fragen einen Kommilitonen:
|
||||
|
||||
> Ich möchte ein AI-Lebenslauf-Optimierungstool entwickeln. Was hältst du davon?
|
||||
> Wenn es Lebensläufe automatisch an Stellen anpassen könnte, würdest du es nutzen?
|
||||
|
||||
In diesem Fall wird der andere wahrscheinlich sagen:
|
||||
|
||||
- Klingt gut
|
||||
- Ich denke, das wäre nützlich
|
||||
* Wenn es kostenlos ist, würde ich es ausprobieren
|
||||
|
||||
Diese Antworten helfen Ihnen kaum zu beurteilen, wie stark der Bedarf wirklich ist.
|
||||
|
||||
### Bessere Frageweise
|
||||
|
||||
Sie könnten es so formulieren:
|
||||
|
||||
> Wann hast du zuletzt deinen Lebenslauf geändert?
|
||||
> Warum musstest du ihn ändern?
|
||||
> Wie hast du ihn geändert?
|
||||
> Welcher Schritt war am schwierigsten?
|
||||
> Hast du jemals jemanden gebeten, deinen Lebenslauf gegenzulesen?
|
||||
> Hast du jemals Zeit oder viel Geld für deinen Lebenslauf aufgewendet?
|
||||
|
||||
Durch diese Fragen könnten Sie folgende Informationen erhalten:
|
||||
|
||||
- Viele können nicht schreiben, sondern wissen nicht, wie sie ihn auf verschiedene Stellen anpassen sollen
|
||||
* Ihr größter Schmerz ist nicht das Layout, sondern "nicht zu wissen, welche Erfahrungen erwähnenswert sind"
|
||||
* Sie schieben auf, nicht aus Faulheit, sondern weil jeder Lebenslauf-Änderungsprozess extrem erschöpfend ist
|
||||
* Sie behelfen sich bereits mit Ratschlägen von älteren Kommilitonen, Vorlagen-Websites, AI-Tools und Freunden als Gegenleser
|
||||
|
||||
Jetzt sind Sie dem echten Problem viel näher.
|
||||
|
||||
## 8. Wie The Mom Test und JTBD zusammenarbeiten
|
||||
|
||||
Wenn JTBD Ihnen hilft zu erkennen, "welchen Fortschritt Nutzer erzielen wollen", lehrt The Mom Test Sie eher:
|
||||
|
||||
**Wie Sie durch Interviews bestätigen, ob dieser Job wirklich existiert.**
|
||||
|
||||
Sie können beide Methoden nahtlos verknüpfen:
|
||||
|
||||
1. Zunächst mit JTBD einen Job hypothetisieren
|
||||
2. Dann mit The Mom Test bei Nutzern nach ihren letzten echten Erlebnissen fragen
|
||||
3. Prüfen, ob dieser Job wirklich häufig, echt und priorisierbar ist
|
||||
|
||||
Wenn Ihre JTBD-Hypothese beispielsweise lautet:
|
||||
|
||||
> Wenn ich mich auf ein Praktikum bewerbe, möchte ich meinen alten Lebenslauf schnell in eine Version umschreiben, die zur Stelle passt, um die Bewerbung so bald wie möglich abzuschicken.
|
||||
|
||||
Können Sie mit The Mom Test-Fragen validieren:
|
||||
|
||||
- Wann hast du dich zuletzt beworben?
|
||||
- Wie hast du damals deinen Lebenslauf geändert?
|
||||
- Welcher Abschnitt war am schwersten zu schreiben?
|
||||
- Wie beurteilst du nach der Änderung, ob er gut genug ist?
|
||||
|
||||
So verbinden sich die Methoden:
|
||||
|
||||
- JTBD hilft Ihnen, die Bedarfshypothese zu definieren
|
||||
- The Mom Test hilft Ihnen, die Hypothese durch Interviews zu validieren
|
||||
|
||||
## 9. Die häufigsten Fehler bei Nutzerinterviews
|
||||
|
||||
### 9.1 Das Interview zur Produktvorstellung machen
|
||||
|
||||
Wenn Sie zu viel über Ihre eigene Idee erzählen, fängt der andere leicht an, Ihnen zuzustimmen, anstatt Ihnen die reale Situation zu schildern.
|
||||
|
||||
### 9.2 Nur Bekannte interviewen
|
||||
|
||||
Bekannte können zwar sprechen, neigen aber eher zur Ermutigung. Sie müssen mindestens einige Personen einbeziehen, die näher an echten Nutzern sind.
|
||||
|
||||
### 9.3 Zu früh nach Funktionen fragen
|
||||
|
||||
Wenn Sie das Problem noch nicht verstanden haben und bereits nach Buttons, Oberflächen und Funktionsdetails fragen, betreten Sie zu früh die Lösungsphase.
|
||||
|
||||
### 9.4 Ein "Ich würde es nutzen" als Validierungsergebnis betrachten
|
||||
|
||||
Interviews helfen Ihnen höchstens bei der Richtungsbewertung, sie sind keine abgeschlossene Validierung. Echte Validierung erfordert letztlich, dass Nutzer bereit sind, echte Kosten auf sich zu nehmen: Zeit, Wechselaufwand, Testverhalten oder sogar Bezahlung.
|
||||
|
||||
### 9.5 Nach dem Interview nicht zusammenfassen
|
||||
|
||||
Wenn Sie nach dem Gespräch die Informationen einfach liegen lassen, werden sie schnell zu vagen Eindrücken. Am besten sofort zusammenfassen:
|
||||
|
||||
- Häufig erwähnte Probleme
|
||||
- Emotionswörter aus Nutzerzitaten
|
||||
- Aktuelle Alternativlösungen
|
||||
- Bereits aufgewendete Kosten
|
||||
- Ihre eigenen neuen Einschätzungen
|
||||
|
||||
## 10. Eine Fragenliste, die Sie direkt kopieren können
|
||||
|
||||
Wenn Sie schnell starten möchten, hier eine ausreichend universelle Frageliste.
|
||||
|
||||
### Eröffnungsfragen
|
||||
|
||||
- Wann hatten Sie das letzte Mal dieses Problem?
|
||||
- Was genau ist damals passiert?
|
||||
|
||||
### Verhaltensfragen
|
||||
|
||||
- Wie haben Sie es damals gelöst?
|
||||
- Warum haben Sie sich für diese Vorgehensweise entschieden?
|
||||
|
||||
### Kostenfragen
|
||||
|
||||
- Wie viel Zeit oder Energie kostet Sie diese Angelegenheit normalerweise?
|
||||
- Haben Sie jemals Geld ausgegeben, um es zu lösen?
|
||||
|
||||
### Alternativlösungsfragen
|
||||
|
||||
- Haben Sie andere Tools oder Methoden ausprobiert?
|
||||
- Warum haben Sie sie nicht weiter verwendet?
|
||||
|
||||
### Abschlussfragen
|
||||
|
||||
- Wenn Sie dieses Problem in Zukunft wieder haben: Wie sollte die ideale Lösung Ihrer Meinung nach aussehen?
|
||||
|
||||
Beachten Sie: Diese Abschlussfrage könnte gestellt werden, aber am besten später im Interview. Denn vorher benötigen Sie eher Fakten als Wünsche.
|
||||
|
||||
## 11. Zusammenfassung
|
||||
|
||||
Der wichtigste Beitrag von The Mom Test ist nicht, Ihnen eine "bessere Gesprächsführung" beizubringen, sondern Ihnen eine klarere Urteilsmethode zu geben:
|
||||
|
||||
- Nicht zu schnell das Lob anderer für Ihre Idee glauben
|
||||
- "Ich würde es nutzen, wenn es gäbe" nicht als echten Bedarf betrachten
|
||||
- Das Interview nicht zu einer Suche nach Bestätigung machen
|
||||
|
||||
Echt wertvolle Interviews sollten sich auf Folgendes konzentrieren:
|
||||
|
||||
- Das letzte echte Erlebnis des Nutzers
|
||||
- Wie er aktuell damit umgeht
|
||||
- Welche Kosten er bereits auf sich genommen hat
|
||||
- Wo er offensichtlich Unbehagen verspürt
|
||||
|
||||
Wenn Sie anfangen, so zu fragen, sind die Informationen zwar manchmal weniger schmeichelhaft, aber meist nützlicher.
|
||||
Bei der Produktentwicklung gilt: **Nützliche Wahrheiten sind immer wichtiger als schöne Ermutigungen.**
|
||||
|
||||
<a id="mom-ai"></a>
|
||||
## [12. Wie Sie AI bei Nutzerinterviews unterstützen lassen](#top-mom)
|
||||
|
||||
The Mom Test ist im Kern eine Methode zum "Sprechen mit echten Menschen", daher kann AI reale Interviews nicht ersetzen. Aber AI eignet sich hervorragend als Unterstützung vor, während und nach Interviews, besonders um die Einstiegshürde für Einsteiger zu senken.
|
||||
|
||||
### 12.1 AI helfen lassen, "leicht nutzlose" Fragen umzuschreiben
|
||||
|
||||
Viele wissen, dass sie nicht fragen sollten: "Was hältst du von meiner Idee?" Aber wenn sie anfangen zu sprechen, kehren sie automatisch zu solchen Sätzen zurück. Sie können zunächst Ihre geplanten Interview-Fragen an AI übergeben und sie umschreiben lassen:
|
||||
|
||||
```text
|
||||
Hier sind die Fragen, die ich bei Nutzerinterviews stellen möchte:
|
||||
[Ihre Fragen einfügen]
|
||||
|
||||
Bitte schreibe sie nach den Prinzipien von The Mom Test um:
|
||||
1. Meinungsfragen entfernen
|
||||
2. Zukunfts-Hypothese-Fragen entfernen
|
||||
3. Stattdessen auf vergangenes echtes Verhalten, bestehende Alternativlösungen und bereits aufgewendete Kosten konzentrieren
|
||||
4. Am Ende in eine Liste von 8-10 direkt verwendbaren Interview-Fragen zusammenfassen
|
||||
```
|
||||
|
||||
Eine sehr anfängerhafte Eingabe ist ebenfalls möglich:
|
||||
|
||||
```text
|
||||
Ich möchte Nutzer fragen:
|
||||
1. Was hältst du davon, wenn ich ein AI-Lebenslauf-Tool entwickle?
|
||||
2. Würdest du es nutzen?
|
||||
3. Wärst du bereit, dafür zu bezahlen?
|
||||
|
||||
Bitte schreibe die Fragen besser.
|
||||
```
|
||||
|
||||
AI könnte folgende nützliche Ausgabe liefern:
|
||||
|
||||
```text
|
||||
Umgeschriebene Fragen:
|
||||
|
||||
1. Wann hast du zuletzt deinen Lebenslauf geändert?
|
||||
2. Warum musstest du ihn ändern?
|
||||
3. Wie hast du ihn geändert?
|
||||
4. Welcher Schritt hat am meisten Zeit gekostet?
|
||||
5. Hast du jemanden gebeten, dir beim Gegenlesen zu helfen?
|
||||
6. Hast du jemals Geld oder viel Zeit für die Lebenslaufänderung aufgewendet?
|
||||
```
|
||||
|
||||
Diese Ausgabe ist sehr hilfreich, denn sie ändert Ihre ursprünglichen "nach Meinungen fragenden" Fragen direkt in "nach echtem Verhalten fragende" Fragen.
|
||||
|
||||
### 12.2 AI helfen lassen, verschiedene Interview-Leitfäden für verschiedene Zielgruppen zu erstellen
|
||||
|
||||
Bei derselben Richtung sind die Interview-Schwerpunkte für verschiedene Zielgruppen unterschiedlich. Studierende, HR-Profis, Freiberufler haben völlig unterschiedliche Anliegen. Sie können AI bitten, für jede Zielgruppe einen eigenen Leitfaden zu erstellen:
|
||||
|
||||
- Für neue Nutzer: Schwerpunkt auf dem letzten echten Erlebnis
|
||||
- Für Power-User: Schwerpunkt auf Alternativlösungen und Schmerzintensität
|
||||
- Für zahlende Nutzer: Schwerpunkt auf bereits aufgewendeten Kosten
|
||||
|
||||
So haben Sie beim echten Gespräch mehr Rhythmus und stellen nicht jedem dieselben Fragen.
|
||||
|
||||
Sie könnten direkt so eingeben:
|
||||
|
||||
```text
|
||||
Ich werde mit zwei Arten von Menschen sprechen:
|
||||
1. Studierende, die zum ersten Mal ein Praktikum suchen
|
||||
2. Ältere Kommilitonen, die bereits vielen beim Lebenslauf geholfen haben
|
||||
|
||||
Bitte gib mir jeweils einen Interview-Leitfaden mit 6 Fragen pro Zielgruppe.
|
||||
```
|
||||
|
||||
AI könnte ausgeben:
|
||||
|
||||
```text
|
||||
Für Studierende:
|
||||
1. Wann hast du dich zuletzt auf ein Praktikum beworben?
|
||||
2. Welcher Schritt war am schwierigsten?
|
||||
3. Woher weißt du, ob dein Lebenslauf bewerbungsbereit ist?
|
||||
...
|
||||
|
||||
Für ältere Kommilitonen:
|
||||
1. Wann hast du zuletzt jemandem beim Lebenslauf geholfen?
|
||||
2. Welche offensichtlichen Probleme siehst du am häufigsten?
|
||||
3. Woran scheitern jüngere Kommilitonen am meisten?
|
||||
...
|
||||
```
|
||||
|
||||
So müssen Sie nicht von null anfangen und die Interview-Vorbereitung wird deutlich entspannter.
|
||||
|
||||
### 12.3 AI beim Ordnen von Interview-Aufzeichnungen helfen lassen
|
||||
|
||||
Nach dem Interview ist das häufigste Problem nicht "keine Informationen", sondern "Informationen sind zu verstreut". AI eignet sich hervorragend, um fragmentierte Gespräche in strukturierte Notizen zu ordnen:
|
||||
|
||||
```text
|
||||
Hier sind meine Interview-Aufzeichnungen mit 3 Nutzern.
|
||||
Bitte ordne sie aus der Perspektive von The Mom Test:
|
||||
1. Was sind Fakten, was sind nur Meinungen
|
||||
2. Was war das letzte echte Verhalten des Nutzers
|
||||
3. Was ist die aktuelle Alternativlösung
|
||||
4. Welche Zeit-, Geld- oder Energiekosten hat der Nutzer bereits aufgewendet
|
||||
5. Welche Probleme wurden wiederholt erwähnt
|
||||
6. Welche Äußerungen klingen positiv, sind aber nicht ausreichend belegt
|
||||
```
|
||||
|
||||
Dieser Schritt ist besonders wertvoll, denn er hilft, "gut klingende" von "wirklich urteilsfähigen" Inhalten zu trennen.
|
||||
|
||||
Eine einfache Eingabe könnte so aussehen:
|
||||
|
||||
```text
|
||||
Hier ist meine Aufzeichnung nach einem Gespräch mit einem Nutzer:
|
||||
|
||||
- Sie sagte, sie würde ein Tool ausprobieren, wenn es eines gäbe
|
||||
- Letzte Woche hat sie einen Abend damit verbracht, ihren Lebenslauf zu ändern
|
||||
- Aktuell lässt sie hauptsächlich Freunde gegenlesen
|
||||
- Sie sagte, das Schwerste sei, nicht zu wissen, wann der Lebenslauf "abschickbereit" ist
|
||||
|
||||
Bitte teile mir mit, was Meinungen und was Fakten sind.
|
||||
```
|
||||
|
||||
AI könnte ausgeben:
|
||||
|
||||
```text
|
||||
Meinungen:
|
||||
- Sie würde ein Tool ausprobieren, wenn es eines gäbe
|
||||
|
||||
Fakten:
|
||||
- Letzte Woche einen Abend für die Lebenslaufänderung aufgewendet
|
||||
- Aktuelle Alternativlösung: Freunde bitten, gegenzulesen
|
||||
- Hauptschmerz: Nicht wissen, wann man "abschicken kann"
|
||||
|
||||
Für die Bedarfserkenntnis relevante Punkte:
|
||||
- Das Problem ist kürzlich aufgetreten
|
||||
- Der Nutzer hat bereits erhebliche Zeitkosten investiert
|
||||
- Die aktuelle Lösung ist von anderen abhängig und instabil
|
||||
```
|
||||
|
||||
Diese Ausgabe zeigt Einsteigern sehr deutlich: Welche Aussagen für Urteile verwendet werden können und welche nur zur Kenntnis genommen werden sollten.
|
||||
|
||||
### 12.4 AI zunächst eine leichte Webrecherche durchführen lassen
|
||||
|
||||
Wenn Sie noch nicht mit Interviews begonnen haben, können Sie AI zunächst eine sehr leichte externe Recherche durchführen lassen:
|
||||
|
||||
- Wie wird in öffentlichen Communitys über dieses Problem geklagt
|
||||
- Was wird an bestehenden Tools am meisten kritisiert
|
||||
- Ob Nutzer bereits für ähnliche Probleme bezahlen
|
||||
- Welche Alternativlösungen auf dem Markt bereits existieren
|
||||
|
||||
Diese Informationen können echte Interviews nicht ersetzen, helfen aber, schneller in den Zustand zu kommen, in dem Sie wissen, wo Sie ansetzen sollten.
|
||||
|
||||
Ein einfacher Prompt könnte lauten:
|
||||
|
||||
```text
|
||||
Bitte recherchiere für mich:
|
||||
"Was beklagen Studierende am häufigsten beim Umschreiben von Lebensläufen"
|
||||
Fasse es in 5 häufigste Beschwerden zusammen, in sehr einfachen Worten.
|
||||
```
|
||||
|
||||
AI könnte ausgeben:
|
||||
|
||||
```text
|
||||
Häufige Beschwerden:
|
||||
|
||||
1. Nicht wissen, was im Lebenslauf stehen sollte
|
||||
2. Für jede Stelle muss man ihn neu anpassen, das ist zu anstrengend
|
||||
3. Nach vielen Überarbeitungen immer noch unsicher, ob es gut ist
|
||||
4. Niemand gibt verlässliches Feedback
|
||||
5. Man hat ständig das Gefühl, nicht bereit zu sein, also schiebt man es auf
|
||||
```
|
||||
|
||||
Der Wert solcher Ergebnisse liegt darin, dass sie Ihnen den Einstiegspunkt für Interviews erleichtern.
|
||||
|
||||
### 12.5 AI als "Interview-Nachbereitungs-Coach" nutzen
|
||||
|
||||
Sie können auch eine gerade abgeschlossene Interview-Aufzeichnung an AI übergeben und sie bitten, Sie zu kritisieren:
|
||||
|
||||
```text
|
||||
Hier ist eine meiner Nutzer-Interview-Aufzeichnungen.
|
||||
Bitte hilf mir aus der Perspektive von The Mom Test bei der Nachbereitung:
|
||||
1. Bei welchen Fragen suchte ich zu sehr nach Bestätigung
|
||||
2. Welche Fragen hatten offensichtliche Lenkungen
|
||||
3. Wo hätte ich weiter nach Fakten fragen können
|
||||
4. Wenn ich noch einmal könnte, wie könnte dieses Gespräch besser geführt werden
|
||||
```
|
||||
|
||||
Das ist besonders hilfreich für Einsteiger, denn Sie entwickeln schneller ein Gespür dafür, ob Sie "Beweise sammeln" oder "Ermutigung sammeln".
|
||||
|
||||
## Assignments
|
||||
|
||||
Bitte bearbeiten Sie die folgenden Aufgaben basierend auf dem obigen Inhalt:
|
||||
|
||||
1. Wählen Sie eine Produktrichtung, an der Sie kürzlich denken, und schreiben Sie zunächst 5 "leicht nutzlose" Fragen, die Sie ursprünglich gestellt hätten
|
||||
2. Schreiben Sie diese 5 Fragen im Stil von The Mom Test um
|
||||
3. Finden Sie 3 potenzielle Nutzer und fragen Sie mindestens einmal: "Wann hatten Sie das letzte Mal dieses Problem?"
|
||||
4. Nach dem Interview ordnen Sie 4 Arten von Informationen: Echtes Verhalten, Alternativlösungen, bereits aufgewendete Kosten, wiederkehrende Schwierigkeiten
|
||||
|
||||
## Weiterführende Literatur
|
||||
|
||||
- [The Mom Test Offizielle Website](https://momtestbook.com/)
|
||||
- [Rob Fitzpatrick: The Mom Test](https://www.robfitz.com/the-mom-test/)
|
||||
@@ -0,0 +1,650 @@
|
||||
---
|
||||
title: 'Prototyp erstellen - Von der Geschäftsanalyse zur Multi-Page-Produktprototyp-Implementierung'
|
||||
description: 'Den vollständigen Kreislauf von der Geschäftsanalyse zur Multi-Page-Produktprototyp-Implementierung erleben. Lernen Sie, wie man das Geschäft befragt, Anforderungen zerlegt, AI IDE für Single-Page- und Multi-Page-Anwendungen nutzt und den Prototyp optimiert und testet.'
|
||||
---
|
||||
|
||||
<script setup>
|
||||
import { relatedArticlesMap } from '@theme/data/relatedArticles'
|
||||
|
||||
const duration = 'Etwa <strong>8 Stunden</strong>'
|
||||
const relatedArticles =
|
||||
relatedArticlesMap['de-de/stage-1/building-prototype'] ?? []
|
||||
</script>
|
||||
|
||||
# Anfänger III: Prototyp erstellen
|
||||
|
||||
## Kapitelübersicht
|
||||
|
||||
<ChapterIntroduction :duration="duration" :tags="['Geschäftsanalyse', 'Prototyp-Design', 'AI-unterstützte Programmierung', 'Multi-Page-Anwendung']" coreOutput="1 E-Commerce-Material-Workspace-Prototyp" expectedOutput="Interaktiver Web-Prototyp">
|
||||
|
||||
Im letzten Kapitel haben wir gelernt, wie man <strong>gute Ideen findet</strong> — von Nutzerbedürfnissen ausgehend und Richtungen findet, für die jemand zu zahlen bereit ist. Aber eine Richtung zu finden ist nur der erste Schritt. <strong>Die wahre Herausforderung für Produktmanager ist: Wie verwandelt man vage Anforderungen in ein nutzbares Produkt?</strong>
|
||||
|
||||
Dieses Kapitel löst ein <strong>reales Problem</strong>: Der Chef gibt Ihnen den Satz "Nutze AI, um die Effizienz beim Veröffentlichen von Produkten auf E-Commerce-Plattformen zu steigern" — wie machen Sie daraus einen <strong>nutzbaren Produktprototyp</strong>?
|
||||
|
||||
Im Gegensatz zum Snake-Spiel oder Taschenrechner zuvor <strong>kann man bei echten Geschäften nicht einfach Funktionen erfinden</strong>:
|
||||
|
||||
1. <strong>Schmerzpunkte klären</strong>: Mit dem Operations-Team sprechen, aus dem vagen "Effizienz steigern" die <strong>echten Schmerzpunkte</strong> herausholen
|
||||
2. <strong>Prioritäten setzen</strong>: Aus vielen Problemen zunächst das <strong>schmerzhafteste</strong> lösen, nicht alles auf einmal
|
||||
3. <strong>Schnell validieren</strong>: Mit AI IDE zunächst einen <strong>Single-Page-Prototyp</strong> erstellen, wenn er funktioniert, zu Multi-Page erweitern
|
||||
4. <strong>Etwas Nutzbares erstellen</strong>: Am Ende einen <strong>demo-fähigen, bedienbaren E-Commerce-Material-Workspace</strong> liefern
|
||||
|
||||
Wir lernen den <strong>Übergang vom Spielzeug zur Anwendung</strong> und entwickeln <strong>Einfühlungsvermögen und das Nachdenken über echte Kundenbedürfnisse</strong>.
|
||||
|
||||
</ChapterIntroduction>
|
||||
|
||||
::: info Hinweis
|
||||
In diesem Artikel könnten einige Geschäftsbegriffe vorkommen. Wenn Sie diese nicht verstehen, können Sie AI um eine Erklärung bitten.
|
||||
:::
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="0" :items="[
|
||||
{ title: 'Anforderungsanalyse', description: 'Von vage zu konkret' },
|
||||
{ title: 'Single-Page-Validierung', description: 'Kernfunktion implementieren' },
|
||||
{ title: 'Multi-Page-Erweiterung', description: 'Anwendungsstruktur vervollständigen' },
|
||||
{ title: 'Optimierung', description: 'Nutzererfahrung verbessern' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
## 1. Anforderungen klären, bevor man Code schreibt
|
||||
|
||||
In den bisherigen Tutorials haben wir mit AI IDE mühelos Snake und verschiedene kleine Spiele generiert, aber das sind lediglich Spielzeugprojekte, die nicht im Berufs- oder Alltag eingesetzt werden können. Wenn wir AI-Fähigkeiten wirklich für alle nutzbar machen wollen, sollten wir Vibe Coding mit Lebens- und Arbeitsszenarien verbinden.
|
||||
|
||||
Im letzten Kapitel haben wir gelernt, wie man <strong>gute Ideen findet, für die jemand zu zahlen bereit ist</strong>. Aber eine Richtung zu finden ist nur der Anfang. Bei der echten Produktentwicklung werden Sie feststellen: <strong>Zwischen "wissen, was zu tun ist" und "wissen, wie man es umsetzt" liegt eine gewaltige Kluft.</strong>
|
||||
|
||||
Diese Kluft ist die <strong>Konkretisierung von Anforderungen</strong>.
|
||||
|
||||
Ein Beispiel: In Kurs- oder persönlichen Projekten beginnen wir oft mit der einfachsten ausführbaren Funktion:
|
||||
|
||||
- "Mach ein Kanban-Board, liste die Aufgaben auf."
|
||||
- "Hilf mir, ein Zeichen-Tool zu erstellen."
|
||||
- "Hilf mir, eine Umfrage-Software zu bauen."
|
||||
|
||||
Das sind oft nur ein Tool oder ein Funktionsmodul – nicht einmal ein klares Geschäftsproblem. Noch wichtiger: <strong>Diese Ideen sind oft nur "nützlich in Ihrer Meinung", nicht "was Nutzer wirklich brauchen."</strong>
|
||||
|
||||
In Unternehmens- oder Gründungsprojekten gehen Produktmanager und Ingenieure oft von einer größeren geschäftlichen Aufgabenstellung aus. Nehmen wir folgendes Szenario an:
|
||||
|
||||
<el-card shadow="hover" style="border-left: 5px solid #409EFF; background-color: #ecf5ff; margin: 20px 0;">
|
||||
<div style="font-weight: bold; color: #303133; margin-bottom: 10px;">Geschäftsszenario:</div>
|
||||
<div style="color: #606266; line-height: 1.6;">
|
||||
<p>Sie sind der E-Commerce-Operations-Produktmanager eines Shops. Der Chef gibt Ihnen eine vage, aber druckvolle Aufgabenstellung:</p>
|
||||
<p style="font-style: italic; margin-top: 10px;">"Alle nutzen AI für Bilder und Copywriting in WeChat-Öffentlichkeitskanälen, ganz einfach. Mach mal, dass wir beim Einstellen neuer Produkte auf Douyin E-Commerce effizienter werden."</p>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
Jetzt denken Sie vielleicht: "Chef, Sie träumen schon wieder!" In der Praxis ist solch vages Diktat jedoch sehr häufig – sogar häufiger als Ihre wöchentliche Bubble-Tea-Bestellung. Um ein fähiger Angestellter (oder besser: CEO eines Startups) zu sein, müssen wir lernen, von Selbstnutzungs-Tools zu echten Produktprototypen zu wechseln.
|
||||
|
||||
Da wir AI IDE gelernt haben, fällt uns diese Anforderung eigentlich leicht – man muss AI nur einen Prompt geben, alles erledigt der Agent:
|
||||
|
||||
```
|
||||
Bitte beziehe dich auf meine Anforderung xxxx,
|
||||
hilf mir, einen E-Commerce-Material-Workspace zu entwerfen,
|
||||
der Generierung und Verwaltung von Produktbeschreibungen, Bildern, Videos etc. umfasst.
|
||||
```
|
||||
|
||||
Wenn Sie begeistert diese Anforderung direkt in einen Prototyp umsetzen und dem Chef schicken – herzlichen Glückwunsch, Ihre Quartalsprämie ist gestrichen!
|
||||
|
||||
**Warum ist das so? Das ist genau der Kernschmerzpunkt, den wir lösen müssen:**
|
||||
|
||||
Bisher haben wir mit AI IDE nur Spielzeugprojekte wie Snake oder Taschenrechner gemacht – einfache Funktionen, man weiß, was man will, und man nutzt sie selbst. Aber **echte Geschäftsszenarien sind völlig anders**:
|
||||
|
||||
- **Sie sind nicht der Nutzer**: Der Chef will "Effizienz steigern", aber Sie wissen nicht, wie das Operations-Team täglich arbeitet und wo es hängt
|
||||
- **AI kennt das Geschäft nicht**: Sie geben AI eine vage Anforderung, und es kann nur auf generischem Wissen raten – das Ergebnis sieht aus wie das Richtige, funktioniert aber in der Praxis nicht
|
||||
- **Gute Idee ist nicht gleich gutes Produkt**: Sie denken, "AI-Generierung hinzufügen" sei cool, aber Nutzer brauchen es vielleicht gar nicht, oder es ist umständlicher als zuvor
|
||||
|
||||
**Deshalb müssen wir lernen: "Von der Idee zum Nutzer-Verständnis."** Nur wenn Ihre Kreativität wirklich fremde Probleme löst – durch Fragen und tiefes Geschäftsverständnis – können Sie wirklich Wertvolles schaffen. (Gute Ideen sind sogar wichtiger als gute Technik.)
|
||||
|
||||
### 1.1 Von der Vorstellung zur Realität: Lernen, das Geschäft zu befragen
|
||||
|
||||
::: info Zunächst klären: Was ist eine Anforderung? Was ist ein Geschäft?
|
||||
|
||||
**Anforderung** ist das, was Nutzer wirklich wollen – ihre Probleme, die sie lösen möchten. Zum Beispiel "Der Chef will, dass ich Produkte schneller einstelle" – das ist eine Anforderung.
|
||||
|
||||
**Geschäft** ist das, was Nutzer täglich tun – ihre Arbeitsweise. Zum Beispiel E-Commerce-Operations: Produkte einstellen, Preise ändern, Bilder erstellen, Daten analysieren... Das alles ist Geschäft.
|
||||
|
||||
**Warum sich fürs Geschäft interessieren?**
|
||||
Weil Ihr Tool sonst "gut aussieht, aber niemand nutzt". Nur wenn Sie wirklich verstehen, wie Nutzer täglich arbeiten und wo sie feststecken, können Sie etwas bauen, das ihnen wirklich hilft.
|
||||
|
||||
:::
|
||||
|
||||
Aus der einfachsten Perspektive können Sie sich zunächst folgende Fragen stellen:
|
||||
|
||||
- Der Chef sagt "**etwas effizienter**" – was genau heißt das? **Schneller** machen? **Geld sparen**? **Mehr verkaufen**?
|
||||
- Wie werden Produkte aktuell eingestellt? **Wo läuft es nicht rund**?
|
||||
- Wie viele **neue Produkte** gibt es täglich? Wie viele **Bilder** und **Texte** pro Produkt?
|
||||
- Was ist **am nervigsten**, was **möchte man am wenigsten tun**?
|
||||
|
||||
Das sind jedoch nur Vermutungen. Wir müssen direkt mit dem Douyin E-Commerce-Operations-Team sprechen: "Wo liegen eure Schwierigkeiten und worauf achtet ihr?" Durch Kommunikation erhalten wir präzisere Antworten:
|
||||
|
||||
::: info Echte Geschäftsbefragungsergebnisse
|
||||
|
||||
Wir haben E-Commerce-Operations-Mitarbeiter gefragt. Sie berichteten folgende Probleme:
|
||||
|
||||
**1. Zu viele Aufgaben, zu unübersichtlich**
|
||||
- Eine Person muss mehrere Shops betreuen, jeder Shop hat viele Produkte
|
||||
- Täglich hin- und herhetzen: **Neue Produkte einstellen**, **Preise ändern**, **Bilder erstellen**, **Daten analysieren** – eine Sache ist noch nicht fertig, die nächste ruft
|
||||
|
||||
**2. Inhalte werden nicht auf einmal erstellt, sondern iterativ**
|
||||
- Zunächst **Herstellerbilder**, **frühere Materialien** oder **Referenzbilder aus dem Web** verwenden, um das Produkt **schnell einzustellen** und zu testen
|
||||
- Etwas Geld für Werbung ausgeben, **schauen, ob jemand kauft**
|
||||
- Nur bei **gut verkäuflichen Produkten** werden Bilder, Detailbeschreibungen und Videos sorgfältig erstellt
|
||||
|
||||
:::
|
||||
|
||||
Nach der Geschäftsbefragung sind wir voller Enthusiasmus – jetzt können wir wirklich den perfekten, geschäftsgerechten Produktprototyp erstellen! — Schon wieder falsch gedacht. Wenn wir versuchen, "alle Anforderungen auf einmal zu erfüllen", wird das Produkt riesig und lässt sich im Kurs-Zeitrahmen kaum realisieren. Deshalb müssen wir weiter strukturieren und verdichten, um den wahren Kernschmerzpunkt zu identifizieren.
|
||||
|
||||
### 1.2 Von Divergenz zu Konvergenz: Den Kernschmerzpunkt des Geschäfts identifizieren
|
||||
|
||||
::: info Warum "konvergieren"? Was ist ein "Schmerzpunkt"?
|
||||
|
||||
**Viele Probleme, aber welches zuerst?**
|
||||
|
||||
Nutzer erzählen Ihnen vielleicht eine Reihe von Problemen: A ist nervig, B ist nervig, C ist auch nervig... Aber wenn Sie versuchen, alle auf einmal zu lösen, wird wahrscheinlich nichts richtig. Deshalb **konvergieren** — aus vielen Problemen das **schmerzhafteste, dringendste, am besten lösbare** herausgreifen und zuerst angehen.
|
||||
|
||||
**Was ist ein Schmerzpunkt?**
|
||||
Das ist das konkrete Problem, das Nutzer **am meisten nervt, am meisten Zeit kostet und am dringendsten lösen** wollen. Nicht "ich finde es nützlich", sondern etwas, über das Nutzer **täglich klagen und bei dem jeder Durchlauf quälend ist**.
|
||||
|
||||
:::
|
||||
|
||||
Durch das obige Interview haben wir viele Operations-Probleme entdeckt: Unterbrechung durch Aktionen, Verwaltung mehrerer Shops, ständiges Wechseln zwischen Einstellen/Ändern/Bilderstellen/Daten...
|
||||
|
||||
Wenn wir versuchen, "all diese Probleme zu lösen", erhalten wir ein **riesiges, aber unbrauchbares** Tool.
|
||||
|
||||
Lassen Sie uns diese Probleme kategorisieren (AI kann helfen). Es gibt grob drei Typen:
|
||||
|
||||
1. **Rhythmus-Probleme**: Wann Produkte einstellen, wann Preise anpassen
|
||||
2. **Effizienz-Probleme**: Wie man mehrere Shops und Produkte gleichzeitig verwaltet
|
||||
3. **Content-Probleme**: Wie man schnell Produktbilder und Copywriting erstellt
|
||||
|
||||
Für unseren Kurs ist **Typ 3: Content-Erstellung** am besten geeignet. Aber "schnell Content erstellen" ist immer noch abstrakt. Fragen wir das Geschäftsteam genauer:
|
||||
|
||||
::: info Das Geschäftsteam sagt: Content-Erstellung hat zwei schmerzhafteste Stellen
|
||||
|
||||
**Schmerz 1: Batch-Bilderstellung und Copywriting sind extrem mühsam**
|
||||
- Materialien überall verteilt: Cloud-Speicher, WeChat-Verlauf, Plattform-Backend... **Schwer zu finden**
|
||||
- Viele Produkte gleichzeitig einstellen, **keine Zeit für sorgfältige Erstellung**, nur schnell zusammenstellen
|
||||
- Anspruch nicht hoch: **Sichtbar und einstellbar** reicht, muss nicht schick sein
|
||||
|
||||
**Schmerz 2: Gute Lösungen können nicht gespeichert und wiederverwendet werden**
|
||||
- Früher gute Titel und Layouts: **Beim nächsten Mal nicht mehr auffindbar**
|
||||
- Lösungen verstreut in Chat-Verläufen und alten Produkt-Links
|
||||
- Wenn man sie braucht: **Halben Tag suchen, kopieren, ändern**
|
||||
- Es fehlt ein Tool zum **Sammeln, Verwalten und direkten Wiederverwenden**
|
||||
|
||||
:::
|
||||
|
||||
Basierend auf diesen beiden Schmerzpunkten erstellen wir ein einfaches kleines Tool: **Operations-Team bei Batch-Bilderstellung und Copywriting helfen, plus gute Lösungen für spätere Wiederverwendung speichern**.
|
||||
|
||||
Es macht nur zwei Dinge (lassen Sie AI bei der Detaillierung helfen, und denken Sie daran, Funktionen basierend auf Geschäfts-Feedback kontinuierlich zu reduzieren):
|
||||
|
||||
::: info Funktion 1: Batch-generierte E-Commerce-Produktbilder und Copywriting
|
||||
|
||||
**Was macht das?**
|
||||
Dem System Produktinformationen geben, und es generiert automatisch Produktbilder und Texte, die auf E-Commerce-Plattformen (wie Douyin, Taobao) eingestellt werden können.
|
||||
|
||||
**Eingabe**
|
||||
| Typ | Inhalt |
|
||||
|------|------|
|
||||
| Produktinformationen | Name, Kategorie, Marke, Material, Größe, Farbe etc. |
|
||||
| Produktbilder | Weißgrund oder einfaches Szenario-Foto |
|
||||
| Referenzbilder | Screenshots früherer Bestseller oder Referenz-Links |
|
||||
| Import-Methode | Excel Batch-Import oder direkt auf der Seite ausfüllen |
|
||||
|
||||
**Ausgabe (generierte E-Commerce-Materialien)**
|
||||
- **Produkt-Hauptbild**: Produktansicht mit Text-Selling-Points (das Bild, das Nutzer beim Scrollen zuerst sehen)
|
||||
- **Produkttitel**: Keyword-Kombination, die bei der Suche gefunden wird
|
||||
- **Selling-Point-Copywriting**: 1-2 Sätze, die Käufer anziehen
|
||||
- Alles **nach kleiner Korrektur einstellbar**
|
||||
|
||||
**Ergebnis**
|
||||
- Früher: Jedes Produkt von Grund auf neu erstellen
|
||||
- Jetzt: Eine Charge Produkte ins System geben, Entwürfe generieren, auswählen und nachbessern
|
||||
|
||||
:::
|
||||
|
||||
::: info Funktion 2: Gute Lösungen als Vorlagen speichern
|
||||
|
||||
**Eingabe**
|
||||
| Typ | Inhalt |
|
||||
|------|------|
|
||||
| Ein kompletter Satz | Hauptbild + Titel + Copywriting |
|
||||
|
||||
**Ausgabe**
|
||||
| Funktion | Beschreibung |
|
||||
|------|------|
|
||||
| Anwenden | Beim nächsten neuen Produkt die Vorlage automatisch anwenden |
|
||||
| Bearbeiten | Titel und Copywriting direkt ändern |
|
||||
| Verwalten | Benennen, taggen (z.B. "Herrentaschen-Vorlage", "Großverkaufs-Titel"), leicht auffindbar |
|
||||
|
||||
**Ergebnis**
|
||||
1. Neues Produkt importieren
|
||||
2. Auswählen: Systemstandard-Generierung oder **meine gespeicherte Vorlage verwenden**
|
||||
3. System wendet automatisch Vorlagen-Stil an und generiert neue Bilder und Copywriting
|
||||
|
||||
:::
|
||||
|
||||
---
|
||||
|
||||
**Rückblick auf das, was wir gerade getan haben:**
|
||||
|
||||
1. **Zuerst Fragen stellen**: Nicht direkt mit dem Programmieren beginnen, sondern zuerst das Operations-Team fragen "Was nervt euch am meisten"
|
||||
2. **Schmerzpunkte finden**: Entdeckt, dass sie am meisten unter "Bilder und Copywriting erstellen ist zu mühsam" und "gute Lösungen können nicht gespeichert werden" leiden
|
||||
3. **Umfang eingrenzen**: Keine allesumfassende Plattform bauen, sondern nur "Batch-Generierung von Bildern und Copywriting + Vorlagen speichern" – diese beiden Funktionen
|
||||
|
||||
**Warum ist das so wichtig?**
|
||||
|
||||
Ein häufiger Fehler von Anfängern bei der Produktentwicklung ist: Mehr Funktionen ist besser. Aber was Nutzer wirklich brauchen, ist **die Lösung des schmerzhaftesten Problems**. Eine Reihe von Funktionen, die alle nicht richtig funktionieren, ist schlechter als ein bis zwei Funktionen, die Nutzer wirklich unterstützen.
|
||||
|
||||
**Kern des Produkt- und Geschäftsdenkens:**
|
||||
- Nicht selbst denken "Ich glaube, Nutzer brauchen das"
|
||||
- Nutzer fragen "Was machst du jeden Tag? Wo tut es am meisten weh?"
|
||||
- Aus einer Menge von Problemen **konvergieren** auf das schmerzhafteste, am besten lösbare
|
||||
- Zuerst die **minimal nutzbare** Version erstellen, dann schrittweise iterieren
|
||||
|
||||
Das ist es, was wir klären müssen, bevor wir Code schreiben. Code ist nur ein Werkzeug – **Nutzer verstehen, das richtige Problem finden** ist der erste Schritt.
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="1" :items="[
|
||||
{ title: 'Anforderungsanalyse', description: 'Von vage zu konkret' },
|
||||
{ title: 'Single-Page-Validierung', description: 'Kernfunktion implementieren' },
|
||||
{ title: 'Multi-Page-Erweiterung', description: 'Anwendungsstruktur vervollständigen' },
|
||||
{ title: 'Optimierung', description: 'Nutzererfahrung verbessern' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
## 2. In 10 Minuten einen Prototyp erstellen: AI IDE lässt die "Kernfunktion" Wirklichkeit werden
|
||||
|
||||
::: info Programmier-Plan-Empfehlung
|
||||
Wenn Sie das Gefühl haben, dass Ihre aktuelle IDE nicht intelligent genug ist oder Ihr Kontingent schnell aufgebraucht ist, können Sie einen **Programmier-Plan** erwerben. Zur Vorbereitung lesen Sie [diesen Artikel](../../stage-2/backend/modern-cli/) über die Verwendung von Claude zum Programmieren.
|
||||
:::
|
||||
|
||||
Nachdenken ist gut, aber man sollte nicht übermäßig reflektieren. Wir steuern die übermäßige Reflexion und versuchen, mit einer einzelnen Seite einen Prototyp zu erstellen.
|
||||
|
||||
### 2.1 Erster Schritt: AI in einfachen Worten sagen, was Sie wollen
|
||||
|
||||
Am Anfang müssen Sie keine perfekten Prompts anstreben. Beginnen Sie mit Ihrem natürlichsten Ausdruck. Beschreiben Sie AI wie einem Kollegen Ihre Anforderungen in einfachen Worten, und lassen Sie AI Ihnen helfen, sie in einen professionelleren Ausdruck zu optimieren.
|
||||
|
||||
#### 2.1.1 Mit einer mündlichen Beschreibung beginnen (empfohlen für Anfänger)
|
||||
|
||||
Beschreiben Sie Ihre Idee zuerst in Ihren eigenen Worten – auch wenn es noch so rau ist:
|
||||
|
||||
```
|
||||
Ich möchte ein Tool erstellen, das E-Commerce-Operations-Mitarbeitern hilft,
|
||||
automatisch Produkt-Hauptbilder und Copywriting zu generieren.
|
||||
Operations-Mitarbeiter müssen aktuell manuell Bild für Bild und Text für Text
|
||||
erstellen, was sehr mühsam ist.
|
||||
Meine Idee: Sie laden Produktinformationen hoch, das System generiert automatisch
|
||||
einen Satz Entwürfe, die Operations-Mitarbeiter wählen die brauchbaren aus,
|
||||
ändern sie leicht und können sie verwenden.
|
||||
|
||||
Zuerst die einfachste Version: eine Seite, links Produktinformationen eingeben,
|
||||
rechts die generierten Ergebnisse anzeigen. Bilder hochladen, Text eingeben,
|
||||
nach der Generierung Hauptbild-Vorschau und Copywriting anzeigen.
|
||||
```
|
||||
|
||||
Senden Sie diesen Text dann an eine AI (wie ChatGPT, Claude etc.), damit sie ihn für Sie erweitert. AI hilft Ihnen normalerweise dabei, Details zu ergänzen, an die Sie noch nicht gedacht haben, Ihre Ideen klarer zu strukturieren und schließlich einen Prompt zu generieren, der sich für AI IDE eignet.
|
||||
|
||||
Sie können AI so ansprechen:
|
||||
```
|
||||
Hilf mir, die obige Idee zu erweitern und in ein klares
|
||||
Geschäftslogik-Dokument zu strukturieren. Generiere dann einen Prompt,
|
||||
der sich für AI IDE (wie Cursor, Trae) eignet, um Single-Page-Prototyp-Code
|
||||
zu generieren.
|
||||
```
|
||||
|
||||
AI wird eine strukturierte Anforderung und den entsprechenden Prompt zurückgeben. Überprüfen Sie diese selbst, entfernen Sie unnötige Funktionen und bestätigen Sie sie, bevor Sie den Code generieren.
|
||||
|
||||
Der Vorteil dieses Ansatzes: Die mündliche Beschreibung enthält die authentischsten Ideen, kann aber wichtige Details übersehen. Wenn AI für Sie erweitert, könnte sie Fragen stellen wie "Soll Batch-Upload unterstützt werden?", an die Sie noch nicht gedacht haben. So können Sie Ihre Anforderungen weiter validieren. Sie können basierend auf dem Feedback entscheiden, ob Sie unpraktische Funktionen beibehalten oder entfernen möchten, und durch wiederholte Überarbeitung den ersten Prompt für AI festlegen.
|
||||
|
||||
#### 2.1.2 Den Erweiterungsschritt überspringen: Geschäftsdokument direkt an AI übergeben
|
||||
|
||||
Wenn Sie in den vorherigen Kapiteln bereits ein Geschäftslogik-Dokument erstellt haben (z.B. eine in einfachen Worten verfasste Anforderungsbeschreibung), können Sie das folgende Format direkt verwenden und an AI IDE senden – ohne den Zwischenschritt der AI-Erweiterung. Dies eignet sich, wenn die Anforderungen bereits klar sind und Sie direkt mit dem Programmieren beginnen möchten:
|
||||
|
||||
```
|
||||
Hilf mir, basierend auf der Geschäftslogik eine Single-Page-Anwendung
|
||||
zu implementieren, um die Kernfunktion zu validieren.
|
||||
|
||||
Geschäftslogik-Referenz:
|
||||
1. Operations-Mitarbeitern helfen, die erste Version von Bild- und Textentwürfen
|
||||
stapelweise zu generieren:
|
||||
- **Eingabe (direkter Upload und Batch-Import unterstützt):**
|
||||
- Produktbasisinformationen: Name, Kategorie, Marke, Material, Größe, Farbe,
|
||||
Zielgruppe etc.;
|
||||
- Produktbilder: Weißgrund / einfaches Szenario-Foto;
|
||||
- Bei jeder Generierung: zusätzlicher Upload von Screenshots früherer
|
||||
Bestseller oder Referenz-Links möglich;
|
||||
- Excel Batch-Import oder Online-Eingabe/Upload auf der Seite unterstützt.
|
||||
- Auf der Seite kann angegeben werden, ob Produktmaterialien in der
|
||||
Materialbibliothek gespeichert werden sollen, für spätere Verwendung.
|
||||
- **Ausgabe (Inhalte, die direkt oder mit leichten Änderungen eingestellt
|
||||
werden können):**
|
||||
- Für jedes Produkt ein Hauptbild-Entwurf, der "ansehbar" ist und
|
||||
grundlegende Selling-Points enthält;
|
||||
- Ein "strukturgerechter" Titel mit Kern-Keywords + 1-2 Sätze
|
||||
Selling-Point-Copywriting.
|
||||
- **Erwartete Änderung der Arbeitsweise:**
|
||||
Vom Neuentwurf für jede Produktcharge zum Einwerfen einer Charge in das
|
||||
System, mit System-Entwürfen zur Auswahl und Feinjustierung.
|
||||
|
||||
Zuerst die erste Funktion implementieren, die zweite Funktion (Vorlagenbibliothek)
|
||||
wird später hinzugefügt.
|
||||
```
|
||||
|
||||
#### 2.1.3 Der Programmierer-Ansatz (fortgeschritten): AI helfen lassen, einen "Prompt für Prompts" zu schreiben
|
||||
|
||||
Wenn Sie den Code-Generierungsprozess feiner steuern möchten, können Sie zuerst AI (wie ChatGPT) bitten, basierend auf Ihren Anforderungen einen speziell für AI IDE bestimmten Prompt zu generieren:
|
||||
|
||||
```
|
||||
Basierend auf der folgenden Idee, hilf mir, einen Prompt für einen Coding Agent
|
||||
zu schreiben, um Code zu generieren. Ich muss diesen Prompt verwenden, um Code
|
||||
zu erstellen.
|
||||
|
||||
[Deine Geschäftslogik-Beschreibung hier einfügen]
|
||||
|
||||
Anforderungen:
|
||||
1. Der Prompt soll eine klare Seitenlayout-Beschreibung enthalten
|
||||
2. Datenstrukturen und Interaktionslogik klar definieren
|
||||
3. Technology Stack angeben (z.B. React + Tailwind)
|
||||
4. Die zu implementierenden Kernfunktionen auflisten
|
||||
```
|
||||
|
||||
Normalerweise generiert AI einen strukturierten Prompt wie den folgenden:
|
||||
|
||||
|
||||
Sie können diesen Prompt nach kleinen Anpassungen an AI IDE senden, um Code zu generieren.
|
||||
|
||||
### 2.2 Zweiter Schritt: AI IDE direkt Code generieren lassen
|
||||
|
||||
#### 2.2.1 Vorbereitung: Grundlegende Bedienung von AI IDE verstehen
|
||||
|
||||
Wenn Sie mit AI IDE (wie Cursor, Trae, Windsurf etc.) noch nicht vertraut sind, empfehlen wir, zunächst das [IDE-Grundlagen-Tutorial](/de-de/appendix/2-development-tools/ide-basics/) im Anhang zu lesen, um zu erfahren:
|
||||
- Wie man ein neues Projekt erstellt
|
||||
- Wie man mit dem AI Agent kommuniziert
|
||||
- Wie man den Code-Generierungsprozess der AI versteht
|
||||
|
||||
#### 2.2.2 Mit der Code-Generierung beginnen
|
||||
|
||||
Jetzt haben Sie den initialen Prompt erhalten. Wir nehmen den ersten Prompt-Stil als Beispiel und lassen AI uns beim Generieren von Code helfen. Erstellen Sie zuerst ein Fenster und den entsprechenden Ordner, öffnen Sie den Ordner (initialisieren Sie ein neues Projekt in Ihrem bevorzugten Ordner):
|
||||
|
||||
|
||||
|
||||
Wählen Sie in der Seitenleiste ein Modell Ihrer Wahl (empfohlen: gemini, gpt, glm, kimi, minimax etc.) und geben Sie den Prompt aus dem ersten Schritt ein:
|
||||
|
||||
|
||||
Nach dem Klick auf Generieren sehen wir den vertrauten Vorgang: AI plant basierend auf dem Prompt die Verzeichnisstruktur des Projekts, die notwendigen Dateien und gibt den ursprünglichen Inhalt jeder Datei an.
|
||||
|
||||
::: warning Wichtiger Hinweis: AI kann anhalten und auf Ihre Bestätigung warten
|
||||
Während des Generierungsprozesses hält der **AI Agent oft an und wartet auf Ihre Eingabe oder Bestätigung**, zum Beispiel:
|
||||
- Fragt Sie, ob Sie mit dem nächsten Schritt fortfahren möchten
|
||||
- Bittet Sie, die Eingabetaste zu drücken, um eine Aktion zu bestätigen
|
||||
- Fragt Sie nach der Wahl eines technischen Details
|
||||
|
||||
**Wenn AI nicht mehr reagiert, prüfen Sie zuerst die Dialogoberfläche, ob sie auf Ihre Antwort wartet.** Viele Anfänger denken, AI würde noch nachdenken, aber sie hat bereits angehalten und wartet auf Sie. Aktiv antworten oder Eingabetaste drücken, dann arbeitet AI weiter.
|
||||
:::
|
||||
|
||||
Vergessen Sie auch hier nicht, die Eingabetaste zu drücken, um die Informationen zu bestätigen (andernfalls geraten Sie in eine Warteschleife; einige AI IDEs haben dieses Problem nicht):
|
||||
|
||||
|
||||
Wenn Sie die folgende Szene sehen, bedeutet das, dass bereits ein lokaler Dienst gestartet wurde. Sie müssen auf Überspringen klicken, sonst bleiben Sie auf dieser Oberfläche (wenn nach der Code-Generierung nichts erscheint, müssen Sie aktiv sagen: "Hilf mir, dieses Projekt zu starten"):
|
||||
|
||||
|
||||
::: info Szenario-Erklärung
|
||||
**Szenario-Beschreibung**: Sie haben mit `npm create vite@latest` ein React + TypeScript-Projekt (easy-vibe-web) erstellt. Nach Abschluss der Erstellung startet Ihr Computer automatisch die Webseite, damit Sie das Ergebnis sofort sehen können.
|
||||
|
||||
**Lokaler Dienst**: Kann als temporäres Webseiten-Anzeigefenster auf Ihrem Computer verstanden werden, das nur auf Ihrem eigenen Rechner läuft und für andere nicht zugänglich ist.
|
||||
|
||||
**localhost (lokale Adresse)**: `localhost` bedeutet "dieser Computer selbst". Wenn Sie im Browser darauf zugreifen, greifen Sie tatsächlich auf die Webseite zu, die auf Ihrem Computer läuft.
|
||||
|
||||
**Port**: Ein Port kann als Nummer verstanden werden, die verschiedene Webdienste auf demselben Computer unterscheidet. Dieses Projekt verwendet 5174.
|
||||
|
||||
**Zugriffslink `http://localhost:5174/`**: Diese Adresse bedeutet "Zugriff auf die Webseite mit der Nummer 5174 auf diesem Computer". Im Browser öffnen, um das Ergebnis zu sehen.
|
||||
|
||||
**Aktuelle Szenario-Erklärung**: Das System wollte ursprünglich 5173 verwenden, aber diese Nummer war bereits belegt, daher wurde automatisch auf 5174 gewechselt. Das ist normal.
|
||||
|
||||
**Bedienungsanleitung**: Öffnen Sie den Browser, geben Sie `http://localhost:5174/` in die Adressleiste ein und drücken Sie Enter, um die aktuelle Projektseite zu sehen.
|
||||
:::
|
||||
|
||||
Nachdem alles bestätigt ist, warten Sie einen Moment, bis der Agent seine Arbeit beendet hat. Wir erhalten folgendes Ergebnis:
|
||||
|
||||
|
||||
Man sieht bereits eine erste funktionale Ansicht, aber das Frontend sieht noch sehr unschön aus. Jetzt können wir versuchen, direkt mit AI zu dialogieren und die Oberfläche zu optimieren:
|
||||
|
||||
|
||||
Nach der Optimierung erhalten wir eine deutlich ansprechendere Oberfläche:
|
||||
|
||||
|
||||
Sie können die Webseiten-Funktionen nach Ihren eigenen Bedürfnissen anpassen, Screenshots anhängen und frei Fragen stellen, wie zum Beispiel: "Ich brauche die Batch-Import-Funktion derzeit nicht, bitte entfernen", "Links muss zu viel eingegeben werden, behalte nur xxxxx". Sie können sogar andere ausgereifte Websites als Referenz heranziehen – hier können wir direkt ein Design-Produkt von Google als "Referenz" verwenden (Sie können einen Screenshot einer ausgereiften Website einfügen, die Ihnen gefällt):
|
||||
|
||||
|
||||
Schließlich erhalten wir:
|
||||
|
||||
|
||||
### 2.3 Was tun bei Fehlern
|
||||
|
||||
In der Praxis sind Fehler unvermeidlich. Das ist normal und bedeutet nicht, dass Sie etwas falsch gemacht haben. Sie müssen die Fehler nicht verstehen – geben Sie einfach das "Was Sie sehen" vollständig an AI weiter.
|
||||
|
||||
Es gibt grundsätzlich drei Behandlungsmethoden:
|
||||
|
||||
- **Methode 1: Seiten- oder Terminal-Fehler**
|
||||
Wenn die Seite rot wird, weiß wird oder im Terminal viele rote Zeilen erscheinen, machen Sie einen Screenshot oder kopieren Sie die gesamte Fehlermeldung und senden Sie sie an AI, damit sie Ihnen bei der Reparatur hilft.
|
||||
|
||||
- **Methode 2: Funktion falsch, aber kein Fehler**
|
||||
Zum Beispiel reagiert ein Button nicht, Daten werden nicht angezeigt, das Layout ist durcheinander. Beschreiben Sie in einfachen Worten "Was gerade passiert + Was Sie eigentlich wollen", bei Bedarf mit einem Screenshot.
|
||||
|
||||
- **Methode 3: Unsicher, ob es ein Problem gibt**
|
||||
Sie können AI direkt fragen: "Hilf mir zu prüfen, ob diese Funktion offensichtliche Probleme hat und ob sie angepasst werden muss."
|
||||
|
||||
#### 2.3.1 Häufige Fragen von Anfängern
|
||||
|
||||
- **F: Ich weiß nicht, wo die Fehlermeldung ist?**
|
||||
- A: Suchen Sie grundsätzlich nach allem, was "rot" ist. Im Terminal, in der Konsole oder auf der Seite – finden Sie die roten Hinweise, markieren Sie alles und kopieren Sie es zu AI.
|
||||
|
||||
- **F: AI hat es repariert, aber es kommt derselbe Fehler – was nun?**
|
||||
- A: Das ist ein häufiges Szenario. Machen Sie weiterhin Screenshots oder kopieren Sie die neueste Fehlermeldung und senden Sie sie an AI, damit sie auf Basis der letzten Änderung weiter repariert.
|
||||
|
||||
- **F: Muss ich AI's Reparaturansatz vollständig verstehen?**
|
||||
- A: Nicht auf einmal. Konzentrieren Sie sich jedes Mal auf ein bis zwei Punkte. Mit der Zeit werden Sie zunehmend mehr Code verstehen – wie beim Aufbau eines englischen Wortschatzes.
|
||||
|
||||
- **F: Viele Male geändert, das Problem ist immer noch nicht gelöst – was nun?**
|
||||
- A: Sie können Folgendes versuchen:
|
||||
- Die "Versionsrücksetzung"-Funktion der IDE verwenden. Im Agent-Dialog den Rückgängig-Button finden und zu einer lauffähigen Version zurückkehren und neu beginnen;
|
||||
- Ein anderes Modell wählen oder den Prompt anpassen, Phänomene und Fehlermeldungen spezifischer beschreiben;
|
||||
- "Aktuellen Code + Fehler-Log + erwartetes Verhalten" zusammenpacken und AI auf einmal übergeben, damit sie den Problembereich insgesamt restrukturiert.
|
||||
|
||||
## 3. Von der Single-Page zur Multi-Page-Anwendung erweitern
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="2" :items="[
|
||||
{ title: 'Anforderungsanalyse', description: 'Von vage zu konkret' },
|
||||
{ title: 'Single-Page-Validierung', description: 'Kernfunktion implementieren' },
|
||||
{ title: 'Multi-Page-Erweiterung', description: 'Anwendungsstruktur vervollständigen' },
|
||||
{ title: 'Optimierung', description: 'Nutzererfahrung verbessern' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
Wenn die Logik der Kernfunktion grundsätzlich generiert ist, können wir die restlichen Inhalte erstellen. Zum Beispiel sind Klicks auf Einstellungen oder bestimmte Buttons zu diesem Zeitpunkt noch völlig wirkungslos.
|
||||
|
||||
Sie können AI bitten, basierend auf den Anforderungen des Geschäftsprompts zu prüfen und die noch nicht generierten Teile zu erstellen. Oder Sie lassen AI die nicht vollständig implementierten Seiten direkt ergänzen. Sie können auch eine bestimmte Seite angeben, die AI implementieren soll, bis alle Seiten klickbar und alle Funktionen ordnungsgemäß interaktiv sind:
|
||||
|
||||
|
||||
Nach kurzer Wartezeit sehen wir, dass das Programm auf der bisherigen Basis mehrere Seiten und interaktive Funktionen ergänzt hat:
|
||||
|
||||
|
||||
|
||||
|
||||
Jetzt müssen Sie nur noch manuell jede Funktion und jeden Button anklicken, die Sie interessieren, und sicherstellen, dass die Interaktion ordnungsgemäß funktioniert. Wenn es nicht interaktive Funktionen gibt, können Sie mit AI kommunizieren und sie um Hilfe bei der Reparatur bitten.
|
||||
|
||||
## 4. Den Prototyp "wie echt" aussehen lassen
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="3" :items="[
|
||||
{ title: 'Anforderungsanalyse', description: 'Von vage zu konkret' },
|
||||
{ title: 'Single-Page-Validierung', description: 'Kernfunktion implementieren' },
|
||||
{ title: 'Multi-Page-Erweiterung', description: 'Anwendungsstruktur vervollständigen' },
|
||||
{ title: 'Optimierung', description: 'Nutzererfahrung verbessern' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
Nachdem wir die Multi-Page-Struktur haben, ist der letzte Schritt, den Prototyp von "es läuft" zu "lässt sich flüssig bedienen und sieht professionell aus" zu bringen. Dafür müssen wir den gesamten Prozess (Nutzer-Flow) einmal selbst durchlaufen und die nicht funktionierenden Teile von AI reparieren lassen, damit wir nach jedem Refresh den vollständigen Prozess als neuer Nutzer simulieren und die erwarteten Ergebnisse erhalten können.
|
||||
|
||||
Lassen Sie uns die ursprünglichen Anforderungen rekapitulieren:
|
||||
|
||||
```
|
||||
1. Operations-Mitarbeitern helfen, die erste Version von Bild- und Textentwürfen
|
||||
stapelweise zu generieren:
|
||||
- **Eingabe (direkter Upload und Batch-Import unterstützt):**
|
||||
- Produktbasisinformationen: Name, Kategorie, Marke, Material, Größe, Farbe,
|
||||
Zielgruppe etc.;
|
||||
- Produktbilder: Weißgrund / einfaches Szenario-Foto;
|
||||
- Bei jeder Generierung: zusätzlicher Upload von Screenshots früherer
|
||||
Bestseller oder Referenz-Links möglich;
|
||||
- Excel Batch-Import oder Online-Eingabe/Upload auf der Seite unterstützt.
|
||||
- Auf der Seite kann angegeben werden, ob Produktmaterialien in der
|
||||
Materialbibliothek gespeichert werden sollen, für spätere Verwendung.
|
||||
- **Ausgabe (Inhalte, die direkt oder mit leichten Änderungen eingestellt
|
||||
werden können):**
|
||||
- Für jedes Produkt ein Hauptbild-Entwurf, der "ansehbar" ist und
|
||||
grundlegende Selling-Points enthält;
|
||||
- Ein "strukturgerechter" Titel mit Kern-Keywords + 1-2 Sätze
|
||||
Selling-Point-Copywriting.
|
||||
- **Erwartete Änderung der Arbeitsweise:**
|
||||
Vom Neuentwurf für jede Produktcharge zum Einwerfen einer Charge in das
|
||||
System, mit System-Entwürfen zur Auswahl und Feinjustierung.
|
||||
|
||||
2. Gute Outputs als wiederverwendbare Vorlagenbibliothek konservieren:
|
||||
- **Was kann gespeichert werden?**
|
||||
- Jeder Output, von dem der Operations-Mitarbeiter findet, dass er "gut
|
||||
funktioniert", kann mit einem Klick gespeichert werden:
|
||||
- Kann eine komplette Kombination aus "Hauptbild + Titel + Selling-Point"
|
||||
sein;
|
||||
- Oder nur ein Teil davon, z.B. eine bestimmte Titel-Struktur oder ein
|
||||
bestimmter Selling-Point-Text.
|
||||
- **Was kann nach dem Speichern getan werden?**
|
||||
- **Wiederverwenden:**
|
||||
- Diese gespeicherte Vorlage verwenden, neue Produkt-Parameter einsetzen,
|
||||
neue Bild- und Textentwürfe generieren;
|
||||
- Oder auf demselben Produkt basierend auf der Vorlage mehrere Varianten
|
||||
für A/B-Tests generieren.
|
||||
- **Bearbeiten:**
|
||||
- Titel-Text / Selling-Point-Text direkt ändern;
|
||||
- Wenn Bildbearbeitung unterstützt wird, können Text, Sticker etc. im
|
||||
Hauptbild feinjustiert werden.
|
||||
- **Verwalten:**
|
||||
- Gespeicherte Vorlagen benennen, taggen (z.B. "Herrentaschen-Hauptbild-Vorlage",
|
||||
"Großverkaufs-Titel-Struktur"), nach Shop kategorisieren für einfache
|
||||
spätere Suche.
|
||||
- **Wie beim nächsten Mal verwenden?**
|
||||
- Nach Import eines neuen Produkts kann der Operations-Mitarbeiter wählen:
|
||||
- Systemstandard-Logik verwenden, oder
|
||||
- "Meine gespeicherte Vorlage verwenden" angeben;
|
||||
- Das System wendet basierend auf den neuen Produktdaten automatisch Struktur
|
||||
und Stil der Vorlage an und generiert neue Hauptbild + Titel +
|
||||
Selling-Point-Entwürfe.
|
||||
```
|
||||
|
||||
Wenn bei jedem Test neue Daten manuell erstellt werden müssen, kostet das viel Zeit. Zu diesem Zeitpunkt verwenden wir normalerweise eine Methode namens "Testdaten". Wir können wie folgt mit AI kommunizieren und AI bitten, auf der Oberfläche einen schnellen Testdaten-Eingang zu generieren, damit wir testen können, ob alle Funktionen ordnungsgemäß durchlaufen werden:
|
||||
|
||||
```
|
||||
Ich muss jetzt diesen Nutzungsprozess testen und sicherstellen, dass er
|
||||
vollständig durchlaufen werden kann. Bitte generiere basierend auf den
|
||||
folgenden Anforderungen einen Testdaten-Eingang, damit ich nach einem Klick
|
||||
schnell testen kann, ob der gesamte Prozess normal funktioniert:
|
||||
1. Operations-Mitarbeitern helfen, die erste Version von Bild- und Textentwürfen
|
||||
stapelweise zu generieren:
|
||||
- **Eingabe (direkter Upload und Batch-Import unterstützt):**
|
||||
- Produktbasisinformationen: Name, Kategorie, Marke, Material, Größe, Farbe,
|
||||
Zielgruppe etc.;
|
||||
- Produktbilder: Weißgrund / einfaches Szenario-Foto;
|
||||
- Bei jeder Generierung: zusätzlicher Upload von Screenshots früherer
|
||||
Bestseller oder Referenz-Links möglich;
|
||||
- Excel Batch-Import oder Online-Eingabe/Upload auf der Seite unterstützt.
|
||||
- Auf der Seite kann angegeben werden, ob Produktmaterialien in der
|
||||
Materialbibliothek gespeichert werden sollen, für spätere Verwendung.
|
||||
- **Ausgabe (Inhalte, die direkt oder mit leichten Änderungen eingestellt
|
||||
werden können):**
|
||||
- Für jedes Produkt ein Hauptbild-Entwurf, der "ansehbar" ist und
|
||||
grundlegende Selling-Points enthält;
|
||||
- Ein "strukturgerechter" Titel mit Kern-Keywords + 1-2 Sätze
|
||||
Selling-Point-Copywriting.
|
||||
- **Erwartete Änderung der Arbeitsweise:**
|
||||
Vom Neuentwurf für jede Produktcharge zum Einwerfen einer Charge in das
|
||||
System, mit System-Entwürfen zur Auswahl und Feinjustierung.
|
||||
```
|
||||
|
||||
Man erhält schnell Ergebnisse (wenn Ihnen ein Datensatz zu wenig ist, können Sie AI bitten, mehrere testbare Use Cases zu generieren):
|
||||
|
||||
|
||||
Nach dem Klick erhalten wir das Ergebnis:
|
||||
|
||||
|
||||
Was wir hier direkt erhalten, ist das Ergebnis – es gibt keinen "simulierten Generierungsprozess". Wenn wir einen realistischen Generierungsprozess simulieren möchten, können wir direkt mit AI dialogieren: "Bitte simuliere einen realistischen Generierungsprozess, bei dem die Ergebnisse erst nach einiger Zeit nach dem Klick angezeigt werden."
|
||||
|
||||
|
||||
Nachdem die Generierungsfunktion durchlaufen ist, müssen wir auch sicherstellen, dass die Vorlagenbibliothek ordnungsgemäß funktioniert. Auf der Generierungskarte der Seite können wir sehen, dass die Vorlagenbibliothek-Speicherfunktion noch nicht implementiert ist. Jetzt müssen wir mit AI weitergehend kommunizieren: "Bitte hilf mir sicherzustellen, dass die Anforderung [hier den Inhalt von Punkt 2 oben einfügen] erfüllt ist, ein Ergebnis angeklickt werden kann, um die entsprechende Vorlage zu speichern, und nach dem Öffnen die Generierungsparameter sichtbar sind."
|
||||
|
||||
Generierung ist oft nicht in einem Schritt erledigt – häufig sind Screenshots und Korrekturen nötig:
|
||||
|
||||
|
||||
Schließlich erhalten wir das erwartete Ergebnis:
|
||||
|
||||
|
||||
Neben der manuellen Überprüfung des Anforderungsprozesses können Sie AI auch bitten, direkt eine Anforderungsprüfung durchzuführen, zum Beispiel:
|
||||
|
||||
- "Bitte vergleiche meine ursprünglichen Anforderungen und prüfe, ob die aktuelle Anwendung alle Kernfunktionen abdeckt."
|
||||
- "Hilf mir, eine Funktionsliste zu erstellen, die markiert, was bereits fertig ist und was noch nicht implementiert ist oder unzureichend ist."
|
||||
|
||||
AI gibt normalerweise eine Checkliste aus. Basierend auf den Ergebnissen können Sie überlegen, ob weitere Verbesserungen nötig sind. Nach wiederholten Überarbeitungen erhalten Sie einen relativ vollständigen Prototyp.
|
||||
|
||||
## 5. Hausaufgabe: Erstellen Sie Ihren eigenen Douyin E-Commerce-Workspace
|
||||
|
||||
<el-card shadow="hover" style="margin: 20px 0; border-radius: 12px;">
|
||||
<template #header>
|
||||
<div style="font-weight: bold; font-size: 16px;">Herausforderung: E-Commerce-Material-Workspace nachbauen</div>
|
||||
</template>
|
||||
|
||||
<p>
|
||||
Referenzieren Sie die Prompts und Inhalte dieser Lektion und schließen Sie einen vollständigen Kreislauf ab:
|
||||
</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<strong>Vollständiger Praxis-Kreislauf</strong>
|
||||
<ul>
|
||||
<li>Geschäftsstrukturierung → Prompt-Generierung → Single-Page-Prototyp-Generierung → Multi-Page-Prototyp-Generierung</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<strong>Ergebnisse teilen</strong>
|
||||
<ul>
|
||||
<li>Machen Sie Screenshots Ihres Programms und teilen Sie sie mit anderen</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<strong>Denkaufgabe</strong>
|
||||
<ul>
|
||||
<li>Bereiten Sie sich auf die nächste Lektion "Anbindung von Large Language Models (LLM) und Text-to-Image-Fähigkeiten" vor und überlegen Sie im Voraus: Wie könnten Sie "AI-Copywriting / Bildgenerierung / Skriptgenerierung" etc. in Ihren Workspace einbetten?</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</el-card>
|
||||
|
||||
## Nächste Schritte
|
||||
|
||||
In der nächsten Lektion werden wir auf Basis dieses Content-Produktions-Workspaces konkrete AI-Fähigkeiten anbinden (Text-zu-Text, Bild-zu-Text, Text-zu-Bild), zum Beispiel:
|
||||
|
||||
- Automatische Generierung von Copywriting-Entwürfen und mehreren Titel-Alternativen für eine Content-Aufgabe
|
||||
- Automatische Generierung von Bild-Entwürfen basierend auf der Aufgabenbeschreibung (Text-to-Image)
|
||||
- Automatische Kategorisierung und Zusammenfassung historischer Content-Aufgaben, um Sie bei der Planung des nächsten Events zu unterstützen
|
||||
|
||||
<RelatedArticlesSection
|
||||
title="Weiterlernen"
|
||||
description="Empfehlung: in der Reihenfolge 'AI-Fähigkeiten anbinden → vollständiger Projekt-Kreislauf → Design-Engineering' fortsetzen."
|
||||
:items="relatedArticles"
|
||||
/>
|
||||
@@ -0,0 +1,301 @@
|
||||
---
|
||||
title: 'Vollständiges Projektpraktikum - Vom Demo zum produktionsreifen Prototyp'
|
||||
description: 'Verlassen Sie die Demo-Phase und lernen Sie, die Produktkette zu vervollständigen, realistische Simulationsdaten zu erstellen, durch Feedback schnell zu iterieren und schließlich einen präsentierbaren, interaktiven vollständigen AI-Produktprototyp fertigzustellen.'
|
||||
---
|
||||
|
||||
<script setup>
|
||||
import { relatedArticlesMap } from '@theme/data/relatedArticles'
|
||||
|
||||
const duration = 'Etwa <strong>3 Tage</strong>'
|
||||
const relatedArticles =
|
||||
relatedArticlesMap['de-de/stage-1/complete-project-practice'] ?? []
|
||||
</script>
|
||||
|
||||
# Anfänger V: Vollständiges Projektpraktikum
|
||||
|
||||
## Kapitelübersicht
|
||||
|
||||
<ChapterIntroduction :duration="duration" :tags="['Produktdenken', 'Simulationsdaten', 'Interaktionsvervollständigung', 'LocalStorage']" coreOutput="1 vollständiger AI-Produktprototyp" expectedOutput="Eine Web-Anwendung mit vollständiger Kette und realen Daten">
|
||||
|
||||
Im letzten Kapitel haben wir AI-Fähigkeiten integriert und das Demo läuft. Aber es ist von einem echten "Produkt" noch <strong>weit entfernt</strong>: Sobald die Seite aktualisiert wird, <strong>sind die Daten weg</strong>, bei Fehlern gibt es eine <strong>weiße Seite</strong>, die Liste zeigt nur "Testdaten 1, Testdaten 2", und wenn der Nutzer falsch klickt, <strong>kann er es nicht rückgängig machen</strong>...
|
||||
|
||||
In diesem Kapitel werden wir <strong>alle diese Lücken füllen</strong>: Wir werden die <strong>vollständige Kette des Produkts ergänzen</strong>, mit AI <strong>realistische Geschäftsdaten</strong> generieren, anstelle von Platzhalterdaten, <strong>Fehlerbehandlung und Nutzer-Feedback</strong> hinzufügen und schließlich einen <strong>vollständigen Prototyp polieren, den man vorführen kann</strong>.
|
||||
|
||||
Dies ist das <strong>letzte Kapitel der Anfängerphase</strong>. Wenn Sie diesen Schritt abgeschlossen haben, haben Sie die Verwandlung von "kann überhaupt nicht programmieren" zu "<strong>kann unabhängig AI-Produktprototypen erstellen</strong>" vollzogen.
|
||||
|
||||
</ChapterIntroduction>
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="0" :items="[
|
||||
{ title: 'Kette vervollständigen', description: 'Von Einzelfunktion zum vollständigen Kreislauf' },
|
||||
{ title: 'Seele einhauchen', description: 'Echte Geschäftsdaten simulieren' },
|
||||
{ title: 'Feedback-Iteration', description: 'Basierend auf echtem Feedback verbessern' },
|
||||
{ title: 'Abschlussprojekt', description: 'Ihre Abschlussarbeit' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
## 1. "Happy Path" ablehnen: Die Kernkette vervollständigen
|
||||
|
||||
Viele Einsteiger erstellen Prototypen oft nur für den "Happy Path" (den Idealfall): Nutzer klickt → API antwortet erfolgreich → Ergebnis wird angezeigt.
|
||||
In der realen Welt läuft aber oft nicht alles so glatt. Damit Ihr Prototyp wie ein echtes Produkt aussieht, müssen Sie folgende "unsichtbare" Aspekte berücksichtigen.
|
||||
|
||||
### 1.1 "Warten" und "Feedback" hinzufügen
|
||||
|
||||
Wenn der Nutzer auf "Copywriting generieren" klickt, benötigt AI oft mehrere Sekunden, um zu antworten. Wenn die Oberfläche nicht reagiert, denkt der Nutzer, das Programm sei kaputt.
|
||||
**Lassen Sie die AI IDE einen Loading-Status hinzufügen:**
|
||||
|
||||
> Prompt-Beispiel:
|
||||
> "Wenn ich auf den Generieren-Button klicke, ändere den Button in 'Generiere...' und deaktiviere ihn. Zeige gleichzeitig im rechten Bereich eine Lade-Animation. Erst wenn die API ein Ergebnis zurückgibt, kehre zum Normalzustand zurück."
|
||||
|
||||
### 1.2 "Fehler" und "Ausnahmen" behandeln
|
||||
|
||||
API Keys können ablaufen, Netzwerke können unterbrochen werden.
|
||||
**Lassen Sie die AI IDE Fehler behandeln:**
|
||||
|
||||
> Prompt-Beispiel:
|
||||
> "Wenn die API-Anfrage feh schlägt, zeige nicht einfach einen Fehler in der Konsole, sondern zeige oben auf der Seite eine rote Benachrichtigung (Toast), die dem Nutzer sagt: 'Generierung fehlgeschlagen, bitte später erneut versuchen', und erlaube dem Nutzer, erneut auf Generieren zu klicken."
|
||||
|
||||
### 1.3 Chat-Verlauf persistieren
|
||||
|
||||
Bei der Interaktion mit AI müssen wir den Konversationsinhalt speichern, damit Nutzer den Verlauf überprüfen und frühere Gespräche fortsetzen können. Aktuell führen wir noch keine Datenbank ein; Sie können eine der folgenden leichtgewichtigen Lösungen wählen:
|
||||
|
||||
**Speicherlösung-Auswahl:**
|
||||
|
||||
| Lösung | Anwendungsbereich | Eigenschaften |
|
||||
| --- | --- | --- |
|
||||
| **LocalStorage** | Reines Frontend-Projekt, Nutzerdaten im Browser gespeichert | Einfache Implementierung, geht bei Aktualisierung nicht verloren, keine geräteübergreifende Synchronisierung |
|
||||
| **JSON-Datei** | Lokaler Prototyp, Daten als Datei gespeichert | Klare Struktur, leicht zu debuggen, manuell bearbeitbar |
|
||||
| **TXT-Datei** | Einfachste Lösung, schnelle Textaufzeichnung | Freies Format, gute Kompatibilität |
|
||||
|
||||
**Beispiel für Konversationsinhalt:**
|
||||
Der gespeicherte Chat-Verlauf enthält normalerweise folgende Inhalte:
|
||||
|
||||
```json
|
||||
[
|
||||
{
|
||||
"role": "user",
|
||||
"content": "Hilf mir, einen Douyin-Verkaufstext für Bluetooth-Kopfhörer zu generieren",
|
||||
"timestamp": "2026-01-20 10:30:00"
|
||||
},
|
||||
{
|
||||
"role": "assistant",
|
||||
"content": "[Bluetooth-Kopfhörer Empfehlungstext]\n\nTschüss Verzögerung, immersives Hörerlebnis\n\nHey! Diese Bluetooth-Kopfhörer sind wirklich unglaublich\n\n40dB aktive Geräuschunterdrückung, sofort in die Musikwelt eintauchen\n30 Stunden Akkulaufzeit, eine Woche Pendeln ohne Aufladen\nKristallklare Anrufe wie von Angesicht zu Angesicht\nHalb-In-Ear-Design, langes Tragen ohne Schmerzen\n\nZeitlich begrenztes Angebot, klicken Sie auf den Link unten!",
|
||||
"timestamp": "2026-01-20 10:30:05"
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
**Implementierungs-Prompt:**
|
||||
|
||||
> "Bitte implementiere eine Chat-Verlauf-Speicherfunktion. Unterstütze das Speichern von Nutzer- und AI-Konversationsaufzeichnungen als JSON-Datei (oder verwende LocalStorage). Lade beim Öffnen der Seite automatisch den Verlauf und unterstütze das Anzeigen und Löschen einzelner Konversationsaufzeichnungen."
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="1" :items="[
|
||||
{ title: 'Kette vervollständigen', description: 'Von Einzelfunktion zum vollständigen Kreislauf' },
|
||||
{ title: 'Seele einhauchen', description: 'Echte Geschäftsdaten simulieren' },
|
||||
{ title: 'Feedback-Iteration', description: 'Basierend auf echtem Feedback verbessern' },
|
||||
{ title: 'Abschlussprojekt', description: 'Ihre Abschlussarbeit' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
## 2. Seele einhauchen: Echte Daten simulieren (Mock Data)
|
||||
|
||||
Eine leere Seite kann niemanden überzeugen. Stellen Sie sich vor, Sie präsentieren einen "E-Commerce-Material-Workspace", aber der Verlauf ist völlig leer oder zeigt nur eine Zeile "test / test / test".
|
||||
Für die bestmögliche Demo-Wirkung müssen wir "realistische Daten fälschen", damit Ihr Prototyp wie ein echtes Produkt aussieht, das seit einem halben Jahr in Betrieb ist.
|
||||
|
||||
### 2.1 AI beim Entwerfen der Datenstruktur helfen lassen
|
||||
|
||||
Wir müssen nicht selbst überlegen, wie jedes Feld heißen soll (z.B. `name` oder `title`). Das können wir komplett AI überlassen.
|
||||
|
||||
Sie müssen AI nur Ihr **Geschäftsszenario** mitteilen:
|
||||
|
||||
> **Prompt-Beispiel:**
|
||||
> "Ich arbeite an einem Prototyp für einen **Douyin E-Commerce Material-Workspace**.
|
||||
> Bitte entwerfe eine JSON-Datenstruktur, die eine 'Produktaufgabe' beschreibt.
|
||||
> Diese Aufgabe sollte enthalten: Produktbasisinformationen (Name, Kategorie), Eingabematerialien (Bild-Links) sowie AI-generierte Ergebnisse (Titel, Copywriting, Poster-Bild).
|
||||
> Bitte gib mir direkt ein JSON-Beispiel."
|
||||
|
||||
AI wird basierend auf Ihrer Beschreibung automatisch Felder wie `productName`, `generatedContent` usw. vorschlagen.
|
||||
|
||||
### 2.2 AI "realistische" Daten in Batch produzieren lassen
|
||||
|
||||
Nachdem die Datenstruktur steht, ist der nächste Schritt, AI beim "Ausfüllen" zu helfen und einen Satz realistisch aussehender Daten zu generieren.
|
||||
|
||||
**Prompt-Techniken:**
|
||||
Sie können AI nicht einfach sagen "Generiere Daten für mich". Sie müssen es wie einem Praktikanten eine Aufgabe stellen und ihm **Geschäftskontext** und **Inhaltsanforderungen** mitteilen:
|
||||
|
||||
- **Geschäftskontext**: Erklären Sie AI, dass wir im "Douyin E-Commerce" tätig sind, also sollten Produkttitel aufmerksamkeitsstark sein (z.B. "Figur-schmeichelndes Wunder", "Studierenden-Must-have") und das Copywriting umgangssprachlich sein.
|
||||
- **Bildanforderungen**: Damit der Prototyp gut aussieht, sollten die Bilder keine schwarz-weißen Platzhalter sein, sondern am besten zufällige bunte Landschafts- oder Produktfotos.
|
||||
|
||||
> **Prompt-Beispiel:**
|
||||
> "Bitte generiere basierend auf der soeben erstellten Struktur 10 realistische Simulationsdaten.
|
||||
> (Hinweis: Nicht zwingend im JSON-Format. Wenn Sie Frontend schreiben, können Sie direkt JavaScript-Arrays generieren; bei Python Listen.)
|
||||
>
|
||||
> **Geschäftsszenario-Anforderungen**:
|
||||
>
|
||||
> 1. Angenommen, dies ist ein Kaufhaus, das Produkte in den Kategorien 'Damenmode', 'Elektronik' und 'Kosmetik' umfasst.
|
||||
> 2. **Generierte Titel und Copywriting sollten sehr 'Douyin-Stil' sein**: Titel sollten Emojis enthalten, Copywriting im umgangssprachlichen 'Unglaublich!'-Stil verfasst sein.
|
||||
> 3. **Bildfeld**: Bitte einheitlich das Format `https://picsum.photos/seed/{random_id}/300/400` verwenden, um sicherzustellen, dass jedes Bild anders ist."
|
||||
|
||||
**Generiertes Mock-Data-Beispiel:**
|
||||
|
||||
```javascript
|
||||
export const mockProductTasks = [
|
||||
{
|
||||
id: 'task_001',
|
||||
name: 'Sommerkleid im französischen Vintage-Blumenstil',
|
||||
status: 'completed',
|
||||
input: {
|
||||
category: 'Damenmode',
|
||||
features: ['Taillenbetonung', 'Figurschmeichelnd', 'Elegant'],
|
||||
originalImage: 'https://picsum.photos/seed/dress_input/300/400'
|
||||
},
|
||||
output: {
|
||||
generatedTitle: 'Wer es trägt sieht toll aus! Dieses französische Blumenkleid ist wirklich unglaublich',
|
||||
generatedCopy:
|
||||
'Mädels! Dieses Kleid ist wirklich figurschmeichelnd! Die taillenbetonende Design ist genial, sofort hat man eine Taille. Der Stoff ist sehr atmungsaktiv, im Sommer trägt man es gar nicht schwül. Perfekt für Dates und Shopping! ',
|
||||
generatedPosterImage: 'https://picsum.photos/seed/dress_output/300/400'
|
||||
},
|
||||
createdAt: '2026-01-20T10:00:00Z'
|
||||
},
|
||||
{
|
||||
id: 'task_002',
|
||||
name: 'Super Noise-Cancelling Bluetooth Kopfhörer Pro',
|
||||
status: 'completed',
|
||||
input: {
|
||||
category: 'Elektronik',
|
||||
features: ['Noise-Cancelling', 'Ultra-Lange Akkulaufzeit', 'Niedrige Latenz'],
|
||||
originalImage: 'https://picsum.photos/seed/tech_input/300/400'
|
||||
},
|
||||
output: {
|
||||
generatedTitle: ' Endlich gefunden! Die Noise-Cancelling dieser Kopfhörer ist unglaublich stark!',
|
||||
generatedCopy:
|
||||
'Aufsetzen und die Welt wird sofort leise. Unglaubliche Klangqualität, Musik hören wie live. Die Akkulaufzeit ist auch beeindruckend, einmal aufladen reicht für eine Woche! Ein Must-have für Studierende!',
|
||||
generatedPosterImage: 'https://picsum.photos/seed/tech_output/300/400'
|
||||
},
|
||||
createdAt: '2026-01-21T14:30:00Z'
|
||||
}
|
||||
// ... weitere Daten
|
||||
]
|
||||
```
|
||||
|
||||
### 2.3 (Fortgeschritten) Mit LocalStorage "Pseudo-CRUD" implementieren
|
||||
|
||||
Wenn Sie möchten, dass die generierten "Simulationsdaten" nicht nur angezeigt, sondern auch gelöscht, geändert und sogar nach dem Aktualisieren der Seite noch vorhanden sind, können Sie `LocalStorage` verwenden.
|
||||
|
||||
> **Prompt-Beispiel:**
|
||||
> "Bitte implementiere eine Datenspeicherfunktion.
|
||||
>
|
||||
> 1. Priorität: Zunächst Daten aus `localStorage` lesen.
|
||||
> 2. Wenn `localStorage` leer ist, mit den generierten Mock-Daten initialisieren und in `localStorage` speichern.
|
||||
> 3. Schreibe zusätzlich `addProductTask` und `deleteProductTask` Funktionen, die bei jeder Operation `localStorage` synchron aktualisieren."
|
||||
|
||||
Durch diesen Schritt erhält Ihr Prototyp "Gedächtnis" und die Nutzererfahrung ist nahezu identisch mit einem echten Produkt.
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="2" :items="[
|
||||
{ title: 'Kette vervollständigen', description: 'Von Einzelfunktion zum vollständigen Kreislauf' },
|
||||
{ title: 'Seele einhauchen', description: 'Echte Geschäftsdaten simulieren' },
|
||||
{ title: 'Feedback-Iteration', description: 'Basierend auf echtem Feedback verbessern' },
|
||||
{ title: 'Abschlussprojekt', description: 'Ihre Abschlussarbeit' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
## 3. Feedback sammeln und schnell iterieren
|
||||
|
||||
Man kann kein gutes Produkt hinter verschlossenen Türen entwickeln. Jetzt hat Ihr Prototyp "Kernfunktionen" + "vollständige Kette" + "Demo-Daten" und es ist Zeit, ihn anderen zu zeigen.
|
||||
|
||||
### 3.1 Wen zum Testen einladen? Wie testen?
|
||||
|
||||
- **Freunde/Kollegen finden**: Sie müssen nicht technikversiert sein, sie müssen es nur einmal ausprobieren.
|
||||
- **Beobachten statt leiten**: Nicht "Klick hier" sagen, sondern sehen, wohin sie klicken würden. Wenn sie den Button nicht finden, liegt ein Designproblem vor.
|
||||
- **"Wizard of Oz"-Methode**: Wenn Ihre AI noch nicht angeschlossen ist, können Sie manuell im Hintergrund (oder in der Datenbank) Daten ändern, um die AI-Rückgabe zu simulieren und zunächst zu validieren, ob Nutzer diese Funktion benötigen.
|
||||
|
||||
### 3.2 Mit Bugs und Kritik umgehen
|
||||
|
||||
- **Layout-Probleme**: Auf verschiedenen Bildschirmgrößen kann es chaotisch aussehen.
|
||||
- **Aktion**: Screenshot an AI IDE senden → "Bei dieser Bildschirmbreite ist es verschoben, bitte reparieren."
|
||||
- **Ungeschickte Bedienung**: "Dieser Prozess ist zu umständlich".
|
||||
- **Aktion**: Den Vorschlag an AI IDE weitergeben → "Nutzer finden Hochladen und dann Generieren zu langsam, kann man es zu einem Klick zusammenfassen?"
|
||||
- **Neue Anforderungen**: "Wenn es diese Funktion gäbe, wäre es toll."
|
||||
- **Aktion**: Prüfen, ob es zum Kern gehört; wenn ja, AI eine vereinfachte Version schnell implementieren lassen.
|
||||
|
||||
**Merken: In dieser Phase ist AI Ihr bester Modifikationsassistent. Sie sind nur für die Problemerkennung verantwortlich, die Code-Änderung übernimmt AI.**
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="3" :items="[
|
||||
{ title: 'Kette vervollständigen', description: 'Von Einzelfunktion zum vollständigen Kreislauf' },
|
||||
{ title: 'Seele einhauchen', description: 'Echte Geschäftsdaten simulieren' },
|
||||
{ title: 'Feedback-Iteration', description: 'Basierend auf echtem Feedback verbessern' },
|
||||
{ title: 'Abschlussprojekt', description: 'Ihre Abschlussarbeit' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
## 4. Abschlussprojekt: Vervollständigen Sie Ihre "Abschlussarbeit"
|
||||
|
||||
Herzlichen Glückwunsch! Sie haben den gesamten Prozess von "Anforderungen" über "Prototyp" bis "AI-Integration" durchlaufen. Jetzt ist es Zeit, Ihr finales Ergebnis zu präsentieren.
|
||||
|
||||
**Dieses Abschlussprojekt ist nicht mehr auf den "E-Commerce Material-Workspace" beschränkt.** Sie müssen basierend auf Ihren Interessen oder Branchenhintergrund einen einzigartigen AI-Produktprototyp entwickeln.
|
||||
|
||||
### Themenauswahl und Anforderungen
|
||||
|
||||
Sie müssen das Szenario wählen, das Ihnen am ehesten entspricht, aus der **[Mehrbranchen-Szenarioreferenz](../appendix-industry-scenarios/index.md)**, oder ein völlig neues Szenario basierend auf Ihren eigenen Ideen entwerfen.
|
||||
|
||||
**Das Projekt muss alle Inhalte aus den vorherigen Lektionen integriert nutzen:**
|
||||
|
||||
1. **Prototyp-Erstellung**: Frontend-Technologie verwenden, um eine ästhetische, benutzerfreundliche Oberfläche zu erstellen.
|
||||
2. **Anforderungskontrolle**: Nicht alles auf einmal, aber die Kernfunktionslogik muss geschlossen sein.
|
||||
3. **API-Integration**: Echte AI-Modelle (LLM/VLM etc.) integrieren, um der Anwendung echte Intelligenz zu verleihen.
|
||||
4. **Eine spielbare Anwendung erstellen**: Nicht nur statische Seiten, sondern eine dynamische Anwendung mit Datenfluss und Interaktions-Feedback.
|
||||
|
||||
### Projekt-Outputs
|
||||
|
||||
Am Ende müssen Sie Folgendes einreichen:
|
||||
|
||||
1. **Eine vollständige Prototyp-Anwendung**: Online bereitgestellt oder lokal ausführbar, mit vollständiger Nutzungskette.
|
||||
2. **Ein 30-Sekunden-Demo-Video**: Ein Video aufnehmen, das kurz Ihr Anwendungsszenario vorstellt und die Kernfunktionen in Aktion zeigt.
|
||||
|
||||
<el-card shadow="hover" style="margin: 20px 0; border-radius: 12px;">
|
||||
<template #header>
|
||||
<div style="font-weight: bold; font-size: 16px;">Abschlussherausforderung-Checkliste</div>
|
||||
</template>
|
||||
|
||||
<p>
|
||||
Dies ist die letzte Herausforderung von Stage 1. Bitte überprüfen Sie Ihr Werk anhand der folgenden Checkliste:
|
||||
</p>
|
||||
|
||||
<div style="font-weight: bold; margin-bottom: 10px;">Kernfunktionen-Selbstprüfung</div>
|
||||
<ul style="list-style-type: none; padding-left: 0;">
|
||||
<li><label><input type="checkbox" disabled /> <strong>Klares Szenario</strong>: Ein konkretes Branchen- oder Anwendungsszenario ausgewählt</label></li>
|
||||
<li><label><input type="checkbox" disabled /> <strong>Geschlossene Logik</strong>: Kernprozess funktioniert, nicht nur der Happy Path</label></li>
|
||||
<li><label><input type="checkbox" disabled /> <strong>AI-getrieben</strong>: Echte LLM-API aufgerufen, keine vordefinierten Antworten</label></li>
|
||||
<li><label><input type="checkbox" disabled /> <strong>Vollständige Erfahrung</strong>: Loading, Fehlerbehandlung und Simulationsdaten enthalten</label></li>
|
||||
</ul>
|
||||
|
||||
<div style="font-weight: bold; margin: 20px 0 10px;">Liefergegenstände</div>
|
||||
<ul style="list-style-type: none; padding-left: 0;">
|
||||
<li><label><input type="checkbox" disabled /> <strong>Prototyp-Anwendung</strong>: Code ist fertiggestellt und ausführbar</label></li>
|
||||
<li><label><input type="checkbox" disabled /> <strong>Demo-Video</strong>: Etwa 30 Sekunden, zeigt klar die Kern-Highlights</label></li>
|
||||
</ul>
|
||||
</el-card>
|
||||
|
||||
## Nächste Schritte
|
||||
|
||||
Nach Abschluss des Abschlussprojekts verfügen Sie über die Fähigkeit, "unabhängig AI-Anwendungsprototypen zu entwickeln".
|
||||
In Stage 2 werden wir uns mit komplexerer Full-Stack-Entwicklung befassen und lernen, wie man diesen Prototypen in eine echte, online-fähige, datenbankgestützte Anwendung mit Benutzersystem verwandelt.
|
||||
|
||||
Wir sehen uns im nächsten Stage!
|
||||
|
||||
<RelatedArticlesSection
|
||||
title="Weiter fortgeschritten"
|
||||
description="Herzlichen Glückwunsch zum Abschluss von Stage 1. Diese Kapitel helfen Ihnen, in die professionelle Entwicklung überzugehen."
|
||||
:items="relatedArticles"
|
||||
/>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,812 @@
|
||||
---
|
||||
title: 'AI-Fähigkeiten in den Prototyp integrieren - Text- und Bild-API anbinden'
|
||||
description: 'Echte AI-Fähigkeiten in einen bestehenden Web-Prototyp integrieren: API-Kernkonzepte verstehen, API Key und offizielle Beispiele finden; DeepSeek Textmodell und verschiedene Bildgenerierungsdienste (SiliconFlow Qwen-Image, Recraft, Seedream) in der Praxis integrieren und gängige Modellauswahl-Methoden beherrschen.'
|
||||
---
|
||||
|
||||
<script setup>
|
||||
import { relatedArticlesMap } from '@theme/data/relatedArticles'
|
||||
|
||||
const duration = 'Etwa <strong>1 Tag</strong>'
|
||||
const relatedArticles =
|
||||
relatedArticlesMap['de-de/stage-1/integrating-ai-capabilities'] ?? []
|
||||
</script>
|
||||
|
||||
# Anfänger IV: AI-Fähigkeiten in den Prototyp integrieren
|
||||
|
||||
## Kapitelübersicht
|
||||
|
||||
<ChapterIntroduction :duration="duration" :tags="['API', 'Textmodell', 'Text-zu-Bild', 'Prototyp-Integration']" coreOutput="Prototyp mit 1 Textmodell + 1 Bildmodell (optional) verbunden" expectedOutput="AI-Prototyp mit realer API-Anbindung">
|
||||
|
||||
In den vorherigen Kapiteln haben wir den vollständigen Prozess von der <strong>Ideenfindung</strong> bis zum <strong>Produktprototyp</strong> durchlaufen. Aber der aktuelle Prototyp ist nur eine "Hülle" – ein Klick auf den Button generiert keinen echten Inhalt, die Daten auf der Seite sind hartcodiert.
|
||||
|
||||
Erinnern Sie sich, was wir im ersten Kapitel betont haben? <strong>Wir wollen "Produkte, für die jemand zu zahlen bereit ist" erstellen, nicht "gut aussehende Prototypen".</strong> Der echte Wert entsteht dadurch, dass das Produkt <strong>echte Probleme löst</strong>. Um das zu erreichen, muss der Prototyp <strong>wirklich funktionieren</strong>.
|
||||
|
||||
Dieses Kapitel bringt den Prototyp zum <strong>"Leben"</strong>: Wir binden <strong>echte AI-Fähigkeiten</strong> ein, vom Erhalt des API Keys über das Lesen der offiziellen Dokumentation bis zur Integration durch AI IDE. Am Beispiel des <strong>DeepSeek Textmodells</strong> lernen Sie, wie Sie die Anwendung <strong>echt große Modelle zur Inhaltsgenerierung aufrufen</strong> lassen; bei Interesse können Sie optional <strong>auch die Bildgenerierung integrieren</strong>.
|
||||
|
||||
Nach diesem Kapitel ist Ihr Prototyp <strong>nicht mehr nur eine statische Demo</strong>, sondern eine <strong>Anwendung, die echte AI-Fähigkeiten aufrufen und echte Probleme lösen kann</strong>.
|
||||
|
||||
</ChapterIntroduction>
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="0" :items="[
|
||||
{ title: 'API-Grundlagen', description: 'Kernkonzepte und Sicherheitsrichtlinien verstehen' },
|
||||
{ title: 'Text integrieren', description: 'DeepSeek Textgenerierung in der Praxis' },
|
||||
{ title: 'Bilder integrieren', description: 'VLM Bildverstehen und -generierung' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
# 1. API-Grundkonzepte
|
||||
|
||||
Wir erwähnten, dass unser Ziel ist, "AI-Fähigkeiten zu integrieren" und den Prototypen von einer statischen Demo zu einem Tool zu machen, das echte AI-Dienste aufrufen kann. Der Schlüssel dafür liegt im Verständnis und der Nutzung von APIs (Application Programming Interfaces).
|
||||
|
||||
API ist ein wichtiges Abstraktionskonzept im Computerbereich. Man kann es sich einfach vorstellen als: **Sie senden "eine Frage" im gewünschten Format und erhalten "ein Ergebnis" im selben Format zurück.**
|
||||
|
||||
- **Was Sie senden**: Enthält normalerweise einen "Schlüssel (API Key)" und "was Sie generieren möchten"
|
||||
- **Was Sie zurückbekommen**: Bei Erfolg das Ergebnis; bei Fehler die Ursache (z.B. "Schlüssel falsch", "Guthaben unzureichend", "Parameter fehlerhaft")
|
||||
|
||||
Konkret müssen Sie folgende Kernelemente beherrschen:
|
||||
|
||||
1. **API Key**: Ihr "Ausweis" und zugleich Ihr "Geldschlüssel". Wer ihn hat, kann in Ihrem Namen API-Aufrufe tätigen und Kosten verursachen.
|
||||
2. **Endpoint (Schnittstellenpfad)**: Der spezifische Pfad der API-Anfrage, der dem Server sagt, welche Funktion Sie nutzen möchten. Die vollständige Anfrage-URL besteht normalerweise aus "Basis-URL + Endpoint-Pfad". Zum Beispiel:
|
||||
- Textgenerierung: Basis-URL (`https://api.service.com`) + Endpoint (`/v1/chat/completions`) = Vollständige URL `https://api.service.com/v1/chat/completions`
|
||||
- Bildgenerierung: Basis-URL (`https://api.service.com`) + Endpoint (`/v1/images/generations`) = Vollständige URL `https://api.service.com/v1/images/generations`
|
||||
3. **Aufruf/Anfrage**: Der Prozess, eine Aufgabe an den AI-Dienst zu senden und Ergebnisse zu erhalten
|
||||
4. **Anfrage-Inhalt**: Was Sie an AI senden, z.B. das Thema des Artikels, den AI schreiben soll, oder die Beschreibung des zu generierenden Bildes
|
||||
5. **Antwort-Ergebnis**: Was AI nach der Verarbeitung zurückgibt, z.B. den generierten Artikel oder das Bild
|
||||
6. **Fehlerbehandlung**: Wissen, wie man Probleme diagnostiziert, wenn etwas schiefgeht (falscher API Key, zu häufige Anfragen etc.)
|
||||
|
||||
::: info Was ist eine API?
|
||||
Eine ausführlichere Erklärung finden Sie im Anhang: [API-Einführung](/de-de/appendix/4-server-and-backend/api-intro).
|
||||
|
||||
::: warning API-Sicherheitshinweise
|
||||
API Key ist Ihr "Ausweis" für AI-Dienst-Anfragen – eine Passwort-Zeichenkette zur Authentifizierung und Abrechnung.
|
||||
|
||||
Da der API Key direkt mit Ihrem Konto und den Kosten verbunden ist, beachten Sie unbedingt:
|
||||
|
||||
- **Niemals** in Gruppenchats teilen, als Screenshot online stellen oder in öffentlichen Foren veröffentlichen
|
||||
- **Nicht** im Code hartcodieren und in ein Git-Repository laden (besonders öffentliche Repos)
|
||||
- Wenn Sie vermuten, dass der Key kompromittiert wurde: **Sofort einen neuen Key erstellen**
|
||||
|
||||
Wir werden in den folgenden Inhalten den API KEY **direkt in die AI IDE einfügen**. **In echten Projekten nicht so vorgehen!!** Da es sich um eine Übung handelt, ist es in Ordnung. (Wenn Sie fortgeschrittener sind, können Sie AI eine Konfigurationsdatei generieren lassen und den API Key dort eintragen.)
|
||||
:::
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="1" :items="[
|
||||
{ title: 'API-Grundlagen', description: 'Kernkonzepte und Sicherheitsrichtlinien verstehen' },
|
||||
{ title: 'Text integrieren', description: 'DeepSeek Textgenerierung in der Praxis' },
|
||||
{ title: 'Bilder integrieren', description: 'VLM Bildverstehen und -generierung' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
# 2. Textgenerierungs-API integrieren: DeepSeek
|
||||
|
||||
Obwohl APIs diese technischen Konzepte beinhalten, kann die praktische Umsetzung in der Prototyp-Phase sehr einfach und effizient sein. Das Kernprinzip:
|
||||
|
||||
> **Offizielles Beispiel finden, API Key besorgen, AI IDE an den Button anbinden lassen.**
|
||||
|
||||
Mit diesem Verständnis werden Sie feststellen: Ob Text- oder Bildmodell – der grundlegende Ablauf ist derselbe: Wenn der Nutzer auf einen Button klickt, bereitet das Frontend die Eingabe vor und sendet die Anfrage; die Schnittstelle gibt das Ergebnis zurück, das dann auf der Seite angezeigt wird. Als Nächstes werden wir dies durch praktische Anwendung überprüfen.
|
||||
|
||||
In "1.2 Prototyp erstellen" haben Sie bereits einen interaktiven Prototypen erstellt. Als Nächstes verwandeln wir die "AI-ähnlichen Funktionen" im Prototyp in echte Fähigkeiten: **Wenn der Nutzer auf den Button klickt, sendet der Prototyp eine Anfrage an einen externen AI-Dienst und zeigt den zurückgegebenen Text an.**
|
||||
|
||||
::: info Prinzip-Erweiterung
|
||||
Wenn Sie mehr über die Prinzipien erfahren möchten, siehe Anhang: [Große Sprachmodelle (LLM) Einführung](/de-de/appendix/8-artificial-intelligence/llm-principles).
|
||||
::: details Mehr erfahren: Was ist DeepSeek?
|
||||
|
||||
**Hangzhou DeepSeek Artificial Intelligence Basic Technology Research Co., Ltd.**, unter dem Handelsnamen DeepSeek, ist ein **chinesisches AI-Unternehmen, das große Sprachmodelle (LLMs) entwickelt**. DeepSeek hat seinen Hauptsitz in Hangzhou, Provinz Zhejiang, und wird von dem chinesischen Hedgefonds High-Flyer besessen und finanziert. DeepSeek wurde im Juli 2023 von Liang Wenfeng, Mitbegründer von High-Flyer, gegründet, der auch CEO beider Unternehmen ist. Das Unternehmen brachte im Januar 2025 den gleichnamigen Chatbot und das DeepSeek-R1-Modell auf den Markt.
|
||||
|
||||
Schauen wir uns an, wie DeepSeek im GPQA-Benchmark-Ranking im Vergleich zu anderen Top-Modellen abschneidet. Bemerkenswert: DeepSeek ist ein Open-Source-Modell (jeder kann das Modell aus dem Internet herunterladen), während andere gängige Modelle wie Grok, Google Gemini und ChatGPT proprietär sind. Wie wir sehen, hat DeepSeek die Spitze bereits weitgehend erreicht.
|
||||
|
||||
|
||||
|
||||
GPQA steht für "Graduate-Level Google-Proof Q&A Benchmark", ein Benchmark für wissenschaftliche Frage-Antwort-Aufgaben auf Graduiertenniveau. Hier ist eine detaillierte Einführung.
|
||||
|
||||
GPQA enthält 448 Multiple-Choice-Fragen aus Teilbereichen der Biologie, Physik und Chemie, wie Quantenmechanik, organische Chemie, Molekularbiologie usw. Diese Fragen wurden von 61 Experten mit Doktortitel oder in Doktorandenausbildung verfasst und durchliefen einen strengen Verifizierungsprozess.
|
||||
:::
|
||||
|
||||
Folgen Sie diesen 3 Schritten, um die schnelle Integration der LLM-Generierungs-API zu realisieren:
|
||||
|
||||
1. **Einen API Key auf der DeepSeek-Plattform erstellen**
|
||||
2. **Das Textgenerierungs-Beispiel in der DeepSeek-Dokumentation finden** (oft gibt es fertigen Code zum direkten Kopieren)
|
||||
3. **AI IDE öffnen, API Key + offizielles Beispiel einfügen** und AI sagen, welche Funktion implementiert werden soll:
|
||||
> Hilf mir, die API dieses großen Modells zu integrieren, unterstütze die Copywriting-Generierung dieser Anwendung
|
||||
|
||||
Als Nächstes demonstrieren wir den Ablauf. Sie können den gesamten Prozess einmal mitschreiben. Registrieren Sie zunächst ein [DeepSeek](https://platform.deepseek.com/usage)-Konto, erstellen Sie einen API Key und laden Sie ein kleines Guthaben auf.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Klicken Sie auf "API KEYS" und finden Sie unten auf dem Bildschirm "create new API key". Sie erhalten schließlich einen API Key wie sk-8573341c39fc44315aadc071c53rh7d2.
|
||||
|
||||
|
||||
|
||||
Sobald Sie den Schlüssel haben, verfügen Sie über die Berechtigung, das Modell aufzurufen.
|
||||
|
||||
Nun können Sie die [API](https://api-docs.deepseek.com/)-Dokumentation lesen, die normalerweise curl- oder Python-Aufrufbeispiele bietet.
|
||||
|
||||
|
||||
|
||||
Nachdem Sie das Beispiel gefunden haben, können Sie den gesamten Inhalt der Dokumentation zusammen mit dem Schlüssel in den AI IDE-Dialog kopieren und das LLM in den bereits entwickelten Prototypen integrieren lassen.
|
||||
|
||||
|
||||
|
||||
Verwenden Sie folgenden Prompt als Referenz:
|
||||
|
||||
```
|
||||
Beziehe dich auf diese Aufrufmethode und hilf mir, die Copywriting-Generierung zu unterstützen.
|
||||
Basierend auf Produktinformationen soll nach Klick Douyin E-Commerce-Copywriting in verschiedenen Stilen generiert werden.
|
||||
|
||||
Referenzmaterialien:
|
||||
api key: sk-8573341c39aefa1efe
|
||||
api Anfrage-Referenz:
|
||||
curl \
|
||||
-H "Content-Type: application/json" \
|
||||
-H "Authorization: Bearer ${DEEPSEEK_API_KEY}" \
|
||||
-d '{
|
||||
"model": "deepseek-chat",
|
||||
"messages": [
|
||||
{"role": "system", "content": "You are a helpful assistant."},
|
||||
{"role": "user", "content": "Hello!"}
|
||||
],
|
||||
"stream": false
|
||||
}'
|
||||
```
|
||||
|
||||
Nach einer Weile der AI-Codegenerierung erhalten Sie leicht den entsprechenden Copywriting-Generierungs-Button zum Testen. Wenn Sie den Einstieg nicht finden, können Sie AI IDE nach der relevanten Seite fragen. Wenn Sie wirklich nicht weiterkommen, können Sie AI IDE direkt basierend auf Ihren Ideen umgestalten lassen, um das endgültige Copywriting-Generierungsergebnis zu erhalten.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Sie fragen sich vielleicht: Woher weiß ich, ob das große Modell wirklich aufgerufen wurde und nicht nur eine feste Antwort eingebaut ist? Sie können benutzerdefiniertes Copywriting eingeben und das große Modell bitten, basierend auf Ihrer angegebenen benutzerdefinierten Analyse entsprechendes Copywriting zu generieren.
|
||||
|
||||
Wenn die Ergebnisse bei jedem Aufruf unterschiedlich, aber logisch sind, können Sie zuversichtlich annehmen, dass die API erfolgreich aufgerufen wird. Sie können auch die [API-Nutzungsverwaltungsplattform](https://platform.deepseek.com/usage) prüfen, ob der Aufruf erfolgreich war (es kann einige Minuten dauern, bis die Daten angezeigt werden).
|
||||
|
||||
## Weitere Textgenerierungs-Modelle
|
||||
|
||||
Neben DeepSeek können Sie auch andere große Sprachmodelle ausprobieren. Da die meisten Modelle eine **OpenAI-kompatible Schnittstelle** bieten, ist der Wechsel sehr einfach – nur API Key, Basis-URL und Modellname müssen geändert werden.
|
||||
|
||||
### MiniMax-Integration
|
||||
|
||||
::: details Mehr erfahren: Was ist MiniMax?
|
||||
|
||||
**MiniMax** ist ein chinesisches AI-Unternehmen, das an der Entwicklung allgemeiner KI-Technologie forscht. MiniMax hat die selbstentwickelte MiniMax-M2.7 LLM-Serie auf den Markt gebracht, die in mehreren Benchmarks hervorragende Ergebnisse erzielt und ein exzellentes Preis-Leistungs-Verhältnis bietet.
|
||||
|
||||
**Hauptmerkmale der MiniMax-M2.7-Serie:**
|
||||
|
||||
- **Ultra-langer Kontext**: Unterstützt ein Kontextfenster von 204.800 Tokens, ideal für lange Dokumente und Multi-Runden-Dialoge
|
||||
- **Hervorragendes Preis-Leistungs-Verhältnis**: Sehr wettbewerbsfähige Preise
|
||||
- **OpenAI-kompatible Schnittstelle**: Direkt mit OpenAI SDK aufrufbar, ohne neues API-Format lernen zu müssen
|
||||
- **Zwei verfügbare Modelle**:
|
||||
- `MiniMax-M2.7`: Flaggschiff-Modell für komplexe Aufgaben
|
||||
- `MiniMax-M2.7-highspeed`: Hochgeschwindigkeitsversion mit gleicher Leistung aber schneller
|
||||
:::
|
||||
|
||||
Die Integration erfolgt wie bei DeepSeek in drei Schritten:
|
||||
|
||||
1. Auf der [MiniMax Open Platform](https://platform.minimax.io/) registrieren und API Key erstellen
|
||||
2. Aufrufbeispiel in der MiniMax-Dokumentation finden
|
||||
3. API Key + Beispiel in die AI IDE einfügen
|
||||
|
||||
Da MiniMax eine OpenAI-kompatible Schnittstelle bietet, können Sie direkt das folgende curl-Beispiel mit Ihrem API Key kopieren und an die AI IDE zur Integration senden:
|
||||
|
||||
```bash
|
||||
curl https://api.minimax.io/v1/chat/completions \
|
||||
-H "Content-Type: application/json" \
|
||||
-H "Authorization: Bearer ${MINIMAX_API_KEY}" \
|
||||
-d '{
|
||||
"model": "MiniMax-M2.7",
|
||||
"messages": [
|
||||
{"role": "system", "content": "You are a helpful assistant."},
|
||||
{"role": "user", "content": "Hello!"}
|
||||
],
|
||||
"stream": false
|
||||
}'
|
||||
```
|
||||
|
||||
::: tip Hinweis
|
||||
MiniMax API-Format ist nahezu identisch mit DeepSeek (beide verwenden das OpenAI-kompatible Format). Wenn Sie DeepSeek bereits erfolgreich integriert haben, müssen Sie nur drei Dinge ändern:
|
||||
1. **Basis-URL**: Ändern zu `https://api.minimax.io/v1`
|
||||
2. **API Key**: MiniMax API Key verwenden
|
||||
3. **Modellname**: Ändern zu `MiniMax-M2.7` oder `MiniMax-M2.7-highspeed`
|
||||
|
||||
Weitere Informationen finden Sie in der [MiniMax OpenAI-kompatiblen Schnittstellendokumentation](https://platform.minimax.io/docs/api-reference/text-openai-api).
|
||||
:::
|
||||
|
||||
# 3. Bild-zu-Text-API integrieren: Qwen3 VL
|
||||
|
||||
::: info Prinzip-Erweiterung
|
||||
Wenn Sie mehr über die Prinzipien erfahren möchten, siehe Anhang: [Visuelle Sprachmodelle (VLM) Einführung](/de-de/appendix/8-artificial-intelligence/multimodal-models).
|
||||
|
||||
::: details Mehr erfahren: Was ist Qwen3 VL?
|
||||
|
||||
**Qwen3 VL** ist die neueste Version der multimodalen visuellen Sprachmodellserie, die vom Qwen-Team von Alibaba Cloud entwickelt wurde. VL steht für "Vision-Language", also visuelles Sprachmodell. Es kann Bildinhalte verstehen und basierend auf Bildern Textbeschreibungen generieren, Fragen zu Bildern beantworten und Bildinformationen extrahieren.
|
||||
|
||||
|
||||
|
||||
|
||||
**Hauptfähigkeiten von Qwen3 VL:**
|
||||
|
||||
- **Bildverstehen**: Kann Objekte, Szenen, Personen und Text in Bildern erkennen
|
||||
- **Visuelle Frage-Antwort**: Basierend auf Nutzerfragen präzise Antworten zu Bildern geben
|
||||
- **Bildbeschreibung**: Detaillierte oder kompakte Textbeschreibungen von Bildern generieren
|
||||
- **Multi-Bild-Verständnis**: Unterstützt die gleichzeitige Verarbeitung mehrerer Bilder für Vergleichsanalysen
|
||||
- **Textextraktion**: Textinhalte aus Bildern extrahieren (OCR-Fähigkeit)
|
||||
|
||||
**Warum Qwen3 VL wählen?**
|
||||
|
||||
Im Vergleich zur vorherigen Generation hat Qwen3 VL die Genauigkeit des Bildverstehens deutlich verbessert und unterstützt längere, komplexere Bildanalyseaufgaben. Es zeichnet sich durch hervorragendes Chinesisch-Verständnis aus, und die API-Aufrufkosten sind relativ niedrig mit einem guten Preis-Leistungs-Verhältnis. Außerdem ist das Kontextfenster größer und kann komplexere visuelle Schlussfolgerungsaufgaben bewältigen.
|
||||
|
||||
**Typische Anwendungsszenarien:**
|
||||
|
||||
- E-Commerce: Automatische Generierung von Titeln, Beschreibungen und Selling-Points für Produktbilder
|
||||
- Content-Erstellung: Automatische Copywriting- oder Bildvorschläge basierend auf Materialbildern
|
||||
- Büro: Bildinhalts-Extraktion, automatische Berichtserkennung
|
||||
- Bildung: Automatische Analyse von Bildaufgaben, Extraktion von Wissenspunkten
|
||||
|
||||
:::
|
||||
|
||||
Im vorherigen Abschnitt haben wir erklärt, wie man eine Textgenerierungs-API integriert. Für unsere Anwendungsszenarien stellen wir jedoch ein Problem fest: Wir laden ein Bild hoch, und wenn wir nur ein großes Sprachmodell verwenden, kann es den Bildinhalt nicht gut verstehen, was zu abweichenden Ergebnissen führen kann.
|
||||
|
||||
Wir möchten ein Modell, das uns hilft, ein Bild in eine Textbeschreibung umzuwandeln. Dafür benötigen wir ein visuelles Sprachmodell (VLM). In unserem Beispiel werden wir das visuelle Sprachmodell verwenden, um Selling-Point-Beschreibungen für Produkte zu generieren und die Nutzererfahrung zu verbessern.
|
||||
|
||||
Der Einfachheit halber verwenden wir die API-Schnittstelle der [SiliconFlow Cloud-Plattform](https://cloud.siliconflow.cn/me) für die Integration der Bild-zu-Text-API.
|
||||
|
||||
::: details Mehr erfahren: Was ist SiliconFlow?
|
||||
**SiliconFlow** ist eine bekannte inländische AI-Modell-Aggregationsplattform, die API-Schnittstellendienste für verschiedene gängige große Sprachmodelle und visuelle Sprachmodelle anbietet.
|
||||
|
||||
**Plattform-Features:**
|
||||
|
||||
- **Multi-Modell-Unterstützung**: Integriert verschiedene gängige AI-Modelle, einschließlich Open-Source-Modelle wie DeepSeek, Qwen, Llama-Serie usw.
|
||||
- **Technologische Optimierung**: Inferenzoptimierung für Open-Source-Modelle mit API-Diensten für niedrige Latenz und hohe Parallelität
|
||||
- **Schnittstellenkompatibilität**: Bietet eine mit dem OpenAI-Format kompatible API-Schnittstelle für einfache Integration in bestehende Anwendungen
|
||||
- **Nutzungsabhängige Abrechnung**: Unterstützt nutzungsabhängige Abrechnung nach API-Aufrufen
|
||||
|
||||
SiliconFlow ist im Bereich der Inferenzdienste für Open-Source-Großmodelle relativ etabliert und eine der gängigen Optionen für die Nutzung inländischer Open-Source-AI-Modelle.
|
||||
:::
|
||||
|
||||
Auf der Startseite der SiliconFlow-Plattform sehen wir viele verfügbare Modelle. Finden Sie den Filter oben links, klicken Sie, um den Filter zu öffnen, und wählen Sie das Tag "Vision". Wir sehen dann viele Bild-zu-Text-Modelle, wie z.B. Zhipu GLM-4.6V oder Qwen3-VL.
|
||||
|
||||
|
||||
|
||||
Wir können ein beliebiges Modell zum Testen auswählen. Hier verwenden wir `Qwen/Qwen3-VL-8B-Instruct` als Beispiel.
|
||||
|
||||
|
||||
|
||||
Gehen Sie zur [SiliconFlow-Plattform](https://cloud.siliconflow.cn/me/account/ak), klicken Sie unter API-Schlüssel auf "Neuen API-Schlüssel erstellen", um einen neuen API Key zu erstellen.
|
||||
|
||||
Sie können den folgenden Code als Referenzcode verwenden und ihn zusammen mit dem generierten API Key an die AI IDE senden, um die Funktionsintegration durchzuführen.
|
||||
|
||||
::: details Bild-zu-Text-Referenzcode
|
||||
|
||||
```python
|
||||
from openai import OpenAI
|
||||
from typing import Dict, Any, List
|
||||
import base64
|
||||
import os
|
||||
SILICONFLOW_API_KEY: str = ""
|
||||
SILICONFLOW_BASE_URL: str = "https://api.siliconflow.cn/v1/"
|
||||
MODEL_NAME: str = "Qwen/Qwen3-VL-8B-Instruct"
|
||||
|
||||
def encode_image(image_path: str) -> str:
|
||||
with open(image_path, "rb") as image_file:
|
||||
return base64.b64encode(image_file.read()).decode('utf-8')
|
||||
|
||||
def get_vlm_completion(client: OpenAI, messages: List[Dict[str, Any]]) -> str:
|
||||
response = client.chat.completions.create(
|
||||
model=MODEL_NAME,
|
||||
messages=messages,
|
||||
max_tokens=512,
|
||||
temperature=0.7,
|
||||
top_p=0.7,
|
||||
frequency_penalty=0.5,
|
||||
stream=False,
|
||||
n=1
|
||||
)
|
||||
return response.choices[0].message.content
|
||||
|
||||
def caption_image(image_path: str) -> str:
|
||||
base64_image = encode_image(image_path)
|
||||
messages = [
|
||||
{
|
||||
"role": "user",
|
||||
"content": [
|
||||
{
|
||||
"type": "text",
|
||||
"text": "Please describe this image in detail."
|
||||
},
|
||||
{
|
||||
"type": "image_url",
|
||||
"image_url": {
|
||||
"url": f"data:image/jpeg;base64,{base64_image}"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
client = OpenAI(
|
||||
api_key=SILICONFLOW_API_KEY,
|
||||
base_url=SILICONFLOW_BASE_URL
|
||||
)
|
||||
|
||||
return get_vlm_completion(client, messages)
|
||||
|
||||
image_path = "images.jpg"
|
||||
caption = caption_image(image_path)
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
In diesem Szenario lassen wir AI IDE direkt helfen, die Funktion zum automatischen Generieren von E-Commerce-Selling-Point-Texten und Keywords aus hochgeladenen Bildern zu implementieren, wie folgt:
|
||||
|
||||
```
|
||||
Basierend auf der folgenden Bild-zu-Text-API, hilf uns, eine Funktion zu implementieren,
|
||||
die aus hochgeladenen Bildern automatisch E-Commerce-Selling-Point-Texte und Keywords generiert.
|
||||
|
||||
<Code hier ausgelassen, Sie müssen den Schlüssel und den Referenzcode selbst einfügen>
|
||||
```
|
||||
|
||||
Schließlich erhalten wir das Generierungsergebnis:
|
||||
|
||||
|
||||
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="2" :items="[
|
||||
{ title: 'API-Grundlagen', description: 'Kernkonzepte und Sicherheitsrichtlinien verstehen' },
|
||||
{ title: 'Text integrieren', description: 'DeepSeek Textgenerierung in der Praxis' },
|
||||
{ title: 'Bilder integrieren', description: 'VLM Bildverstehen und -generierung' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
# 4. Bildgenerierungs-API integrieren: Seedream
|
||||
|
||||
In den vorherigen Abschnitten haben wir hauptsächlich mit textbezogenen Aufgaben gearbeitet. Als Nächstes werden wir die Integration der Bildgenerierungsfunktion ausprobieren, die die Generierung von Bildern aus Textbeschreibungen oder die Bearbeitung von Bildern unterstützt.
|
||||
|
||||
::: info Prinzip-Erweiterung
|
||||
Wenn Sie mehr über die Prinzipien erfahren möchten, siehe Anhang: [Bildgenerierung Einführung](/de-de/appendix/8-artificial-intelligence/image-generation).
|
||||
|
||||
::: details Mehr erfahren: Was ist [Seedream](https://seed.bytedance.com/en/seedream4_5)?
|
||||
|
||||
|
||||
|
||||
> Vielleicht kennen Sie bereits Nano Banana (von Google entwickelt), aber Sie sollten Seedream nicht verpassen. Seedream 4.5 ist ein neues Bildgenerierungsmodell von ByteDance. Es integriert Bildgenerierung und Bildbearbeitungsfähigkeiten in einer einheitlichen Architektur. Dies ermöglicht die flexible Bearbeitung komplexer multimodaler Aufgaben wie wissensbasierte Generierung, komplexes Schlussfolgern und Referenzkonsistenz. Außerdem ist die Inferenzgeschwindigkeit deutlich schneller als bei der Vorgängerversion, und es kann hochauflösende Bilder mit bis zu 4K-Auflösung generieren.
|
||||
>
|
||||
> 
|
||||
> 
|
||||
|
||||
**Hauptfähigkeiten:**
|
||||
|
||||
- **Text-zu-Bild**: Bilder aus Textbeschreibungen generieren, unterstützt verschiedene Stile (realistisch, Cartoon, Tuschmalerei, Cyberpunk usw.)
|
||||
- **Stiltransfer**: Ein Bild in einen bestimmten Kunststil umwandeln
|
||||
- **Bildvarianten**: Neue Bilder im ähnlichen Stil basierend auf einem Referenzbild generieren
|
||||
- **Auflösungsverbesserung**: Bildklarheit und Details verbessern
|
||||
- **Bildbearbeitung**: Bestehende Bilder durch natürlichsprachliche Anweisungen bearbeiten und verändern
|
||||
|
||||
**Warum Seedream wählen?**
|
||||
|
||||
- **Stabiles Inlandsnetzwerk**: Schnelle Zugriffszeiten im Inland, niedrige Latenz
|
||||
- **Hervorragende Ergebnisse**: Stabile und zuverlässige Leistung in E-Commerce- und Material-Szenarien
|
||||
- **Chinesisch-Optimierung**: Genaueres Verständnis für chinesische Prompts, geeignet für inländische Nutzer
|
||||
- **Hohe Geschwindigkeit**: Hohe Generierungseffizienz, kurze Antwortzeiten
|
||||
- **Stabile Qualität**: Generierung hochauflösender Bilder bis zu 4K
|
||||
|
||||
**Typische Anwendungsszenarien:**
|
||||
|
||||
- E-Commerce: Hauptbilder, Detailseiten-Illustrationen, Werbeplakate generieren
|
||||
- Social Media: Avatare, Memes, Illustrationen generieren
|
||||
- Design: Schnelle Konzeptbilder, Materialbilder, Hintergrundbilder erstellen
|
||||
- Marketing: Werbebilder, Event-Banner, Festtagsplakate erstellen
|
||||
|
||||
**Kombination mit Qwen3 VL:**
|
||||
|
||||
Diese beiden APIs können in Reihe geschaltet werden: Zuerst Qwen3 VL verwenden, um ein Referenzbild zu analysieren und den Bildinhalt zu verstehen; dann Seedream verwenden, um basierend auf den analysierten Prompts des Referenzbildes neue Bilder zu generieren.
|
||||
:::
|
||||
|
||||
Viele "AI-Plakate / AI-Hauptbilder / AI-Charakterbilder", die Sie möglicherweise auf Douyin, Bilibili oder YouTube sehen, nutzen im Wesentlichen die in diesem Abschnitt vorgestellte Technik. Was Sie tun müssen, ist einfach: Die Nutzereingabe zu einem Satz zusammenfassen, die Bild-API anfragen und das zurückgegebene Bild anzeigen. Das hier verwendete Modell wird als Bildgenerierungs-/Bildbearbeitungsmodell bezeichnet.
|
||||
|
||||
Wir werden schrittweise demonstrieren, wie Sie die Seedream API in Ihr Projekt integrieren (mit Unterstützung durch AI IDE).
|
||||
|
||||
Nachdem Sie die [Startseite](https://www.volcengine.com/experience/ark?launch=seedream) aufgerufen haben, klicken Sie auf Anmelden.
|
||||
|
||||
|
||||
|
||||
Nach der Anmeldung finden Sie die Aufladeoption oben rechts auf der Seite.
|
||||
|
||||
|
||||
|
||||
Für die Aufladung ist eine Identitätsverifizierung erforderlich.
|
||||
|
||||
|
||||
|
||||
Nach erfolgreicher Verifizierung können Sie [1 Yuan zum Testen aufladen](https://console.volcengine.com/finance/fund/recharge).
|
||||
|
||||
Kehren Sie zur [ursprünglichen Seite](https://www.volcengine.com/experience/ark?launch=seedream) zurück und klicken Sie auf API-Zugriff.
|
||||
|
||||
|
||||
|
||||
Erstellen Sie zunächst einen API Key und klicken Sie dann auf die Auswahloption.
|
||||
|
||||
|
||||
|
||||
Dies bringt Sie zu Schritt 2. Hier müssen Sie bestätigen, dass der aufgerufene Dienst Seedream 4.5 ist, und das bereitgestellte Aufrufbeispiel kopieren. (Der Screenshot wurde früher erstellt, daher ist die Modellversion noch 4.0.)
|
||||
|
||||
|
||||
|
||||
Nachdem Sie den API Key und das Aufrufbeispiel vorbereitet haben, können Sie diese direkt in die AI IDE einfügen und eine Frontend-Interaktionsdemo generieren lassen oder die Fähigkeit in einen bestehenden Prototypen integrieren. Beachten Sie, dass Sie im Bild auswählen können, ob Sie Text-zu-Bild oder Mehrere-Bilder-zu-einem-Bild verwenden möchten. Sie müssen den Referenzcode entsprechend Ihren aktuellen Anforderungen auswählen.
|
||||
|
||||
::: warning Wichtiger Hinweis
|
||||
Das Standardbeispiel hier ist relativ komplex. Denken Sie daran, **"Wasserzeichen hinzufügen"** und **"Streaming-Antwort"** zu deaktivieren, um sicherzustellen, dass kein Wasserzeichen generiert wird und keine Anfragefehler auftreten.
|
||||
:::
|
||||
|
||||
Da wir später den Referenzbild-Generierungsmodus verwenden, wählen wir zunächst die Funktion Mehrere-Bilder-zu-einem-Bild. Der kopierte Referenzcode sieht wie folgt aus:
|
||||
|
||||
```
|
||||
curl -X POST https://ark.cn-beijing.volces.com/api/v3/images/generations \
|
||||
-H "Content-Type: application/json" \
|
||||
-H "Authorization: Bearer xxxxxxx" \
|
||||
-d '{
|
||||
"model": "doubao-seedream-4-5-251128",
|
||||
"prompt": "Ersetze die Kleidung in Bild 1 durch die Kleidung in Bild 2",
|
||||
"image": ["https://ark-project.tos-cn-beijing.volces.com/doc_image/seedream4_imagesToimage_1.png", "https://ark-project.tos-cn-beijing.volces.com/doc_image/seedream4_imagesToimage_2.png"],
|
||||
"sequential_image_generation": "disabled",
|
||||
"response_format": "url",
|
||||
"size": "2K",
|
||||
"stream": false,
|
||||
"watermark": true
|
||||
}'
|
||||
```
|
||||
|
||||
Mit dem Bildreferenzcode lassen wir AI IDE gängige Bildaufgaben im E-Commerce unterstützen:
|
||||
|
||||
```
|
||||
Bitte basierend auf der folgenden API hilf mir, die gängigen Funktionen im E-Commerce-Geschäft zu implementieren
|
||||
(z.B. Plakatgenerierung, Douyin E-Commerce-Hauptbild-Generierung usw.)
|
||||
|
||||
<Hier API KEY und Bildbearbeitungscode einfügen>
|
||||
```
|
||||
|
||||
Das Ergebnis sieht wie folgt aus:
|
||||
|
||||
|
||||
|
||||
Es ist erwähnenswert, dass die Bildgenerierung oft zu seltsamen Problemen führen kann. Es wird empfohlen, AI IDE so einzustellen, dass es vollständige Fehlermeldungen anzeigt, um das Kopieren und Einfügen für Korrekturen zu erleichtern (andernfalls wird möglicherweise wiederholt "Generierung fehlgeschlagen" angezeigt, ohne dass klar ist, warum). Zum Beispiel können Sie sagen:
|
||||
|
||||
```
|
||||
Zeige nicht nur "Bildgenerierung fehlgeschlagen", sondern zeige jedes Mal den vollständigen Fehlergrund,
|
||||
wie z.B. Bildinkompatibilität, Anfragefehler, Timeout usw.!
|
||||
```
|
||||
|
||||
Manchmal werden Aktualisierungen nach einer Änderung nicht auf der Webseite angewendet. Wenn Sie feststellen, dass die Webseite nach einer Änderung weiterhin Fehler anzeigt (mehrmals hintereinander), können Sie auch versuchen, AI IDE direkt zu sagen: Bitte starten Sie dieses Projekt neu.
|
||||
|
||||
Im E-Commerce-Geschäft möchten wir möglicherweise, dass Nutzer hochgeladene Kleidung automatisch auf einer Person tragen können, oder automatisch attraktive Verkaufsimages und Plakate für Produkte generieren. Hier probieren wir einen Prompt aus, um ein E-Commerce-Plakat zu generieren:
|
||||
|
||||
|
||||
|
||||
Sie können je nach Ihren eigenen Geschäftsszenarien die Text-zu-Bild- oder Bild-zu-Bild-API verwenden, um verschiedene Funktionen zu implementieren.
|
||||
|
||||
## Weitere Bildgenerierungsdienste
|
||||
|
||||
Nachfolgend finden Sie weitere Optionen. Es wird empfohlen, zunächst die Qwen-Bildgenerierung erfolgreich zum Laufen zu bringen und dann basierend auf Ergebnissen und Kosten die folgenden Dienste als Ersatz auszuprobieren (wählen Sie nach persönlichem Erfahrungseindruck).
|
||||
|
||||
### Recraft-Integration
|
||||
|
||||
Wenn Ihr Prototyp eher in Richtung "Design-Produktion" geht (z.B. Generierung von Marken-Stil-Illustrationen, Marketing-Plakaten, Vektor-Stil-Materialien), ist Recraft oft die bessere Wahl. Die Integration erfolgt genau wie im vorherigen Abschnitt: **Key besorgen + offizielles Beispiel finden + AI IDE das Beispiel in Ihren Button/Ihre Seite integrieren lassen**.
|
||||
|
||||
::: details Mehr erfahren: Was ist Recraft?
|
||||
|
||||
> Recraft ist ein AI-Tool für Designer, Illustratoren und Vermarkter – 2022 in den USA gegründet, mit Hauptsitz in London. Es hilft bei der Generierung/Iteration von visuellen Elementen (Bilder, Vektorgrafiken, 3D-Grafiken) mit Vorteilen wie hochwertiger Ausgabe (jede Textgröße/-länge), präziser Elementplatzierung und markenkonsistentem Design. Vertraut von über 3 Millionen Nutzern in 200 Ländern (einschließlich Ogilvy, Netflix) und über 350 Millionen generierten Bildern. Das Team zielt darauf ab, es zu einem unverzichtbaren Designer-Tool zu machen und sicherzustellen, dass Creator ihre AI-gestützten Workflows kontrollieren können.
|
||||
>
|
||||
> 
|
||||
> 
|
||||
|
||||
Zunächst müssen wir den [API-Zugang](https://www.recraft.ai/profile/api) finden, um den API Key zu erhalten.
|
||||
|
||||
Da hier kein kostenloses Kontingent bereitgestellt wird, müssen wir 1.000 Credits selbst aufladen. Diese Website unterstützt Alipay und WeChat Pay, sodass es einfach ist, 1.000 Credits zu erhalten (Hinweis: Nicht mehr als notwendig aufladen).
|
||||
|
||||
|
||||
|
||||
Danach folgen wir weiterhin derselben Methode: Zur offiziellen Dokumentation gehen und die entsprechenden Anfragebeispiele finden:
|
||||
|
||||
- <https://www.recraft.ai/docs/api-reference/getting-started>
|
||||
- <https://www.recraft.ai/docs/api-reference/usage>
|
||||
- <https://www.recraft.ai/docs/api-reference/guides>
|
||||
|
||||
:::
|
||||
|
||||
### Qwen Image / Qwen Image Edit Integration
|
||||
|
||||
Wenn Sie einen einfacheren Weg zur Integration eines Bildgenerierungsdienstes bevorzugen, können Sie Qwen Image (Tongyi Wanxiang) in Betracht ziehen. Der Ansatz bleibt derselbe: Behandeln Sie es als "Bildgenerierungs-API" und binden Sie es an den Button Ihres Prototyps an.
|
||||
|
||||
::: details Mehr erfahren: Was ist Qwen Image / Qwen Image Edit?
|
||||
|
||||
**Qwen Image** (auch bekannt als Tongyi Wanxiang) ist eine Bildgenerierungsmodellserie des Qwen-Teams von Alibaba Cloud, die hauptsächlich zwei Modelle umfasst:
|
||||
|
||||
**1. Qwen Image — Text-zu-Bild-Modell**
|
||||
|
||||
Generiert basierend auf Textbeschreibungen völlig neue Bilder. Sie geben einen Prompt ein, das Modell versteht Ihre Absicht und generiert ein Bild, das der Beschreibung entspricht.
|
||||
|
||||
|
||||
|
||||
**Hauptfähigkeiten:**
|
||||
|
||||
- **Text-zu-Bild**: Bilder aus Textbeschreibungen generieren, unterstützt verschiedene Stile (realistisch, Cartoon, Tuschmalerei, Cyberpunk usw.)
|
||||
- **Stiltransfer**: Ein Bild in einen bestimmten Kunststil umwandeln
|
||||
- **Bildvarianten**: Neue Bilder im ähnlichen Stil basierend auf einem Referenzbild generieren
|
||||
- **Auflösungsverbesserung**: Bildklarheit und Details verbessern
|
||||
|
||||
**2. Qwen Image Edit — Bild-zu-Bild-Modell**
|
||||
|
||||
Bearbeitet und verändert bestehende Bilder. Durch natürlichsprachliche Anweisungen versteht das Modell Ihre Änderungsabsicht und generiert das Ergebnis.
|
||||
|
||||
**Hauptfähigkeiten:**
|
||||
|
||||
- **Lokaler Austausch**: Ein bestimmtes Objekt oder eine Person im Bild ersetzen (z.B. "Hintergrund zum Strand ändern")
|
||||
- **Elemententfernung**: Unerwünschte Elemente aus dem Bild entfernen
|
||||
- **Stiltransfer**: Filter oder künstlerische Effekte auf das Bild anwenden
|
||||
- **Bilderweiterung**: Bildränder erweitern und neue Inhalte generieren
|
||||
- **Intelligente Bildbearbeitung**: Automatische Verschönerung, Lichtanpassung, Fehlerkorrektur
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
**Warum die Qwen Image Serie wählen?**
|
||||
|
||||
- **Chinesisch-Optimierung**: Genaueres Verständnis für chinesische Prompts, geeignet für inländische Nutzer
|
||||
- **Niedrige Kosten**: Im Vergleich zu internationalen Wettbewerbern erschwinglicher
|
||||
- **Hohe Geschwindigkeit**: Hohe Generierungseffizienz, kurze Antwortzeiten
|
||||
- **Stabile Qualität**: Stabile und zuverlässige Leistung in E-Commerce- und Material-Szenarien
|
||||
- **Vielfältige Stile**: Unterstützt verschiedene Kunststile und kreative Effekte
|
||||
|
||||
**Typische Anwendungsszenarien:**
|
||||
|
||||
- E-Commerce: Hauptbilder, Detailseiten-Illustrationen, Werbeplakate generieren
|
||||
- Social Media: Avatare, Memes, Illustrationen generieren
|
||||
- Design: Schnelle Konzeptbilder, Materialbilder, Hintergrundbilder erstellen
|
||||
- Marketing: Werbebilder, Event-Banner, Festtagsplakate erstellen
|
||||
:::
|
||||
|
||||
Besuchen Sie die offizielle Website von [SiliconFlow](https://siliconflow.cn/). Auf der linken Seite gibt es einen "Playground"-Bereich, in dem Sie verschiedene Modelle ohne API-Aufruf ausprobieren können. Oben auf der Seite gibt es einen "Filters"-Button; klicken Sie darauf, um die Modellliste auf der rechten Seite zu filtern.
|
||||
|
||||
Wenn Sie "Image" auswählen, sehen Sie nur die aktuell unterstützten Text-zu-Bild-Modelle. In diesem Fall verwenden wir Qwen/Qwen-Image.
|
||||
|
||||
|
||||
|
||||
Nachdem alles eingerichtet ist, müssen wir die entsprechende Bildgenerierungs-API-Dokumentation konsultieren. Sie können auf der offiziellen Dokumentationsseite jeden Abschnitt finden, der als "API Reference" markiert ist. Klicken Sie darauf und navigieren Sie zum [API-Bereich für Bildgenerierung](https://docs.siliconflow.cn/cn/api-reference/images/images-generations), um das entsprechende Anfragebeispiel zu finden.
|
||||
|
||||
Sie können das folgende Anfragebeispiel zusammen mit dem API Key an die AI IDE senden, um die Bildgenerierungsfunktion zu implementieren.
|
||||
|
||||
```bash
|
||||
curl --request POST \
|
||||
--url https://api.siliconflow.cn/v1/images/generations \
|
||||
--header 'Authorization: Bearer <token>' \
|
||||
--header 'Content-Type: application/json' \
|
||||
--data '
|
||||
{
|
||||
"model": "Qwen/Qwen-Image-Edit-2509",
|
||||
"prompt": "an island near sea, with seagulls, moon shining over the sea, light house, boats int he background, fish flying over the sea"
|
||||
}
|
||||
'
|
||||
```
|
||||
|
||||
Hier können Sie entweder Qwen/Qwen-Image oder Qwen/Qwen-Image-Edit-2509 als Modell verwenden.
|
||||
|
||||
::: details Bildbearbeitungs-Referenzcode
|
||||
|
||||
Kopieren Sie den folgenden Code zusammen mit dem Key und senden Sie beides an AI IDE:
|
||||
|
||||
```python
|
||||
import requests
|
||||
import os
|
||||
from typing import Dict, Any, Optional
|
||||
|
||||
SILICONFLOW_API_KEY: str = ""
|
||||
SILICONFLOW_BASE_URL: str = "https://api.siliconflow.cn/v1/images/generations"
|
||||
QWEN_IMAGE_EDIT_MODEL: str = "Qwen/Qwen-Image-Edit-2509"
|
||||
|
||||
def generate_image_edit(
|
||||
prompt: str,
|
||||
image: Optional[str] = None,
|
||||
image2: Optional[str] = None,
|
||||
image3: Optional[str] = None,
|
||||
negative_prompt: Optional[str] = None,
|
||||
cfg: Optional[float] = 4.0,
|
||||
seed: Optional[int] = None
|
||||
) -> Optional[Dict[str, Any]]:
|
||||
payload: Dict[str, Any] = {
|
||||
"model": QWEN_IMAGE_EDIT_MODEL,
|
||||
"prompt": prompt,
|
||||
}
|
||||
if image:
|
||||
payload["image"] = image
|
||||
if image2:
|
||||
payload["image2"] = image2
|
||||
if image3:
|
||||
payload["image3"] = image3
|
||||
if negative_prompt:
|
||||
payload["negative_prompt"] = negative_prompt
|
||||
if cfg is not None:
|
||||
payload["cfg"] = cfg
|
||||
if seed is not None:
|
||||
payload["seed"] = seed
|
||||
|
||||
headers: Dict[str, str] = {
|
||||
"Authorization": f"Bearer {SILICONFLOW_API_KEY}",
|
||||
"Content-Type": "application/json"
|
||||
}
|
||||
|
||||
try:
|
||||
response = requests.post(SILICONFLOW_BASE_URL, json=payload, headers=headers)
|
||||
response.raise_for_status()
|
||||
return response.json()
|
||||
except requests.exceptions.RequestException as e:
|
||||
print(f"Error generating image: {e}")
|
||||
return None
|
||||
|
||||
def save_image_from_url(image_url: str, output_path: str = "image.png") -> bool:
|
||||
try:
|
||||
response = requests.get(image_url)
|
||||
response.raise_for_status()
|
||||
os.makedirs(os.path.dirname(output_path) if os.path.dirname(output_path) else ".", exist_ok=True)
|
||||
with open(output_path, "wb") as f:
|
||||
f.write(response.content)
|
||||
print(f"Image saved successfully to: {output_path}")
|
||||
return True
|
||||
except requests.exceptions.RequestException as e:
|
||||
print(f"Error downloading image: {e}")
|
||||
return False
|
||||
except Exception as e:
|
||||
print(f"Error saving image: {e}")
|
||||
return False
|
||||
|
||||
prompt: str = "Verwandle den Himmel in eine Abendstimmung mit Mond und Sternen, im traumhaften Stil"
|
||||
negative_prompt: str = "verschwommen, niedrige Qualität, verzerrt"
|
||||
image_url: str = "https://inews.gtimg.com/om_bt/Os3eJ8u3SgB3Kd-zrRRhgfR5hUvdwcVPKUTNO6O7sZfUwAA/641"
|
||||
image2_url: Optional[str] = None
|
||||
image3_url: Optional[str] = None
|
||||
|
||||
cfg: float = 4.0
|
||||
seed: int = 12345
|
||||
output_path: str = "edited_image.png"
|
||||
|
||||
print(f"Generating edited image with prompt: {prompt}")
|
||||
print(f"Input image: {image_url}")
|
||||
print(f"CFG: {cfg}, Seed: {seed}")
|
||||
print("-" * 50)
|
||||
|
||||
result = generate_image_edit(
|
||||
prompt=prompt,
|
||||
image=image_url,
|
||||
image2=image2_url,
|
||||
image3=image3_url,
|
||||
negative_prompt=negative_prompt,
|
||||
cfg=cfg,
|
||||
seed=seed
|
||||
)
|
||||
|
||||
if result and "images" in result:
|
||||
images = result["images"]
|
||||
if images and len(images) > 0:
|
||||
image_url_result = images[0]["url"]
|
||||
print(f"Image edit generated successfully. URL: {image_url_result}")
|
||||
success = save_image_from_url(image_url_result, output_path)
|
||||
if success:
|
||||
print(f"Image saved to: {output_path}")
|
||||
else:
|
||||
print("Failed to save image to local file")
|
||||
else:
|
||||
print("No images found in response")
|
||||
else:
|
||||
print("Image generation failed")
|
||||
if result:
|
||||
print(f"Response: {result}")
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
# Anhang: Wie man "aktuell stärkere" AI-Modelle findet
|
||||
|
||||
Die Entwicklung von Textmodellen (auch oft als "große Sprachmodelle" bezeichnet) verläuft sehr schnell. Wir müssen immer sicherstellen, dass wir eines der leistungsstärkeren Modelle verwenden. Über die folgenden zwei Websites können Sie bequem sehen, "welche Modelle aktuell häufig verwendet und besser bewertet werden".
|
||||
|
||||
Im Allgemeinen können diese Websites als **"Modell-Arenen"** verstanden werden: Sie stellen die Ausgaben zweier Modelle nebeneinander, und Sie stimmen für diejenige, die Ihnen besser gefällt. Modelle mit mehr Stimmen bedeuten in der Regel, dass mehr Menschen sie "besser" finden.
|
||||
|
||||
Darüber hinaus sehen Sie möglicherweise gelegentlich mysteriöse anonyme Modelle ("Unknown Model") in diesen Großmodell-Arenen. Dies bedeutet normalerweise: Jemand hat ein "internes Testmodell" für Blindtests eingeschleust, und Sie haben möglicherweise die Chance, stärkere Fähigkeiten vorab zu erleben.
|
||||
|
||||
## LMArena
|
||||
|
||||
Website: <https://lmarena.ai/>
|
||||
|
||||
LMArena eignet sich besser dafür zu beurteilen, "welches Modell die meisten Nutzer bevorzugen". Mehr Stimmen und höhere Scores bedeuten in der Regel, dass es in realen Anwendungsszenarien stabiler ist.
|
||||
|
||||
Eine einfache Nutzung:
|
||||
|
||||
1. Direkt das Leaderboard ansehen
|
||||
2. Zunächst eine Richtung wählen (z.B. allgemeiner Dialog / Programmierung / Vision)
|
||||
3. Wählen Sie eines der Top 3, das Sie nutzen können (zugänglich, Preis akzeptabel, Latenz akzeptabel)
|
||||
|
||||
|
||||
|
||||
## Artificial Analysis
|
||||
|
||||
Website: <https://artificialanalysis.ai/>
|
||||
|
||||
Artificial Analysis eignet sich besser dafür, "Leistung / Preis / Geschwindigkeit" in einer Tabelle zu vergleichen. Sie können es als Parametertabelle für die Modellauswahl verwenden.
|
||||
|
||||
Typische Nutzung:
|
||||
|
||||
1. Finden Sie die Modellkategorie, die Sie interessiert (Text / Bildgenerierung usw.)
|
||||
2. Qualitätsindikatoren (Quality) + Preis (Price) + Latenz/Durchsatz (Latency/Throughput) vergleichen
|
||||
3. Wählen Sie das Modell mit dem besten "Gesamtpreis-Leistungs-Verhältnis" für Ihr Produkt
|
||||
|
||||
::: tip Empfehlung
|
||||
Verlassen Sie sich nicht auf Ihr Bauchgefühl, um zu argumentieren, "welches besser ist". Ein zuverlässigerer Ansatz: Testen Sie 2-3 Modelle gleichzeitig mit denselben Eingaben und treffen Sie dann Ihre Entscheidung basierend auf dem Ranking und den Preisen.
|
||||
:::
|
||||
|
||||
## Zusammenfassung
|
||||
|
||||
Bei der Integration verschiedener AI-Dienste müssen Sie APIs nicht als zu kompliziert betrachten. Wenn Sie die folgenden Kernkonzepte beherrschen, können Sie die meisten Szenarien bewältigen:
|
||||
|
||||
**Eine API ist im Kern eine Kommunikationsbrücke.** Was sie tut, ist einfach: Ihre Anfrage senden und die Antwort des Modells zurückbringen. Sie müssen sich nicht um das kümmern, was im Hintergrund passiert, sondern nur das Anfrageformat korrekt zusammenstellen.
|
||||
|
||||
**Ein SDK ist eine Kapselung der API.** Wenn API die rohe Schnittstelle ist, dann ist ein SDK ein fertiges Werkzeugkasten – es übernimmt die mühsamen Details wie Anfragesignaturen, Fehlerbehandlung und Parametervalidierung für Sie. Im täglichen Entwicklungsalltag sollten Sie SDKs gegenüber direkten API-Aufrufen bevorzugen, um sich viel Mühe zu sparen.
|
||||
|
||||
**Beim Lesen der Dokumentation genügt es, auf drei Dinge zu achten**: Die Dienstadresse (Endpoint), die Anmeldeinformationen (API Key) und wie die Aufrufparameter ausgefüllt werden. Wenn Sie diese drei Punkte geklärt haben, ist es nur eine Frage der Zeit, bis der Aufruf funktioniert.
|
||||
|
||||
Die restliche Arbeit erledigen IDEs und moderne Entwicklungstools für Sie. Konzentrieren Sie sich auf Ihre Geschäftslogik und überlassen Sie die zugrunde liegenden Aufrufe diesen ausgereiften SDKs und Toolchains.
|
||||
|
||||
# 5. Hausaufgabe: Ihre erste AI-Fähigkeit integrieren
|
||||
|
||||
<el-card shadow="hover" style="margin: 20px 0; border-radius: 12px;">
|
||||
<template #header>
|
||||
<div style="font-weight: bold; font-size: 16px;">Herausforderung: AI-Fähigkeiten in Ihren Workspace integrieren</div>
|
||||
</template>
|
||||
|
||||
<p>
|
||||
Beziehen Sie sich auf die Prompts und Inhalte dieser Lektion und schließen Sie einen vollständigen Zyklus ab:
|
||||
</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<strong>Vollständiger Praxis-Zyklus</strong>
|
||||
<ul>
|
||||
<li>Wählen und integrieren Sie einen AI-Dienst (LLM / Text-zu-Bild / Bild-zu-Bild) → Frontend-Backend-Interaktion implementieren → In Ihren Prototypen integrieren</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<strong>Ergebnisse teilen</strong>
|
||||
<ul>
|
||||
<li>Machen Sie Screenshots Ihrer Funktionsseite und teilen Sie sie mit allen</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<strong>Denkaufgabe</strong>
|
||||
<ul>
|
||||
<li>Bereiten Sie sich auf das nächste Kapitel "Vollständiges Projektpraktikum" vor, indem Sie im Voraus überlegen: Wie möchten Sie diese AI-Fähigkeiten kombinieren, um interessante Funktionen zu schaffen?</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</el-card>
|
||||
|
||||
## Nächste Schritte
|
||||
|
||||
Im nächsten Kapitel werden wir diese verteilten AI-Fähigkeiten verketten und in einem realen Geschäftsszenario ein vollständiges Produkt erstellen:
|
||||
|
||||
- Content-Planung, Produkteinstellung, Datenanalyse und andere Schritte zu einem vollständigen Geschäftsprozess verketten
|
||||
- Die in dieser Lektion gelernten AI-Fähigkeiten (LLM-Copywriting-Generierung, Text-zu-Bild, Bildbearbeitung usw.) in tatsächliche Geschäftsknotenpunkte einbetten
|
||||
- Einen wirklich nutzbaren "E-Commerce AI Workspace" erstellen, keine isolierte Demo
|
||||
|
||||
<RelatedArticlesSection
|
||||
title="Weiterlernen"
|
||||
description="Empfohlener Lernpfad von 'einzelnen AI-Fähigkeiten' zum 'vollständigen Produktprozess'."
|
||||
:items="relatedArticles"
|
||||
/>
|
||||
@@ -0,0 +1,493 @@
|
||||
---
|
||||
title: 'AI-Programmierwerkzeuge lernen'
|
||||
description: 'Lernen Sie den Unterschied zwischen IDE und AI IDE kennen, richten Sie eine lokale Entwicklungsumgebung ein und erstellen Sie mit Trae ein erstes Snake-Spiel. Dieses Kapitel zeigt den kompletten Ablauf von Installation, Projektstart, Ausfuehrung, Fehlerbehebung und Kommunikation mit AI.'
|
||||
---
|
||||
|
||||
# Anfaenger II: AI-Programmierwerkzeuge lernen
|
||||
|
||||
## Kapiteluebersicht
|
||||
|
||||
<script setup>
|
||||
import { relatedArticlesMap } from '@theme/data/relatedArticles'
|
||||
|
||||
const duration = 'ca. <strong>1 Tag</strong>, in mehreren Sitzungen moeglich'
|
||||
const relatedArticles =
|
||||
relatedArticlesMap['zh-cn/stage-1/introduction-to-ai-ide'] ?? []
|
||||
</script>
|
||||
|
||||
<ChapterIntroduction :duration="duration" :tags="['Lokale Entwicklungsumgebung', 'IDE und AI IDE', 'Trae', 'Agent-Entwicklung']" coreOutput="1 selbst erstelltes Spiel" expectedOutput="Ein lokal laufendes Snake-Spiel">
|
||||
|
||||
Im vorherigen Kapitel haben wir AI-Programmierung im Browser ausprobiert. Eine Web-Plattform ist bequem, aber sie hat Grenzen: Dateien lassen sich schwer langfristig verwalten, lokale Abhaengigkeiten sind eingeschraenkt, und komplexere Projekte werden schnell unuebersichtlich. In diesem Kapitel holen wir die Entwicklungsumgebung auf den eigenen Rechner.
|
||||
|
||||
Sie lernen, was eine IDE ist, wodurch sich eine AI IDE unterscheidet, wie Trae als lokales Werkzeug funktioniert und wie man AI nicht nur zum Chatten, sondern zum Erstellen, Aendern, Ausfuehren und Reparieren von Projekten nutzt. Am Ende haben Sie einen Arbeitsablauf, der dem Alltag echter Entwickler schon deutlich naeher kommt.
|
||||
|
||||
::: tip Fortgeschrittenen-Hinweis
|
||||
Wenn Sie bereits programmieren koennen und lieber in der Kommandozeile arbeiten, lesen Sie spaeter auch [Moderne CLI Coding Werkzeuge](../../stage-2/backend/modern-cli/).
|
||||
:::
|
||||
|
||||
</ChapterIntroduction>
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="0" :items="[
|
||||
{ title: 'Umgebung verstehen', description: 'IDE und AI IDE einordnen' },
|
||||
{ title: 'Lokal ueben', description: 'Snake-Spiel mit Trae' },
|
||||
{ title: 'Werkzeug kennen', description: 'IDE-Oberflaeche verstehen' },
|
||||
{ title: 'Besser fragen', description: 'Mit AI klar kommunizieren' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
## 1. Welche Umgebung man zum Programmieren braucht
|
||||
|
||||
### 1.1 Denkwechsel: Bei Problemen zuerst AI fragen
|
||||
|
||||
Beim klassischen Programmierlernen sucht man oft erst im Web: Wie installiere ich Python? Wie konfiguriere ich Conda? Warum haengt `npm install`? Danach arbeitet man Tutorials Schritt fuer Schritt ab und sucht bei jeder Fehlermeldung erneut.
|
||||
|
||||
Mit einer AI IDE sollten Sie diese Gewohnheit aendern. Wenn Sie nicht wissen, was zu tun ist, fragen Sie zuerst die AI im Seitenpanel. Sie kann Befehle erklaeren, passende Schritte vorschlagen oder sogar direkt fuer Sie ausfuehren.
|
||||
|
||||
- **Umgebung unklar?** Fragen Sie: "Ich moechte Python schreiben. Bitte pruefe, ob Python installiert ist, und hilf mir bei der Installation, falls es fehlt."
|
||||
- **Abhaengigkeiten laden nicht?** Schreiben Sie: "Der Download schlaegt fehl. Ist das ein Netzwerkproblem? Bitte hilf mir, eine passende Spiegelquelle zu verwenden."
|
||||
- **Befehl vergessen?** Fragen Sie: "Bitte erstelle eine neue virtuelle Umgebung mit dem Namen `demo`."
|
||||
|
||||
Der wichtige Punkt ist: Sie muessen nicht alle Befehle auswendig kennen. Sie muessen lernen, das Ziel klar zu beschreiben und die AI Schritt fuer Schritt pruefen zu lassen.
|
||||
|
||||
### 1.2 Warum Werkzeuge noetig sind
|
||||
|
||||
Ein paar Codezeilen kann man theoretisch in einem einfachen Texteditor schreiben. Fuer ein wartbares Projekt reicht das aber nicht:
|
||||
|
||||
- **Ohne Syntaxhervorhebung** sehen Schluesselwoerter, Strings und Kommentare gleich aus.
|
||||
- **Ohne Vervollstaendigung** muss jeder Name exakt selbst getippt werden.
|
||||
- **Ohne Projektansicht** verliert man bei mehreren Dateien schnell den Ueberblick.
|
||||
- **Ohne Debugging** bleibt bei Fehlern oft nur Raten und Log-Ausgabe.
|
||||
|
||||
Eine IDE, also eine integrierte Entwicklungsumgebung, loest diese Probleme. Sie organisiert Dateien, hebt Code farbig hervor, bietet Autovervollstaendigung, startet Programme und hilft beim Debugging.
|
||||
|
||||
## 2. Was ist eine IDE?
|
||||
|
||||
::: info Vorbereitung
|
||||
Wenn Ihnen IDEs noch neu sind, lesen Sie spaeter auch [IDE Grundlagen](/zh-cn/appendix/2-development-tools/ide-basics). Dort werden typische Bereiche wie Editor, Terminal, Seitenleiste und Debugger noch einmal in Ruhe erklaert.
|
||||
:::
|
||||
|
||||
Fruehe Entwickler arbeiteten mit einfachen Editoren und Kommandozeilentools. Als Projekte groesser wurden, brauchte man Werkzeuge, die Dateien, Ausfuehrung und Debugging in einer Oberflaeche vereinen. Daraus entstand die IDE.
|
||||
|
||||
|
||||
|
||||
Bildquelle der Terminal-Oberflaeche: https://en.wikipedia.org/wiki/File:Emacs-screenshot.png
|
||||
|
||||
Auch heute werden Werkzeuge wie `Vim` oft auf Servern verwendet.
|
||||
|
||||
|
||||
|
||||
Moderne IDEs sind fuer Einsteiger komfortabler. Sie enthalten normalerweise:
|
||||
|
||||
- **Quellcode-Editor**: Syntaxhervorhebung und Autovervollstaendigung.
|
||||
- **Build- und Startwerkzeuge**: Programme koennen direkt ausgefuehrt werden.
|
||||
- **Debugger**: Breakpoints, Variablenansicht und schrittweises Ausfuehren.
|
||||
- **Projektverwaltung**: Dateien und Ordner bleiben im Zusammenhang sichtbar.
|
||||
|
||||
Die bekannteste leichte IDE ist **[Visual Studio Code](https://code.visualstudio.com/)**. Sie ist erweiterbar und fuer viele Sprachen geeignet.
|
||||
|
||||
|
||||
|
||||
VS Code folgt dem Prinzip "Alles ist eine Erweiterung". Mit Python-Erweiterung wird es zur Python-IDE, mit C++-Erweiterung zur C++-IDE. Ohne Erweiterungen ist es eher ein guter Texteditor.
|
||||
|
||||
|
||||
|
||||
Es eignet sich auch sehr gut zum Schreiben von Markdown-Dokumenten.
|
||||
|
||||
|
||||
|
||||
Kurz gesagt: Eine IDE ist ein Werkzeugset, das Schreiben, Verwalten, Ausfuehren und Reparieren von Code effizienter macht.
|
||||
|
||||
## 3. Was unterscheidet eine AI IDE von einer gewoehnlichen IDE?
|
||||
|
||||
Eine normale IDE ist ein Werkzeugkasten. Sie koennen Dateien oeffnen, Code schreiben, Programme starten und Erweiterungen installieren. Aber Sie muessen selbst wissen, welche Datei wichtig ist, welcher Befehl ausgefuehrt werden muss und wie eine Fehlermeldung zu lesen ist.
|
||||
|
||||
Eine AI IDE fuegt ein grosses Sprachmodell und haeufig einen Agenten hinzu. Dadurch koennen Sie Aufgaben in natuerlicher Sprache formulieren:
|
||||
|
||||
- "Erstelle eine Login-Seite."
|
||||
- "Hier ist die Fehlermeldung. Bitte erklaere die Ursache und schlage eine Reparatur vor."
|
||||
- "Fasse die Projektstruktur zusammen und erklaere mir, welche Dateien wichtig sind."
|
||||
- "Fuege eine Bestenliste zum Spiel hinzu und starte danach die App."
|
||||
|
||||
Eine gute AI IDE kann Dateien lesen, neue Dateien erzeugen, Code ueber mehrere Dateien hinweg aendern, Befehle im Terminal ausfuehren und nach Ihrer Bestaetigung Tests oder Entwicklungsserver starten.
|
||||
|
||||
VS Code selbst enthaelt inzwischen ebenfalls AI-Funktionen. Trotzdem sind spezialisierte AI IDEs in vielen Aufgaben staerker, weil sie Agentenablaeufe, Kontextverwaltung, Dateiaenderungen und Modellintegration gezielter ausbauen.
|
||||
|
||||
|
||||
|
||||
Viele AI IDEs basieren auf VS Code. Wenn Sie die Grundbedienung von VS Code verstehen, koennen Sie deshalb relativ leicht zwischen Trae, Cursor, Kiro, Qoder oder aehnlichen Werkzeugen wechseln.
|
||||
|
||||
Typische AI-IDE-Faehigkeiten sind:
|
||||
|
||||
- **Codegenerierung und Vervollstaendigung**: Aus wenigen Saetzen oder Pseudocode entsteht lauffaehige Logik.
|
||||
- **Codeverstaendnis und Q&A**: Die IDE beantwortet Fragen zu Dateien, Funktionen und Projektstruktur.
|
||||
- **Refactoring und Optimierung**: Bestehender Code wird nach Ihrer Absicht umgeschrieben.
|
||||
- **Testgenerierung**: Fuer Funktionen und Module koennen Testfaelle erzeugt werden.
|
||||
- **Agentische Ausfuehrung**: Ein Agent kann Dateien erstellen, Abhaengigkeiten installieren, Programme starten und Fehler iterativ reparieren.
|
||||
|
||||
### Aktuelle AI IDEs im Ueberblick
|
||||
|
||||
::: details Antigravity
|
||||
|
||||
### [Antigravity](https://antigravity.google/)
|
||||
|
||||
Antigravity ist eine von Google vorgestellte AI IDE mit Agent-First-Ansatz. Der Agent kann Editor, Terminal und Browser bedienen, Aufgaben planen, Code ausfuehren, Tests starten und Ergebnisse zusammenfassen. Sie eignet sich besonders, wenn man mit Gemini- und anderen modernen Modellen arbeiten moechte.
|
||||
:::
|
||||
|
||||
::: details Trae
|
||||
|
||||
### [Trae](https://www.trae.ai/)
|
||||
|
||||
|
||||
|
||||
Trae ist ein AI-Programmierassistent von ByteDance. Es unterstuetzt viele Programmiersprachen, kann Code aus natuerlicher Sprache erzeugen, beim Debugging helfen und Designentwuerfe in React- oder Vue-Komponenten umwandeln. Fuer dieses Kapitel nutzen wir Trae als Beispiel, weil es fuer Einsteiger einen relativ klaren Agentenablauf bietet.
|
||||
:::
|
||||
|
||||
::: details Cursor
|
||||
|
||||
### [Cursor](https://cursor.com/)
|
||||
|
||||
Cursor ist ein AI-Codeeditor auf Basis von VS Code. Er ist besonders stark bei groesseren Codebasen, Multi-File-Aenderungen und Kontextarbeit. Cursor ist sehr beliebt, aber die Pro-Version kostet ungefaehr 20 US-Dollar pro Monat.
|
||||
|
||||
|
||||
:::
|
||||
|
||||
::: details Qoder
|
||||
|
||||
### [Qoder](https://qoder.com/)
|
||||
|
||||
Qoder betont transparente Zusammenarbeit und Kontext-Engineering. Es kann Aufgaben in Schritte zerlegen, Ausfuehrung sichtbar machen und eignet sich fuer groessere Projekte, Architekturarbeit und Analyse alter Systeme.
|
||||
|
||||
|
||||
:::
|
||||
|
||||
::: details CodeBuddy
|
||||
|
||||
### [CodeBuddy](https://copilot.tencent.com/)
|
||||
|
||||
|
||||
|
||||
CodeBuddy ist ein AI-Programmierwerkzeug von Tencent Cloud. Es unterstuetzt Codevervollstaendigung, Code-Review, mehrere Modelle und Enterprise-Anforderungen wie private Bereitstellung und Compliance.
|
||||
:::
|
||||
|
||||
::: details Cline
|
||||
|
||||
### [Cline](https://cline.bot/)
|
||||
|
||||
Cline ist ein Agent-Plugin fuer VS Code. Es kann ueber verschiedene API-Endpunkte mit unterschiedlichen Modellen arbeiten, unterstuetzt MCP-Werkzeuge und verlangt fuer Aktionen normalerweise eine Nutzerbestaetigung. Es ist gut geeignet, um Ideen schnell in bestehenden VS-Code-Workflows zu testen.
|
||||
|
||||
|
||||
:::
|
||||
|
||||
::: details Kiro
|
||||
|
||||
### [Kiro](https://kiro.dev/)
|
||||
|
||||
Kiro ist eine AI-IDE von AWS und integriert sich eng mit Amazon Bedrock sowie AWS-Diensten wie Lambda, S3 oder DynamoDB. Sie eignet sich besonders fuer Cloud-native Entwicklung im AWS-Umfeld.
|
||||
:::
|
||||
|
||||
::: tip Modellhinweis
|
||||
Wenn Sie Anthropic-Claude-Modelle stabil nutzen wollen, sind Cursor, Kiro oder Antigravity oft geeignete Optionen, weil sie offizielle oder tiefere Integrationen anbieten.
|
||||
:::
|
||||
|
||||
## 4. Mit Trae ein Snake-Spiel lokal erstellen
|
||||
|
||||
Bis hierhin ging es um Begriffe. Jetzt bringen wir das in die Praxis: Wir erstellen einen leeren Ordner, oeffnen ihn in einer AI IDE, schreiben im Seitenpanel eine klare Aufgabe und lassen Trae ein Snake-Spiel mit React erzeugen.
|
||||
|
||||
Wenn Sie vorher schon auf z.ai oder einer anderen Web-Plattform Code erstellt haben, koennen Sie diesen Code auch herunterladen und lokal in Trae weiterbearbeiten. So bleiben alte Ergebnisse erhalten, und Sie bekommen trotzdem die staerkere lokale Umgebung.
|
||||
|
||||
### 4.1 Trae installieren
|
||||
|
||||
Trae kann von der offiziellen Website installiert werden. Je nach Region gibt es unterschiedliche Versionen.
|
||||
|
||||
|
||||
|
||||
- **CN-Version**: Fuer Einsteiger in China meist einfacher, oft kostenlos nutzbar und ohne Auslandsnetzwerk bequemer.
|
||||
- **Internationale Version**: Bietet Zugang zu internationalen Modellen, setzt aber passende Netzwerkbedingungen und haeufig ein Abo voraus.
|
||||
- **Drittanbieter-Modelle**: Wenn Sie API-Token fuer Modelle wie DeepSeek, Qwen, Kimi oder andere Anbieter besitzen, koennen Sie diese als Custom Model einbinden.
|
||||
|
||||
Die genaue Version ist weniger wichtig als der Arbeitsablauf: Projektordner oeffnen, Agent starten, Aufgabe klar beschreiben, Ergebnis pruefen.
|
||||
|
||||
### 4.2 Trae-Oberflaeche verstehen
|
||||
|
||||
Trae sieht VS Code sehr aehnlich: links Dateibaum, in der Mitte Editor, rechts AI-Panel.
|
||||
|
||||
|
||||
|
||||
Das rechte Panel ist das Copilot- oder Agentenfenster. Wenn es nicht sichtbar ist, oeffnen Sie es ueber das Symbol rechts oben.
|
||||
|
||||
|
||||
|
||||
Im Seitenpanel finden Sie normalerweise einen **Builder**-Modus. Er funktioniert aehnlich wie ein lokaler z.ai-Agent: Er kann Dateien anlegen, Abhaengigkeiten installieren, Befehle starten und lokale Webseiten oeffnen.
|
||||
|
||||
|
||||
|
||||
Es gibt oft mehrere Modi:
|
||||
|
||||
- **Chat**: Gut fuer Fragen zum aktuellen Projekt oder fuer allgemeine Erklaerungen.
|
||||
- **Builder**: Gut fuer Aufgaben, bei denen Dateien erstellt oder geaendert werden.
|
||||
- **Builder with MCP**: Erweitert den Agenten um zusaetzliche Werkzeuge, etwa externe Dienste oder lokale Integrationen.
|
||||
|
||||
Im Modellmenue koennen Sie das verwendete Modell waehlen. Vermeiden Sie am Anfang nach Moeglichkeit den Auto-Modus, wenn Sie reproduzierbare Ergebnisse wollen. Testen Sie fuer internationale Versionen Modelle wie Gemini oder GPT; fuer chinesische Versionen koennen Kimi, GLM, Qwen oder MiniMax gute Alltagsoptionen sein. Entscheidend ist nicht ein Dogma, sondern ob das Modell Ihre Aufgabe verlaesslich loest.
|
||||
|
||||
### 4.3 Leeren Projektordner vorbereiten
|
||||
|
||||
Erstellen Sie lokal einen leeren Ordner, zum Beispiel:
|
||||
|
||||
```txt
|
||||
snake-game-react
|
||||
```
|
||||
|
||||
Oeffnen Sie diesen Ordner in Trae. Der Dateibaum sollte anfangs leer oder fast leer sein. Damit weiss der Agent klar, dass er ein neues Projekt von Grund auf anlegen soll.
|
||||
|
||||
::: details Optional: API oder Coding Plan einbinden
|
||||
|
||||
Einige Cloud-Anbieter bieten Coding Plans oder Modell-APIs an. Damit kann man Modelle haeufiger oder stabiler nutzen als ueber einzelne Token-Abrechnung.
|
||||
|
||||
Der typische Ablauf:
|
||||
|
||||
1. Website des Anbieters oeffnen.
|
||||
2. Konto registrieren und anmelden.
|
||||
3. Preis- oder Coding-Plan-Seite finden.
|
||||
4. Passenden Plan kaufen oder eine API aktivieren.
|
||||
5. API Key kopieren.
|
||||
6. In Trae ueber **Add Model** oder **Custom Model** eintragen.
|
||||
|
||||
Fuer erste Uebungen reicht oft ein kostenloses oder sehr guenstiges Modell. Zahlen Sie am Anfang nur kleine Betraege ein, bis Sie wissen, wie lange Ihr Guthaben reicht.
|
||||
|
||||
:::
|
||||
|
||||
### 4.4 Snake-Spiel mit einem klaren Prompt erstellen
|
||||
|
||||
Oeffnen Sie das AI-Seitenpanel, zum Beispiel mit `Ctrl+L` oder ueber das Chat-Symbol. Geben Sie dann eine konkrete Aufgabe ein:
|
||||
|
||||
> Bitte implementiere mit React ein Snake-Spiel. Es soll Tastatursteuerung, Essen, Wachstum, Punkteanzeige, Game Over bei Wandkontakt oder Selbstkollision und einen Neustart-Button enthalten. Erstelle das Projekt, installiere fehlende Abhaengigkeiten und starte es lokal. Wenn eine Umgebung fehlt, erklaere zuerst kurz, was installiert werden muss, und hilf mir dann Schritt fuer Schritt.
|
||||
|
||||
Der Agent wird normalerweise Dateien anlegen, Abhaengigkeiten installieren und einen Entwicklungsserver starten. Dabei kann er anhalten, wenn er eine Bestaetigung braucht.
|
||||
|
||||
::: warning Wichtiger Hinweis
|
||||
Manchmal pausiert ein Agent, weil ein Befehl eine Eingabe erwartet, etwa `y`, `Enter`, einen Projektnamen oder eine Auswahl. Wenn Sie unsicher sind, machen Sie einen Screenshot und fragen Sie die AI: "Was soll ich in diesem Schritt tun?"
|
||||
:::
|
||||
|
||||
Typische Situationen:
|
||||
|
||||
- Wenn ein Button wie **Run** erscheint, muessen Sie die Ausfuehrung bestaetigen.
|
||||
- Wenn ein Paketmanager `y` erwartet, reicht meist die Eingabe `y`.
|
||||
- Wenn ein lokaler Entwicklungsserver gestartet wurde, bleibt der Prozess im Terminal aktiv. Das ist normal; oeffnen Sie die angezeigte URL im Browser.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Wenn das Ergebnis nicht passt, beschreiben Sie das sichtbare Problem:
|
||||
|
||||
- "Die Schlange bewegt sich nach Start nicht."
|
||||
- "Beim Wandkontakt erscheint kein Game Over."
|
||||
- "Der Punktestand wird nicht aktualisiert."
|
||||
- "Hier ist die Fehlermeldung. Bitte erklaere und behebe sie."
|
||||
|
||||
Nach kurzer Zeit sollten Sie ein lauffaehiges Ergebnis sehen.
|
||||
|
||||
|
||||
|
||||
### 4.5 Aenderungen pruefen und zurueckrollen
|
||||
|
||||
AI IDEs zeigen Aenderungen normalerweise vor oder nach dem Schreiben an. Sie koennen akzeptieren, ablehnen oder einzelne Dateien pruefen.
|
||||
|
||||
|
||||
|
||||
Wenn der Agent eine schlechte Aenderung macht, nutzen Sie **Revert** oder die Versionshistorie der IDE. Das ist eine wichtige Gewohnheit: Lassen Sie AI schnell arbeiten, aber behalten Sie Kontrolle ueber die Aenderungen.
|
||||
|
||||
|
||||
|
||||
## 5. Den generierten Code verstehen und verbessern
|
||||
|
||||
Wenn das Spiel laeuft, ist die Arbeit nicht beendet. Jetzt koennen Sie dieselbe AI nutzen, um das Projekt zu verstehen.
|
||||
|
||||
Fragen Sie zum Beispiel:
|
||||
|
||||
> Bitte erklaere mir von oben nach unten, wie dieses Snake-Spiel funktioniert. Verwende moeglichst wenig Fachwoerter.
|
||||
|
||||
Danach koennen Sie gezielt nachhaken:
|
||||
|
||||
> Wie wird der Koerper der Schlange im Code gespeichert? Kannst du eine Alltagsanalogie verwenden?
|
||||
|
||||
> Wo im Code wird gesteuert, dass sich die Schlange in festen Zeitabstaenden bewegt?
|
||||
|
||||
> Welche Schritte passieren, wenn die Schlange Essen erreicht?
|
||||
|
||||
> Wo werden Wandkollision und Selbstkollision erkannt?
|
||||
|
||||
Wenn Sie eine Datei wie `SnakeGame.tsx` sehen und sie nicht verstehen, fragen Sie:
|
||||
|
||||
> Bitte teile `SnakeGame.tsx` in Funktionsbereiche auf und erklaere jeden Bereich in einfachen Worten.
|
||||
|
||||
So lernen Sie nicht alle Konzepte auf einmal, sondern erkennen zuerst die Hauptdaten: Schlange, Essen, Punktzahl und Spielzustand. Danach verstehen Sie, wann diese Daten geaendert werden: Bewegung, Essen, Game Over, Neustart.
|
||||
|
||||
### 5.1 Oberflaeche gezielt verbessern
|
||||
|
||||
Sagen Sie nicht nur: "Mach es schoener." Das ist zu ungenau. Beschreiben Sie konkrete Aenderungen:
|
||||
|
||||
> Bitte verbessere die Spieloberflaeche:
|
||||
>
|
||||
> - Zentriere den Spielbereich.
|
||||
> - Nutze einen hellen Hintergrund.
|
||||
> - Mache Schlange und Essen gut sichtbar.
|
||||
> - Vergroessere die Punktzahl.
|
||||
> - Verwende Blau als Hauptfarbe fuer Buttons.
|
||||
|
||||
Fuer Game Over:
|
||||
|
||||
> Wenn das Spiel vorbei ist, zeige in der Mitte "Game Over" und darunter einen Neustart-Button.
|
||||
|
||||
Wenn das Ergebnis noch nicht passt, gehen Sie in kleinen Schritten weiter:
|
||||
|
||||
> Die Punktzahl soll groesser und auffaelliger sein.
|
||||
|
||||
> Der Spielbereich soll kompakter wirken und mehr Abstand zum Rand haben.
|
||||
|
||||
> Der Neustart-Button soll blau, abgerundet und zentriert sein.
|
||||
|
||||
Wenn eine Aenderung Fehler erzeugt, kopieren Sie die Fehlermeldung ins Chatfenster und schreiben Sie: "Dieser Fehler ist nach der Oberflaechenanpassung aufgetreten. Bitte finde die Ursache im aktuellen Projekt und behebe sie."
|
||||
|
||||
### 5.2 Gute Referenzen nutzen
|
||||
|
||||
Einsteiger wissen oft noch nicht, was eine gute Architektur oder ein gutes UI ist. Dann hilft es, Referenzen zu verwenden. Wenn Sie auf z.ai bereits ein gutes Ergebnis hatten, kopieren Sie dessen README oder Projektbeschreibung in Trae und bitten Sie:
|
||||
|
||||
> Bitte vergleiche mein lokales Projekt mit dieser README-Beschreibung und passe Struktur, Funktionen und Oberflaeche so an, dass sie dem beschriebenen Ergebnis naeher kommen.
|
||||
|
||||
So erhalten Sie nicht nur "irgendein" Spiel, sondern naehern sich einem konsistenteren Ergebnis.
|
||||
|
||||
## 6. IDE-Oberflaeche im Detail
|
||||
|
||||
Nachdem der erste Ablauf funktioniert, lohnt sich ein Blick auf die IDE selbst. Die meisten AI IDEs folgen dem VS-Code-Layout.
|
||||
|
||||
Typische Bereiche:
|
||||
|
||||
- **Title Bar**: Dateiname, Fenstersteuerung und Hauptmenues.
|
||||
- **Activity Bar**: Wechsel zwischen Dateien, Suche, Git, Erweiterungen und Debugging.
|
||||
- **Side Bar**: Dateibaum oder Suchergebnisse.
|
||||
- **Editor Groups**: Hauptbereich zum Lesen und Schreiben von Code.
|
||||
- **Breadcrumbs**: Pfadnavigation innerhalb der Datei.
|
||||
- **Minimap**: Kleine Codeuebersicht fuer schnelle Orientierung.
|
||||
- **Panel**: Terminal, Ausgabe, Probleme und Debug-Informationen.
|
||||
- **Status Bar**: Umgebung, Branch, Sprache und andere Statusinformationen.
|
||||
|
||||
Wenn Sie diese Bereiche erkennen, koennen Sie AI besser anleiten: "Oeffne die Datei im Editor", "Starte den Befehl im Terminal", "Pruefe die Fehlermeldung im Problems-Panel".
|
||||
|
||||
## 7. Wie man als Einsteiger besser mit AI spricht
|
||||
|
||||
AI ist stark, aber sie braucht klare Aufgaben. Der Unterschied zwischen guten und schlechten Ergebnissen liegt oft nicht an der Intelligenz des Modells, sondern daran, wie konkret Sie fragen.
|
||||
|
||||
### 7.1 Von vager Idee zu konkreter Beschreibung
|
||||
|
||||
Schlecht:
|
||||
|
||||
> Hilf mir, eine Website zu bauen.
|
||||
|
||||
Besser:
|
||||
|
||||
> Ich kann noch nicht programmieren. Ich moechte eine einseitige persoenliche Website erstellen, die ich Bewerbern oder Recruitern schicken kann. Die Seite soll oben meinen Namen und einen kurzen Satz haben, in der Mitte drei berufliche Stationen zeigen und unten E-Mail sowie Kontaktmoeglichkeit enthalten. Bitte gib mir eine vollstaendige `index.html`, die ich direkt im Browser oeffnen kann.
|
||||
|
||||
Ergaenzen Sie moeglichst:
|
||||
|
||||
1. Wofuer das Ergebnis genutzt wird.
|
||||
2. Welche Inhalte enthalten sein muessen.
|
||||
3. Welche Einschraenkungen gelten.
|
||||
4. In welcher Form Sie das Ergebnis brauchen.
|
||||
|
||||
### 7.2 Erst lauffaehig, dann komplex
|
||||
|
||||
Einsteiger wollen oft sofort ein komplettes System: Login, Registrierung, Bestellung, Datenbank, Adminbereich. Das fuehrt schnell zu grossen Codebloecken, die man nicht versteht.
|
||||
|
||||
Besser:
|
||||
|
||||
1. Erst ein Minimalbeispiel.
|
||||
2. Dann einen Bereich hinzufuegen.
|
||||
3. Danach Oberflaeche verbessern.
|
||||
4. Erst spaeter Datenhaltung, Login oder Deployment.
|
||||
|
||||
Beispiel:
|
||||
|
||||
> Bitte gib mir zuerst nur ein minimales Beispiel, das im Browser eine Zeile "Das ist meine Startseite" zeigt. Erklaere mir Dateiname, Speichern und Oeffnen Schritt fuer Schritt.
|
||||
|
||||
Danach:
|
||||
|
||||
> Fuege nun einen Bereich "Berufserfahrung" hinzu und sende mir wieder den vollstaendigen Code.
|
||||
|
||||
### 7.3 Screenshots und Fehlermeldungen nutzen
|
||||
|
||||
Wenn Sie ein Problem nicht beschreiben koennen, geben Sie AI das, was Sie sehen:
|
||||
|
||||
- Kopieren Sie rote Fehlermeldungen.
|
||||
- Machen Sie Screenshots von falschem Layout.
|
||||
- Beschreiben Sie knapp, was erwartet war.
|
||||
|
||||
Beispiel:
|
||||
|
||||
> Hier ist die vollstaendige Fehlermeldung. Ich verstehe das Englisch nicht. Bitte erklaere mir zuerst in einfachen Worten, was ungefaehr passiert ist, und sage mir danach, was ich am einfachsten aendern soll.
|
||||
|
||||
Wenn das Modell Bilder unterstuetzt:
|
||||
|
||||
> Das ist der aktuelle Screenshot und hier ist mein Code. Ich wollte drei Spalten, aber es erscheint nur eine Spalte. Bitte finde die Ursache und gib mir die korrigierte vollstaendige Datei.
|
||||
|
||||
::: tip Bildfaehigkeit pruefen
|
||||
Nicht jedes Modell kann Screenshots verstehen. Reine LLMs verarbeiten nur Text. Multimodale Modelle koennen Bilder lesen. Wenn Ihr Modell keine Bilder unterstuetzt, kopieren Sie Fehlermeldungen und beschreiben Sie das Layout in Worten.
|
||||
:::
|
||||
|
||||
### 7.4 Wenn AI-Code nicht funktioniert
|
||||
|
||||
Fehler sind normal. Nutzen Sie eine feste Routine:
|
||||
|
||||
1. **Nicht sofort neu anfangen.** Erst Fehlermeldung kopieren.
|
||||
2. **Problem isolieren.** Was wurde zuletzt geaendert?
|
||||
3. **AI im Projektkontext fragen.** Nicht nur die Fehlermeldung, sondern auch Ziel und letzte Aenderung nennen.
|
||||
4. **Kleine Reparatur verlangen.** Keine komplette Neuentwicklung, wenn nur ein Detail kaputt ist.
|
||||
5. **Nach jeder Reparatur testen.**
|
||||
|
||||
Guter Prompt:
|
||||
|
||||
> Nach deiner letzten Aenderung startet das Projekt nicht mehr. Hier ist die Fehlermeldung. Bitte erklaere zuerst die Ursache, aendere dann nur die noetigen Stellen und starte danach erneut den Test.
|
||||
|
||||
### 7.5 AI nicht blind vertrauen
|
||||
|
||||
AI kann Dateien aendern, aber Sie bleiben verantwortlich. Gewoehnen Sie sich an drei Kontrollen:
|
||||
|
||||
- **Diff ansehen**: Welche Dateien wurden geaendert?
|
||||
- **Starten oder testen**: Laeuft das Projekt wirklich?
|
||||
- **Rueckgängig machen koennen**: Wenn etwas schlechter wird, Revert nutzen.
|
||||
|
||||
Das Ziel ist nicht, jeden Code sofort zu verstehen, sondern genug Kontrolle zu behalten, um sinnvoll mit dem Agenten zu arbeiten.
|
||||
|
||||
## 8. Hauefige Begriffe
|
||||
|
||||
| Begriff | Bedeutung |
|
||||
| --- | --- |
|
||||
| IDE | Entwicklungsumgebung zum Schreiben, Starten und Debuggen von Code. |
|
||||
| AI IDE | IDE mit integriertem Sprachmodell und oft Agentenfaehigkeiten. |
|
||||
| Agent | AI-System, das mehrschrittige Aufgaben planen und Werkzeuge bedienen kann. |
|
||||
| Terminal | Befehlsfenster innerhalb oder ausserhalb der IDE. |
|
||||
| Dependency | Externe Bibliothek, die ein Projekt benoetigt. |
|
||||
| Dev Server | Lokaler Server, der eine Web-App waehrend der Entwicklung bereitstellt. |
|
||||
| Revert | Aenderungen auf einen frueheren Zustand zuruecksetzen. |
|
||||
| Prompt | Die Anweisung, die Sie der AI geben. |
|
||||
| Diff | Vergleich zwischen altem und neuem Code. |
|
||||
| Build | Produktions- oder Pruefprozess, der zeigt, ob ein Projekt korrekt gebaut werden kann. |
|
||||
|
||||
## 9. Zusammenfassung
|
||||
|
||||
In diesem Kapitel haben Sie gelernt:
|
||||
|
||||
1. Eine IDE ist mehr als ein Texteditor: Sie organisiert, startet und debuggt Projekte.
|
||||
2. Eine AI IDE erweitert die IDE um Sprachmodell, Kontextverstaendnis und Agentenaktionen.
|
||||
3. Trae kann ein lokales Projekt erstellen, Abhaengigkeiten installieren und ein React-Spiel starten.
|
||||
4. AI funktioniert am besten, wenn Sie Ziele, Grenzen und erwartete Ausgabe konkret beschreiben.
|
||||
5. Einsteiger sollten zuerst lauffaehige Minimalversionen erstellen und danach schrittweise verbessern.
|
||||
|
||||
Der naechste sinnvolle Schritt ist, mit einem sehr kleinen eigenen Projekt zu ueben: ein Timer, eine To-do-Liste, ein Mini-Spiel oder eine persoenliche Seite. Wichtig ist nicht, sofort perfekt zu programmieren, sondern den Kreislauf zu beherrschen: beschreiben, erzeugen lassen, ausfuehren, pruefen, nachfragen und verbessern.
|
||||
|
||||
<RelatedArticles :articles="relatedArticles" />
|
||||
@@ -0,0 +1,275 @@
|
||||
---
|
||||
title: 'Von der Idee zum AI-Produkt - Easy-Vibe Lernpfad'
|
||||
description: 'Vollständiger Lernpfad für AI-Programmierung: Von null bis Full-Stack-Entwicklung. Beherrschen Sie Vibe Coding, Claude Code, Cursor und andere AI IDE-Tools. Lernen Sie Produktdenken, Full-Stack-Entwicklung und AI-Fähigkeitsintegration.'
|
||||
---
|
||||
|
||||
<script setup>
|
||||
import { relatedArticlesMap } from '@theme/data/relatedArticles'
|
||||
|
||||
const relatedArticles = relatedArticlesMap['de-de/stage-1/learning-map'] ?? []
|
||||
</script>
|
||||
|
||||
# Von der Idee zum AI-Produkt
|
||||
|
||||
::: info Besonderer Dank
|
||||
Besonderer Dank an die Studierenden der **Tsinghua Universität Shenzhen International Graduate School** für das Testen, Feedback und die Unterstützung dieses Kurses! Eure Meinungen und Beiträge haben diesen Kurs besser gemacht. [Zur vollständigen Beiträgerliste](https://github.com/datawhalechina/easy-vibe#-contributing--contributors)
|
||||
:::
|
||||
|
||||
Früher war die Hürde für Softwareentwicklung sehr hoch: Man musste Programmierung und Algorithmen verstehen und über Jahre von Projekterfahrung verfügen.
|
||||
Heute ist das anders. Solange Sie eine Idee haben, kann AI Ihnen beim Schreiben von Code helfen.
|
||||
|
||||
Das ist eine gewaltige Veränderung: **Programmiersprachen werden zu natürlichen Sprachen.**
|
||||
|
||||
Mit dem Aufkommen großer Sprachmodelle (LLMs) ist Entwicklung nicht mehr "das exklusive Vorrecht von Tech-Genies", sondern ein Werkzeug, das jeder nutzen kann. Das einst schwierigste Problem war "wie man Code schreibt"; jetzt ist das schwierigste Problem: "**Was willst du erstellen?**".
|
||||
|
||||
> **Was ist Vibe Coding?**
|
||||
> Kurz gesagt: "Programmieren durch Sprechen". Vibe Coding bedeutet, dass Sie sich darauf verlassen können, ausschließlich mit AI zu kommunizieren, anstatt Code direkt zu schreiben, um Programmierprojekte abzuschließen.
|
||||
|
||||
Natürlich ist es nur der erste Schritt, AI Code schreiben zu lassen. Um ein wirklich nutzbares Produkt zu erstellen, werden Sie auf folgende Probleme stoßen:
|
||||
- Wie lässt man AI sauberen, wartbaren Code schreiben?
|
||||
- Wie fügt man zerstreuten Code zu einer lauffähigen Anwendung zusammen?
|
||||
- Wie bringt man die Anwendung wirklich online, damit sie von Menschen genutzt wird?
|
||||
- Wie integriert man AI-Fähigkeiten wie Textgenerierung und Bilderkennung in Ihr Produkt?
|
||||
|
||||
In diesem Kurs finden Sie Antworten auf diese Fragen.
|
||||
|
||||
Egal ob Sie Studierende, Lehrkraft, Arzt, Arbeiter oder eine beliebige Person ohne technisches Vorwissen sind – ohne vorher jahrelang Programmieren gelernt zu haben, können Sie in zwei Wochen einen lauffähigen, demo-fähigen Produktprototyp erstellen.
|
||||
|
||||
| Ihre Identität | Was dieser Kurs Ihnen bietet |
|
||||
|---|---|
|
||||
| Studierende | Hausaufgaben, Wettbewerbe, Gründung: Projekte selbständig umsetzen, ohne andere zu bitten |
|
||||
| Berufstätige | Wiederkehrende Arbeit automatisieren, Effizienz steigern, sogar ein Nebenprojekt entwickeln |
|
||||
| Produktmanager / Designer | Ideen bleiben nicht auf dem Papier; schnell ein Demo für Chef/Kunden erstellen |
|
||||
| Gründer / Kleinunternehmer | Ideen kostengünstig validieren, ohne Tausende für eine Agentur auszugeben |
|
||||
| Lehrkräfte / Pädagogen | Lehrmittel, Kursmaterialien, automatisierte Aufgaben erstellen, Lehr-Effizienz steigern |
|
||||
| Ärzte / Anwälte / Fachkräfte | Professionelle Abläufe automatisieren, eigene Effizienz-Tools entwickeln |
|
||||
| Jeder | AI nutzen, um konkrete Probleme im Leben/Beruf zu lösen, Unmögliches möglich machen |
|
||||
|
||||
In der AI-Ära sind Umsetzungskraft und Ideen stets wichtiger als Technik.
|
||||
|
||||
## Wachstumspfad: Von "AI nutzen können" zu "AI-Produkte erstellen können"
|
||||
|
||||
<div class="stage-intro">
|
||||
<div class="stage-card">
|
||||
<div class="stage-icon">🎮</div>
|
||||
<h3>Neueinsteiger</h3>
|
||||
<p class="stage-role">AI-Programmierung erleben</p>
|
||||
<div class="stage-tags">
|
||||
<span>Snake-Spiel</span>
|
||||
<span>Null-Vorkenntnisse</span>
|
||||
<span>Vibe Coding erleben</span>
|
||||
<span>In Minuten generieren</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stage-grid">
|
||||
<div class="stage-card">
|
||||
<div class="stage-icon">🛠️</div>
|
||||
<h3>Stage 1</h3>
|
||||
<p class="stage-role">Produktmanager / Operations</p>
|
||||
<div class="stage-tags">
|
||||
<span>AI IDE (Cursor/Claude)</span>
|
||||
<span>Anforderungsanalyse & Prototyp</span>
|
||||
<span>AI-Fähigkeiten integrieren</span>
|
||||
<span>Vollständige Demo-Entwicklung</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stage-card">
|
||||
<div class="stage-icon">💻</div>
|
||||
<h3>Stage 2</h3>
|
||||
<p class="stage-role">Junior-/Mid-Level Entwickler</p>
|
||||
<div class="stage-tags">
|
||||
<span>Figma zu Code</span>
|
||||
<span>Supabase Datenbank</span>
|
||||
<span>Stripe-Zahlung</span>
|
||||
<span>Dify Wissensbasis</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stage-card">
|
||||
<div class="stage-icon">🚀</div>
|
||||
<h3>Stage 3</h3>
|
||||
<p class="stage-role">Senior Entwickler / Architekt</p>
|
||||
<div class="stage-tags">
|
||||
<span>Web/Mini-App/Multi-Plattform</span>
|
||||
<span>MCP Advanced Tools</span>
|
||||
<span>RAG & LangGraph</span>
|
||||
<span>Senior Engineer Mindset</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.stage-intro {
|
||||
margin: 20px auto;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.stage-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
|
||||
gap: 12px;
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
.stage-card {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 10px;
|
||||
padding: 12px;
|
||||
background-color: var(--vp-c-bg-soft);
|
||||
transition: all 0.3s ease;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.stage-card:hover {
|
||||
transform: translateY(-2px);
|
||||
background-color: var(--vp-c-bg-mute);
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
|
||||
border-color: var(--vp-c-brand);
|
||||
}
|
||||
|
||||
.stage-icon {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 8px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.stage-card h3 {
|
||||
margin: 0 0 4px 0 !important;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.stage-role {
|
||||
margin: 0 0 8px 0 !important;
|
||||
font-size: 0.8rem;
|
||||
color: var(--vp-c-text-2);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.stage-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.stage-tags span {
|
||||
font-size: 0.7rem;
|
||||
padding: 1px 6px;
|
||||
border-radius: 3px;
|
||||
background-color: var(--vp-c-bg-alt);
|
||||
color: var(--vp-c-text-2);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.stage-card:hover .stage-tags span {
|
||||
background-color: var(--vp-c-bg);
|
||||
border-color: var(--vp-c-brand-dimm);
|
||||
color: var(--vp-c-brand-dark);
|
||||
}
|
||||
</style>
|
||||
|
||||
Durch diesen vollständigen Lernpfad werden Sie erwerben:
|
||||
|
||||
- **Vibe Coding Entwicklungsfähigkeiten:** Vibe Coding Denken und AI-Coding-Tools meisterhaft einsetzen, die Entwicklungseffizienz um ein Vielfaches steigern. Keine Syntax mehr auswendig lernen, sondern lernen, AI zur Generierung hochwertigen Codes zu leiten.
|
||||
- **Full-Stack-Entwicklungs-Know-how:** Von UI-Design über Frontend-Implementierung, von Datenbank-Design bis API-Entwicklung, von lokaler Entwicklung bis Cloud-Deployment – den vollständigen Technologie-Stack moderner Web-Anwendungen beherrschen.
|
||||
- **AI-Fähigkeitsintegration:** Lernen, verschiedene multimodale AI-APIs aufzurufen und AI-Fähigkeiten wie Text, Bild und Sprache nahtlos in Ihre Anwendungen zu integrieren. Durch RAG und andere Technologien intelligente Produkte aufbauen.
|
||||
- **Produktdenken und Operations-Fähigkeiten:** Von Nutzerforschung über Anforderungszerlegung, von MVP-Design bis Produkt-Iteration, von Zahlungsintegration bis Nutzermanagement – einen vollständigen Produktentwicklungs- und Operations-Kreislauf bilden.
|
||||
|
||||
# Was können Sie nach Abschluss tun?
|
||||
|
||||
## Stage 1: Ihren ersten Produktprototyp erstellen
|
||||
|
||||
Diese Phase richtet sich an Personen, die überhaupt keine Programmiererfahrung haben oder nur ein bisschen können, sich aber nicht sicher fühlen. Sie müssen nicht erst eine Menge Theorie lernen, sondern steigen direkt ein und lernen beim Tun, AI-Tools zum Schreiben von Code zu nutzen.
|
||||
|
||||
**Nach Abschluss können Sie:**
|
||||
- Mit AI-Programmier-Tools unabhängig eine Web-Anwendung erstellen
|
||||
- Produktideen in klickbare, interaktive Prototypen umsetzen
|
||||
- Dem Prototypen AI-Funktionen hinzufügen (z.B. Text-to-Image, intelligente Konversation)
|
||||
- Wissen, wie man Fehler diagnostiziert und behebt
|
||||
|
||||
Kurz gesagt: Etwas erstellen, das "läuft und anderen vorgeführt werden kann".
|
||||
|
||||
Wir können zunächst AI-Programmierung durch kleine Spiele erleben, dann lernen, AI-Programmier-Tools beim Schreiben von Code und Beheben von Fehlern zu unterstützen. Danach beginnen wir mit einfachen Seiten und erstellen schrittweise interaktive Multi-Page-Anwendungen, ergänzt um AI-Funktionen wie Text-to-Image und intelligente Konversation. Schließlich schließen Sie unabhängig ein vollständiges Projekt ab, sodass Ihre Ideen echte Umsetzungschancen erhalten.
|
||||
|
||||
# Warum projektbasiertes Training?
|
||||
|
||||
> **Herausforderungen der echten Welt**
|
||||
>
|
||||
> Der Grund ist eigentlich ganz einfach: Im aktuellen Zustand werden die meisten von Ihnen, direkt ins Berufsleben eintretend, bei echten Projekten und unter dem "Druck" von Chefs/Kunden kaum vorankommen. In der echten Welt sind häufigere Szenarien:
|
||||
|
||||
> Ihr Betreuer / Ihr Chef: Wir möchten ein xxx machen, das Ziel ist es, den Effekt yyy zu erreichen.
|
||||
>
|
||||
> Dokumentation? Fertige Frameworks? Detaillierte Anforderungsspezifikationen? Oft existieren diese nicht.
|
||||
|
||||
Viele Aufgaben in der echten Arbeitswelt bestehen im Wesentlichen darin, in einer hochgradig unsicheren Umgebung nie gesehene Probleme zu lösen: Anforderungen sind vage, Grenzen verschieben sich, niemand sagt Ihnen die richtige Antwort. Sie müssen selbst recherchieren, experimentieren, Prototypen erstellen und ständig iterieren, um schließlich eine "laufende, nutzbare, online-fähige" Lösung zu präsentieren.
|
||||
|
||||
Dieser Kurs möchte genau das in einer relativ sicheren Umgebung tun: Ihnen eine "simulierte Herausforderung" im Voraus geben.
|
||||
|
||||
- Durch scheinbar anspruchsvolle Projektaufgaben zwingen wir Sie, Problemlösung, Designentwürfe und selbständige Informationssuche zu üben
|
||||
- Durch nicht "idiotensichere" Gerüste und Code lernen Sie, eine mittelgroße Codebasis zu lesen, zu verstehen und anzupassen
|
||||
- Durch den vollständigen Kreislauf von der Idee bis zum Launch erleben Sie den kompletten Prozess von 0 auf 1 eines echten Produkts
|
||||
|
||||
Kurzfristig ist dieses Training anspruchsvoll; langfristig wird es Ihre Wettbewerbsfähigkeit bei der Jobsuche und Karriereentwicklung erheblich steigern: Sie können mehr verantworten, in unsicheren Umgebungen eher Durchbrüche finden und AI eher in echte Produkte umsetzen, statt bei "Demo spielen" stehen zu bleiben.
|
||||
|
||||
# Die Kunst des Fragens: Eine unerlässliche Fähigkeit in der AI-Ära
|
||||
|
||||
In der AI-Ära gehört auch das Fragen zu den "Grundlagen". Bei gleichem Code und gleichem Fehler: **Wie Sie fragen, bestimmt fast, welche Antwort AI geben kann** – ob oberflächlich oder Schritt für Schritt mit umsetzbaren Lösungen.
|
||||
|
||||
**Gute Gewohnheit entwickeln:** "AI fragen" als Teil des täglichen Entwicklungs-Workflows betrachten: Bei jeder Frage, bei der Sie nicht weiterkommen, sofort fragen.
|
||||
|
||||
## Warum ist diese Fähigkeit unerlässlich?
|
||||
|
||||
- **Echte Dokumentation ist selten:** Meistens stehen Sie vor unklaren Anforderungen, unfertigem Code und verstreuten Fehlermeldungen
|
||||
- **AI ist Ihr always-on Mentor + Kollege:** Wer gut fragen kann, macht daraus "hochwertige Pair-Programming"-Sessions
|
||||
- **Das Leistungslimit wird durch Kommunikation bestimmt:** Je mehr Schlüsselinformationen Sie liefern und je besser Sie das Ausgabeformat steuern, desto nutzbarer die Antworten
|
||||
|
||||
**Häufiger Fehler:** Nur "Warum gibt es einen Fehler?" zu fragen, bringt meist nur Spekulationen. Wenn Sie den Kontext vervollständigen, erhalten Sie umsetzbare Lösungen.
|
||||
|
||||
## Wie man AI Informationen "zuführt": Screenshot vs. Copy & Paste
|
||||
|
||||
Beide Methoden funktionieren, aber für unterschiedliche Zwecke:
|
||||
|
||||
| Methode | Geeignetes Szenario | Wichtige Anforderungen |
|
||||
| --- | --- | --- |
|
||||
| **Copy & Paste** | Fehler-Stacktraces, Logs, Code, Konfiguration, API-Antworten | Möglichst vollständig, nicht nur eine Zeile mit Schlüsselwörtern |
|
||||
| **Screenshot** | UI-Layout-Probleme, Interaktionsanomalien, Tool-Interface wo man Buttons nicht findet | Vollbild + wichtige Bereiche markieren, am besten mit einem Satz Textbeschreibung |
|
||||
|
||||
::: danger Wichtige Voraussetzung
|
||||
**Nicht alle AI-Modelle unterstützen Bildeingabe.** Screenshot-Kommunikation erfordert multimodale AI-Fähigkeiten. Aktuell unterstützen Claude (Anthropic), GPT-4V/GPT-4o (OpenAI), Gemini (Google) sowie einige nationale große Modelle wie Qwen, Wenxin Yiyan etc. Bildeingabe.
|
||||
|
||||
**Wenn Ihre AI keine Bildeingabe unterstützt**, können Screenshots nicht erkannt werden. Bitte verwenden Sie in diesem Fall Copy & Paste zur Kommunikation.
|
||||
:::
|
||||
|
||||
## Prompt-Techniken, mit denen AI "gut und erklärend" antwortet
|
||||
|
||||
Wenn Sie nicht nur die Antwort, sondern auch "die Antwort verstehen" wollen. Verwenden Sie ähnliche Anweisungen, die die Erklärungsqualität deutlich verbessern:
|
||||
|
||||
> **Lern-Frage-Beispiele**
|
||||
>
|
||||
> - "Bitte erkläre dieses Konzept zunächst in 5 Sätzen, und gib mir dann einige Fragen, um zu prüfen, ob ich es richtig verstanden habe."
|
||||
> - "Bitte erkläre diese Fehlermeldung im Detail; ich verstehe nicht, warum dieser Fehler auftritt."
|
||||
|
||||
# Ich habe lange durchgehalten, aber es klappt nicht. Ich möchte aufgeben
|
||||
|
||||
Vielleicht ist Ihre Methode falsch. Kämpfen Sie nicht allein im Dunkeln. Sprechen Sie mit den Autoren und Tutoren: Teilen Sie ehrlich, was Sie bereits versucht haben, wo genau Sie feststecken und wie Ihr aktueller Gemütszustand ist. Oft reicht eine kleine Richtungsänderung oder das Auffüllen eines fehlenden Schlüsselwissens, um weiterzumachen.
|
||||
|
||||
# Ich finde einige Tutorial-Designs unangemessen
|
||||
|
||||
Feedback ist jederzeit willkommen – kontaktieren Sie die Autoren, reichen Sie ein Issue ein oder geben Sie direkt in der Gruppe/im Unterricht Feedback. Wir hoffen sehr, dieses Tutorial gemeinsam mit Ihnen immer besser zu machen: Was unklar ist, was schlecht erlebbar ist, wo Sie Zeit verschwendet haben – alles kann offen kritisiert werden. Je authentischer und konkreter das Feedback, desto mehr hilft es späteren Lernenden, Fehler zu vermeiden.
|
||||
|
||||
# Referenzen
|
||||
|
||||
- [Nanjing Universität, Informatik-Fakultät, Computer System Grundlagen Kurspraktikum](https://nju-projectn.github.io/ics-pa-gitbook/ics2025/)
|
||||
|
||||
<RelatedArticlesSection
|
||||
title="Was Sie als Nächstes lernen können"
|
||||
description="Folgen Sie dem Pfad 'von AI nutzen zu Produkterstellung' und gehen Sie weiter."
|
||||
:items="relatedArticles"
|
||||
/>
|
||||
Reference in New Issue
Block a user