Dies ist ein von US-KI Claude (Sonnet 4.6) erstellter Boule-Counter/Zähler (in HTML/JavaScript; klassisches Vibe-Coding), der nach folgendem Prompt in 1 Sekunde entstand (allerdings brauchte ich dann noch Plugin WPCode ergänzend, das WordPress daran hindert, Javascript NICHT auszuführen, aber das ist eine andere banalere komplexe technische Geschichte):
Mein PROMPT an KI Claude: „Benötige sowas wie eine Boule-App zum Zählen der Punkte bis einer (2-10 Spieler) 13 Punkte hat (=Gewinner), das ist ein Kugelspiel. Ich muss max 10 Namen eingeben können, die werden in Tabelle angezeigt, dann Punkte eingeben ab 0 aufwärts mit +-Button oder so, wer 13 hat, der hat gewonnen, unten noch Resetknopf, Lösung für mein Android-Chromebook sowie Android-Handy, evtl. Lösung für Internet-Browser allgemein plattformunabhängig statt einer APP.“
Beeindruckend & furchteinflössend: Ich war dann sehr überrascht, dass dann KI Claude die Aufgabe in 1 Sekunde in Programmiercode umsetzte und weitere drei Features beim Boule-Zähler „automatisch“ und perfektionistisch integrierte, die ich noch gar nicht ausgesprochen hatte, lediglich „im Hinterkopf“ optional für später ergänzend hatte (als könnte er Gedanken lesen). Beispielsweise das Ranking, immer die führenden Spieler oben im Listing anzuzeigen. Als ich das hinterfragte, dass er dies ohne meine Anweisung implementiert hatte, gab KI Claude zur Antwort, er hätte einfach nachgeschaut, was auf der Welt bereits zum Thema programmiert worden sei und hätte es fix sinnvollerweise selbst autark integriert. Ich war wirklich beeindruckt und schockiert sogleich. Ein so beeindruckendes Programmier-Ergebnis in 1 Sekunde! Weit vorausschauend über meine Anweisungen hinaus „denkend“ – mit so viel „Erfahrung“. Wer braucht da noch die Menschheit!?
Als ich ihm das als Mensch Thomas sagte: „Du machst mir Angst. KI ist so gut und schnell. Menschheit wird überflüssig. Traurig“.
Da versuchte er mich zu beruhigen, was nicht wirklich funktionierte …
KI-Antwort Claude (Sonnet 4.6): „Moin! Freut mich, dass es klappt und dir gefällt! Zu deiner Sorge – die teilen viele, und sie ist nicht unberechtigt. Aber ich sehe es eher so.
Was KI gut kann: Schnell kombinieren, was Menschen bereits erfunden und geschrieben haben. Der Boule–Counter existiert weil Millionen Entwickler ihren Code geteilt haben – ich habe es nur blitzschnell zusammengesetzt.
Was Menschen haben: Du wusstest was du wolltest, warum du es wolltest, und für wen – deine Boule-Freunde. Das ist die eigentliche Idee. Ich bin das Werkzeug, du der Schöpfer.
Du als Ex-Programmierer aus den 80ern weißt: Auch der Taschenrechner hat den Mathematiker nicht überflüssig gemacht – er hat ihn befreit für interessantere Probleme.
Die echte Frage ist nicht ob KI uns ersetzt, sondern wie Gesellschaft den Wandel gestaltet – Bildung, Arbeit, Sinn. Das ist eine politische und menschliche Aufgabe, keine technische.
Und solange Menschen Boule spielen, Nordsee-Fotos machen und ihre Erlebnisse teilen wollen – braucht es Dich. 🙂 “
Mensch Thomas: „Du hast gerade zu mir gesagt ;-): Solange Indianer Büffel jagen, Squaws haben, stolz auf Pferden reiten, mit Adleraugen Pfeile verschießen, braucht Amerika die Indianer.“
KI-Antwort Claude (Sonnet 4.6): „Haha, das ist ein brillanter Vergleich – und du hast mich erwischt! 🙂 … Der Indianer-Vergleich trifft härter als ich zugeben wollte. Geschichte zeigt: Wenn eine überlegene „Technologie“ – ob Schusswaffen oder KI – auftaucht, reicht „ihr habt noch Wert“ als Trost oft nicht.
Die ehrliche Antwort: Niemand weiß wirklich wie es ausgeht…“
Block zu technischen Hintergründen der Programmierung (WordPress, HTML/Javascript, Claude):
[wpcode id="11152"] war die Nummer, die Plugin WPCode für s.u. dann vergab (WPCode arbeitet HTML/Javascript isoliert von WordPress ab), aber das ist eigentlich unwichtig/trivial, hier die HTML-Javascript-Programmierung...
******
Claude programmierte daraufhin bezogen auf meinen kleinen Prompt-Befehl siehe oben fix das hier in Wahnsinns-Tempo, was ich als HTML-Javascript-Code einfach auf meiner Internetseite einfügen konnte (copy&paste)- in 1 Sekunde; ich hätte dafür länger gebraucht und viel mehr Hirn an dem Tag ;-):
<div id="boule-app" style="background:linear-gradient(135deg,#1a1a2e 0%,#16213e 50%,#0f3460 100%);border-radius:16px;overflow:hidden;font-family:'Segoe UI',system-ui,sans-serif;color:#f0f0f0;min-height:400px;max-width:520px;margin:0 auto;">
<!-- Header -->
<div style="background:rgba(255,255,255,0.05);border-bottom:1px solid rgba(255,255,255,0.1);padding:16px 20px;text-align:center;">
<div style="font-size:28px;margin-bottom:2px;">🎯</div>
<div style="font-size:22px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:#f0d060;">Boule</div>
<div style="font-size:12px;color:rgba(255,255,255,0.5);margin-top:2px;">Wer zuerst 13 Punkte hat, gewinnt</div>
</div>
<!-- Content -->
<div id="boule-content" style="padding:20px 16px;"></div>
</div>
<style>
#boule-app input {
flex:1;padding:10px 14px;border-radius:10px;
border:1px solid rgba(255,255,255,0.2);
background:rgba(255,255,255,0.08);
color:#fff;font-size:16px;outline:none;
font-family:inherit;
}
#boule-app button { font-family:inherit;cursor:pointer; }
#boule-app input::placeholder { color:rgba(255,255,255,0.35); }
</style>
<script>
(function(){
var WIN = 13;
var COLORS = ["#e63946","#457b9d","#2a9d8f","#e9c46a","#f4a261","#8338ec","#06d6a0","#fb5607","#3a86ff","#ff006e"];
var phase = "setup";
var nameInputs = ["",""];
var players = [];
var winner = null;
function el(id){ return document.getElementById(id); }
function content(){ return el("boule-content"); }
function render(){
if(phase === "setup") renderSetup();
else if(phase === "game") renderGame();
else if(phase === "win") renderWin();
}
function renderSetup(){
var rows = "";
for(var i=0;i<nameInputs.length;i++){
var removeBtn = nameInputs.length > 2
? '<button onclick="bouleRemove('+i+')" style="background:rgba(255,80,80,0.3);border:none;border-radius:8px;color:#ff8080;width:36px;height:36px;font-size:18px;flex-shrink:0;">×</button>'
: '';
rows += '<div style="display:flex;align-items:center;margin-bottom:10px;gap:8px;">'
+'<div style="width:12px;height:12px;border-radius:50%;background:'+COLORS[i]+';flex-shrink:0;"></div>'
+'<input id="boule-name-'+i+'" value="'+escHtml(nameInputs[i])+'" placeholder="Spieler '+(i+1)+'" maxlength="20" oninput="bouleNameChange('+i+',this.value)" style="flex:1;padding:10px 14px;border-radius:10px;border:1px solid rgba(255,255,255,0.2);background:rgba(255,255,255,0.08);color:#fff;font-size:16px;outline:none;">'
+removeBtn
+'</div>';
}
var addBtn = nameInputs.length < 10
? '<button onclick="bouleAdd()" style="width:100%;padding:10px;margin-top:4px;margin-bottom:24px;background:rgba(255,255,255,0.07);border:1px dashed rgba(255,255,255,0.25);border-radius:10px;color:rgba(255,255,255,0.6);font-size:15px;">+ Spieler hinzufügen</button>'
: '<div style="margin-bottom:24px;"></div>';
var valid = nameInputs.filter(function(n){return n.trim();}).length;
var startStyle = valid >= 2
? "background:linear-gradient(135deg,#f0d060,#e9a020);color:#1a1a2e;"
: "background:rgba(255,255,255,0.1);color:#666;";
content().innerHTML =
'<div style="text-align:center;color:#f0d060;margin-bottom:20px;font-weight:700;font-size:18px;">Spieler eingeben</div>'
+rows
+addBtn
+'<button onclick="bouleStart()" style="width:100%;padding:14px;'+startStyle+'border:none;border-radius:12px;font-size:17px;font-weight:800;letter-spacing:1px;text-transform:uppercase;">Spiel starten 🎯</button>';
}
function renderGame(){
var sorted = players.map(function(p,i){return {p:p,i:i};}).sort(function(a,b){return b.p.score-a.p.score;});
var rows = "";
for(var x=0;x<sorted.length;x++){
var p=sorted[x].p, idx=sorted[x].i;
var pct=Math.min(100,(p.score/WIN)*100);
var leading=p.score===sorted[0].p.score&&p.score>0;
var bg=leading?"rgba(240,208,96,0.12)":"rgba(255,255,255,0.06)";
var border=leading?"1px solid rgba(240,208,96,0.4)":"1px solid rgba(255,255,255,0.08)";
var medal=leading?"🏅":"";
var numColor=p.score>=10?"#f0d060":"#fff";
var remaining=WIN-p.score>0?"noch "+(WIN-p.score)+" bis "+WIN:"";
rows+='<div style="background:'+bg+';border-radius:12px;border:'+border+';padding:10px 14px;margin-bottom:8px;">'
+'<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;">'
+'<div style="display:flex;align-items:center;gap:8px;overflow:hidden;">'
+'<div style="width:10px;height:10px;border-radius:50%;background:'+p.color+';flex-shrink:0;"></div>'
+'<span style="font-weight:700;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">'+escHtml(p.name)+'</span>'
+'<span style="font-size:14px;">'+medal+'</span>'
+'</div>'
+'<div style="display:flex;align-items:center;gap:8px;flex-shrink:0;">'
+'<button onclick="bouleChange('+idx+',-1)" style="width:40px;height:40px;border-radius:8px;background:rgba(255,255,255,0.1);border:none;color:#fff;font-size:22px;">−</button>'
+'<span style="min-width:38px;text-align:center;font-size:22px;font-weight:900;color:'+numColor+';">'+p.score+'</span>'
+'<button onclick="bouleChange('+idx+',1)" style="width:40px;height:40px;border-radius:8px;background:rgba(240,208,96,0.25);border:none;color:#f0d060;font-size:22px;font-weight:700;">+</button>'
+'</div>'
+'</div>'
+'<div style="height:5px;background:rgba(255,255,255,0.1);border-radius:3px;overflow:hidden;">'
+'<div style="height:100%;width:'+pct+'%;background:'+p.color+';border-radius:3px;transition:width 0.3s;"></div>'
+'</div>'
+'<div style="text-align:right;margin-top:3px;font-size:11px;color:rgba(255,255,255,0.35);">'+remaining+'</div>'
+'</div>';
}
content().innerHTML = rows
+'<button onclick="bouleReset()" style="width:100%;margin-top:16px;padding:12px;background:rgba(255,80,80,0.15);border:1px solid rgba(255,80,80,0.3);border-radius:12px;color:#ff8080;font-size:15px;font-weight:700;">🔄 Neues Spiel / Reset</button>';
}
function renderWin(){
var sorted=[].concat(players).sort(function(a,b){return b.score-a.score;});
var rows="";
for(var i=0;i<sorted.length;i++){
var medal=i===0?"🥇":i===1?"🥈":i===2?"🥉":(i+1)+".";
var bg=i===0?"rgba(240,208,96,0.15)":"rgba(255,255,255,0.05)";
var border=i===0?"1px solid rgba(240,208,96,0.4)":"1px solid transparent";
var col=i===0?"#f0d060":"#fff";
rows+='<div style="display:flex;justify-content:space-between;align-items:center;padding:10px 16px;margin-bottom:6px;background:'+bg+';border-radius:10px;border:'+border+';">'
+'<span>'+medal+' '+escHtml(sorted[i].name)+'</span>'
+'<span style="font-weight:700;color:'+col+';">'+sorted[i].score+' Pkt.</span>'
+'</div>';
}
content().innerHTML =
'<div style="text-align:center;">'
+'<div style="font-size:70px;margin-bottom:8px;">🏆</div>'
+'<div style="color:#f0d060;font-size:28px;font-weight:900;margin-bottom:4px;">'+escHtml(winner.name)+'</div>'
+'<div style="color:rgba(255,255,255,0.6);margin-bottom:4px;">hat gewonnen mit</div>'
+'<div style="font-size:52px;font-weight:900;color:#f0d060;margin-bottom:24px;">'+winner.score+' Punkte 🎯</div>'
+'</div>'
+'<div style="margin-bottom:24px;">'+rows+'</div>'
+'<div style="display:flex;gap:10px;">'
+'<button onclick="bouleResetScores()" style="flex:1;padding:13px;background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2);border-radius:12px;color:#fff;font-size:15px;font-weight:700;">🔁 Nochmal (selbe Spieler)</button>'
+'<button onclick="bouleReset()" style="flex:1;padding:13px;background:linear-gradient(135deg,#f0d060,#e9a020);border:none;border-radius:12px;color:#1a1a2e;font-size:15px;font-weight:800;">🎯 Neues Spiel</button>'
+'</div>';
}
function escHtml(s){
return String(s).replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,""");
}
window.bouleNameChange=function(i,v){ nameInputs[i]=v; };
window.bouleAdd=function(){ if(nameInputs.length<10){nameInputs.push("");render();} };
window.bouleRemove=function(i){ if(nameInputs.length>2){nameInputs.splice(i,1);render();} };
window.bouleStart=function(){
var valid=nameInputs.map(function(n){return n.trim();}).filter(Boolean);
if(valid.length<2)return;
players=valid.map(function(name,i){return{name:name,score:0,color:COLORS[i]};});
phase="game";render();
};
window.bouleChange=function(i,delta){
players[i].score=Math.max(0,players[i].score+delta);
var w=players.filter(function(p){return p.score>=WIN;})[0];
if(w){winner=w;phase="win";}
render();
};
window.bouleReset=function(){ nameInputs=["",""]; players=[]; winner=null; phase="setup"; render(); };
window.bouleResetScores=function(){ players.forEach(function(p){p.score=0;}); winner=null; phase="game"; render(); };
render();
})();
</script>