Spaces:
Running
Running
| <html lang="de"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AI-Berater & Vibe-Coding Guide 2025</title> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script> | |
| <style> | |
| *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} | |
| :root{ | |
| --bg:#0a0a0f;--bg2:#12121a;--bg3:#1a1a28;--bg4:#222236; | |
| --text:#e8e8f0;--text2:#a0a0b8;--text3:#6a6a82; | |
| --accent:#6c5ce7;--accent2:#a29bfe;--accent3:#4ecdc4; | |
| --green:#00b894;--yellow:#fdcb6e;--red:#e17055;--orange:#f39c12; | |
| --pink:#fd79a8;--blue:#0984e3; | |
| --radius:12px;--radius-sm:8px;--radius-lg:20px; | |
| --shadow:0 8px 32px rgba(0,0,0,.4); | |
| --glass:rgba(255,255,255,.04); | |
| } | |
| html{scroll-behavior:smooth;font-size:16px} | |
| body{font-family:'Inter',system-ui,sans-serif;background:var(--bg);color:var(--text);line-height:1.7;overflow-x:hidden} | |
| a{color:var(--accent2);text-decoration:none;transition:color .2s} | |
| a:hover{color:var(--accent3)} | |
| code,.mono{font-family:'JetBrains Mono',monospace} | |
| /* Scrollbar */ | |
| ::-webkit-scrollbar{width:6px} | |
| ::-webkit-scrollbar-track{background:var(--bg2)} | |
| ::-webkit-scrollbar-thumb{background:var(--accent);border-radius:3px} | |
| /* Header */ | |
| .header{position:fixed;top:0;left:0;right:0;z-index:1000;background:rgba(10,10,15,.85);backdrop-filter:blur(20px);border-bottom:1px solid rgba(108,92,231,.15)} | |
| .header-inner{max-width:1400px;margin:0 auto;padding:.75rem 1.5rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap} | |
| .logo{display:flex;align-items:center;gap:.6rem;font-weight:800;font-size:1.25rem;color:var(--text)} | |
| .logo i{color:var(--accent);font-size:1.5rem} | |
| .logo span{background:linear-gradient(135deg,var(--accent),var(--accent3));-webkit-background-clip:text;-webkit-text-fill-color:transparent} | |
| .built-with{font-size:.7rem;color:var(--text3);padding:.2rem .6rem;border:1px solid var(--bg4);border-radius:20px;transition:all .3s} | |
| .built-with:hover{border-color:var(--accent);color:var(--accent2)} | |
| /* Nav */ | |
| .nav{display:flex;gap:.25rem;flex-wrap:wrap} | |
| .nav-btn{padding:.5rem 1rem;border:none;background:transparent;color:var(--text2);font-size:.8rem;font-weight:500;border-radius:var(--radius-sm);cursor:pointer;transition:all .25s;font-family:inherit;white-space:nowrap} | |
| .nav-btn:hover{background:var(--glass);color:var(--text)} | |
| .nav-btn.active{background:var(--accent);color:#fff} | |
| /* Main */ | |
| .main{margin-top:70px;padding:1.5rem;max-width:1400px;margin-left:auto;margin-right:auto} | |
| .section{display:none;animation:fadeUp .4s ease} | |
| .section.active{display:block} | |
| @keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}} | |
| /* Hero */ | |
| .hero{text-align:center;padding:3rem 1rem 2rem;position:relative} | |
| .hero::before{content:'';position:absolute;top:-50%;left:50%;transform:translateX(-50%);width:600px;height:600px;background:radial-gradient(circle,rgba(108,92,231,.12),transparent 70%);pointer-events:none} | |
| .hero h1{font-size:clamp(2rem,5vw,3.5rem);font-weight:900;line-height:1.15;margin-bottom:1rem} | |
| .hero h1 .grad{background:linear-gradient(135deg,var(--accent),var(--accent3),var(--pink));-webkit-background-clip:text;-webkit-text-fill-color:transparent} | |
| .hero p{color:var(--text2);font-size:1.1rem;max-width:700px;margin:0 auto 1.5rem} | |
| .hero-badge{display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .9rem;background:var(--glass);border:1px solid rgba(108,92,231,.3);border-radius:20px;font-size:.75rem;color:var(--accent2);margin-bottom:1.5rem} | |
| /* Cards */ | |
| .card{background:var(--bg2);border:1px solid var(--bg4);border-radius:var(--radius);padding:1.5rem;transition:all .3s} | |
| .card:hover{border-color:rgba(108,92,231,.3);transform:translateY(-2px);box-shadow:var(--shadow)} | |
| .card-glass{background:var(--glass);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.06)} | |
| /* Grid */ | |
| .grid{display:grid;gap:1.25rem} | |
| .grid-2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))} | |
| .grid-3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))} | |
| .grid-4{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))} | |
| /* Section Titles */ | |
| .stitle{font-size:1.5rem;font-weight:800;margin-bottom:.5rem;display:flex;align-items:center;gap:.6rem} | |
| .stitle i{color:var(--accent);font-size:1.2rem} | |
| .sdesc{color:var(--text2);font-size:.9rem;margin-bottom:1.5rem} | |
| /* Comparison Table */ | |
| .table-wrap{overflow-x:auto;border-radius:var(--radius);border:1px solid var(--bg4)} | |
| table{width:100%;border-collapse:collapse;min-width:1100px;font-size:.82rem} | |
| thead{background:var(--bg3)} | |
| th{padding:.75rem .6rem;text-align:left;font-weight:600;color:var(--accent2);white-space:nowrap;border-bottom:2px solid var(--accent);font-size:.75rem;text-transform:uppercase;letter-spacing:.5px} | |
| td{padding:.7rem .6rem;border-bottom:1px solid var(--bg4);vertical-align:middle} | |
| tbody tr{transition:background .2s} | |
| tbody tr:hover{background:rgba(108,92,231,.06)} | |
| .badge{display:inline-flex;align-items:center;gap:.3rem;padding:.2rem .6rem;border-radius:20px;font-size:.7rem;font-weight:600;white-space:nowrap} | |
| .badge-free{background:rgba(0,184,148,.15);color:var(--green)} | |
| .badge-paid{background:rgba(108,92,231,.15);color:var(--accent2)} | |
| .badge-freemium{background:rgba(253,203,110,.15);color:var(--yellow)} | |
| .badge-best{background:rgba(108,92,231,.2);color:var(--accent2);border:1px solid var(--accent)} | |
| .stars{color:var(--yellow);font-size:.7rem;letter-spacing:1px} | |
| .price{font-weight:700;color:var(--green);font-size:.9rem} | |
| .price-note{font-size:.65rem;color:var(--text3);display:block} | |
| .tag{display:inline-block;padding:.15rem .45rem;background:var(--bg4);border-radius:4px;font-size:.65rem;margin:.1rem;color:var(--text2)} | |
| .recommend{background:rgba(0,184,148,.08);border-color:rgba(0,184,148,.3)} | |
| .recommend td:first-child{box-shadow:inset 3px 0 0 var(--green)} | |
| /* Advisor */ | |
| .advisor-form{display:grid;gap:1rem;max-width:700px} | |
| .form-group{display:flex;flex-direction:column;gap:.4rem} | |
| .form-group label{font-size:.8rem;font-weight:600;color:var(--text2)} | |
| .form-group select,.form-group input{padding:.6rem .8rem;background:var(--bg3);border:1px solid var(--bg4);border-radius:var(--radius-sm);color:var(--text);font-family:inherit;font-size:.85rem;transition:border-color .2s} | |
| .form-group select:focus,.form-group input:focus{outline:none;border-color:var(--accent)} | |
| .btn{padding:.7rem 1.5rem;border:none;border-radius:var(--radius-sm);font-family:inherit;font-weight:600;cursor:pointer;transition:all .25s;font-size:.85rem;display:inline-flex;align-items:center;gap:.5rem} | |
| .btn-primary{background:linear-gradient(135deg,var(--accent),#8b5cf6);color:#fff} | |
| .btn-primary:hover{transform:translateY(-1px);box-shadow:0 4px 20px rgba(108,92,231,.4)} | |
| .btn-secondary{background:var(--bg3);color:var(--text);border:1px solid var(--bg4)} | |
| .btn-secondary:hover{border-color:var(--accent)} | |
| .result-card{border-left:3px solid var(--accent);padding:1.25rem;background:var(--bg2);border-radius:0 var(--radius) var(--radius) 0;margin-top:.5rem} | |
| .result-card h4{font-size:1rem;margin-bottom:.4rem} | |
| .result-card p{font-size:.85rem;color:var(--text2);line-height:1.6} | |
| /* Blog */ | |
| .blog{max-width:800px} | |
| .blog h2{font-size:1.6rem;font-weight:800;margin:2rem 0 .8rem;color:var(--text);scroll-margin-top:80px} | |
| .blog h3{font-size:1.2rem;font-weight:700;margin:1.5rem 0 .5rem;color:var(--accent2)} | |
| .blog p{color:var(--text2);margin-bottom:1rem;font-size:.92rem;line-height:1.8} | |
| .blog ul{color:var(--text2);margin:0 0 1rem 1.5rem;font-size:.9rem} | |
| .blog li{margin-bottom:.4rem} | |
| .blog blockquote{border-left:3px solid var(--accent);padding:.8rem 1.2rem;margin:1.2rem 0;background:var(--glass);border-radius:0 var(--radius-sm) var(--radius-sm) 0;font-style:italic;color:var(--text2)} | |
| .blog .toc{background:var(--bg2);border:1px solid var(--bg4);border-radius:var(--radius);padding:1.25rem;margin-bottom:2rem} | |
| .blog .toc h4{font-size:.9rem;margin-bottom:.6rem;color:var(--accent2)} | |
| .blog .toc a{display:block;padding:.2rem 0;font-size:.82rem;color:var(--text2)} | |
| .blog .toc a:hover{color:var(--accent2)} | |
| .blog .info-box{background:rgba(108,92,231,.08);border:1px solid rgba(108,92,231,.2);border-radius:var(--radius-sm);padding:1rem;margin:1rem 0;font-size:.85rem;color:var(--text2)} | |
| .blog .source{font-size:.7rem;color:var(--text3);margin-top:.3rem;display:flex;align-items:center;gap:.3rem} | |
| /* Quiz */ | |
| .quiz-container{max-width:750px} | |
| .quiz-progress{height:4px;background:var(--bg4);border-radius:2px;margin-bottom:1.5rem;overflow:hidden} | |
| .quiz-progress-bar{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent3));border-radius:2px;transition:width .4s ease} | |
| .quiz-q{font-size:1.1rem;font-weight:700;margin-bottom:1rem} | |
| .quiz-options{display:grid;gap:.6rem} | |
| .quiz-opt{padding:.8rem 1rem;background:var(--bg2);border:2px solid var(--bg4);border-radius:var(--radius-sm);cursor:pointer;transition:all .25s;font-size:.85rem;display:flex;align-items:center;gap:.7rem} | |
| .quiz-opt:hover{border-color:var(--accent);background:rgba(108,92,231,.06)} | |
| .quiz-opt.selected{border-color:var(--accent);background:rgba(108,92,231,.12)} | |
| .quiz-opt.correct{border-color:var(--green);background:rgba(0,184,148,.1)} | |
| .quiz-opt.wrong{border-color:var(--red);background:rgba(225,112,85,.1)} | |
| .quiz-opt .letter{width:28px;height:28px;border-radius:50%;background:var(--bg4);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.75rem;flex-shrink:0} | |
| .quiz-result{background:var(--bg2);border:1px solid var(--bg4);border-radius:var(--radius);padding:2rem;text-align:center} | |
| .quiz-score{font-size:3rem;font-weight:900;background:linear-gradient(135deg,var(--accent),var(--accent3));-webkit-background-clip:text;-webkit-text-fill-color:transparent} | |
| /* Charts */ | |
| .chart-container{background:var(--bg2);border:1px solid var(--bg4);border-radius:var(--radius);padding:1.25rem;position:relative} | |
| .chart-container canvas{max-height:350px} | |
| .chart-title{font-size:.85rem;font-weight:600;margin-bottom:.75rem;color:var(--text2)} | |
| /* Stats */ | |
| .stat-card{text-align:center;padding:1.5rem;background:var(--bg2);border:1px solid var(--bg4);border-radius:var(--radius)} | |
| .stat-num{font-size:2rem;font-weight:900;background:linear-gradient(135deg,var(--accent),var(--accent3));-webkit-background-clip:text;-webkit-text-fill-color:transparent} | |
| .stat-label{font-size:.75rem;color:var(--text3);margin-top:.3rem} | |
| /* Datasheet */ | |
| .datasheet{background:var(--bg2);border:1px solid var(--bg4);border-radius:var(--radius);overflow:hidden} | |
| .datasheet-header{padding:1rem 1.25rem;background:var(--bg3);display:flex;align-items:center;gap:.8rem;cursor:pointer;transition:background .2s} | |
| .datasheet-header:hover{background:var(--bg4)} | |
| .datasheet-header h3{font-size:1rem;flex:1} | |
| .datasheet-header .arrow{transition:transform .3s;color:var(--text3)} | |
| .datasheet-header.open .arrow{transform:rotate(180deg)} | |
| .datasheet-body{padding:0 1.25rem;max-height:0;overflow:hidden;transition:all .4s ease} | |
| .datasheet-body.open{max-height:2000px;padding:1.25rem} | |
| .ds-row{display:flex;justify-content:space-between;padding:.5rem 0;border-bottom:1px solid var(--bg4);font-size:.82rem} | |
| .ds-row:last-child{border:none} | |
| .ds-label{color:var(--text3)} | |
| .ds-value{color:var(--text);font-weight:500;text-align:right} | |
| /* Footer */ | |
| .footer{text-align:center;padding:2rem 1rem;color:var(--text3);font-size:.75rem;border-top:1px solid var(--bg4);margin-top:3rem} | |
| /* Responsive */ | |
| @media(max-width:768px){ | |
| .nav{gap:.15rem}.nav-btn{padding:.4rem .6rem;font-size:.7rem} | |
| .main{padding:1rem} | |
| .hero h1{font-size:1.8rem} | |
| .grid-2,.grid-3,.grid-4{grid-template-columns:1fr} | |
| table{font-size:.72rem} | |
| th,td{padding:.5rem .35rem} | |
| } | |
| @media(max-width:480px){ | |
| .header-inner{padding:.5rem .75rem} | |
| .logo{font-size:1rem} | |
| } | |
| /* Animations */ | |
| @keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}} | |
| @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}} | |
| .animate-float{animation:float 3s ease-in-out infinite} | |
| /* Toast */ | |
| .toast{position:fixed;bottom:2rem;right:2rem;padding:.8rem 1.2rem;background:var(--accent);color:#fff;border-radius:var(--radius-sm);font-size:.82rem;font-weight:500;transform:translateY(100px);opacity:0;transition:all .4s;z-index:9999} | |
| .toast.show{transform:translateY(0);opacity:1} | |
| /* Filter pills */ | |
| .filter-pills{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1rem} | |
| .pill{padding:.35rem .8rem;border:1px solid var(--bg4);border-radius:20px;font-size:.72rem;cursor:pointer;transition:all .2s;color:var(--text2);background:transparent;font-family:inherit} | |
| .pill:hover,.pill.active{border-color:var(--accent);color:var(--accent2);background:rgba(108,92,231,.1)} | |
| /* Date stamp */ | |
| .date-stamp{display:inline-flex;align-items:center;gap:.3rem;font-size:.7rem;color:var(--text3);padding:.2rem .6rem;background:var(--bg3);border-radius:20px} | |
| </style> | |
| </head> | |
| <body> | |
| <header class="header"> | |
| <div class="header-inner"> | |
| <div style="display:flex;align-items:center;gap:.8rem;flex-wrap:wrap"> | |
| <div class="logo"><i class="fas fa-robot"></i> <span>AI-Berater</span></div> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="built-with">Built with anycoder</a> | |
| </div> | |
| <nav class="nav"> | |
| <button class="nav-btn active" data-tab="overview"><i class="fas fa-home"></i> Übersicht</button> | |
| <button class="nav-btn" data-tab="compare"><i class="fas fa-table"></i> Vergleich</button> | |
| <button class="nav-btn" data-tab="advisor"><i class="fas fa-lightbulb"></i> Berater</button> | |
| <button class="nav-btn" data-tab="blog"><i class="fas fa-book-open"></i> Blog</button> | |
| <button class="nav-btn" data-tab="quiz"><i class="fas fa-brain"></i> Quiz</button> | |
| <button class="nav-btn" data-tab="stats"><i class="fas fa-chart-bar"></i> Statistiken</button> | |
| </nav> | |
| </div> | |
| </header> | |
| <main class="main"> | |
| <!-- OVERVIEW --> | |
| <section class="section active" id="overview"> | |
| <div class="hero"> | |
| <div class="hero-badge"><i class="fas fa-calendar-alt"></i> Stand: Juli 2025</div> | |
| <h1>Dein <span class="grad">AI-Berater</span> für<br>Vibe-Coding & Web-Apps</h1> | |
| <p>Umfassender Vergleich aller wichtigen AI-Tools für die Webentwicklung – optimiert für ein Budget von max. € 25,00/Monat in Österreich.</p> | |
| <div style="display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap"> | |
| <button class="btn btn-primary" onclick="switchTab('compare')"><i class="fas fa-table"></i> Vergleich starten</button> | |
| <button class="btn btn-secondary" onclick="switchTab('advisor')"><i class="fas fa-lightbulb"></i> Beratung erhalten</button> | |
| </div> | |
| </div> | |
| <div class="grid grid-4" style="margin-top:1rem"> | |
| <div class="stat-card"><div class="stat-num">9+</div><div class="stat-label">AI-Tools verglichen</div></div> | |
| <div class="stat-card"><div class="stat-num">€25</div><div class="stat-label">Max. Monatsbudget</div></div> | |
| <div class="stat-card"><div class="stat-num">6</div><div class="stat-label">Technologien</div></div> | |
| <div class="stat-card"><div class="stat-num">2025</div><div class="stat-label">Aktuelle Daten</div></div> | |
| </div> | |
| <div style="margin-top:2rem"> | |
| <h2 class="stitle"><i class="fas fa-trophy"></i> Top-Empfehlungen (≤ €25/Monat)</h2> | |
| <p class="sdesc">Für Vibe-Coding und Web-App-Entwicklung in Österreich</p> | |
| <div class="grid grid-3"> | |
| <div class="card" style="border-color:rgba(0,184,148,.3);box-shadow:0 0 20px rgba(0,184,148,.08)"> | |
| <div style="display:flex;align-items:center;gap:.6rem;margin-bottom:.8rem"> | |
| <div style="width:40px;height:40px;border-radius:10px;background:linear-gradient(135deg,#d4a574,#8B6914);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:.9rem;color:#fff">C</div> | |
| <div><strong style="font-size:1rem">Claude Pro</strong><br><span class="badge badge-best" style="font-size:.65rem"><i class="fas fa-crown"></i> BESTES GESAMT</span></div> | |
| </div> | |
| <p style="font-size:.82rem;color:var(--text2);margin-bottom:.8rem">Hervorragend für Vibe-Coding: Sehr gutes Code-Verständnis, lange Kontextfenster, Artifacts für Live-Vorschau. Ideal für React, HTML/CSS/JS.</p> | |
| <div style="display:flex;justify-content:space-between;align-items:center"> | |
| <span class="price">€20,00<span class="price-note">/Monat inkl. USt.</span></span> | |
| <span class="stars">★★★★★</span> | |
| </div> | |
| </div> | |
| <div class="card" style="border-color:rgba(9,132,227,.3)"> | |
| <div style="display:flex;align-items:center;gap:.6rem;margin-bottom:.8rem"> | |
| <div style="width:40px;height:40px;border-radius:10px;background:linear-gradient(135deg,#10a37f,#1a7f64);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:.9rem;color:#fff">G</div> | |
| <div><strong style="font-size:1rem">ChatGPT Plus</strong><br><span class="badge badge-paid" style="font-size:.65rem">ALLROUNDER</span></div> | |
| </div> | |
| <p style="font-size:.82rem;color:var(--text2);margin-bottom:.8rem">GPT-4o + Canvas für Code: Breitestes Ökosystem, GPTs, DALL-E, Advanced Data Analysis. Solide für alle Web-Technologien.</p> | |
| <div style="display:flex;justify-content:space-between;align-items:center"> | |
| <span class="price">€22,47<span class="price-note">/Monat inkl. USt.</span></span> | |
| <span class="stars">★★★★½</span> | |
| </div> | |
| </div> | |
| <div class="card" style="border-color:rgba(78,205,196,.3)"> | |
| <div style="display:flex;align-items:center;gap:.6rem;margin-bottom:.8rem"> | |
| <div style="width:40px;height:40px;border-radius:10px;background:linear-gradient(135deg,#4285f4,#34a853);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:.9rem;color:#fff">G</div> | |
| <div><strong style="font-size:1rem">Gemini Advanced</strong><br><span class="badge badge-freemium" style="font-size:.65rem">KONTEXT-CHAMP</span></div> | |
| </div> | |
| <p style="font-size:.82rem;color:var(--text2);margin-bottom:.8rem">1M Token Kontext: Perfekt für große Codebases. Google One AI Premium inkl. 2TB Speicher. Gute Multimodal-Fähigkeiten.</p> | |
| <div style="display:flex;justify-content:space-between;align-items:center"> | |
| <span class="price">€21,99<span class="price-note">/Monat inkl. USt.</span></span> | |
| <span class="stars">★★★★</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div style="margin-top:2rem"> | |
| <h2 class="stitle"><i class="fas fa-coins"></i> Budget-Tipp: Kostenlos & Low-Budget</h2> | |
| <p class="sdesc">Auch ohne Abo kann man bereits viel erreichen</p> | |
| <div class="grid grid-3"> | |
| <div class="card card-glass"> | |
| <div style="display:flex;align-items:center;gap:.6rem;margin-bottom:.6rem"> | |
| <i class="fas fa-fire" style="color:var(--green);font-size:1.3rem"></i> | |
| <strong>DeepSeek V3/R1</strong> | |
| </div> | |
| <p style="font-size:.82rem;color:var(--text2);margin-bottom:.5rem">Komplett kostenlos, extrem leistungsstark für Code. Open-Source-Modell, API sehr günstig. Überraschend gut bei Web-Dev-Aufgaben.</p> | |
| <span class="badge badge-free"><i class="fas fa-gift"></i> 100% Kostenlos</span> | |
| </div> | |
| <div class="card card-glass"> | |
| <div style="display:flex;align-items:center;gap:.6rem;margin-bottom:.6rem"> | |
| <i class="fas fa-wind" style="color:var(--blue);font-size:1.3rem"></i> | |
| <strong>Mistral Le Chat</strong> | |
| </div> | |
| <p style="font-size:.82rem;color:var(--text2);margin-bottom:.5rem">Kostenlos nutzbar, gute Code-Fähigkeiten. Europäisches Unternehmen (DSGVO-freundlich). Codestral speziell für Code.</p> | |
| <span class="badge badge-free"><i class="fas fa-gift"></i> Kostenlos</span> | |
| </div> | |
| <div class="card card-glass"> | |
| <div style="display:flex;align-items:center;gap:.6rem;margin-bottom:.6rem"> | |
| <i class="fas fa-face-smile" style="color:var(--yellow);font-size:1.3rem"></i> | |
| <strong>HuggingFace Chat</strong> | |
| </div> | |
| <p style="font-size:.82rem;color:var(--text2);margin-bottom:.5rem">Zugang zu Open-Source-Modellen kostenlos. Pro für €8/Monat mit mehr Features. Ideal zum Experimentieren mit verschiedenen Modellen.</p> | |
| <span class="badge badge-freemium"><i class="fas fa-star"></i> Freemium ab €8</span> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- COMPARISON TABLE --> | |
| <section class="section" id="compare"> | |
| <h2 class="stitle"><i class="fas fa-table"></i> Vergleichstabelle – AI-Tools für Vibe-Coding</h2> | |
| <p class="sdesc">Alle Preise inkl. 20% österreichischer USt., Stand: Juli 2025</p> | |
| <div class="filter-pills"> | |
| <button class="pill active" data-filter="all">Alle</button> | |
| <button class="pill" data-filter="free">Kostenlos</button> | |
| <button class="pill" data-filter="paid">Kostenpflichtig</button> | |
| <button class="pill" data-filter="under25">Unter €25</button> | |
| </div> | |
| <div class="table-wrap"> | |
| <table id="compareTable"> | |
| <thead> | |
| <tr> | |
| <th>AI-Tool</th> | |
| <th>Modell</th> | |
| <th>Preis/Monat</th> | |
| <th>Typ</th> | |
| <th>Kontext</th> | |
| <th>Code-Qualität</th> | |
| <th>Vibe-Coding</th> | |
| <th>Web-Tech</th> | |
| <th>Bewertung</th> | |
| <th>Empfehlung</th> | |
| </tr> | |
| </thead> | |
| <tbody id="tableBody"></tbody> | |
| </table> | |
| </div> | |
| <div style="margin-top:1.5rem"> | |
| <h3 class="stitle" style="font-size:1.1rem"><i class="fas fa-info-circle"></i> Detail-Datenblätter</h3> | |
| <div id="datasheets" style="display:grid;gap:.6rem"></div> | |
| </div> | |
| </section> | |
| <!-- ADVISOR --> | |
| <section class="section" id="advisor"> | |
| <h2 class="stitle"><i class="fas fa-lightbulb"></i> Persönlicher AI-Berater</h2> | |
| <p class="sdesc">Beantworte ein paar Fragen und erhalte deine individuelle Empfehlung</p> | |
| <div class="grid grid-2"> | |
| <div class="card"> | |
| <h3 style="font-size:1rem;margin-bottom:1rem"><i class="fas fa-clipboard-list" style="color:var(--accent)"></i> Dein Profil</h3> | |
| <form class="advisor-form" id="advisorForm"> | |
| <div class="form-group"> | |
| <label><i class="fas fa-code"></i> Hauptsächliche Technologie?</label> | |
| <select id="adv-tech"> | |
| <option value="html">HTML / CSS / JS (Vanilla)</option> | |
| <option value="react">React / Next.js</option> | |
| <option value="python">Python (Flask/Django/FastAPI)</option> | |
| <option value="node">Node.js / Express</option> | |
| <option value="fullstack">Fullstack (Mix)</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <label><i class="fas fa-bullseye"></i> Hauptverwendungszweck?</label> | |
| <select id="adv-purpose"> | |
| <option value="vibecoding">Vibe-Coding (AI-gestützte Entwicklung)</option> | |
| <option value="learning">Lernen & Experimentieren</option> | |
| <option value="production">Produktions-Web-Apps</option> | |
| <option value="prototyping">Schnelle Prototypen</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <label><i class="fas fa-wallet"></i> Monatsbudget (€)?</label> | |
| <select id="adv-budget"> | |
| <option value="0">Kostenlos (€0)</option> | |
| <option value="10">Bis €10</option> | |
| <option value="20">Bis €20</option> | |
| <option value="25" selected>Bis €25</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <label><i class="fas fa-shield-alt"></i> Wie wichtig ist Datenschutz (DSGVO)?</label> | |
| <select id="adv-privacy"> | |
| <option value="low">Nicht so wichtig</option> | |
| <option value="medium">Eher wichtig</option> | |
| <option value="high">Sehr wichtig (EU-Server)</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <label><i class="fas fa-puzzle-piece"></i> Welche Features brauchst du?</label> | |
| <div style="display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.3rem"> | |
| <label class="pill" style="cursor:pointer"><input type="checkbox" value="artifacts" style="display:none"> Live-Vorschau</label> | |
| <label class="pill" style="cursor:pointer"><input type="checkbox" value="canvas" style="display:none"> Canvas/Editor</label> | |
| <label class="pill" style="cursor:pointer"><input type="checkbox" value="images" style="display:none"> Bildgenerierung</label> | |
| <label class="pill" style="cursor:pointer"><input type="checkbox" value="api" style="display:none"> API-Zugang</label> | |
| <label class="pill" style="cursor:pointer"><input type="checkbox" value="longcontext" style="display:none"> Lange Kontexte</label> | |
| </div> | |
| </div> | |
| <div class="form-group"> | |
| <label><i class="fas fa-gauge-high"></i> Erfahrungsniveau?</label> | |
| <select id="adv-exp"> | |
| <option value="beginner">Anfänger</option> | |
| <option value="intermediate">Fortgeschritten</option> | |
| <option value="expert">Experte</option> | |
| </select> | |
| </div> | |
| <button type="button" class="btn btn-primary" onclick="generateAdvice()"><i class="fas fa-magic"></i> Empfehlung generieren</button> | |
| </form> | |
| </div> | |
| <div class="card" id="advisorResult" style="display:flex;flex-direction:column;gap:1rem"> | |
| <div style="text-align:center;padding:3rem 1rem;color:var(--text3)"> | |
| <i class="fas fa-wand-magic-sparkles" style="font-size:3rem;margin-bottom:1rem;display:block;color:var(--accent)"></i> | |
| <p>Fülle das Formular aus und erhalte deine persönliche AI-Empfehlung</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- BLOG --> | |
| <section class="section" id="blog"> | |
| <div class="blog"> | |
| <div class="date-stamp" style="margin-bottom:1.5rem"><i class="fas fa-calendar"></i> Veröffentlicht: Juli 2025 | Aktualisiert: Juli 2025</div> | |
| <h1 style="font-size:2rem;font-weight:900;line-height:1.2;margin-bottom:1rem">Vibe-Coding & Generative KI:<br><span style="background:linear-gradient(135deg,var(--accent),var(--accent3));-webkit-background-clip:text;-webkit-text-fill-color:transparent">Alles was du wissen musst</span></h1> | |
| <p style="font-size:1rem;color:var(--text);margin-bottom:1.5rem">Ein umfassender Leitfaden über die Revolution der Softwareentwicklung durch generative Künstliche Intelligenz – von den Grundlagen bis zur Praxis.</p> | |
| <div class="toc"> | |
| <h4><i class="fas fa-list"></i> Inhaltsverzeichnis</h4> | |
| <a href="#vc1">1. Was ist Vibe-Coding?</a> | |
| <a href="#vc2">2. Die Geschichte der generativen KI</a> | |
| <a href="#vc3">3. Wie funktionieren Large Language Models?</a> | |
| <a href="#vc4">4. Vibe-Coding in der Praxis</a> | |
| <a href="#vc5">5. Die besten AI-Tools für Web-Entwicklung</a> | |
| <a href="#vc6">6. Prompt-Engineering für Code</a> | |
| <a href="#vc7">7. Rechtliche Aspekte & Datenschutz</a> | |
| <a href="#vc8">8. Die Zukunft von Vibe-Coding</a> | |
| <a href="#vc9">9. Tipps für Einsteiger</a> | |
| <a href="#vc10">10. Fazit & Ausblick</a> | |
| </div> | |
| <h2 id="vc1">1. Was ist Vibe-Coding?</h2> | |
| <p><strong>Vibe-Coding</strong> ist ein 2025 geprägter Begriff, der eine neue Art der Softwareentwicklung beschreibt: Statt jede Codezeile manuell zu schreiben, beschreibt Entwickler:innen <strong>in natürlicher Sprache</strong>, was sie bauen möchten – und KI generiert den entsprechenden Code.</p> | |
| <blockquote>"Vibe-coding is not about writing code. It's about having a conversation with an AI that writes code for you while you focus on the vision." – Andrej Karpathy, 2025</blockquote> | |
| <p>Der Begriff wurde maßgeblich durch <strong>Andrej Karpathy</strong> (Mitgründer von OpenAI, ehemaliger AI-Direktor bei Tesla) populär. Er beschrieb, dass er mittlerweile ganze Projekte "vibe-coded" – also primär durch Konversation mit AI-Systemen erstellt.</p> | |
| <h3>Die drei Säulen des Vibe-Coding</h3> | |
| <ul> | |
| <li><strong>Natural Language Programming:</strong> Du sprichst oder schreibst, was du willst – die KI setzt es um</li> | |
| <li><strong>Iterative Verfeinerung:</strong> Du testest, gibst Feedback, und die KI verbessert den Code schrittweise</li> | |
| <li><strong>Visuelle Validierung:</strong> Tools wie Claude Artifacts oder ChatGPT Canvas zeigen Live-Vorschauen</li> | |
| </ul> | |
| <div class="info-box"> | |
| <i class="fas fa-lightbulb" style="color:var(--yellow)"></i> <strong>Praxis-Tipp:</strong> Vibe-Coding ersetzt nicht das Verständnis von Code – es beschleunigt die Umsetzung. Du solltest weiterhin verstehen, was generiert wird, um Fehler zu erkennen und anzupassen. | |
| </div> | |
| <h2 id="vc2">2. Die Geschichte der generativen KI</h2> | |
| <p>Die Entwicklung generativer KI hat in den letzten Jahren eine beispiellose Dynamik erfahren:</p> | |
| <h3>Meilensteine</h3> | |
| <ul> | |
| <li><strong>2017:</strong> Google veröffentlicht das <em>Transformer</em>-Paper ("Attention Is All You Need") – die Grundlage aller modernen LLMs</li> | |
| <li><strong>2018:</strong> OpenAI veröffentlicht GPT-1, Google BERT</li> | |
| <li><strong>2020:</strong> GPT-3 mit 175 Milliarden Parametern – erster LLM, der menschenähnlichen Text erzeugt</li> | |
| <li><strong>2022:</strong> ChatGPT (GPT-3.5) wird zum schnellstwachsenden Consumer-Produkt der Geschichte</li> | |
| <li><strong>2023:</strong> GPT-4, Claude 1/2, Gemini Ultra – Multimodalität wird Standard</li> | |
| <li><strong>2024:</strong> Claude 3.5 Sonnet, GPT-4o, Gemini 1.5 Pro – Code-Fähigkeiten erreichen neues Niveau</li> | |
| <li><strong>2025:</strong> Claude 4, GPT-5, Gemini 2.5 – Vibe-Coding wird zum Mainstream-Paradigma</li> | |
| </ul> | |
| <div class="source"><i class="fas fa-link"></i> Quellen: openai.com/research, deepmind.google, anthropic.com/news – Stand Juli 2025</div> | |
| <h2 id="vc3">3. Wie funktionieren Large Language Models?</h2> | |
| <p>LLMs wie GPT-4, Claude oder Gemini basieren auf der <strong>Transformer-Architektur</strong>. Hier die wichtigsten Konzepte:</p> | |
| <h3>Token & Kontextfenster</h3> | |
| <p>Text wird in <strong>Tokens</strong> zerlegt (ca. 0,75 Wörter pro Token im Englischen). Das <strong>Kontextfenster</strong> bestimmt, wie viel Text das Modell gleichzeitig verarbeiten kann:</p> | |
| <ul> | |
| <li>GPT-4o: 128K Tokens (~96.000 Wörter)</li> | |
| <li>Claude 4: 200K Tokens (~150.000 Wörter)</li> | |
| <li>Gemini 2.5 Pro: 1M Tokens (~750.000 Wörter)</li> | |
| <li>DeepSeek V3: 128K Tokens</li> | |
| </ul> | |
| <h3>Training & Feintuning</h3> | |
| <p>LLMs werden in drei Phasen trainiert:</p> | |
| <ul> | |
| <li><strong>Pre-Training:</strong> Lernen aus riesigen Textmengen (Internet, Bücher, Code-Repositories)</li> | |
| <li><strong>Supervised Fine-Tuning (SFT):</strong> Training mit hochwertigen Frage-Antwort-Paaren</li> | |
| <li><strong>RLHF / Constitutional AI:</strong> Menschliches Feedback verbessert die Qualität und Sicherheit</li> | |
| </ul> | |
| <div class="info-box"> | |
| <i class="fas fa-brain" style="color:var(--accent)"></i> <strong>Für Vibe-Coder:</strong> Das Kontextfenster ist entscheidend! Je größer, desto mehr Code kann die KI gleichzeitig verstehen und bearbeiten. Für große Projekte ist Gemini (1M) oder Claude (200K) ideal. | |
| </div> | |
| <h2 id="vc4">4. Vibe-Coding in der Praxis</h2> | |
| <p>Wie funktioniert Vibe-Coding konkret bei der Webentwicklung?</p> | |
| <h3>Typischer Workflow</h3> | |
| <ul> | |
| <li><strong>Schritt 1 – Vision:</strong> Beschreibe deine App-Idee in natürlicher Sprache</li> | |
| <li><strong>Schritt 2 – Scaffolding:</strong> Die KI generiert die Grundstruktur (HTML, CSS, React-Komponenten)</li> | |
| <li><strong>Schritt 3 – Iteration:</strong> "Mach die Navigation sticky", "Füge Dark Mode hinzu", "Optimiere für Mobile"</li> | |
| <li><strong>Schritt 4 – Integration:</strong> API-Anbindungen, Datenbank, Auth – Schritt für Schritt</li> | |
| <li><strong>Schritt 5 – Deployment:</strong> Die KI hilft bei Vercel, Netlify, oder Docker-Konfiguration</li> | |
| </ul> | |
| <h3>Best Practices</h3> | |
| <ul> | |
| <li>Immer <strong>klein anfangen</strong> und schrittweise erweitern</li> | |
| <li><strong>Spezifisch</strong> sein: "Erstelle eine React-Komponente mit Tailwind-CSS, die ein responsives Karten-Layout zeigt" statt "Mach eine Website"</li> | |
| <li>Fehlermeldungen <strong>komplett</strong> in den Chat kopieren |