KI
Künstliche Intelligenz
Ein Computer-Programm, das gelernt hat, Dinge zu erkennen — fast wie ein Mensch. Es kann lesen, schreiben, Bilder anschauen und antworten.
Ideen-Labor · 2026
Wie ich meine Edelstein-Website gebaut habe
Eine Reise vom ersten Gedanken bis zur fertigen Website im Internet — mit KI als Werkzeug und Lego-artigen Bausteinen aus Code.
Von Olivier Bednarczyk · Klasse 5
Wie ich vorgegangen bin
Schritt für Schritt — von der Idee bis online
- Schritt 01
Die Idee
Ich wollte eine Website bauen, auf der man Edelsteine per Foto erkennen kann. Sechs Steine, die ich mag — Amethyst, Pyrit, Lapis Lazuli, Rosenquarz, Halit, Chrysopras.
- Schritt 02
Plan + Werkzeuge
Erst überlegt was die Website können soll. Dann ausgewählt: Welche Sprache schreibt der Code (TypeScript), welcher Baukasten (Next.js), wie sieht es aus (Tailwind).
- Schritt 03
Code mit KI-Hilfe
Mit der KI Claude habe ich Stück für Stück die Website geschrieben. Ich erkläre, was ich will — die KI schreibt den Code. Ich teste — und wir verbessern zusammen.
- Schritt 04
Online stellen
Die Website muss auf einem Computer im Internet leben, damit jeder sie besuchen kann. Dafür habe ich Vercel benutzt — und eine eigene Adresse gekauft: olivierbednarczyk.com.
- Schritt 05
KI zum Erkennen
Damit die Website Steine erkennt, ist sie mit Claude verbunden. Wenn jemand ein Foto hochlädt, schaut die KI sich das Bild an und sagt, welcher Stein das ist.
- Schritt 06
Testen + Verbessern
Erste Tests: Pyrit nicht erkannt. Also den Anweisungstext für die KI verbessert. Wieder testen. Schritt für Schritt wird die Website schlauer.
Was habe ich gelernt
Sechs Begriffe — einfach erklärt
Modell
Das Gehirn der KI
Das Modell ist das Gehirn der KI. Es hat Millionen Bilder und Texte gesehen und kann jetzt erkennen, was es sieht. Wir benutzen Claude Sonnet.
Hosting
Wo die Website wohnt
Ein starker Computer im Internet, der meine Website Tag und Nacht für alle bereitstellt. Wir nutzen Vercel — das ist wie eine Wohnung für meine Website.
Domain
Die Adresse der Website
Eine einfache Adresse wie olivierbednarczyk.com. Statt einer langen Zahlen-Adresse merken sich Menschen einen Namen. Gekauft habe ich sie bei Namecheap.
Git
Notizbuch für Code
Git speichert jede Änderung am Code. Ich kann jederzeit zurückgehen, wenn etwas kaputt geht — wie eine Zeitmaschine für mein Projekt.
Komponenten
Bausteine im Code
Komponenten sind wie Lego-Steine. Ich baue kleine Stücke (einen Knopf, eine Karte, ein Foto) und setze sie zu einer ganzen Website zusammen.
So funktioniert die Website
Was passiert wenn jemand ein Foto hochlädt?
Browser
Du + Foto
Domain
olivierbednarczyk.com
Hosting
Vercel + Code
KI
Claude erkennt Stein
← Antwort zurück: "Das ist Amethyst"
Wenn du auf olivierbednarczyk.com gehst, fragt dein Browser die Domain nach der richtigen Adresse. Die Adresse zeigt auf Vercel, wo mein Code wohnt. Wenn du ein Foto hochlädst, schickt mein Code es weiter an Claude — und Claude antwortet, welcher Edelstein das ist.
Womit gebaut
Acht Werkzeuge — wie ein Werkzeugkasten
Next.js
Baukasten
TypeScript
Sprache
Tailwind
Aussehen
Vercel
Hosting
Claude
KI
GitHub
Code-Speicher
Namecheap
Domain
Framer Motion
Animationen
In Zahlen
Das Projekt auf einen Blick
6
Edelsteine zum Erkennen
13
Seiten gebaut
2
KI-Stufen verbunden
1
Eigene Domain
Fazit
Was nehme ich mit?
- Mit KI als Partner kann ich Dinge bauen, die früher nur Erwachsene konnten.
- Eine Website besteht aus vielen kleinen Teilen — Code, Hosting, Domain, KI. Jeder Teil hat eine Aufgabe.
- Testen + verbessern ist normal. Wenn etwas nicht klappt, fragt man nach warum und ändert es.
- Wer eine Idee hat, kann sie heute selbst bauen. Ohne darauf zu warten, dass jemand anders es macht.